Webデザインとは？

Webデザインは、Web上に存在するホームページを制作することを意味します。

他のデザインの仕事とは違い、Webデザインにはデザインだけではなくホームページとして表示するためのコーディングが必要です。

Webをデザインするときは、コーディングを意識する必要があります。

Webデザインにおすすめの無料ツール

Webデザインは他のデザインと異なり、コーディングもあるため難しいと感じるでしょう。

最近ではグラフィック、デザイン、サイト制作とそれぞれに向けた無料ツールも増えてきました。ここからは無料で使えるWebデザインツールを11個に絞り、選ぶ際のポイントも交えて紹介します。

グラフィックドロー向けの無料ツール3選

まず、グラフィックドロー向けの無料ツールを3つ紹介します。

グラフィックドロー向けのツールは多数ありますが、Webデザインを始めたばかりの頃は無料ツールでも十分に役立つでしょう。

無料ツールとしてGIMP、Inkscape、Kritaの3つをそれぞれ紹介します。

1：GIMP

1つめに紹介するのは「GIMP」です。

GIMPは画像加工のツールとしては歴史が古く、有料のソフトと同程度の機能を備えています。

SNSやweb広告などで画像を使用する際に、画像のトリミングやサイズ調整、明るさを調整する機会は多いでしょう。GIMPではトリミングやサイズ調整はできますし、明度、彩度の調整や、画像にテキストを追加することも可能です。

2：Inkscape

2つめに紹介するのは「Inkscape」です。Inkscapeは、GIMPとは異なりロゴやアイコンなど、線で成り立つグラフィックスの作成や編集ができるツールです。

オープンソースソフトウェアのため、学習サイトや勉強できるようなコミュニティもあり、ヘルプも充実しています。

3：Krita

3つめに紹介するのは「Krita」です。

「Krita」は無料で使える高機能のペイントツールで、線画や描画ツールを使うことでイラスト制作が可能です。

ブラシツールも充実しており、手ぶれを補正する機能もあります。さらにラップアラウンドモードを使うと、1つのキャンバスを繰り返し表示できます。Inscapeと同様、オープンソースで開発されているため、様々な学習ページが用意されています。

UIデザイン向けの無料ツール5選

これまで、グラフィックドロー向けの無料ツールを3つ紹介しました。続いては、UIデザイン向けの無料ツールを5つ紹介します。紹介するのは、Adobe XD、Sketch、Figma、InVision Studio、Framerの5つです。

それぞれのツールの特徴や、得意なこと不得意なことがあるため併せて紹介します。

1：Adobe XD

UIデザイン向けの無料ツールとして、1つめに紹介するのは「Adobe XD」です。Adobe XDはAdobe社が提供するツールで、PhotoshopやIllustratorとの連携も可能で、チームで共同編集することもできます。

インストール版とアプリ版の両方があり、プレビューはブラウザからも行えます。個人用のスタータープランは無料で利用可能です。

2：Sketch

2つめに紹介するのは「Sketch」です。厳密にいうと無料で利用できるのは、トライアル期間の1カ月間です。

Sketchは他のツールが登場する前にリリースしており、大手企業でも採用されているUIデザインツールです。

インターフェースは簡単で初心者でも使いやすく、チュートリアルも豊富に揃っています。プラグインを使うことで外部ツールとの連携もでき、アプリを使用することで、スマートフォンの実機でデザインしたり、Webページの掲載イメージをチェックしたりできます。

トライアル期間が終了した後は、個人や、法人問わずツール代を支払うことで継続して利用できます。

3：Figma

3つめに紹介するのは「Figma」です。「Figma」は他のツールと異なり、複数の人数にてリアルタイムで共有したり、デザイン作業ができたりします。

ブラウザ版があり、ダウンロードしなくても編集・閲覧できます。すでに紹介している、Adobe XDやSketchからデータのインポートが可能です。スタータープランは無料で利用できます。

4：InVision Studio

4つめに紹介するのは、InVision Studioです。

InVision Studioは海外の大企業が使用している細かなアニメーションおよび、プロトタイプの作成が可能なツールです。

データを公開すると、ブラウザで共有できます。スマホアプリもあるため、スマホからデザインのチェックもできます。個人版は無料で利用できます。

5：Framer

5つめに紹介するのは「Framer」です。

「Framer」は動きのあるインタラクションデザインの設計に強いツールです。

すでに紹介しているツールのSketchとFigmaのデザインはインポートして使用できます。動きのあるデザインを作るために、Framerのサイトにはモーションの具体例も多数掲載されています。

またReactを使った開発が可能な点も特徴のひとつです。無料で利用できるのは、ブラウザ版とスマホアプリ版までです。インストール版はｍacOSのみで、有料となります。

Webサイト制作向けの無料ツール3選

続いて、Webサイト制作向け無料ツールを3選紹介します。

Webサイト制作向けツールを使用することで、実際にホームページを実装できます。

無料版の場合、独自ドメインを持つことは出来ませんが、それぞれ紹介するツールでは一定数のアップロードが可能なサービスもあります。今回はSTUDIO、ジンドゥー、Wixの3種類を紹介します。

1：STUDIO

1つめに紹介するのは「STUDIO」です。

STUDIOの特徴は、デザインを自分で作成できる点です。

通常ですとテンプレートを選択して作成し、各パーツを配置することが多いのですが、オリジナルのデザインが作成できます。独自ドメインを持つことはできませんが、無料で5ページまで公開できます。

独自ドメインを使用して公開ページを増やしたい場合は、有料版の利用が必須となります。

2：ジンドゥー

2つめに紹介するのは「ジンドゥー」です。ジンドゥーは無料で使えるツールですが、「ジンドゥークリエイター」と「ジンドゥーAIビルダー」という2つのサービスに分かれます。

ジンドゥークリエイターは独自ドメインは持てず容量は500MBほどと制限があるものの、ドラッグ＆ドロップで簡単にホームページを作れるうえに、ページは無制限で利用できます。また点数は5点以下であれば商品も掲載できるので、ネットショップのお試し運用にも使えます。

ジンドゥーAIビルダーは、いくつかの質問に答えるだけで、AIが自動でページを作成してくれます。ジンドゥーAIビルダーでは無料版のページ公開数は制限があります。

3：Wix

3つめの紹介するのはWixです。

Wixは紹介する3つのツールの中で、利用者数が多いサービスと言えるでしょう。

必要なパーツをドラッグ＆ドロップすることで編集できるため、ホームページのコーディングの知識がなくても、簡単にホームページを作成できます。

Wixも無料プランでは独自ドメインは持てませんが、容量は500MBで、ページ数は100ページまで公開可能です。動きのある要素の追加もでき、テンプレートやパーツも豊富なので機能を試してみたい方におすすめです。

出典：Wixプレミアムプラン
参照：https://ja.wix.com/upgrade/website

Webデザインツールを選ぶ際に確認したい3つのこと

無料で使えるWebデザインツールを合計11個紹介しましたが、使ってみたいツールがいっぱいあったのではないでしょうか。

Webデザインツールを使ってホームページを制作するにあたり、ツールを選ぶ際にチェックしておきたい3つのことを紹介します。

1：使いたい機能が備わっているか

1つめは使いたい機能が備わっているかです。

どのような目的でWebデザインしてホームページを制作するのかを決めておく必要があります。

紹介したツールはどれもできることが異なります。グラフィックドロー向けのツールと、UIデザイン向けのツールを組み合わせて使用する際、データ共有は可能なのか、インポートできるのかを事前にチェックすることが大事です。

2：使いたい機能が無料でできるか

2つめは使いたい機能は無料でできるかです。

無料として紹介したツールの中には、無料で利用できる機能が限られているものもあります。

自分が使いたい機能が無料なのか有料なのか、事前にチェックしてからツールを選びましょう。WEB制作で紹介したツールは、ページを公開するところまで、サーバーを契約したり設定したりしなくてもホームページを公開できます。

しかし、無料では独自ドメインは持てないのと、ツール内にあるパーツやデザインを組み合わせて使うため、ホームページを移行することになった場合は一から作り直しとなります。

このようにどのような目的でWebデザインするのかによって、使いたい機能は変わるため、事前にチェックしてからツールを使いましょう。

3：マニュアルやチュートリアルがあるか

3つめはマニュアルやチュートリアルがあるかです。これまで紹介したWebデザインツールは海外で作られたものもあります。

チュートリアルやマニュアルがないと、ツールの使い方がわからず時間がかかってしまいます。

開発がオープンソースのツールはチュートリアルやコミュニティがあるため情報を集められます。他のツールについては、検索をした際に、使用している人のコメントなど複数の情報ページが表示されるかをチェックすると良いでしょう。

自分に合ったWebデザインツールを見つけよう

今回紹介してきたように、無料で使えるWebデザインツールには様々な種類があります。それぞれの特徴や使い方を把握し、自分にあったWebデザインツールを見つけて、デザインスキルを身につけていきましょう。

LPやWebデザインを効率的に検索するには

たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。
そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/
「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。
業種や画面名などでデザインを検索することができます。
デザインを検索したい方は活用してみましょう。