「デスクトップでもモバイル幅」なサイトデザイン
モバイルファーストが当たり前になっているウェブ業界。
弊社で制作させていただいたホームページも、モバイルからのアクセス比率の方が高いということがほとんどです。
私自身も仕事以外のちょっとした調べ物であればスマートフォンで済ませてしまいますし、
パソコンをお持ちでない方もどんどん増えてきているのではないでしょうか。
じゃあホームページもモバイル向けのデザインだけでいいじゃないか！という考えも当然出てくるわけですが、
最近「デスクトップでもモバイル幅」で素敵に表現しているパターンをよく見かけるようになりました。
そんなページたちを見ていきたいと思います。
マジックインキ×RAGEBLUE
https://www.dot-st.com/m/cp/rageblue/magicink
アパレルブランドの例。
モバイル幅のコンテンツが真ん中にドン！で、左にナビゲーションを配置しているパターンです。
右下のマジックインキもナビゲーションになっていて素敵。
思い出をおしゃれに彩る〈Beams mini〉でつくる夏の7DAYSコーデ
https://www.beams.co.jp/special/beamsmini/kids_7days/
こちらもアパレルです。
コンテンツは右に寄せて、左にタイトルとナビゲーションが配置されています。
夏っぽい色合いが良いですね。
ももち（牛江桃子）プロデュース。1dayカラコン LOUER（ロアー）公式サイト
カラコンの商品ページです。
こちらも右にコンテンツをレイアウトしていますが、左側にはタイトルとQRコード。これはもうスマホで見よということですね。
ほろよい ｜ サントリー
https://www.suntory.co.jp/rtd/horoyoi/
最後はチューハイのLP。
大胆に背景を商品のイラストで埋め尽くしていますが、余白を感じさせないナイスアイデアです。
テレビCMと連動している感じも良いですね。
まとめ
「デスクトップでもモバイル幅」なページをご紹介しました。
ランディングページやキャンペーンページ向きな印象ですが、ターゲットによってはアリ寄りのアリ、良い手法だな〜と思います。
モバイルを優先しつつ、パソコンで見るとまた違った見え方になるのも面白いですね。
技術的には非常にシンプルなものですが、アイデア次第で表現の幅も広がりそうです。
