今回はWebデザインの流れをお伝えします。
基本的にはWebデザインの流れは以下のようになります。
①企画
②サイト設計
③ワイヤーフレーム制作
④モックアップ制作
⑤コーディング
それぞれどういったことをするのか説明しますね。
企画
Webサイトを作るきっかけは、他者からの依頼などで始まります。
新しく作る場合や、既にあるWebサイトのリニューアルなどもあるかもしれません。
- サイトの目的
- ターゲットユーザー（年齢・性別・職業など）
- ターゲットユーザーがサイトを利用する理由や行動の予測
これを具体的にしておかないと、「なんとなく作ったサイト」になってしまいます。
サイト設計
サイト設計では、Webサイト上に作るコンテンツを整理し、分類分けします。
そのために、
サイトマップとは、１つのWebサイトにあるWebページを一覧にして構造化した設計図のことです。
このように、Webサイトの中に、どういったページやコンテンツを入れ込むかという構造を決めます。
ワイヤーフレーム制作
サイト設計をしても、いきなりデザインに取り掛かるわけではありません。
ワイヤーフレーム制作とは「Webサイトのデザインの下書き」のようなものです。
色や細かい装飾はしない設計図です。
- 何をどこに置くか
- 写真はどこに入れるか
- どこでアイコンを使うか
- 入れる文字は何か
そういったことを決めていきます。
こういった、ワイヤーフレームを作れるツールはいくつかありますが、私はcacooを使用しています。
ちなみにこのワイヤーフレームは、cacooの既存テンプレートをそのまま貼りつけています。
cacooには、サイトマップやワイヤーフレームのテンプレートがいくつか入っており参考にできます。
余談ですが、私は図や何かを制作するときはよくこのcacooを使います。
細かい配色まで行かなくても、枠組みを考えていくことで、細かいデザインを考えるうえで楽になります。
モックアップ制作
モックアップを制作することで、完成デザインのイメージが出来るため、基本的な機能なども確認することが出来ます。
「モックアップを見れば完成品がわかる」くらいのものである必要があります。
一般的なモックアップのことは、「デザインカンプ」と呼ばれる場合もあります。
静的なデザインカンプを作るのに、photoshopが使われるケースが多いです。
photoshopを使うと、綺麗にデザインされたものを作ることができるためよりイメージが湧きやすいです。
モックアップ制作の方法は、他にも色々あります。
今お話しした、「デザインカンプ」が一般的ですが以外には「ブラウザデザイン」「ペーパープロトタイピング」と呼ばれるものもあります。
ここではそれらの説明は割愛しますが、方法がいくつかあるということだけ頭の隅に入れておいてください。
コーディング
完成品がイメージ出来たら、実際にコーディングしていきます。
まとめ
Webデザインはこのようにして進めていきます。
流れはイメージ出来ましたでしょうか。
１つ１つの細かい解説や実践についてはまた別の機会でお話しします。
また、「Webデザインはなぜ必要か」「サイトを設計する上で大事なこと」はこちらの記事を参照ください。
