Webサイトのデザインの流れを知ろう
一般的なWebサイトをデザインする流れは次の通りです。案件によってはこの順番でやらないケースもあります。
- クライアントにWebサイトが実現したい目的などをヒアリング
- ワイヤーフレーム(サイトの設計図)を作ります。
- ワイヤーフレームを元に、Webサイトをデザイン
- デザインを基にコーディング
「Photoshop」「XD」「Sketch」「Figma」などは、この場合の「ワイヤーフレームを元に、Webサイトをデザイン」する時に使うツールです。
Webサイトのデザインとは?
一般的なWebサイトをデザインとは、ワイヤーフレームを元に、Webサイトの見た目を作っていくこと。つまり、実際のWebサイトを想定してサイトを作っていきます。
レスポンシブWebデザインの場合は、スマートフォンとパソコンのデザインを作っていきますが、案件によってはタブレットのデザインを作ったりします。
もちろん、単に画面を作るだけではNGです。「クライアントのビジネス目的」があるのでその目的を外れるのはNG。さらにコーディングする人が別にいる場合は、彼ら・彼女らのためにデザイン指示書を作ることまで仕事に入ります。
Webサイトのデザインツール
Webサイトのデザインには、主にAdobe社のソフトウェアを使っている人が多いです。
「Photoshop」か「XD」を使うことがほとんどです。稀に「Illustrator」を使ってデザインする時もあります。
最近はレスポンシブ Webデザインが周流になってきたのでXDが広く使われています。PhotoshopやXD以外にも「Sketch」「Figma」というツールを使っていることも増えてきました。ただ、デザインツールは違っても、「Webサイトのデザイン」と言う仕事自体は同じです。
PhotoShop
Photoshopは世界で最も有名な画像編集ソフトです。写真を加工・合成したり、美しいグラフィックを作ったりと本当に色々なことができます。
XD・Sketch・Figmaが登場する前はWebサイトのデザインに主に使われていました。現在でもバナー作成ではよく使われています。
PhotoShopはパフォーマンスが悪い(軽快に動作しない)ことが最大の欠点です。
Adobe XD
XDはWebサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。PhotoShopやIllustratorと比較すると簡単に操作が可能です。また、PhotoShopやIllustratorと違ってWebサイトのために作られたツールなので便利機能も多く揃えています。いちばんのメリットは軽快に動作することです。
Illustrator
Illustratorは、イラスト制作は勿論のこと、ロゴタイプや図面、広告、パッケージなどをデザインする描画ツールソフトとして、印刷業界などあらゆる分野で使用されています。印刷物(チラシや小冊子)制作ソフトの標準ツールとなっています。Webサイトデザインでは、主にアイコンやロゴを扱うときに使われています。
Sketch
SketchはWebアプリケーションやWebサイトなどのUIデザインを設計するためのツールです。UIデザインだけでなく、企画書やプレゼンテーションなどを作成するのにも使えたりします。世界を見渡してみると、Sketchの利用ユーザーは非常に多く、AppleやFacebookなどの有名企業のデザイナーたちにも使われています。
Figma
Figmaはブラウザ上で共同編集できるデザインプラットフォームで、UIデザインやワイヤーフレームの作成に便利なデザインツールです。主にホームページのUI設計の際の、ワイヤーフレームやプロトタイプの制作に最適な機能がそろっています。
最近日本語化されたためこれからさらに人気が出るでしょう。
ツールは1つだけではNG!最低限でいいので複数覚えておきましょう
さて、これだけツールがあって、初心者の方は何を覚えればいいの?と思うかもしれません。
結論から言うとWebサイトのデザインツールは1つだけ覚えればいいわけではありません。なぜならば、デザインとコーディングを一緒に担当する案件ばかりではないからです。
今までの私の実例でお話ししてみましょう。Webサイトだけ上げても次のような実例が過去ありました。
- 案件Aでは「XD」でデザインしてデータ納品してほしい
- 案件Bでは「Illustrator」でデザインしてデータ納品してほしい
- 案件Cでは「Figma」のデザインデータをコーディングしてほしい
- 案件Dでは「XD」のデザインデータをコーディングしてほしい
私はデザインもコーディングも両方できるので、様々な形で依頼が来ます。これ以外にも稀にチラシのデザインやSNSのデザインがくるのでIllustratorを使うことも多いです。
ツールを1つ覚えれば完璧!ではありません。ただ、基本の操作性を覚えてしまえば、他のツールを覚えるのはそれほど大変ではありません。