8つの視覚誘導を意識したUIデザイン基本・原則

デザインの目的は美しさではなく「伝える」ことです。Z型、F型、N型などに代表される視覚誘導により目的を達成するデザインが作成できます
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

良いデザインとは、見た目がきれいという意味ではありません。
使いやすさや伝わりやすさがあり、「目的を達成できること」が良いデザインの条件です。

UIについてはいろいろな定義があり、非常に大きな概念を示します。
なので一言で説明するのが難しいですが、一旦ここでは「ユーザーがwebサイトやアプリを快適に使うための画面設計」としておきましょう。

・サイトを見ていて、見たい情報がどこにあるのかわからない
・ボタンと思ってタップしたらボタンじゃなかった
・サイトの読み込みが遅く、イライラする

もしもそんな経験があれば、そのWebサイトは「UIが悪い」といえます。
なぜそのように感じてしまうのかというと、そのWebサイトのUIが人間の目や脳の性質、社会的常識や文化などを取り入れられていないからです。

人間の脳には「時間は左から右に進む」というイメージがあります。
なので上図には「戻る」「次へ」という記載がなくても、早送りしたければ右側を、巻き戻したかったら左側を、停止したい場合は中央のアイコンを操作するでしょう。
これは、各記号が見慣れたもので機能が一目でわかることと、無意識にイメージする時間の流れを取り入れているからです。

全文はWebマーケティングメディア「Grab」をご覧ください

今回はこうしたUIデザインの基礎となる視覚誘導を8つご紹介します

  • グーテンベルク・ダイヤグラム
  • Z型
  • F型
  • N型
  • 大きいものから小さいもの、太いものから細いものを見る
  • 線を目で追う
  • 同形・同色
  • 数字

個人的に、特に意識するのは「大きいものから小さいもの、太いものから細いものを見る」です。
人は文章をその文章の文脈によって読むのではなく、こうした大きさや流れに沿って読みます。
強調したい言葉と文脈を適切なUIデザインに落とし込むには、こうした要素を意識して文章を組み立てる必要があります。

全文はWebマーケティングメディア「Grab」をご覧ください

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

広告代理店
広告を出したい者(広告主)と広告を掲載する者(媒体)の間にたつ存在。 媒体 ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]