MEDIA

  • 2021.08.04

    UIデザインとは?<近接・整列・コントラスト・反復>

     
    こんにちわ。営業の宇都木です。
     
    今回は、UIについてご説明させて頂きます。
    初めて聞かれる方がほとんどかと思いますが、WEBサイトを制作/リニューアルするにあたって
    知っておけばかなりお得な知識ですので是非一度ご覧ください。
     
    何故僕がこの記事を書こうかと思ったのは、クライアントで
    「UIを意識したデザイン」「インパクトのあるデザイン」を求められたときに感じた違和感です。
    お話を聞いているうちに、その要望を鵜呑みにしてしまうと「UIを意識したデザイン」というものと
    ほど遠いものになってしまう…
     
    と悩んだのがキッカケです。
     

    UIとUIデザインとは

     

    まず読み方は、UI(ユーアイ)です。

    訳さず読むと、User Interface(ユーザーインターフェース)と読みます。
    インターフェースには、「境界面」「仲介」などの意味があり、
    IT用語的には「人(ユーザー)」と「モノ(機器、プログラム等)」をつなぐ役割を果たすものとして考えられています。

     

    そしてUIデザインとは、「ユーザーがWEBサイトに訪れた時に快適に、迷うことなくスムーズに使うための設計」の事を指します。

     

    下記のような部分を踏まえていかにユーザーにとって使いやすいWEBサイトにできるか?それがUIデザインの本質となります。

     

    大切なポイント

    • フォントのサイズ、種類
    • イラスト
    • ボタンの位置、大きさ
    • 入力欄の幅

     

     

     

    なぜUIデザインが必要なのか

     

    UIデザインがしっかり考えられて設計されているか、そうでないかでサービスの利用率に大きく影響するからです。

     

    UIを考えずに制作すると

    • アクセスされてもすぐ離脱される
    • お問合せがない/あるいわ少なくなった
    • 購入に結びつくことができない

    .
    せっかくWEBサイトを作り替えても悲惨な結果になります。

    ※もちろんUIデザインだけが理由ではありませんが。。

     

     

    UIデザインが悪いサイト

    • 欲しい情報がどこにあるか分からない
    • 文字が小さく、イラストなどもごちゃごちゃしてて見づらい
    • 動きが多すぎて早く見たい情報が見れない
    • お問合せがどこにあるか分からない
    ….等、このような事が理由でサイトから離れていきます。
     
    いくらインパクトがあろうと、良い情報を発信していても、ユーザーが「使いづらいな…」と思ってしまえば
    お問合せや予約に繋がることなく離脱されてしまいますので、それを避けるためにも
    UIデザインを意識することが必要となります。

     

     

    UIデザインの前に考える必須ポイント

    • 「誰に伝える」
    • 「どうしてほしい」
    • 「何を伝える」
    • 「どう伝える」
     
    ここがぼやけているとWEBサイト自体もぼやけたものになりますので
    なんとなくで進んでいきます。
    それは避けていきましょう。

     

     

    • ◆誰に伝える
    • ターゲットは?
      男性?女性?
      年齢は?
      職業は?
    •  
    ◆どうしてほしい?
    お問合せしてほしい
    商品を購入して欲しい
    資料請求をしてほしい
    店舗にきてほしい
    会員登録して欲しい
     
     
    ◆何を伝える        
    サービスの流れ          
    価格
    仕様
    利用者の声
    商品のメリット
    実績
     
     
    ◆どう伝える
    テキストや画像を使って
    動画で伝える
    並びはどうする
     
     
     
    ここらへんが具体的になってくると、デザインを提出された時に「なんじゃ、こりゃ!?」「思ってたのとなんか違う」となってしまい
    トラブルになってしまいますので、制作会社に丸投げは避けましょう。
     
     
     

    UIデザインをする上での画面設計ポイント

     
     

    タイ

    デザインをする上で、4つの大切なポイント

    • 近接
    • 整列
    • コントラスト
    • 反復
     
     
    ▶近接
    情報同士の距離感を調整することでその情報が、どこの情報とセットで紐づいているのかを明確にします。
     
     
    近接について解説
     
     
     
     
    ▶整列
    バラバラになっている情報(テキストや画像)をそろえることです。
     
     
    ▶コントラスト
    情報に強弱をつけて目立たせます。
    色やサイズに変化を持たせることで、重要な情報なのかをユーザーに強調しましょう。
     
     
     
     
    ▶反復
    レイアウトや、色などの要素を何度も使って一貫性を持たせます。
    全体的に統一感が生まれるため、ユーザーも情報を理解しやすくなります
     
     

    まとめ

     
    UIデザインについて書かせて頂きました。
     
    UIデザインがしっかりとしていないと、サービスの利用率に影響を及ぼします。
    インパクトがある奇抜なものを求めているわけではありません。
    ユーザー自身にとって使いやすいサイトなのかを求めています。
     
    また、使いやすい見やすいというのが無意識にユーザーにあるのであれば
    UIデザインというのはWEBサイトを制作するにあたって必要最低限かもしれません。
     
    そこを作り手側はもちろん、依頼する側もすこーしでも頭の片隅にあれば
    より良いWEBサイトになるかと思います。