Webデザインの基本手順と流れを初心者向けに解説します。
目次
初心者がWebデザインの手順と流れを間違うと?
Webデザインを手順通りに行わないと、ミスマッチなデザインになります。
さらに正しい手順を踏まずに一旦デザインを完成してから修正を行うと、大きな手戻りが発生するので、手順を守りましょう。
- 制作物の目的・内容を決める
- ターゲット・場面を決める
- 伝え方を決める
- スケッチする
- デザインする
手順1.制作物の目的・内容を決める
目的を考えずに伝え方を決めるとミスマッチが起こります。
クライアントワークの場合はきちんとヒアリングをして認識を合わせましょう。
目的を決める
サイト制作の目的を決めます。
会社としての信用度を上げたい、ネットからの商品の購入を促進したいなど。
内容を決める
サイトに入れる内容を決めます。
会社概要、商品・サービス説明、商品のメリット、価格や購入方法など。
手順2.ターゲット・伝える場面を決める
制作物の目的と内容が決まったら、伝え方を決めましょう。具体的には、誰に、どんな場面で伝えるか考えましょう。
ターゲットを決める
ターゲットを特定しましょう。実際にいそうな人をペルソナとして決めると良いです。
例えば、20代女性の会社員、都内在住で趣味は韓国旅行や美容などです。
決めすぎても後でデザインに関わらないことがあるので、デザインに関わる範囲で決めればOKです。
伝える場面を決める
いつどのような場所で見られるかを考えましょう。
例えば、会社帰りの電車の中でスマホで読まれる等です。
PCで読まれるか、スマホで読まれるかで文字の大きさ、余白が変わります。
また、歩きながら読まれる場合はさらに大きな文字の表示が必要です。
手順3.伝え方を決める
制作物の目的、内容、ターゲット、伝える場面を特定することで、初めてデザインをどうするか考えることができます。
色は3色に絞る
色は3色に絞る。
多く色を使いすぎるとごちゃごちゃしたイメージになってしまいます。
60-30-10ルール
60％メインカラー(背景)
脇役的な色です。メイン・アクセントカラーの妨げにならないよう、薄い色（淡い色）を使いましょう。
30％メインカラー
ロゴ/バナー/メインコンテンツに使われる色です。
サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
10％アクセントカラー
申込みボタン等、強調箇所に使われる色です。
全体の5％と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。
対称的な配色を選びコントラスト活用する
メインカラーやアクセントカラーを濃い色、ベースカラーを薄い色にすることで、コントラストを活用し、重要な部分を目立たせましょう。
設定したターゲットや場面に合う色、目的に沿ったを設定する
ユーザーが女性だからといって安易にピンクを選ぶのはやめましょう。
- 赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
- 青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
- 緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
- 灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い
色にルールを与える
「消去（DELETE）ボタン」は赤、「キャンセルボタン」は黒など、色のルールを統一しましょう。
ユーザーが見慣れている色で統一するとわかりやすいです。
フォント
伝えたい印象でフォントを選びましょう。
フォーマルなイメージ、カジュアルなイメージなど、フォントでサイトイメージが変化します。Googlefontから多種多様なフォントを使うことができます。
字間/行間
字間や行間を変えるだけでイメージが変わります。
- 字間/行間を空ける：ゆったりレガントなイメージ
- 字間を詰める：フォーマルで実務的
コンテンツに優先順位をつける
情報を詰め込みすぎないために、コンテンツに優先順位をつけましょう。
情報を詰め込みすぎると、ユーザーが結局何が重要かわからないまま、サイトから離脱してしまいます。
同一用途のものを統一する
サイト内の同じ用途のものは、同一フォント、同色、同じ大きさ、同じ装飾、同じ寄せ、同じ位置に統一しましょう。
ページを跨ぐような要素、例えばボタンに関しては、遷移に関するボタンを共通化、戻るボタンを同じ位置に配置するなどして統一ができます。
手順4.スケッチする
ここまで決まったら紙にスケッチをしていきましょう。
紙にスケッチをした方が、ツールを使うよりも手軽に消したり付け加えることが可能なため、手戻りを防ぐことができます。
ここで、デザインをほとんど確定させるのが理想です。
疑問点をなるべく洗い出して、次のステップに入る前にクライアントに相談すべきところは相談しましょう。
手順5.デザインする
デザインをほとんど確定させたらツールを使い実際のイメージが伝わるようデザインをしていきましょう。
ツール指定がない場合、初心者向けのススメのツールはfigmaまたは Adobe XDです。
これらは完全無料で簡単にWebデザインができるツールです。
どちらを使うか迷ったら、Adobe XDの方がフォントも多く汎用性が効くのでオススメです。
Adobe XDの使い方
figmaの使い方
