ユーザーがモバイル端末によってブランドやWebサイトに触れる時間は、今まで以上に増えています。ノートパソコンやデスクトップパソコン上で魅力的に見えるWebサイトを作成することに注力していれば良かったのは昔の話です。今のWebサイトはレスポンシブである必要があります。
それは、デスクトップからモバイルへの移行だけの話ではありません。サイトは大きめのスマートフォンやタブレットといったデバイスでもきちんと見れる、レスポンシブWebデザインであるべきです。ユーザーが多くの時間を費やす場所でのユーザーとの関わりは重要であり、そのことがユーザーから信頼を得られるかどうかを左右するのです。
ここでは、レスポンシブWebデザインに取り入れるべきモバイルフレンドリーなデザインの10の特徴を紹介します。
１. 簡単なナビゲーション
Webサイトがモバイルデバイスに対応したレスポンシブな機能を導入し始めた頃、今ではおなじみの「ハンバーガーメニュー」が開発されました。この方法によって、ユーザーが必要とするまで、サイトのナビゲーションを隠しておけるようになりました。しかし、ここ数年でハンバーガーメニューは徐々に消えつつあり、ページ上部または下部にアイコンを設置する手法に代わりつつあります。
アイコンは今や当たり前になっており、ユーザーはアイコンが意味するものを正確に判断できます。モバイルサイトのナビゲーションとしてシンプルなアイコンを設置することで、ユーザーはサイト内を素早く効率的に移動することができます。
２. 背景のブラーとディフュージョン
WebデザイナーはWebサイトを構築する際、美しいテーマや背景を取り入れます。こうした画像や背景はブランドの特徴となり、ユーザーに親近感を抱かせます。ユーザーがモバイルデバイスでサイトを閲覧する際にも、こうした特徴は損なうべきでないでしょう。
それらを取り除く代わりに、背景画像にブラーやディフュージョン（散らし）をかけることで、最初にナビゲーションやWebサイトの機能に注目してもらうことができます。この方法により、画像をモバイル画面に置き換えることなく、馴染みのあるWebサイトを閲覧できるようになります。結果的に、ローディング時間を節約し、ユーザーのエンゲージメントを向上できるでしょう。
３. カラーパレット
人気の高いアプリやモバイルフレンドリーなWebサイトでは、配色でも「より少ないことは、より豊かなこと（Less is more）」というアプローチを使用しています。これは、ブランドの配色を変える必要があるということではありません。その代わり、モバイルフレンドリーなWebサイトを開発する際は、より多くの余白と落ち着いた色調をブランドに使用しましょう。
賢い色使いを心掛けてください。ユーザーがモバイルデバイスを使って読む場合、スクロールの速度はコンピューターのときよりも早くなります。このとき、色が現れることでユーザーの動きを止め、彼らに情報を読ませることができます。読者が探している情報ともっとも関係の深い情報に、戦略的に色を使用しましょう。
４. スワイプ機能とジェスチャー
Webサイトで使用できるジェスチャーやスワイプ機能はさまざまです。たとえば、タップ、ダブルタップ、ピンチイン、ピンチアウト、ホールド＆ドラッグ、タッチ＆ドラッグなどがあります。
ユーザーはモバイルデバイス上でWebサイトを閲覧する時間が増えるにつれ、さまざまなジェスチャーに慣れ親しむようになりました。モバイルサイトでもっとも一般的に使用されているジェスチャーを完璧に把握した上で、デザインに取り入れましょう。
５. 機能的なアニメーションとマテリアルデザイン
モバイルのWebデザインで増加傾向にあるのは、機能的なアニメーションです。サイトにアニメーションを加えることで、より直接的な視覚効果を与えることができます。視覚化することで、ビジネスとユーザーに提供すべき価値が結び付けられます。アニメーションはユーザーにより豊かな経験を生み出すことができ、アニメーションがついた要素はモバイルWebサイトのナビゲーションをより簡単にすることができます。
こうした要素は、モバイルサイトのユーザビリティにとって重要である、マテリアルデザインに取り入れることもできるでしょう。マテリアルデザインの要素には、レイヤーやグラデーションがあり、モバイルサイトのローディング時間を短くするのに役立ちます。
６. カードデザイン
カードデザインは、モバイルデザインの一昔前のトレンドです。カードはWebサイトのコンテンツを、ユーザーがスクロールしやすい、より小さなセクションに分割します。この機能により、ユーザーはサイトのさまざまなマルチメディアを見ることができる上に、もっとも関連の深い情報だけを拾い読みすることができます。
７. 直感的なインターフェイス
どんなデバイスを使用していても、自分が賢くないせいで使いこなせないとは誰も思いたくありません。そのため、どのデバイスにおいてもインターフェイスは直感的に使える必要があります。「直感的であること」はデザイナーにとって達成不可能な基準だと主張する、インターネットの真理を説く伝道師のような人もいますが、何も超能力者にならなければいけないということではありません。
第六感に頼る代わりに、特定のデバイスにおいてもっとも自然な行動は何かを考えましょう。Webサイトのインターフェイスは、初めてサイトに訪問したユーザーにとっても、身近に感じられるものである必要があります。ユーザーがサイトを居心地良く感じれば、サイトを出入りするようになり、エンゲージメントが向上し、結果的にランキングが上昇します。
８. Touch ID
Touch IDは元々、スマートフォンのセキュリティのために開発されたものです。今ではWebサイトやアプリもまた、この技術を使用してサービスの安全性を高めています。Touch IDをモバイルデザインに取り入れることは、セキュリティが重要であることをユーザーに示しており、これによってユーザーは、信頼してWebサイト上での支払いやサービスを利用できます。
９. 位置情報サービス
位置情報サービスが開発された当初、ユーザーはアプリやWebサイトに位置情報の使用を許可することで、プライバシーが侵害されることを懸念していました。しかし、位置情報を使用することへの心配は、その便利さが浸透していったことで打ち消されたようです。位置情報の技術をWebサイトで採用することで、ユーザーはお得な情報を最大限に利用できるようになり、ユーザーの利便性が保証されます。
TargetのCartwheelアプリを見てみましょう。ユーザーは指でタッチしてクーポンを入手できるので、このアプリで購入することで良い買い物ができたような気持ちになります。Targetの位置情報サービスは、近くにいるユーザーにお得な情報を選ぶように呼びかけています。アプリはユーザーがTargetの店舗に近づくと通知を流します。
複数の場所で商品やサービスを提供する事業の場合、ユーザーは最寄りの店舗の場所を知ることができます。正しく実装すれば、ユーザーは位置情報に基づくサービスを牛耳っているような気になるでしょう。
10. ウェアラブル技術
モバイル機能に合わせたWebサイトの開発をやり遂げたと思っても、考慮すべきさらに小さな画面が存在します。Apple WatchやAndroid端末など、人々はテクノロジーを身に着けるようになっており、これらの画面で利用可能なアプリやWebサイトが増えています。ウェアラブルデバイスで使用できるWebサイトを開発することで、技術の最先端に立つことができるでしょう。
結論
開発者は常に社会の規範に挑み続け、ユーザーがWebサイトとインタラクションする独創的な方法を考え出しています。Webサイトの簡単なナビゲーションを考えることが重要です。そして、モバイルフレンドリーでありながら、ブランドに忠実で、ユーザーに馴染みのある一貫したデザインを作り出すことができれば、あなたが伝えたいことを見るために、ユーザーがサイトを出入りするようになるでしょう。
