アイキャッチ画像

PC版もちゃんと素敵!スマホ幅の見せ方を工夫したWebサイトデザイン事例7選(2022年6月)

スマホに特化したLP(ランディングページ)って、デスクトップ幅でみると違和感のある見た目になっていることがありませんか?または、そういうデザインを作ったというデザイナー読者さんもいるかもしれません。

私自身も、ターゲットユーザーがスマホ閲覧多い&制作スピードが求められる場合、デスクトップ幅の対応はそんなにやらないこともありますが…わかってはいてもモヤッとするものです。

そんな折、ここ最近

  • スマホ幅にしっかり特化しているけど、
  • デスクトップ幅でも綺麗にみせる工夫を凝らしたWebサイトデザイン

をちらほら目にするようになったので、改めて探してまとめてみました!

1. デスクトップ幅用のリッチな固定背景

メインのコンテンツはスマホ幅のまま、空いた領域を活かしてリッチな見せ方をしています。固定にしているので、デスクトップ幅用のデザインを作成する工数も少ないのもいいですね。

ほろよいのキャプチャ画像

ほろよい | サントリー

デスクトップ幅の方は、左右背景のイラスト調の缶がふわふわ浮いてるアニメーションが施してあります。

餃子の祭|名古屋パルコのキャプチャ画像

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

デスクトップ幅の方は、グリーンのベタと写真を大胆に使用して雑誌広告やポスターのようなレイアウトになっていますね。

2022春夏限定ヘアアイロン-SALONIA(サロニア)公式サイトのキャプチャ画像

2022春夏限定ヘアアイロン | SALONIA(サロニア)公式サイト

左右の背景は固定するだけでなく、スクロールで変化するパララックス効果も加えています。

2. 余白を活かしたサイドメニュー配置

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

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

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

ページ内リンクで日付ごとにコンテンツと連動していて見やすくなっていますね。

キミの感想をふせんに!生声つきブルーロックのキャプチャ画像

キミの感想をふせんに!生声つきブルーロック(制作:RYDEN Inc.

スマホ幅のメニューをデスクトップ幅で外に出している形なのですが、メニューもしっかり作り込まれているので違和感がありません。

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

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

KPP 10th Anniversary Special Websiteのキャプチャ画像

KPP 10th Anniversary Special Website

STARTボタンを押すと画像が切り替わる遊び要素や、左下のトグルスイッチでメインビジュアルが切り替わったりと、リッチなギミックが施してあります。

EMIOZAKI WEBのキャプチャ画像

EMIOZAKI WEB

最初はスマホの待受け画面になっており、スワイプするとProfileなどメニューごとのアプリアイコンが表示されます。ポートフォリオサイトでイラスト作品の見せ方としても素敵ですね。

以上、スマホ幅に特化したサイトをピックアップしてみました!
私もスマホ幅に特化したデザインを作る際は、デスクトップ幅のデザインも提案してみたいなと思いましたよ。

もし、みなさんも素敵なスマホ特化のサイトデザインを見つけたら、ぜひTwitterでデザインメモの投稿を引用RT or この記事のURLをつけたりして教えてください!