【5分】webデザインの基本手順と流れ！手戻り絶対ダメ

初心者がwebデザインの手順と流れを間違うと?

webデザインの手順と流れ

制作物の目的と内容が決まったら、伝え方を決めましょう。具体的には、誰に、どんな場面で伝えるか考えましょう。

ターゲットを決める

ターゲットを特定しましょう。実際にいそうな人をペルソナとして決めると良いです。

例えば、20代女性の会社員、都内在住で趣味は韓国旅行や美容などです。

決めすぎても後でデザインに関わらないことがあるので、デザインに関わる範囲で決めればOKです。

伝える場面を決める

いつどのような場所で見られるかを考えましょう。

例えば、会社帰りの電車の中でスマホで読まれる等です。

PCで読まれるか、スマホで読まれるかで文字の大きさ、余白が変わります。

また、歩きながら読まれる場合はさらに大きな文字の表示が必要です。

配色

色は3色に絞る

多く色を使いすぎるとごちゃごちゃしたイメージになってしまいます。

メイン・サブ・アクセントカラーの60-30-10ルール

• 60％メインカラー(背景)：脇役的な色です。メイン・アクセントカラーの妨げにならないよう、薄い色（淡い色）を使いましょう。
• 30％メインカラー(ロゴ/バナー/メインコンテンツ)：サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
• 10％アクセントカラー(申込みボタン等、強調箇所) ：全体の5％と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。

対称的な配色を選びコントラスト活用する

メインカラーやアクセントカラーを濃い色、ベースカラーを薄い色にすることで、コントラストを活用し、重要な部分を目立たせましょう。

設定したターゲットや場面に合う色、目的に沿ったを設定する

ユーザーが女性だからといって安易にピンクを選ぶのはやめましょう。

• 赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
• 青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
• 緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
• 灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い

色にルールを与える

「消去（DELETE）ボタン」は赤、「キャンセルボタン」は黒など、色のルールを統一しましょう。

ユーザーが見慣れている色で統一するとわかりやすいです。

フォント

伝えたい印象でフォントを選びましょう。

フォーマルなイメージ、カジュアルなイメージなど、フォントでサイトイメージが変化します。Googlefontから多種多様なフォントを使うことができます。

コンテンツに優先順位をつける

情報を詰め込みすぎないために、コンテンツに優先順位をつけましょう。

情報を詰め込みすぎると、ユーザーが結局何が重要かわからないまま、サイトから離脱してしまいます。

同一用途のものを統一する

手順4.スケッチする

手順5.デザインする