はじめまして。デザイナーのけんてぃです。
普段はキャンペーンサイトやサイトのリニューアル系の案件をメインに、日々デザイン業務に取り組んでいます。
さて、Webデザインをしているなかで、クライアント様からのご要望で多いのがモバイルでの見せ方を良くしてほしいというオーダー。いざ設計、デザインしようと思ったとき、PCとモバイルでは、ウィンドウサイズや使うシーンが違うので、いろいろなことを考慮してデザインしなければなりません。
その際、いかにPCとモバイルのデザインを一緒に考えてサイトの世界観を作り込めるか、そして試行錯誤できるかが、最近の私の課題であり、楽しみでもあります。
そこで今回は、デザインをしていくなかで見つけた、モバイルで見たときでもPCで見たときでもイケてる！ 参考にしたい！ と思えるサイトを5つ紹介しようと思います。
今回は、2017年からよく見るようになった縦に長いアスペクト比のイメージを用いるサイトに焦点を当てて紹介します！
目次
モバイルでもPCでもイケてるサイト5選
1. JEANASIS media
https://www.dot-st.com/cp/jeanasis/jeanasis_media
こちらは女性服ブランド「JEANASIS」のメディアサイトです。
初めてこのサイトに訪れたとき、まるでおしゃれな雑誌を見ているかのような気持ちになりました。スライダーがMVで使われる際は横長の画像を入れることがセオリーでしたが、このサイトでは縦長の画像を3点も使用していて、しかもそれでも成り立っていて……。モバイル、PCどちらから見たときでもおしゃれ！ イケてる！ というデザインに心震えました。
ファッションメディアとして1番見てほしいファッションアイテムを、縦長比率のアイキャッチで綺麗に見せられるので、クライアントさんからのオーダー、ユーザーのニーズにも適っていて素敵ですね！
個人的に下層ページのキービジュアルにおける、PCとスマホのいい感じな差異が好きです！
https://www.dot-st.com/cp/jeanasis/media_easystyle
2. SUPER CROWDS
こちらは北参道にある制作会社「SUPER CROWDS」さんのコーポレートサイトの会社紹介ページです。
ページ遷移や細かなインタラクション、どれを取ってもおしゃれですね！ このページではメインビジュアルと社員紹介のセクションに、縦に長い画像を効果的に入れています。
縦に長い画像は目を惹きやすく、視線を下に促す効果があるので、自然とスクロールしてしまいます。トレンドをただ取り入れるだけでなく、機能面でも活かせているところに脱帽です。
ノイズの効いた深めのシャドウやパララックスなど、去年から今年にかけて流行っているデザインをうまく取り入れていて、1日中回遊したくなるようなサイトです！
3. POGG スイートポテトパイ専門店
https://pogg-sweetpotatopie.com/
（※2021年にクローズ。現在はサイトも削除されています。）
こちらは「株式会社BAKE」のNEWブランド「POGG」のブランドサイトです。
ノングリッドレイアウトのデザインは海外のサイトでよく見られるデザインなのですが、このサイトが他のサイトよりも秀でているところは、縦長の画像と横長の画像がうまく組み合わさっていて、さらにモバイルでもPCでもほぼ同じ見せかたを可能にしているところ！
2018年で1番驚きを覚えました。そして何より、美味しそう！！
4. デサントオルテライン公式サイト
http://allterrain.descente.com/
スポーツウェアブランド「デサント」のコレクションである「オルテライン」のブランドサイトです。
ショーケースのような世界観に振り切った、尖ったサイトでかっこいいです。スクロールに合わせてイメージが歪む演出が憎い……！ 買い物をしていて、ラックに掛かっている服を探すときと同じように、ついつい上に下にとスクロールしてしまいました。
5. METoA Cafe & Kitchen
東急プラザ銀座にオープンしたオーストラリアカフェ&レストランのサイトです。
雑誌のようなレイアウトでリズムを取り、セクションごとの区切りを明確にせずとも展開しているところが素敵ですね。
画像と文字が被り、なおかつどんな画面幅でもオシャレに見せているところが繊細で、しかも職人根性のようなものが垣間見えてたまらなく好きなデザインです。
まとめ
どのサイトもトレンドをバッチリ押さえているだけでなく、モバイルやPCで見た際にも、デザインの効果が発揮できそうなイケてるサイトばかりでしたね。
ブランド、プロダクトの魅力を引き出せるレイアウトは、今後ものづくりをするうえでとても参考になりそうです！
みなさんも、ぜひ参考にしてみてください。それではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
