KOBITブログ

レスポンシブ対応の際に知っておきたい、スマートフォン特有のUI改善ポイント

この記事は約 6分 で読めます。

Smartphone_UI

モバイルファーストが叫ばれるようになり、モバイル機器からのアクセスでも画面デザインが崩れないよう表示するレスポンシブ対応が一般的になってきました。しかし、レスポンシブ対応はただ表示を並べ替えるだけのデザイン変更ではありません。モバイルを使用する状況や、画面の小さなスマートフォンを画面タッチで操作するために、特有の要件が存在するのです。スマートフォン特有の改善ポイントを7つ紹介します。

Smartphone_UI

■レスポンシブ対応は必須の時代

スマートフォンやタブレットからのWeb閲覧が増えるにつれ、モバイルでのユーザー体験を考慮するのは必須の時代になりました。モバイルでのユーザー体験を起点にサービス開発する考え方は“モバイルファースト”と呼ばれ、現代のサービス開発の思想がよく表現されています。モバイルファーストの時代においては、モバイルの特性をよく理解するのが前提です。モバイルの特徴としては、画面サイズが小さい、画面タッチによって操作を行う、通信回線が不安定になりがち、時間や場所にとらわれない、といった点が挙げられます。これらの特徴を積極的に活用する、あるいは、不便さを感じさせないために、新たなUI設計が求められています。

一貫性のあるモバイル体験を提供するために「レスポンシブ」対応が提案されています。従来、パソコンやモバイルなど複数の環境にサービス提供するには、同一の内容で異なるデザインのファイルを複数用意し、条件によってファイルを切り替える方式が採られてきました。しかし、スマートフォンやタブレットの画面サイズやプラットフォームの組み合わせが膨大になるにつれ、複数のファイルの整合性をとって管理するのに煩雑さが増してきました。そこで、一つのファイルで全ての環境に対応できるようにするのが「レスポンシブ」対応です。

レスポンシブ対応を施したWebサイトは、訪問するユーザーが使用している端末の画面サイズや環境に応じて、自動的に最適化された画面が表示されます。例えば、パソコン上では横に3列のレイアウトにしていたサイトであっても、スマートフォンからアクセスした際には横幅が狭い画面を使用しているため、1列に変更されるといった具合です。このようにスマートフォン向けのUIを作成する際には、どのような点に配慮すればよいのでしょうか。

■UI改善の前にサービス設計とコンテンツを見直す

レスポンシブ対応は同一コンテンツを異なるデザインで表示する手法ですが、そもそも同一コンテンツで良いのか考えてみるようにしましょう。パソコンでは長文を読むのが普通でも、スマートフォンの小さい画面では苦痛を感じるケースもあるかもしれません。キーボードが付いているパソコンでは簡単な文字入力であっても、スマートフォンは文字入力には必ずしも適した環境ではありません。コーポレートサイトのように簡潔な情報提供を目的としたWebサイトはレスポンシブ対応によってサイト管理の工数削減をするメリットが大きいといえるでしょう。一方で、Eコマースサイトのようなユーザー体験が重要なWebサイトであれば、モバイル特有の要件を満たすために、ネイティブアプリの活用を検討した方が良いかもしれません。

■スマートフォン特有の7つの改善ポイント

●適切な文字サイズ

12px以上の文字サイズを使用するようにしましょう。スマートフォンでは小さすぎる文字は読むのが困難です。ユーザーは文字の拡大などを強いられるため、使い勝手が悪くなります。また、パソコンに最適化された文字サイズも、スマートフォンでは大きすぎる場合があります。改行によってデザインが崩れないよう調整が必要です。

●ボタンのデザイン

画面をタッチするスマートフォンでは、ボタンが小さすぎると、ボタンが押せなくなってしまいます。推奨のサイズは44px以上です。画面をスクロールしていく際に、ボタンが見落とされないよう、分かりやすいデザインにすると良いでしょう。

●ボタンの配置

スマートフォンを片手で操作する状況を想像してみましょう。右手親指で画面右下を触る場合が多いでしょう。そのため、画面左上にボタンを配置してしまっては、ユーザーはボタンを押下できません。左手で操作するユーザーの存在も考えると、左右どちらの手で操作してもボタンが押下できるよう、ボタンは画面横幅いっぱいに広げておくとよいでしょう。スマートフォンの大画面化が進むにつれてボタンの配置はより慎重に考慮すべき事情になっています。

●リンクにアイコンを設置

パソコン画面ではマウスをボタンの上に置くと色が変化するマウスオーバー効果がよく利用されますが、タッチ操作を基本とするスマートフォンでは、この効果が使用できません。矢印やアイコンを活用し、リンクであることを明確にしましょう。

●フォームの項目を最適化

本当に電話番号を取得する必要がありますか?スマートフォンでは少しの入力欄でも、コンバージョン率を落とす要素になりえます。入力項目そのものを削減できないか考えてみましょう。どうしても必要な場合は、文字入力ではなく、選択形式にすると良いでしょう。

●メニューのアコーディオン表示

画面サイズの小さいスマートフォンでは、多くの項目の同時表示ができません。ユーザーがタップした際にだけ表示されるアコーディオンを活用するとデザインが簡略化されます。

●色やフォントを統一する

パソコン用でも同様ですが、画面の小さなスマートフォンではよりデザインの一貫性が重要になります。必要以上に異なる色が使われていたり、複数のフォントが使用されていたりすると、ユーザーにとって混乱のもとになります。スマートフォンは強い太陽光の下など、画面が見にくい環境で使用するケースもあるので、色味には十分に注意するべきです。

■まとめ

スマートフォン向けのレスポンシブ対応は必須の時代になりました。いつでもどこでも使用される、画面サイズの小さなスマートフォンという前提を考慮し、文字・ボタン・リンク・フォーム・メニュー・色・フォントなどで最適化を施す必要があります。


CATEGORY:

さあ、KOBITをスタートしよう。