もしあなたがWebを使って何らかのサービスを提供したみたい！と思っているのなら、 Webデザインは必要不可欠 です。
Webデザインをする方法は次の2通りです。
- 外注する
- 自分でやる
潤沢な資金があれば外注するのも手ですが、趣味やこれからスタートアップする事業の場合はWebデザインにお金をかける余裕がないこともあります。
そこで、ここでは主に初心者向けのWebデザインツールをご紹介します。
Webデザインができるようになると、 訴求力のあるWebサイトやWebアプリケーションを作成できる ようになりますよ！
目次
Webデザインツールとは？
Webデザインツールとは、 Webサイトのデザインを設計・制作するためのツール群 のことです。
Webデザインツールを活用できるようになればWebデザインができるようになりますし、より高度に扱えるようになればそのまま仕事にすることも可能です。
なお、Webデザインには主に次の3種類があります。
UIデザインツール
UIデザインツールとは、 WebサイトやWebアプリケーションのUIをデザインするツール です。
UI（ユーザインターフェース）とはWebサイトのボタンやロゴ、またはレイアウト全体をさす言葉です。優秀なUIデザインはユーザー体験を高める効果があります。
イラスト作成ツール
イラスト作成ツールは線や図形を使って、Webサイト内で使うイラストを作成するためのツールです。
Webデザイン専用のツールという訳ではなく、LINEのスタンプやポスター作成などにも使われています。
画像加工ツール
画像加工ツールは画像の明るやコントラスト、色調を変えたり、Webサイトを作成するための素材を切り抜いたりするためのツールです。
こちらはメインは画像加工自体で、Webデザインにも使えるといった位置付けのツールです。
Webデザインの定番！Adobeシリーズ
Webデザインを始めるにあたってまず初めに導入を検討すべきWebデザインツールは「Adobeシリーズ」です。
https://www.adobe.com/jp/
普段からパソコンを使っている方であれば、Photoshopはほぼ間違いなく聞いたことがあると思います。
Adobeは1982年にアメリカに誕生したソフトウェア企業で、プロフェッショナル向けの画像加工ソフトやイラスト作成ソフトを提供しています。
使いこなせるようになるのは非常に大変ですが、 使いこなせれば実務で通用する力が身に付くので、仕事で使う場合は初心者のうちから使い方を覚えることが重要です。
ここではWebデザインで活用できるAdobeのソフトウェアをご紹介します。
XD
XDはWebサイトやモバイルサイトのUIをデザインするためのWebデザインツールです。
https://www.adobe.com/jp/products/xd.html
XDを使う利点はサイトの内部の動きまで表現できることです。 例えばリンクを押したらリンク先の画面を開く、といったことがXDの中で全て完結できます。
従来は1ページ1ページ他のデザインツールで作成したものを、htmlやcssでサイトのモック(デザインなど、サイトの外側のみを実装したもの)を作るまで動きのあるサイトのデザインはできませんでしたが、XDを使うことでそれが可能になりました。
Adobeを使ってWebサイトをデザインするなら必ず使いたいソフトウェアです。
- 料金：1,298円/月
Photoshop
言わずと知れた有名画像加工ソフトウェアです。
https://www.adobe.com/jp/products/photoshopfamily.html
Photoshopでは次のようなことができます。
- 画像の切り抜き
- 画像の合成
- アニメーション
- グラフィックデザイン
- 画像にエフェクトを追加
- 文字の挿入
- 画像の明るやコントラストを変更する
上に書いてあるのはPhotoshopの機能のほんの一部です。実際には使いきれないほどの豊富な機能が揃っています。
Webサイト上に画像を挿入したい場合はPhotoshopで作成すると良いでしょう。
- 料金：2,728円/月
Illustrator
Illustratorはイラストを作成するためのツールです。
https://www.adobe.com/jp/products/illustrator.html
主にWebサイトのロゴやボタン、ヘッダー、メニューなどのWeb素材を作る際に使われます。
Illustratorで作成される「ベクター画像」はjpgやpngで用いられる「解像度」という概念がなく、 どんなに拡大・縮小してもぼやけて見えるようなことはありません。
その反面複雑な色合いを表現することができないので、上記のようなWeb素材やアイコンを作るのに適しています。
- 料金：2,728円/月
おすすめはAdobeコンプリートプラン
XD, Photoshop, Illustrator全てを使う場合、月々6,738円かかりますが、 Adobeのコンプリートプランなら20以上のAdobeのソフトウェアとAdobe Stockという100GBのオンラインストレージ機能を加えて、月々6,248円で使い放題です。
上記3つのソフトウェアしか使わない場合でも490円お得に使えるので、全て使う場合はコンプリートプランを活用しましょう。
無料で使えるWebデザインツール
Adobeのツールは基本的に有料なので、手が伸びないという方もいらっしゃるかと思います。
特にWebデザインツールを一度も使ったことがない方であれば、「Adobeのような高機能ソフトウェアは必要なのだろうか？」と思うものです。
そこで ここではお試しで使いやすい無料のWebデザインツールをご紹介します。
無料とはいえ、かなりパワフルに使えるソフトウェアもあるので、実際に使ってみてくださいね。
InVision Studio
2018年8月にリリースされた比較的新しいソフトウェアで、Adobe XDと同じUIデザインツールです。
https://www.invisionapp.com/studio
Webサイトやモバイルサイトの画面をデザインする専用のツールで、実際のサイトの使用感に近いプロトタイプの早期作成機能や、ベクター画像の作成、アニメーションの作成など、必要な昨日は一通り揃っています。
欠点としては日本語化されていないことです。英語に慣れている方におすすめなUIデザインツールです。
GIMP
GIMPはPhotoshopと同じ画像加工ツールです。Photoshopが使えない場合はGIMPを使うと良いでしょう。
オープンソースで無料で使えるのにもかかわらず、トリミングや画像の合成、モノクロ調やセピア調などのフィルタ加工、明るさ・コントラストの調整など、 有料の画像加工ツールに匹敵するほど高機能です。
また画像編集では同じような操作をなんどもすることがあります。その場合は Pythonを使って処理を自動化することも可能 です(GIMPのPython-fuという機能です)。
こういったGIMPならではの機能もあり、実用性のある画像加工ツールです。
Inkscape
InkscapeはIllustratorと同じ、イラストを作成するためのツールで、Illustratorに匹敵するほど高機能なソフトウェアです。
図形の作成や（移動、拡大・縮小、ねじりなどの）操作、塗りつぶしなど、一通りの機能が揃っており、またIllustratorと同じくベクター画像を扱えるので、拡大・縮小に強いという特徴があります。
また、 Inkscapeはチュートリアルが日本語翻訳されている ので、学習コストを抑えることができるのが嬉しい点です。
コーディングなしでWebデザインする方法
ここまではWebデザイン（主にUIデザイン）をAdobe製品や無料のデザインツールで行う話をしてきましたが、実は Webデザインをコーディングなしで完結できるWebサービスがあります。
ここではhtmlやcssを使わずにWebページを作成できるサービスをご紹介します。
STUDIO
STUDIOは実際のWebサイトで使われている「ボックス」を重視したデザインツールです。
画面上でデザインした内容がバッググラウンドで瞬時にコードに変換される ので、自分でコーディングする必要がありません。
ドラッグ&ドロップで素材を直感的に配置するだけでWebサイトを作っていけるので、素材を作ることはできるけどコーディングは苦手…といった方におすすめです。
また、STUDIOではメールアドレスだけで他のメンバーを招待でき、そのまま共同作業が可能です。リアルタイムで行えるので、リモートワークするのにも適しています。
さらにSTUDIOでは 作成したWebサイトをすぐ公開できる「パブリッシュ機能」が付いています。 つまりWebサイトを公開するために必要なWebサーバーを立てる必要がなく、しかも独自ドメインを使用することも可能です。
デザインには自身があるが、裏方作業は苦手という方におすすめです。
Wix
Wixはユーザーのレベルに合わせて3つのレベルを用意しており、Webデザイン初心者からコーディングが可能な方まで、幅広く対応しています。
WixエディタはSTUDIOと同じくドラッグ＆ドロップで素材を配置していくことでWebサイトを作っていくスタイルの作成ツールです。コーディングは一切必要なく、 幅広い業種に対応した数百種類のテンプレートの中から好きなモノを選んでWebページを作成できます。
また、CorvidはWixエディタのドラッグ&ドロップでの操作に加え、コーディングの自由性や拡張性を組み合わせたデベロッパー向けの作成ツールです。データベース連携や外部API呼び出しなど、 Webアプリケーション寄りの機能を持たせたり、またはWebアプリケーションそのものを作成したい場合に活用できます。
反対に、デザインもどうやれば良いのか分からない…という方にはWix ADIという機能がおすすめです。Wix ADI（人工デザイン知能）は いくつかの簡単な質問に答えるだけで最適なコンテンツを作成してくれるツール です。無料で使えるので、試しに使ってみても良いかもしれません。
自分にとって最適な組み合わせを見つけよう
ここまでいくつかの分野に分けてソフトウェアやWebサービスをご紹介してきましたが、 それぞれのサービスがそれぞれの理念を持って作成されている のがお分りいただけたかと思います。
Adobeはサブスクリプションでの利用が前提であるものの、業界のデファクトスタンダードになるだけの洗練されたUIや機能が備わっています。一方で無料で使えるのにもかかわらず非常に機能豊富と、オープンソースであることを大切にしているソフトウェアもありました。
また、そもそもコーディングの時間そのものが不要と、ドラッグ&ドロップのみでWebサイトを作成できるサービスもありました。
何が得意で、何が苦手か。また月の予算はどれだけ割り当てられるのかなどは各人によって異なるところです。自分にとって最適なサービスを探してみてくださいね。
