制作・見積り依頼(無料)

Blogブログ

ブログのイメージ

「デスクトップでもモバイル幅」なサイトデザイン

Design2022.08.17 : Kihara Hiroki

モバイルファーストが当たり前になっているウェブ業界。
弊社で制作させていただいたホームページも、モバイルからのアクセス比率の方が高いということがほとんどです。
私自身も仕事以外のちょっとした調べ物であればスマートフォンで済ませてしまいますし、
パソコンをお持ちでない方もどんどん増えてきているのではないでしょうか。

じゃあホームページもモバイル向けのデザインだけでいいじゃないか!という考えも当然出てくるわけですが、
最近「デスクトップでもモバイル幅」で素敵に表現しているパターンをよく見かけるようになりました。
そんなページたちを見ていきたいと思います。

マジックインキ×RAGEBLUE

https://www.dot-st.com/m/cp/rageblue/magicink

ダンボールっぽい背景テクスチャもナイス

アパレルブランドの例。
モバイル幅のコンテンツが真ん中にドン!で、左にナビゲーションを配置しているパターンです。
右下のマジックインキもナビゲーションになっていて素敵。

思い出をおしゃれに彩る〈Beams mini〉でつくる夏の7DAYSコーデ

https://www.beams.co.jp/special/beamsmini/kids_7days/

右下のクマかわいい

こちらもアパレルです。
コンテンツは右に寄せて、左にタイトルとナビゲーションが配置されています。
夏っぽい色合いが良いですね。

ももち(牛江桃子)プロデュース。1dayカラコン LOUER(ロアー)公式サイト

https://www.louer.jp/

QRコードが潔い

カラコンの商品ページです。
こちらも右にコンテンツをレイアウトしていますが、左側にはタイトルとQRコード。これはもうスマホで見よということですね。

ほろよい | サントリー

https://www.suntory.co.jp/rtd/horoyoi/

背景にうごめく大量の缶チューハイたち

最後はチューハイのLP。
大胆に背景を商品のイラストで埋め尽くしていますが、余白を感じさせないナイスアイデアです。
テレビCMと連動している感じも良いですね。

まとめ

「デスクトップでもモバイル幅」なページをご紹介しました。
ランディングページやキャンペーンページ向きな印象ですが、ターゲットによってはアリ寄りのアリ、良い手法だな〜と思います。
モバイルを優先しつつ、パソコンで見るとまた違った見え方になるのも面白いですね。
技術的には非常にシンプルなものですが、アイデア次第で表現の幅も広がりそうです。

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)