スマートフォンサイトUI/UXデザイン 基本となるポイントとトレンド、ギャラリーサイト8選
今回の記事は、Twitter上で以下の投稿をいただき、執筆したものになります。スマホでのUI/UXデザインのトレンドをまとめていきます。
PCよりのデザイントレンドだった気がしたのでスマホ版もほしかったですー。 / 2017年WEBデザインのトレンドはどうなる？まとめてみた。 （KOBIT）https://t.co/5oahTjeeb1 #NewsPicks
— maitokuwahara (@maito) 2017年7月18日
スマートフォンなどの新たなデバイスが普及したことで、Web制作者にはPCで見るサイトの他に、スマートフォンなどの小さな画面を通して見るサイトの構築が必要になってきました。
ユーザビリティを意識したスマートフォンサイトを構築できるかどうかで、ユーザーのサイト滞在時間も大きく変わってきてしまいます。 サイトまでの誘導も大切ですが、ホームページの内容がユーザーに伝わっていなければそれは意味がありません。
見やすいスマートフォンサイトを構築することでユーザーにとってストレスの少ない環境を提供することが私たちの大きな役割になります。
そこで今回は、基本となるスマートフォンサイトのポイントとトレンドなどをご紹介します。
目次
スマートフォンサイトのUIを意識した4つの基礎となるポイント
1.回線速度に注意する
スマートフォンサイトの閲覧者は、LTEや4G回線を利用しアクセスしている可能性が大いにあります。 そこでポイントとなってくるのが画像の選定となります。
表示される画像をHPで使用されるものの中から必要なものだけにそぎ落とし、サイトの軽量化を行います。 また、CSSでの再現のしやすさを意識してデザインを作りこむのも一つの手となります。 しかし、CSSのみを意識してデザイン性のないサイトになってしまわないよう注意が必要です。
他にも画像サイズを下げるというのも1つの手ではありますが、スマートフォンサイズ（横320px～420px）にとらわれるのではなく、 高精細ディスプレイからの閲覧も意識し、解像度の高い画面には高解像度の画像を表示するなどの工夫が必要です。
2.タッチインターフェースであるという認識
PCサイトとスマートフォンサイトの大きな違いは、ユーザーがマウスコントロールでなく画面をタッチして操作するということです。 そのためリンク領域をしっかりと取り、指でタップしやすい構成を考えなくてはなりません。
次の「スマートフォンサイトのUI/UXトレンド」で紹介するマイクロインタラクションもタッチインターフェースに有効です。
3.ユーザーの使用状況を考える
PCサイトの閲覧環境は、座って落ち着いた場面であることが一般的ですが、 スマートフォンサイトは移動の途中などのちょっとした空き時間などに見られる機会が殆どです。 つまり、その空き時間の中でいかに素早くユーザーの求めるゴールへと導くかがポイントになってきます。
例えば、現在あるスマートフォンサイトの共通認識ルール（ハンバーガーメニューなど）を使用するなど、ユーザーが捜査しやすいサイトを構築することで、ユーザビリティは向上していきます。
4.情報の優先順位をつける
コンテンツが多く、情報がたくさんあるサイトが良いという認識を捨てることが大切です。 見える範囲の少ないスマートフォンサイトに関しては、PCサイト以上に情報の優先順位をつけメリハリを持たせなければなりません。
情報の過剰摂取はユーザーに混乱を与え、非常にわかりにくいサイトとなってしまいます。 ユーザーの求めるものは何なのかを認識し、どの情報を分かりやすく表示すべきかをしっかりと見極めてサイトを構築することで、より分かりやすく伝わりやすいコンテンツを提供することができます。
【私的】意識しておきたいUI/UXデザインのトレンド
1.グリッドレイアウト
それぞれの要素をグリッド（格子）状に並べた、整った印象を与えるレイアウトのことを指します。縦もしくは横サイズを統一したサイズで組むことでスッキリとした印象を与えることができます。
また、要素間の余白の取り方により、ユーザーへ与える印象は大きく異なります。 参考サイト（AdGang：http://adgang.jp/）のような使い方をすることで、画像とそのタイトルを一度に見ることができ、情報の視認性を高めることができます。
また、レスポンシブデザインとの相性も良く、PCサイト・スマートフォンサイトで共通のデザインを使うことが容易です。 ただ、同じ形式でコンテンツが並んでいることから、ユーザーにとって目当ての記事が見つかりにくいなどの問題点がありますが、 その場合はグローバルナビゲーションなどでコンテンツごとにリストアップ表示することを可能にすることで、 ユーザーの目的とするページへの誘導を行うと良いでしょう。
2.マイクロインタラクション
ユーザーが操作した際に何らかのアクションを画面上に表示することを指します。
スマートフォンサイトは基本的に画面をタッチして操作していくことになります。 そこで「ボタンをタップした」というアクションの結果をユーザーに伝えることで、より直接的な操作感をユーザーへ提供します。
操作感を上げるだけでなく、リンクが周辺にに数点存在する場合もユーザー自身がどの部分をタップしたのか認識できるので、 回線状況の悪い環境で違ったリンクを開いてしまいストレスを生むことなども避けることができます。
3.グローバルナビゲーション
スマートフォンサイトのグローバルナビゲーション表示手法には様々なものがります。 それぞれのサイトコンテンツに応じたナビゲーションの選択が、ユーザーのストレス軽減へとつながります。
■スプリングボード型
スマートフォンのホーム画面のようにアイコン表示をすることで、視認度を高めたグローバルナビゲーションです。 視認性が高いので、一見してどこに何があるのかがわかる仕組みとなります。
特に子供向けコンテンツなどの場合、このグローバルナビゲーションが効果的となります。
■ハンバーガーメニュー型
スマートフォンサイトの上部でよくみる三本ラインのようなものを「ハンバーガーメニュー」と言います。 三本ラインをタップするとグローバルナビゲーションが表示されます。
タップして表示することで、表示の必要性のない時には画面の邪魔をしないことがこのナビゲーションのポイントです。 ハンバーガーメニューは現在多くのスマートフォンサイトで取り入られているので、自然と認識されやすい一般的なものとなってきています。
■ヘッダー型
PCサイトでよくある、サイト上部に固定され表示されているグローバルナビゲーションです。 ナビゲーションが固定されていることで、ユーザーはどのタイミングでも任意のページへ飛ぶことができます。
固定されている領域部分は画面幅をとられてしまうので、メニュー項目の少ないサイトで有効となります。
4.モータルウインドウ
ボタンをクリックすると、画面いっぱいにコンテンツを表示する方法です。 クリック前の画面は残したまま、上にかぶさるように表示されるので、重要な情報や注目させたいポイントで使用すると効果的です。 また、最近ではグローバルナビゲーションとしても使用されることもあります。
トレンドを追えるギャラリーサイト
トレンドの移り変わりは年々早くなっています。 いかにしていち早くトレンドを見つけ、それを自身の「引き出し」にしまい、制作時にそれぞれに適したスマートフォンサイトを提供できるかがポイントとなってきます。 そこで、以下に参考になるギャラリーサイトをまとめてみました。
1.sps collection
国内のスマートフォンサイトをまとめたサイトです。
Bookmark機能もあるので、自分の気に入ったサイトをまとめて表示することができます。
2.RESPONSIVE WEB DESIGN JP
国内のレスポンシブWebデザインをまとめたサイト PCサイトとスマートフォンサイトを横並びで見ることができるので、どこをPCサイトと共通させ、どこでスマートフォンサイトのUIに意識したのかなどの参考になります。
3.スマートフォンサイト集めました。
業界別、イメージカラー別で閲覧できるサイトです。業界ごとのレイアウト、画像の使い方などの「クセ」が見つけやすくなっています。
4.lovely ui
ジャンルごとにスマートフォンサイトの閲覧ができるサイトです。デザイン性の強いサイトを多く取り扱っていて、ブランドサイトやショップのサイト構築の参考に役立ちます。
5.AGT SMARTPHONE DESIGN GALLERY
http://agtsmartphonedesign.com/
カラー別、業界別に閲覧できるサイトです。表示されているスマートフォンサイトにカーソルを合わせることで、そのサイトをスクロールしたように閲覧することができます。
6.Media Queries
PC版、タブレット版、スマートフォン版のサイトが一度に見れるサイトです。レスポンシブデザインのサイトのアイディア出しなどに便利なサイトです。
7.MOBILE PATTERNS
http://www.mobile-patterns.com/
ジャンルことに一覧できるサイトです。機能ごとに分けて閲覧できるので、必要なページの部分のみを見ることができます。
8.Android Niceties
http://androidniceties.tumblr.com/
アンドロイドのアプリを紹介しているサイトです。スマートフォンサイトではなくアプリの紹介サイトではありますが、 縦スクロールでアプリごとに、横スクロールでそのアプリの別ページを見ることができ視認性が高いサイトになっています。
まとめ
今回は、最低限意識しておきたいポイントとトレンド、さらにギャラリーサイトのご紹介をしました。
トレンドを追うことももちろん重要ですが、忘れがちになる「基本」をしっかりと意識してサイトを構築することが、 ユーザビリティの向上に最も重要であると言えるのではないでしょうか。
少しでもWeb制作に携わる方達のお役に立てたらと思っております。
著者：MainYard Design（メーンヤードデザイン） 北野敦子
1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。
※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
→北野敦子さんによる寄稿記事を読む
