モバイルファーストなサイトを制作するには

webサイトの制作は、ユーザーの環境に合わせて制作する事が重要です。

• モバイルファースト
• 小さな画面
• メニュー
• プログレスバー
• スマホ表示での工夫
• 改善
• まとめ

 

モバイルファーストとは

webサイトの制作は、ユーザーの環境に合わせて制作する事が重要です。現在、webサイトの閲覧をスマートフォンから行う人がとても多くなってきています。その為、モバイルファーストとは「利用率の高い、スマホからのアクセスを意識した制作」という考え方になります。

小さな画面

スマホは、PCと比べ「画面が小さく横幅が狭い」という点があります。更に指でタップする操作方法という点もPCとは異なります。では、スマホからの閲覧で「操作しやすい」デザインとはどのようなものでしょうか。

上記の様に片手で操作する人が多いのではないでしょうか。その場合、親指の届く範囲に使用頻度の高いコンテンツを置いた方が、使い勝手が良いですね。スマホを持ち変えたり、もう片方の手を使わずに済むので手間がかかりません。

また、指でタップする時に「コンテンツ同士の距離が近い」と、押そうとしていないものを押してしまうという事が起こってしまうかもしれません。コンテンツが小さすぎても押しにくいですね。ですので、ユーザーがタップするコンテンツは「適度な大きさ」と「コンテンツ同士の距離を離す」事が重要です。

メニュー

PCサイトの様に、ナビゲーションメニューを常に表示させておく設計はスマートフォンには向いていないかもしれません。狭い画面範囲が更に狭くなり、ナビゲーション以外のコンテンツの配置が制限されてしまうからです。では、スマートフォンにも最適なメニュー表示の方法をみていきましょう。

ハンバーガーメニュー

ハンバーガーメニューは、様々なスマホサイトで採用されています。アイコンを押すと、メニューが現れる仕組みがあるとき、その「アイコン」をハンバーガーメニューと呼びます。

沢山のメニューを隠してしまっておく事が出来ます。以下は「youtube（スマホ表示）」のハンバーガーメニューです。押すと、画像右のようなメニューが表示されます。

https://youtube.com/

「youtube」では、PC表示でもハンバーガーメニューが使われています。

この２つの例はそれぞれ別の方式が使われています。スマホの方は、キャンセルを押さないと元の画面での操作が出来ない「モーダルウィンドウ」です。PCの方は「ドロワー」になっています。ドロワーとは、横方向に開閉するタイプのメニューです。

これらは、狭い範囲にも沢山のメニューを格納出来るという利点があります。しかし、下の階層ページに行くためには、ハンバーガーメニューとメニューの２回のクリックが必要です。

ですので、使い勝手を考慮すると頻繁に使うメニューや重要なコンテンツは、格納してしまわず表示させておく方が良いでしょう。以下は「youtube（スマホ表示）」のホーム画面です。

サイト内で頻繁に使用されるであろう「ホームボタン」や「アカウントページボタン」が、ドロワーなどにしまわれず表示されています。このように、コンテンツの使用頻度や重要度によって、表示させておくか格納するか決めていきましょう。

プログレスバー

プログレスバーとは、進捗状況をユーザーに示すものです。ページ等の読み込みに時間がかかる場合などに「あとどのくらい待てばよいのか」を表示させます。スマホユーザーは特に、待ち時間が長い場合に離脱してしまう傾向にあります。ですので、待ち時間を表示する事で離脱を防ぐ目的があります。

図だけではなく、上記の様にテキストで示すとより分かりやすいですね。

スマホ表示での工夫

スマホは画面が小さいので、狭い範囲にいかに分かりやすくきれいにコンテンツを配置していくかが重要です。その為には、様々な工夫が必要ですね。ハンバーガーメニューなども工夫の一つです。では、他にどのような工夫ができるでしょうか。以下は「apple」のスマホ版サイトです。

https://www.apple.com/jp/

上記はサポートのページです。サポートについてのメニューが、画像の上に配置されています。展開できるメニューだと分かりやすくするために「アイコン」も使われています。

このように、狭い範囲内でも工夫次第で使い勝手を損なわずにレイアウトしていくことが出来ます。スクロールも多すぎると手間になりますので、出来るだけスクロールの必要がないようデザインしていきましょう。

また、「ピンチ」というスマホ独特の操作も考慮する必要があります。「ピンチ」とは、２本の指で拡大や縮小を行う事です。ピンチも出来るだけ行う必要がないように、コンテンツのサイズなどに気を配りましょう。

ボタンなども、男性の指と女性の指ではタップしやすい大きさが異なります。どのユーザーでも操作しやすいように、設計していくことが重要です。

改善

ここまで学んできた事に基づいて制作したとしても、実際に公開しユーザーに使ってもらう中で問題点が上がってくることもあるでしょう。その場合、改善しようと修正を加えていくことになるかと思います。

しかし、使い勝手に繋がる部分を大幅に変更してしまうのはユーザーにとって良いことばかりではないかもしれません。「ルックアンドフィール」の項目で「ユーザーは操作方法等を学習していく」というお話をしました。

たとえば「予約ボタンはこの位置」という事でなれていた場合に、変更が加えられてしまうとどうでしょうか。ユーザーは、予約ボタンを探し直さなくてはなりませんし、新たな位置になれるまでは不便に感じるのではないでしょうか。

このように、改善のつもりが「かえってユーザーにとっての使い勝手を、損う事になっていないか」に注意する必要があります。

まとめ

モバイルファーストとは「利用率の高い、スマホからのアクセスを意識した制作」という考え方のことです。

どのユーザーでも操作しやすいように、設計していくことが重要となります。また、改善のつもりが「かえってユーザーにとっての使い勝手を、損う事になっていないか」に注意して設計していきましょう。