お問合せ先 無料見積もり

APRICOT DESIGN BLOG

右か左か・・・!あなたのことを考えたUI(ユーザーインターフェース)

UPDATE : 2017.01.26

アプリコットデザインのブログ

何気なく生活している中で、なんとなく使っている生活用品や、スマートフォン。
ふと立ち止まって今自分の使っているものを見てみると、使用するユーザーが使いやすいようによく考えられて作られています。

時代とともに色々なものが形を変えてきました。

ホームページに関していえば、パソコンで見るのが当たり前でしたが、最近ではスマートフォンの普及により、パソコンよりもスマートフォンでの閲覧の方が多い時代です。
画面上のカーソルを操作するという使い方から、指で直接タッチ操作する形へと大きく使用方法が変化しました。

ユーザーとの繋がりを考える。

ホームページは目の前に物体としてあるものではありません。
全てパソコンや、スマートフォンを通して画面の中に2次元のものとして存在しています。

ユーザーとホームページをつないでいるものは今見ている画面のみです。
画面上でタッチ、クリックのみでユーザーに対してわかりやすく、ここを押したらどうなるのか、といった事を表現できなければホームページは意味をなさないでしょう。

ウェブデザインとは。

Webデザインという言葉を聞きますが、パッと見た時にどういったイメージを持つのでしょうか。

「なんだかアーティスティック!クリエイティブなイメージ!!」
なんて思われる方もいるのではないでしょうか。

Webデザイン=芸術ではありません。
ホームページは使用するユーザーが使いやすく、なおかつ企業様のことを理解してもらうためのツールです。

デザインが洗練されていてパッと見た時に「すごっ!!」っと思うようなホームページであったとしても、ユーザーが使い方を理解できなければそれだけで終わってしまい、企業のことをより知ってもらったり、商品を買ってもらったりするという目的を達成することができずにユーザーはホームページを離れてしまうでしょう。

見た目がすごいこともいいですが、そこは本質ではありません。

Webデザインとは
  • ユーザーがわかりやすく
  • ユーザーが使いやすく
  • ユーザーにとって見やすい
そういった部分を作るのがWebデザインです。

こういったユーザーとホームページや、機械、システムとの「つながり」のことを「UI(User Interface ユーザーインターフェース)」と言います。

ユーザーインターフェースについて考えてみる。

実際にユーザーインターフェースについて考えてみたいと思います。

ホームページでユーザーがする動作をまず考えます。

パソコンのユーザーインターフェース

パソコンでの考えられる操作方法と操作するもの

  • マウス
  • キーボード
  • クリック
  • ホイール操作
  • ドラック&ドロップ
  • キーボード入力

こういった操作がパソコンでは考えられます。

では、ホームページでよく見かけるボタンを例にして考えてみましょう。

実際に下のボタンを見てください。

パソコンのボタン比較
よく見るようなボタンだと思います。
この二つを見比べた時にどちらがクリックできそうでしょうか?

おそらく多くの方が左側の方がクリックできそうだと感じたのではないでしょうか。

パソコンのリンクボタンは文字色が青、アンダーラインが入っているものが一番ボタンとして認識されます。

このように表現することによって、ユーザー側にボタンだという印象を強く与えることができます。


スマートフォンのユーザーインターフェース

続いてスマートフォンのユーザーインターフェースについて考えてみます。

スマートフォンでの考えられる操作方法と操作するもの

  • スマートフォン
  • タッチペン
  • タップ操作(指で画面を叩く操作)
  • スワイプ操作(指を上下左右に動かす動作)
  • ピンイチ、ピンアウト(親指と人差し指など二本同時に広げたり縮めたりする操作)
  • シェイク(スマートフォンを振る動作)

スマートフォンでは上記の項目が考えられます。

では、パソコンと同じくボタンについて考えて見ましょう。

スマートフォンがパソコンと大きく異なる部分はカーソルで操作するか指で操作するかという部分になります。

実際にボタンを見てみましょう。

スマートフォンのボタン比較
先ほどのパソコン版のボタンと、幅の大きいボタンがあります。

スマートフォンを操作するとした場合、多くの人が右側のボタンが押しやすそうに感じるのではないでしょうか。

パソコン版とは違い、スマートフォンは操作するのが指なのでカーソルよりもクリックする部分の幅が広くなります。
そのためボタン自体も大きくすることによって操作性を向上させています。

まとめ

今回はボタンを題材にユーザーインターフェースについて考えてみました。

ボタン一つでもユーザーの心理、使いやすさなど色々と考慮して製作することによってクリック率が変化します。

そういった部分を「ユーザーの視点に立って」考え、実装し、ホームページの本質をしっかりと捉えたものをデザイン、制作する必要があります。

また、時代の流れによって使用するデバイスも変わってきます。
その時代にあったデバイスでの使用方法をしっかりと考えて、ユーザーの使いやすいもの選択して企業様の問題解決へと導くことが大切ですね。

    営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

    [長野オフィス-本社-]
    〒381-2246
    長野県長野市丹波島1-805

    [東京ブランチ]
    〒100-0004
    東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

    [松本ブランチ]
    〒390-0851
    長野県松本市大字島内4619-3 QuintetDoor 1階南室

    [金沢ベース]
    〒920-0831
    石川県金沢市東山1丁目10-1 103

    記事が気に入ったら「いいね」してね。(SNSとは連動してません)

    0

    無料見積

    まずは無料でお見積もりを作成いたします。
    お気軽にお問い合わせください。

    無料見積もり

    お問合せ先

    クリックで
    事務所一覧が
    開きます

    tel.0120-622835

    営業時間/9:00〜18:00 
    定休日/土日祝日

    Copyright © 2021 APRICOT DESIGN All Rights Reserved.