Webデザインの進め方

これからWebデザインを始める方へ向けて、デザイン制作の流れをご紹介していきたいと思います！

私はWebデザイナーとして就職しましたが、大学の頃はパッケージなどのグラフィックを学んでいたためほぼ初心者でした。
入社後、初めはバナーなど画像制作をしていました。徐々にwebデザインを担当することも増えましたが、0から作るデザインを任された時、さてまず何から手をつけたらいいのやら・・・・と途方に暮れた記憶があります。

ここでは先輩方に学んだり実際にデザインした経験から、Webページの制作、特にデザイン部分のお話ができればと思います。

Webページ制作の流れ

ざっくりとしたWebページ制作工程をご紹介します。
順番が前後することもあるかと思いますが、企画→制作までの流れは以下の通りです。

1. 要件定義
2. ターゲティングの設定
3. コンセプト決定
4. イメージボード収集
5. ラフ制作・画面設計
6. データ制作
7. モジュール制作

ここでは「3.コンセプト決定」「4.イメージボード収集」に特化して具体的にご説明したいと思います。

コンセプト決定

例えば、カフェサイトのリニューアルをする場合を考えていきます。
「カフェのコンセプトが伝わる、落ち着いた安心感のあるデザイン」にしたい。というざっくりとしたオーダーがあったとします。

このオーダーを具体的にどのようにビジュアル化していくのか検討していきます。
デザイン方針を言語化しておくと、クライアントへ納得感のあるデザイン説明をすることができます。

サイトの方針
・ナチュラルなカラーで落ち着きのあるデザインにすることで心休まる空間である印象を伝える
・写真やイラストを使用し、お店の雰囲気や親しみやすさを伝える

キーワード
#落ち着いた #優しい #温かい #安らぎ

カラー
白（70%）、ベージュ・淡いグレー（25%）、こげ茶（5%）
→白ベースの柔らかい雰囲気にし、ナチュラルなカラーで優しさ、温かさを表現する。

フォント
明朝体
→落ち着いた優しい雰囲気を表現する。

素材
・写真
→ケーキやコーヒーなどのメニューとお店の雰囲気のわかる写真を使用することで、訪れた時の自分らしい過ごし方を想像させる。

・イラスト
→カフェのキャラクターイラストをポイントで使用し、温かく親しみやすい雰囲気にする。

レイアウト
フォントサイズは小さめで、余白を十分にとることで安心感のある落ち着いた雰囲気にする。

イメージボード収集

先ほど決めたデザイン方針に沿ってコンテンツごとにイメージボードを探していきます。
※写真にぼかしをかけているので、雰囲気を掴んでいただけたらと思います…！

雰囲気・トーン＆マナー
白ベージュ・淡いグレー・こげ茶などナチュラルなカラーを使用することで、落ち着いた温かみのあるデザインにする。

キービジュアル
店内の写真を画面いっぱいに使用し、ファーストビューを印象的なものにする。

コンセプトエリア
キービジュアル直後にテキストを配置。余白を十分にとり中央添えで目に付くものにする。

メニューエリア
写真とテキストを合わせて表現。左揃えで落ち着いた雰囲気に。

コンテンツの区切り・余白
写真を使用し情緒的な雰囲気にする。余白はゆったりと広くとる。

イメージボード収集の際、私はコンテンツごとにしっかりと参考を探すようにしています。この時点でイメージを固めておくと実際に制作しやすくなり、デザインに困った時も助けてくれる存在になります。

おすすめサイト

参考サイト集はたくさんあると思いますが、「SANKOU!」というサイトを特に愛用しています。サイトの種類や特徴が細かくカテゴリ分けされており、とても探しやすいです。

SANKOU! | Webデザインギャラリー･参考サイト集

おわりに

デザイン方針の検討やイメージボードの作成に特化してご説明しました。
私もまだまだ勉強中の身ではありますが、コンセプトからきちんとデザイン方針を固め、イメージボードを参考にしながら制作することで形にできるようになっていったと感じています。

拙い文章ではありましたが、これからWebデザインにチャレンジする方の参考になれば幸いです！