こんにちは。クリエイターのKです。
最近モバイルファーストのWebサイトをたくさん目にするようになりました。
PCでサイトを見た時でもコンテンツ自体はスマホサイズの幅で表示されていて、余白はナビゲーションとして使ったり飾り背景を敷いたりして画面を構成しているようなものです。
▼みんなでつくる、キャリアの地図2022年｜#キャリアの地図
モバイルファーストのサイトの一番の利点は、やはりレスポンシブ対応をしなくてよいということでしょう。
デバイスごとの見え方を考慮しなくていいので制作の手数もぐっと減ります。サイトを閲覧するユーザーのスマホ使用率が高ければ、わざわざPCの見た目を作るのも少し勿体ないですしね。
また、デバイスが異なっても同じUIを提供できるという点は、ユーザー目線で考えても、とても合理的な手法と言えます。
目次
サイト紹介
買うより可愛くできちゃった♡ 簡単クリスマススイーツ | HugMug
サイト：https://hugmug.jp/feature/137257
こちらは手作りのクリスマススイーツを紹介しているLPです。ジャンルとしては読み物系のページです。
背景はシンプルに白ですが、スナップ写真や記事ランキング記事カテゴリ一覧などを設置して、気になるコンテンツにすぐに飛べるような作りになっています。
スクロールするとバナーも設置されており、PCのほうではより気になるコンテンツへ飛びやすい作りになっているなと感じました。
『城郭合体オシロボッツ』公式サイト
サイト：https://oshiro-robots.com/
このサイトは思い切りビジュアルをどーん！と大きく配置して、メインコンテンツよりもぱっと見でかなり目立たせています。
メインコンテンツを端に配置しているサイトもいくつかありますね。
さささ 和晒ロール
こちらは画面を中心で真っ二つに分けて、右側は動画のエリアとして活用しています。商品の利用シーンがよく伝わってきます。
SHOP | EMIOZAKI WEB
こちらはとっても独創的で印象に残ります…！
背景イラストのパンチはさることながら、擬似的にスマホ本体を中央に置いているように見せています。縦幅いっぱいにスクロールさせるものが多い中、このデザインはとても目立ちます！
若年層はスマホを使って買い物をすることが多いので、こういったショッピングサイトはモバイルファーストなデザインと親和性がありそうですね。
まとめ
いかがでしたか？
様々なサイトをご紹介しましたが、PCでの表示は余白の使い方がキモとなっています。
もちろんスマホコンテンツだけでもサイトとして十分成り立つのですが、せっかくの空間は有効活用！ということでQRコードやバナーを設置したり、人気記事ランキングを見せたり、動画を設置したり…。ナビゲーションを配置して遷移しやすくさせることもできます。
コンテンツ外の部分でいかようにも世界観を補完したり、使い勝手をアップしたりできますね。
今後更にモバイルファーストのサイトが増えてくる予感がします！
最後までお読みいただきありがとうございました。
