デザインのテクニック募集

良いデザイン

• ターゲットが明確である
• 目的への誘導導線が明瞭である
• 操作しやすい or 見やすい画面となっている
• 効果が高い

0からWebサイトを作成する際は、ターゲットの明確化 → 目的への誘導導線の設計 → デザインを行う

サイト作りのポイント

• 5W1Hを考える
  • WHO
  • WHAT
  • WHY
  • WHEN
  • WHERE
  • HOW

ターゲットの明確化

ペルソナを設定する

ポイント

• 20代~30代のような曖昧な範囲はNG
  • 25歳男性、大学生、スマホをよく使用する etc...
• 項目例
  • 性別
  • 年齢
  • 居住地
  • 職業
  • 世帯収入
  • SNS使用時間
  • 行動時間
  • スマホを使用する時間帯
  • 好きなブランド
  • 趣味
  • 休日の過ごし方
• 事業に関係ない人物像は設定しない
• 好都合な条件ばかり設定しない
• たくさんのペルソナを作りすぎない
• 自分の主観を入れない

目的への誘導導線の設計

カスタマージャーニーマップを作成する

• 欲求喚起
• 情報収集
• 認知
• 比較検討
• 購買
• 購買後

カスタマージャーニーマップの例

• 欲求喚起：新しい美容院に行きたい
• 情報収集：インスタグラムで検索
• 認知：アカウントからHPに飛ぶ
• 比較検討：金額や口コミが良いかどうか
• 購買：来店する
• 購買後：SNSに投稿する

ペルソナ・カスタマージャーニーマップをもとにHPを作成する

タイポグラフィ

タイポグラフィ：活字のこと

• 読みやすくるべく、美しく文字を配置すること
• 文字をデザイン要素として用いること

上記のように、美しくタイプグラフィを見せるための基本的なテクニックとして以下があげられる

• ジャンプ率
  • ベースとなる文の文字サイズに対する文字サイズの比率のこと
    • ジャンプ率が高い → ベースの文字サイズに対して文字サイズが大きい
      • 賑やか、躍動感がある、若者向け、インパクト強
    • ジャンプ率が低い → ベースの文字サイズに対して文字サイズが小さい
      • 落ち着いている、静的、高年齢層向け、インパクト弱

ジャンプ率を設定する際の注意点

1. 主従関係を意識したメリハリがつけられている
2. ルール化された余白を持っている
3. 太さやサイズのルールが統一されている
4. 文字のサイズは３〜４種類くらいを目安とする

• 文字組み
  • 右下がり：ネガティブな印象を与える
  • 右上がり：ポジティブな印象を与える
  • 余白が狭い：威圧感がある印象を与える
  • 余白が大きい：弱々しい、落ち着いた印象を与える
  • 頭文字が大きい：語気が強いインパクトがある印象を与える
  • 縦書き：無機質な印象を与える

カラーリング

サイトに用いる色は以下の３色を目安とする

• ベースカラー
  • 全体の７０％を占めるようにする
  • 無彩色に近い色を選択する
• メインカラー
  • 全体の２５％を占めるようにする
  • 与えたい印象に近しい色を選択する
• アクセントカラー
  • 全体の５％を占めるようにする
  • メインカラーの補色に近いを選択する

※３色で足りない場合は、使用している色に近い色を足すようにする

ビジュアル

デザインは空間で捉える
例えば...

• 人の画像を上から俯瞰しているようにしたい場合は、上の余白をつける
• 下から見上げているような場合は、上の余白を消す

光がどこから当たっているかを意識して、明るくする所は明るくし、適切なところに影をつける