デスクトップでもスマホ幅のデザイン!? 見せ方を工夫したWebサイトデザイン事例19選

はじめに

スマホに特化したLP（ランディングページ）って、デスクトップ幅で見ると違和感を感じることがありませんか？または、そのようなデザインを作ったというデザイナーの方もいらっしゃるかもしれません。

私自身も、ターゲットユーザーがスマホ閲覧が多く、制作スピードが求められる場合、デスクトップ幅の対応をあまり重視しないこともありますが…それでも、何となく物足りなさを感じることがあります。

そんな折、ここ最近、スマホ幅にしっかり特化したデザインでありながら、デスクトップ幅でも見栄えの良いWebサイトをちらほら目にするようになりました。そのようなデザインにはどのような工夫がされているのか、改めてまとめてみました！

本題に入る前に、少し背景をお話しします。モバイルは幅が狭く、デスクトップは幅が広いため、通常はそれぞれのデバイスに合わせてWebサイトの幅を調整しますよね。しかし、最近はデスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけるようになりました。

今回は、そんなモバイル幅のWebサイトをご紹介します。

1. スマホ幅の外側はリッチな固定背景

メインコンテンツはスマホ幅のまま、空いた領域を活かして背景固定で、おしゃれなイラストや写真を大きくリッチに見せています。固定にしているので、デスクトップ幅用のデザインを作成する工数も少ないのもいいですね。

ほろよい ｜ サントリー

餃子の祭｜名古屋パルコ RESTAURANTS &FOODHALL

美味しい、楽しい、新しい！ペヤングのある日常 | ニコアンド

狂ATE the FUTURE

キミの感想をふせんに！生声つきブルーロック

ワコール：ボディケアかるた

ドラマチックカリーゴールデン中崎

ゆうこす公式サイト

2. スマホ幅の外側にサイドメニュー配置

スマホ幅のコンテンツの外側、左右いずれかにメニューを置いて、スマホ幅の弱点である縦に長いコンテンツを閲覧しやすくしたりしています。

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

OPANTSU-KUN×SMOOTHSKIN｜SMOOTHSKIN

マジックインキ×RAGEBLUE | RAGEBLUE

女子美術大学

タカオノカタヲ

Salanaru

HugMug

ネオイザカヤ

THE FIRST TAKE

3. スマホアプリ風に表現

これまでのサイトとも全く違う見せ方！メインのコンテンツをスマホアプリ風に寄せて、デスクトップ幅では上下左右中央に配置したり、モバイル端末にはめ込んだような見た目にしています。

KPP 10th Anniversary Special Website

EMIOZAKI WEB

まとめ

以上、スマホ幅に特化したサイトをピックアップしてみました！

閲覧者のほとんどがスマホで見ることが想定される場合、デザインのコストを下げつつ、でもデスクトップ版もおしゃれに作りたい….

そんな時は「デスクトップでもスマホ幅のデザイン」を活用してみましょう！

こんなHPが最短3日、30,000円〜で作れます！

もし良ければお気軽に、「こんなサイト作れる？」などご相談ください！