国民一人ひとりがスマートフォンを一台以上保有する時代になりました。小さくて軽く、いつでも手軽に利用出来るスマートフォンがあるからこそ、さまざまなWebサイトへアクセスすることが容易になりました。
実際、PC端末からのアクセスとスマートフォン端末からのアクセス割合は25%:75%と言われており、日本国内のWeb検索の4分の3はスマートフォンから行われている事になります。
このような状況から、現代のWebデザインにとってスマートフォンを意識した「モバイルファースト」の考え方は必須項目と言えるでしょう。
また、Webサイトだけでなくスマホアプリの開発時にも、スマートフォンの特性を意識したUI/UXが必要不可欠です。
カメラ機能やGPS（位置情報）機能といったスマートフォンならではの搭載機能を有効的に利用する事は勿論のこと、ユーザーの指が届きやすい範囲やタップしやすいサイズなども、PCのそれとは違う視点が必要になります。
モバイルファーストへの意識について
スマートフォンの爆発的な普及により、Webデザインでは「モバイルファースト」の意識が重要になっています。
モバイルファーストと言ってしまうと、もしかしたら「PC向けWebサイトなどは不要なのでは？」と思われてしまうかもしれませんが、モバイルファーストの基本的な考え方は「PCユーザーもモバイルユーザーも共に使いやすいデザインを意識する」という事です。
早速ですが、モバイルファーストなUI/UXデザインを実現する為のポイントをまとめてみたいと思います。
ポイント1／PC版と同等の情報が取得出来るか
表示領域の小さなスマートフォン向けにWebサイトを作成する際、時折「情報量を減らして見やすさをキープしよう」という方向に舵を切っているサイトがあります。しかし、これはモバイルファーストの考え方には合致しません。
例えば「スマートフォンで商品情報を調べてみたけれど、詳しい内容はPC版Webサイトにしか掲載されていない為、改めてPCからアクセスし直した」という事になってしまっては、UX的にも失敗と言えますし、ユーザーの心証もあまり良くない物になります。
大切なのは「適切な情報表示UIを実装して、過不足の無い情報取得UXを実現する」事です。
ポイント2／シンプルで視認しやすいデザイン
スマートフォン向けデザインには物理的な画面サイズという壁が存在します。その為、1画面内のコンテンツ量は極力シンプルに構成し、ユーザーの視認性を確保する必要があります。
カラーバランスやテキストサイズも、小さな画面で表示されることを意識する必要があります。その際、当該Webサイトやアプリを利用するユーザーについて、事前にしっかりとペルソナを立てておくことも重要です。
例えば10代の学生をメインターゲットにする場合と、視力の低下が始まっている60代の方をターゲットにする場合では、適切なUIに差が生まれます。
ポイント3／指が届きやすい範囲を意識する
スマートフォンの場合、その操作性もPCとは異なります。指先で操作される事を前提として、ボタンのサイズや配置場所、ボタン同士の間隔を充分に取るなどを意識し、誤操作を極力回避できるUIが必要です。
親指が届きやすい位置に、よく使われる機能のボタンを配置したり、逆に余り使われない機能などは指の届きにくい位置に配置したりと、スマートフォンならではの操作性を意識したUIデザインが重要です。
ポイント4／軽量化とパフォーマンスの最適化
スマートフォンとPCでは、端末そのものの性能や通信速度にも差が生まれます。PCでは快適に利用出来ても、スマートフォンでは重たく感じるのでは、モバイルファースト視点では課題があると言えます。
モバイルファーストを意識する場合にはスマートフォンでも快適に利用出来るよう、出来るだけ軽量で快適に動作するデータ作りへの意識が必要です。
ポイント5／スマートフォンならではの機能を活用
スマートフォンとPCを比べると、その画面サイズや処理速度に差が出ると述べましたが、逆に「スマートフォンならではの優位な機能」も存在します。
例えばカメラ機能や位置情報機能、通話機能等です。
これらの機能を有効活用して、例えば「カメラでQRコードを読み込める機能」「タップするだけで電話が出来るボタン機能」「位置情報を取得して近隣のオススメを表示する機能」など、スマートフォンを利用するシーンで最も有効なUI/UXを検討する必要があります。
モバイルファーストのデザインは、単にスマートフォンに最適化するだけでなく、その利用シーンをしっかりと予想することで、機能的にもユーザー満足度を向上させることができます。
また、Webサイトの場合モバイルファーストである事はSEO的にも優位に働きます。
ユーザー目線でも自社目線でも優位な側面を持つモバイルファーストの考え方を取り入れる事が、現在のUI/UXデザインでは必須です。
スマートフォン向けデザイン作成の流れについて
スマートフォン向けかPC向けかによって、UI/UXデザインも違うものになるということはご理解いただけたかと思います。
それでは具体的に、スマートフォン向けのWebサイトやアプリ開発の場合のデザイン作成の流れを、UI/UXの視点も交えながら解説してみます。
ステップ1／ユーザーと利用シーンをしっかりと設定する
これから開発をするWebサイトやアプリについて「どんなユーザーに／どんな場所で／どのように使ってもらい／何を実現してもらうか」を事前に決めておくことが最初のステップになります。つまり、ペルソナ設定です。
ここでは、ユーザー側の事情と同じように、サービス提供者側の管理状況についても設定を練っておく必要があります。
ステップ2／要件定義
ステップ1で設定をしたペルソナを意識しながら、その想定ユーザーに提供する機能やコンテンツの具体的な内容を決めていきます。
その際、スマートフォン向けである事をしっかりと意識しましょう。
「画面サイズの制約／通信・処理速度の制約／スマートフォンならではの機能／どこでも使える利用シーンの広さ」など、PC向けの開発とは違う視点が必要になります。
ステップ3／構造を考える
スマートフォンの画面サイズの制約により、1画面内に多数の機能を持たせることは好ましくありません。必然、スマートフォン向けデザインでは、画面遷移の多さを意識する必要が出てきます。
「ユーザーが迷子にならない、分かりやすくスマートに目的を達成する」構造を実現するというのは、UI/UXデザインの腕の見せ所です。
ステップ4／ワイヤーフレームの作成
次のステップは「ワイヤーフレームの作成」です。この工程は、具体的なUIデザインに移る前の必須項目です。
ステップ3までの内容を踏まえて、具体的に画面の配置を決めていきます。この時点ではカラーバランスや具体的なコンテンツの作り込みはしません。全体的な構造を視覚的に起こしていく段階です。
この工程を踏むことにより、ページ内の情報量が適切か、機能面での過不足が無いか等、文書では気付けなかった部分に気付くことが出来ます。
ステップ5／デザインの作り込み
ステップ4で作成したワイヤーフレームを設計図として、いよいよ具体的なデザイン制作に取りかかります。
これまでに決めたペルソナ設定を振り返り、対象ユーザーにとって適切なカラーバランスになっているか、テキストサイズはどうか、コンテンツのボリュームは過不足無いか等を意識しながら進めます。
ユーザーが迷わずに目的を達成できるよう、UI/UXデザインが重要な役割を果たします。
ステップ6／テストと多角的な視点からのフィードバック
完成したデザインをテストします。その際、ディレクターや実際のユーザーにチェックしてもらう等、多角的な視点からのフィードバックも重要です。
デザイナー目線では有効だと考えていた機能やデザインが、実際のユーザーにとっても同じく有効であるとは限りません。
UI/UXデザインは、あくまでユーザーのための物です。最終的なユーザー視点を重視した作り込みが重要です。
スマートフォン向けUI/UXデザインの失敗例
ここまで、UI/UX目線を交えながらスマートフォン向けデザインの成功へのポイントを解説してきましたが、失敗例についても触れておきたいと思います。
例えば以下のようなUI/UXでは、ユーザーの離脱につながってしまう可能性が高まります。
スマートフォン向けに最適化されていない情報量
PC閲覧を前提とした大量の情報をそのまま表示させては、スクロールや画面遷移が多くなり過ぎます。WEBサイト制作の初期段階から、PCとスマートフォン両方で閲覧されることを意識したコンテンツ制作が必要です。
逆にスマートフォン向けに情報量を削りすぎて要点が伝わらない
「スマートフォンの画面的制約をクリアするために、情報量を大胆に削ってしまおう」というのは、一見するとモバイルファーストを意識した結果のように見えますが、そもそも必要な情報が不足してしまうような状況では、Webサイトとしての役割を果たせません。
待ち時間が長い
ローディングが長すぎるWebサイトや重たいアプリでは、ユーザーのリピートは望めません。これはPCユーザーでも共通ですが、スマートフォンユーザーの方が待ち時間についてはよりシビアであると言えます。
それは、利用シーンの差も大きく作用します。PCユーザーは基本的に座って落ち着いた状況でWEBサイトやアプリを使用します。時にコーヒーを片手に優雅に作業をしているかもしれません。
一方でスマートフォンでの利用シーンは、移動中であったり、ほんの一瞬の隙間時間であったりするユーザーが多数存在します。移動中に数秒待たされる事は、ユーザーにとって大変な苦痛になります。通信速度等を加味して、軽量で快適な設計が必要です。
タップしにくい
「指の届く範囲はどこか」「ボタン同士の距離は誤操作を回避できる間隔をキープ出来ているか」「ボタンサイズは適切か」という視点は、スマートフォンデザインでは基本になります。これらを軽視すると、そもそも操作できないWebサイトやアプリが完成してしまいます。
求められる入力項目が多すぎる
キーボード入力をするPCと比較すると、スマートフォンでの情報入力は必ずしも大量の情報入力には適していません。
その為、スマートフォン向けWebサイトやアプリでは、ユーザーによる情報入力の手間を出来る限り減らす努力が必要です。
広告が多すぎてメインコンテンツに辿り着けない
「目的のサイトにアクセスしたら、全画面広告が突然表示された」「大量の広告が表示され、しかも閉じる操作が困難だった」このような経験はありませんか？
このパターンは、説明の必要も無くご理解いただけると思いますが、ユーザーのことを考える事を放棄した状態であり、当然かなりの離脱につながります。
まとめ
スマートフォン向けWebサイトやアプリデザインでは、当然ながら「スマートフォンであるがゆえの制約」をしっかりと意識しなければなりません。
画面サイズやタップしやすい位置の把握、PCとは違い外で利用するシーンの想定も必要です。
また、カメラ機能や位置情報機能、通話機能等スマートフォンならではの機能面も考慮する必要があります。
スマートフォンからのサイトアクセスはこの先も増え続けると考えられますし、業務にスマートフォンを利用する企業も増加し、アプリの利用シーンも比例して増加する事が見込まれます。
PC向けとは異なる視点が必要となるスマートフォン向けUI/UXデザインですが、その重要性は今後も増していくことでしょう。
スマートフォンのUI/UXデザインやアプリ開発全般のご依頼、ご相談がございましたら、是非GeNEEまでご連絡いただけたらと思います。お客様のニーズや将来的な方針等を具体的にヒアリングした上で最適なソリューションのご提案をさせていただきます。こちらの問い合わせフォームからお気軽にお問い合わせください。
