この記事では、Webデザインを作る流れについて学習していきましょう。
これからWebデザインを学習するにあたり、たくさんデザインを作ることになると思います。
その際はきちんとWebデザインを作る流れに沿って制作する癖をつけていきましょう。
補足
この記事の内容を１度に全部に覚える必要はありません。
まずは基本的な流れを押さえて、デザイン制作の段階に応じて読み返していただけると幸いです。
Webサイトを制作する流れ
Webデザインを制作する流れについて確認する前に、そもそもWebサイトが制作される全体の流れも簡単におさらいしておきましょう。
Webデザインは要件定義の後
まずは、Webデザインは要件定義の後に始まることを念頭に置いておきましょう。
Webサイトが制作される際は、大まかに分けると以下の４つの工程があります。
- 要件定義
- デザイン
- コーディング
- リリース
例えば、お客様からWebサイトが欲しいという依頼が来た場合を考えてみましょう。
まずは、どんなWebサイトを作りたいのか要件定義（打ち合わせ）を行います。
要件定義の段階で、Webサイトを制作する「目的」や「載せたい情報」などの項目を整理します。
そして、最終的に要件定義で決まった内容でデザインを制作していくのです。
（この要件定義の練習は後の「卒業制作」の単元で練習していきましょう。）
Webデザインを制作する流れ
要件定義が終わったら、いよいよWebデザインの工程です。
Webデザインは３つの工程に分ける
Webデザインを制作するときは、大きく分けて３つの工程があります。
- ラフスケッチ
- ワイヤーフレーム
- デザインカンプ
基本的に上記の流れで制作を進めていくので、覚えておきましょう。
次の章では、それぞれの工程について詳しく確認していきます。
ラフスケッチを作成する
Webデザインを作る際に、第１に始める工程です。
ラフスケッチは、これから作るデザインの原点になるものです。
ラフスケッチの工程がアバウトな状態だと後の工程に響くので、１番大切な工程と言えます。
ラフスケッチとは
ラフスケッチとは、簡単にいうとWebサイトの下書きです。
デザイナーが思い浮かべるデザインのアイデアをどんどん出していく作業です。
ラフスケッチの例
デザイナーによって書き方や詳細さは異なりますが、 Webサイトのデザインのアイデア出しをする工程になります。
次に、ラフスケッチを作成する際のポイントについても確認していきましょう。
紙とペンを使う
デザイナーによって賛否両論あるかと思いますが、 まずは「紙」と「ペン」を使ってアナログにラフスケッチを描いていきましょう。
理由は、圧倒的にアナログの方が作業スピードが速いからです。
一発で良いデザインを浮かぶことは稀なので、デザインの案を出すときはとにかく数を出すことが大切です。
デザインツールなどを使ってラフスケッチを描いてしまうと、慣れないうちはかなりの時間がかかってしまいます。
なので、デザインを学び始めた方は特に、アナログでのラフスケッチを心がけてください。
ラフスケッチの綺麗さは考えない
ラフスケッチは、自分だけが使うメモのようなものです。
なので、特に人に見せる場合を除いては、綺麗さは考えないで大丈夫です。
思いつく限りペンを走らせて手を動かしましょう。
完成のイメージを膨らませる
ラフスケッチの段階で大切なことは、完成までのイメージを膨らませることです。
ラフスケッチは何度も書いて大丈夫です。
抽象的なラフスケッチから具体的なラフスケッチにどんどん描き換えていくことが大切です。
何度もラフスケッチを重ねていくことで、デザインの完成までのイメージが膨らんでいきます。
ラフスケッチのまとめ
ここまでのラフスケッチで大切なことを以下にまとめました。
大切なこと
- 紙とペンでラフスケッチを書く
- とにかくデザイン案の数を出す
- 思いついたことがあればとにかくメモしておく
- いくつも案を出すためにとにかく手を動かす
- 抽象的なラフから具体的なラフに描き換えていく
- 完成までのイメージを膨らませる
一番大切なことは、完成までのイメージを膨らませることです。
ラフスケッチで描いたデザインが、次の「ワイヤーフレーム」や「デザインカンプ」に反映されます。
なので、ラフスケッチの段階で完成のイメージがつかないと、後の工程には進めないのです。
ワイヤーフレームを作成する
ラフスケッチが完成したら、次のワイヤーフレームの作成に移ります。
ワイヤーフレームとは
ワイヤーフレームとは、Webサイトの設計図になります。
Webサイト内の構成やレイアウトなどを決めた、いわばラフスケッチの清書です。
お客様と打ち合わせをする資料ともなるため、綺麗に作る必要があります。
次は、ワイヤーフレームを作成する上で注意すべきポイントを解説していきます。
基本的に白黒で作る
ワイヤーフレームは、基本的に白黒で作られます。
先ほどのワイヤーフレームの画像を見ると、白黒で作られていることが確認できるかと思います。
理由は、ワイヤーフレームはあくまで設計図だからです。
設計図の段階で色などをつけてしまうと、次のデザインカンプを作成する際に自由な発想が生まれにくくなるのです。
「画像」や「配色」や「あしらい（装飾）」などのデザインを飾り付ける要素は、後の工程で行なっていきます。
画像が配置される箇所には灰色の四角形を置く
Webサイト内の画像がどこに配置されるかがわかるように、灰色の四角形を配置します。
画像の例で配置されている灰色の四角形には、後で画像が入ることがイメージできるかと思います。
ボタンに関しても、わかりやすいように灰色四角形が用いられる場合もあります。
ダミーテキストは完成に近い形で打ち込む
文章を仮置きするためのダミーテキストは、できる限り完成の文章に近い形で打ち込んでおきましょう。
「テキストテキスト」「○○○○」などのダミーテキストは、実際の見た目とはかけ離れており、「改行の位置」や「読みやすさ」の判断ができなくなります。
一番良いのは、デザインを作る前に文章の元となる原稿を作っておくことです。
打ち込む文章が決まっていると、よりスムーズなデザイン作成が行えます。
案件などの場合は、ワイヤーフレームの作成の前段階でお客様から事前に原稿を考えてもらっておきましょう。
テキストのスタイル調節をしておく
テキストに関しては、次のデザインカンプを見越してスタイルを当てておきましょう。
以下の例のように、ワイヤーフレームの中でもフォントのスタイルの統一をしておくとより完成のイメージがつかめます。
テキストのスタイル調整の例
- セクションの見出し：24~32px
- 小見出し：18~20px
- 読んで欲しい文章：14~16px
- 文章の箇所はline-heightが「2」になるようにする
- 字間はletter-spacingが0.1emになるようにする
自分の中で見出しや文章のテキストのルールを決めておくと、ワイヤーフレーム作成が捗ります。
基本的に8の倍数で作る
ワイヤーフレームを作成するときは、要素の大きさや余白を「8の倍数」で作成しましょう。
例えば、8の倍数のルールで余白を作る際の例を確認してみます。
8の倍数で余白を作成する例
- セクション間の余白：120px
- 記事同士の間の余白：40px
- ナビゲーション間の余白：24px
- 最小の余白：8px
大きさの数値にルールをつけておくと、デザインを作成するときに迷う時間がなくなります。
また、コーディングする際も余白を確認する手間が省けるので、制作がスムーズに行えます。
ZeroPlusの教材も基本的に「8の倍数」で余白などが作成されています。
ワイヤーフレームのまとめ
ここまでのワイヤーフレームで大切なことをまとめました。
大切なこと
- ワイヤーフレームはWebサイトの設計図
- 基本的に白黒で作る
- 画像が配置されるところには灰色の四角形を置く
- ダミーテキストは完成に近い形で打ち込む
- テキストのスタイルを調節しておく
- 基本的に8の倍数の大きさで作る
ワイヤーフレームを綺麗に作っておくことで、次のデザインカンプの作成が捗ります。
なるべく後から修正をしないような作成を心がけてください。
デザインカンプを作成する
ワイヤーフレームが完成したら、最後にデザインカンプを作成します。
デザインカンプとは
デザインカンプとは、デザインの完成形のことです。
正式名称は、「Design Comprehensive Layout」です。
デザインを依頼された場合は、お客様に納品するデザインデータになります。
そして、最終的にエンジニアがコーディングをする元となるデザインデータにもなります。
デザインカンプは「モックアップ」と呼ばれることもあります。
画像を挿入する
実際にWebサイトの中で使用する画像を挿入します。
ワイヤーフレームで配置されていた灰色の四角形に画像を挿入していきましょう。
デザインデータの画像がそのままコーディングに使用されるので、 元のデータとなる画像も完成形のものを使用するようにしましょう。
配色する
配色とは、色をつけることです。
デザインカンプの段階で、配色を行っていきます。
Webデザインは以下の３つの色を基本的に使っていきます。
- ベースカラー
- メインカラー
- アクセントカラー
ただ、Webデザインの配色については別の記事で解説するので、ここでは割愛させていただきます。
あしらいを追加する
あしらいとは、装飾のことです。
画像の例でいうと、キャッチコピーの下線やチェックのアイコンなどがあしらいにあたります。
デザイン４原則の対比を意識するために、あしらいを追加してデザインにメリハリをつけます。
前述した配色の作業で選んだ色と合うようにして、あしらいの色も決めましょう。
誤字脱字のチェックをする
最後に、デザインカンプを作成する際に忘れてはいけないのが、誤字脱字のチェックです。
デザインカンプはお客様に納品するためのデザインなので、ミスは許されません。
デザインを作り終わっても気を抜かず、誤字脱字のチェックを行いましょう。
チェックのコツ
誤字脱字のチェックをするときは、デザイン制作直後ではなく時間を空けてから行いましょう。
短くて1時間、長くて1日デザインを寝かしておきましょう。
後日、頭を冷静にしてから見直しを行わないと、ミスの発見は難しいのです。
デザインカンプのまとめ
ここまでのデザインカンプで大切なことをまとめました。
大切なこと
- デザインカンプはWebデザインの完成形
- 画像を挿入する
- 配色をする
- あしらいを追加する
- 誤字脱字のチェックをする
デザインカンプはデザインの完成形です。
最後まで絶対に気を抜かずに作成しましょう。
流れを守ってデザインを作成しよう
ここまででWebデザインの流れを説明してきました。
- ラフスケッチ
- ワイヤーフレーム
- デザインカンプ
上記の３つの工程の中で、どんな作業がされているかのイメージがついていれば大丈夫です。
今後、皆さんもポートフォリオサイトなどを自作する機会があった際は、 ぜひ、ラフスケッチからデザインを作成してみてください。
