目次
1. PC→タブレットのブレイクポイントの直前を考慮する
実寸サイズでデザインしているとなかなか気づきにくいのですが、左右のスペースにボタンやナビなどを入れる場合、
ブレイクポイント付近で表示が隠れたり潰れたりする可能性があります。
また、ロゴを配置する場合はロゴのアイソレーションに抵触する可能性もありますので、余白には特に気を配りましょう。 そのため、ナビなどのデザインは下記のような工夫が必要となります。
- ・ボタンの幅を広く取りすぎない
- ・画面幅にあわせて要素を縮められるようにする（縮めすぎないように注意）
- ・ハンバーガーメニューを採用する
- ・そもそも左右のスペースにUIを置かない
- ・ブレイクポイントを細かく設定する
- ・ブレイクポイントを早めてしまう
ハンバーガーメニュー＋左右にUIを置かない例
ブレイクポイントが1024pxの例
2. タブレットのデザインを考慮する
モバイルファーストデザインで頭を悩ませるのがタブレットデザイン。
特に１でブレイクポイントを早めた場合、画面が広すぎてボタンが押しにくくなったり、画像が拡大されすぎて荒れてしまうケースも。
モバイルファーストでもタブレットは置き去りにしないよう、画面デザインは用意するのが望ましいです。
3. そもそもモバイルファーストにする必要性があるのか考慮する
近年のトレンドとされているモバイルファーストデザインですが、ユーザーの大半がPCを使っているようなケースではあまり有効ではありません。
情報の取得できるエリアが狭く見づらかったり、左右の装飾が過度だと集中してサイトを閲覧できなかったりといった問題が発生します。
あくまでもスマートフォンでの閲覧がメインであることを念頭に置いておきましょう。
4. PCとスマホで情報に過不足が無いか確認する
PCデザインの左右に好きな要素を追加できる分リンクやボタンなどを追加しがちですが、
スマホから閲覧した際にも同様の情報にアクセスできるように調整しておきましょう。
CVボタンがPCでは右下、スマホでは画面下に移動する例
モバイルファーストデザインはあくまで手段
ギミックの目新しさから注目されやすいモバイルファーストデザイン。
とはいえ、サイトの目的や伝えたい情報、閲覧するユーザーなどを踏まえた上で「選択肢の一つ」として頭に入れておくと良さそうです。
