デザインに必要な３つのUI要素

このページでは、UIをデザインする時にポイントになる基本3点を記載

①余白

非常に大事な要素

• 書物における文章の行間、高級ブランドのホームページ、紙媒体（広告のチラシなど）を比較してみると、「意図をもった余白」が設けられていることがよくわかる

余白が多いと抱くイメージ

• 高級感、ゆったり、余裕、斉一
  • 例：高級車のホームページ
    • 非常にシンプル、テキストが少ない
    • 色は基本的にモノトーンで商品を際立たせている

余白が少ないと抱くイメージ

• 安っぽい、こせこせ、切迫、雑多
  • 例：スーパーや薬局の広告チラシ
    • 紙面いっぱいに商品と価格が敷き詰めている
    • 色もたくさん混在している

②色

色が人に与える印象は決まっている

• 世界各国の旗色を見るとわかりやすい
  • その国が持つ特徴やイメージ、アピールしたいことなどが、国旗で使用されている色に反映されている

基本４原色を元にしたイメージキーワード例

• 青のイメージ
  • 信用、信頼、さわやか、冷静
    • 涼しさ、冷たさを与える色でもある（例：アイスのパッケージ、夏物家電売り場など）
• 赤のイメージ
  • 情熱、怒り、革命、意欲
    • 食欲が涌く色でもある（例：飲食店の看板やアイコンなど）
• 黄のイメージ
  • 快活、喜び、希望、元気
    • 目に留まりやすい色でもある（例：幼稚園児の帽子、道路標識など）
• 緑のイメージ
  • 平和、調和、ゆったり、癒し
    • 森林（自然）に囲まれると安心する心理と同じ効果の色でもある（例：スターバックスのロゴ、インテリアとしての観葉植物など）

配色の割合

配色の割合は、事前にルール化すること（おおまかでOK）

理由は、事前に決めておけば全体バランスが取れて統一感がでるデザインとなるため

• base color:70%
  • 余白や背景に使用する色
    • 原色は主張が強いので、基本はニュアンスカラーがベター
      • 特定ユーザーにターゲットを絞ったサイトや、固有の色・世界観があるサイトなどの場合は、この限りではない
        • 例：ゲームの公式サイト、アパレルブランドのサイトなど
• main color:25%
  • 最もwebサイトの印象を決める役割をする色
    • ヘッダー、フッター等。全体バランスを見て、sub colorを追加しても良い
• accent color:5%
  • 強く印象に残したい部分に使用する色
    • ユーザーに行動させたい部分に使う
      • 決済ボタン、登録ボタン、送信ボタン等
    • もっともクリック率が高い色は、緑色。次点でオレンジ色という結果もある

    【勝負あり】クリック率が高いボタンリンクの色・大きさ・形・アニメーション

③フォント

フォントがユーザーに与える印象を考える

• サイトが放つイメージを決めると言っても過言ではない

よく使われる基本フォント

• ゴシック
  • 汎用的
  • 特に指定なければひとまずこれを使用
  • 分母多い層をターゲットとする場合、広くターゲットを置きたいときに有効
• 明朝
  • 高級感
  • 上品・気品・知的な印象を与えたい時はこれを使用
  • 「お金をいくらつかったか？」ということに承認欲求や価値を感じる層をターゲットするときに有効
• 個性系（まる文字、アニメ系フォント等の通常ではあまり使用しないもの）
  • 限定的
  • ターゲットや世界観をコアに、明確に絞り込んでいる場合に使用する

b-risk.jp