モバイルファーストデザインについて
こんにちは！２月は２８日までなのであっというまな気がしますね。
最近サイトレビューしている際、モバイルファーストのサイトをよく見かけるので、今回はモバイルファーストのサイトについてと、参考サイトをいくつかご紹介したいと思います。
1.そもそもモバイルファーストとは？
「モバイルファースト」 とは、スマートフォン向けのデザインがより重要視され、スマホを利用するユーザーが最も快適な状態になることです。
つまり、スマートフォン向けのサイトを先に作ったからといってモバイルファーストになる訳ではないそうです。作る順番は関係ないということですね。
2.モバイルファーストデザインで気を付けること
・レスポンシブ化
モバイルファーストのデザインではPCデザインをそのままモバイルデザインにしてしまうとフォントサイズが小さく読みにくくなってしまうため、基本レスポンシブデザインを用います。これはスマートフォンの普及によって、すでに一般化されてきていますね。
・タッチ操作
スマートフォンはPCと異なってクリックではなくタッチで操作を行います。そのため、ボタンの大きさやボタン同士の間隔にも気を付けなければいけません。
AppleとGoogleのタップ領域についてのガイドラインを見てみます。
Apple
”Try to maintain a minimum tappable area of 44pt x 44pt for all controls.”
（すべてのコントロールで、タップ可能な最小領域を44pt x44ptに維持するようにしてください。）
”For most platforms, consider making touch targets at least 48 x 48 dp. A touch target of this size results in a physical size of about 9mm, regardless of screen size.”
（ほとんどのプラットフォームでは、タッチターゲットを少なくとも48 x 48dpにすることを検討してください。このサイズのタッチターゲットは、画面サイズに関係なく、約9mmの物理サイズになります。）
こちらの記事にもボタンサイズについて詳しくまとめられておりました。https://uxmilk.jp/81679
3.モバイルファーストの参考サイト
・ iPhoneデザインボックス
・ WenDesignClip
・SANKOU! sp
そしてこちらは、PC表示でもモバイル表示にし、画面上に生じてしまう余白も上手くデザインしていると思ったサイトです。
・Salanaru
左右に余白があって真ん中にページが配置されているものはよく見かけますが 右にページ配置されているものは中々見かけませんね！
右のページのスクロールに合わせて左エリアの画像が切り替わるのも
良いなと思いました。
・餃子の祭 | 名古屋パルコ RESTAURANTS &FOODHALL
こちらは真ん中にページが配置され、左にイベントの期間や場所など
重要事項を記載することで余ったエリアを上手く使っていると思いました。
簡単なご紹介でしたが今回はこの辺にしたいと思います！