こんにちは、あおいです。
WEBのスキルを身に付けたいグラフィックデザイナー「時代の流れ的に、紙よりWEBなので、WEBデザインもできるようになって生き残りたいです。でもWEBデザインって、何のソフトを使って制作するのが普通で、どんな流れなのか、手順がちんぷんかんぷんです。グラフィックデザイナーの私にも分かるように、教えてください」
今回はこのような悩みについて。
まさに私もついこの間まで、このような疑問で悶々としていました。ネットで調べても、WEBデザインの流れが明快に分かる情報に、なかなか辿り着けなかったんですよね。
というわけで、現役グラフィックデザイナーの私がまとめてみました。参考にしていただけたら幸いです。
【グラフィックデザイナー向け】WEBデザインの手順解説
ざっくりリストにすると、下記のとおり。
- 手順①：ワイヤーフレーム作成
- 手順②：デザインカンプ作成
- 手順③：画像の書き出し
- 手順④：コーディング
これから１つずつ詳細を解説していきますが、「どこのタイミングで、どのソフトを使って作業するの？」という疑問も、グラフィックデザイナーにとっては大きいはず。
というわけで、上記手順に使用ソフト（手段）をあてはめてもう一度見てみると、下記のとおり。
- 手順①：ワイヤーフレーム作成
→手書き or フォトショ or イラレ - 手順②：デザインカンプ作成
→フォトショ or イラレ - 手順③：画像の書き出し
→フォトショ or イラレ - 手順④：コーディング
→DreamWeaver or テキストエディタ
何となく少しは、ぼんやり掴めましたかね。とはいえ、これでもまだ全然ナゾだと思うので、順番に詳細を見ていきます。
手順①：ワイヤーフレーム作成
クライアントとの打ち合わせから、「どういったWEBサイトにしたら、目的が果たせるのか」を考え、まずはWEBサイトの大枠を決めます。
トップページでいえば、「ヘッダーはロゴを入れて、この辺にこんな感じで」とか、「ボタンはこれくらいの大きさで、何個並べる」とか、「バナーは横並びに３つ」などなどですね。
ワイヤーフレーム作成の目的は、あくまでも必要な要素や導線とかの確認ですので、この段階ではまだデザインしません。黒とか１色でおおよその枠組みをするのみ。
ワイヤーフレームの作成にあたっては、とくに使用ソフトの決まりはナシです。手書きでも良いし、手書きしたものを最終的にイラレとかで清書しても良いし、最初から好きなソフトで作成してもOK。
グラフィックデザイナーではあり得ないとは思いますが、それこそOffice系のソフトとかでも何でも良いはずです。（Cacooなど、ワイヤーフレーム専用のツールもあります）
デザインカンプ作成
いよいよお待ちかね、グラフィックデザイナーがいちばんよく分からないステップがここなんじゃないでしょうか。
「え？WEBなのに、デザインカンプ？WEBデザインって、HTMLとかCSSとかいう言語でプログラムを組むんでしょ？」という疑問が聞こえてきそうです。
上記疑問は確かにそのとおりですが、とはいえ、いきなりプログラムを組むわけではなくて、まずはチラシとかを作るときみたいに、全体の見た目（デザインカンプ）をソフトで作ってしまいます。プログラミングするのは、まだその後です。
デザインカンプの作成は、フォトショでもイラレでもどちらでもOKです。
かねてより、フォトショが使われるのが一般的でしたが、最近ではイラレでWEBデザインのカンプを作る人も増えてきており、「絶対にフォトショじゃないとダメ」ということはありません。
グラフィックデザイナーはイラレのほうが得意な場合が多いと思いますので、イラレでもWEBデザインできるというのはありがたいですよね。
ただ、注意点もあります。
- イラレを使う場合は、単位をピクセルにするなど、設定に注意が必要
- WEBデザイナーに転職した場合、使用ソフトは転職先による
上記のとおり。
イラレは基本「紙用」のソフトなので、WEB用に使用する際は注意が必要ということと、仮にWEBデザイン会社に転職した場合、その会社がフォトショ使用ならフォトショを使うことになる、ということですね。
画像の書き出し
イラレかフォトショでデザインカンプが作成できたら、あとはWEB上でそっくり同じ見た目になるように、プログラミングをほどこしていくわけですが、、、そのために、今度はせっかく作ったデザインカンプを「分解」します。
具体的には、HTMLで表現できるところと、画像でしか表現できないところを区別し、画像はHTMLに読み込むためのパーツとして、部分部分jpegやpngに書き出します。
必要最低限のところを画像にしたほうが、WEBサイトの容量が軽く、表示速度も速くなるので、ここはWEBデザイナーの腕の見せ所になりますね。
以前は画像の書き出しは「スライス」という方法が使われていましたが、イラレもフォトショもバージョンアップした現在のCCでは、「アセット」という機能を使うのが主流です。
画像の書き出しは、デザインカンプを作成したソフトで行います。
コーディング
ここまできて、ようやくHTMLやCSSを用いてWEBに表示させるための作業に入るわけですが、グラフィックデザイナーにとって、このパートもイマイチ方法がよく分からない…という人が多いと思います。
結論を言うと、一人前にコードが書けるベテランなら、ただのテキストエディタで直にコードを打ってプログラムを作れるので、専用ソフトは不要です。HTMLやCSSに不慣れな場合に、Dreamweaverを使います。
Dreamweaverはこの業界で一番浸透しているソフトですが、「オーサリングソフト」といって、「HTMLやCSSの知識がなくてもプログラムが組めるよう、編集支援をしてくれるツール」というだけで、別にDreamweaverがないとコーディングできない、ということではありませんのであしからず。
とはいえ、グラフィックデザイナーがいきなりコードを直打ちは現実的ではないと思うので、Dreamweaverも使いつつ、ということにはなる思います。
というわけで、WEBデザインを勉強しましょう。
グラフィックデザイナーにとって、イマイチつかめないWEBデザインの手順と使用ソフトをまとめました。
全体の流れが理解できたら、あとはやってみるのみですね。
グラフィックデザイナーならデザインは経験済みなわけですし、まったくの初心者に比べたら、まだとっかかりやすいのではないかなと思います。