スマホファーストなWebサイトデザイン5選

こんにちは、monomodeデザイナーチームです！
最近はスマホでサイトを閲覧するユーザーのためにスマホファーストを意識したWebサイトが増えてきました。
今回はそんな小さな画面でも最適な操作性や優れたデザイン表現を取り入れている、素敵なwebサイトデザインをご紹介していきます。

SALONIA(サロニア)・2022春夏限定ヘアアイロン

https://salonia.jp/limited/spring2022/

美容家電ブランド「SALONIA(サロニア)」限定ヘアアイロンのプロモーションサイト。
優しいカラーリングやふわふわとしたモチーフが心地よく、コンセプトの「着飾らない絶妙なリラックスさ」を表現しています。
パラパラ漫画のように動く使用イメージの写真も、読み進めていくときのアクセントになっていてかわいいですね。
PCブラウザでは、コンテンツ両脇の背景でサイト全体に使用されている流体のモチーフが動いていたり、スクロールに併せてイメージ写真変化したりと飽きさせない工夫がなされています。

EMIOZAKI WEB

https://emiozaki.com/

イラストレーター＆アーティストのオザキエミさんのポートフォリオサイト。
URLを開いてみてびっくり、可愛いイラストが壁紙に設定された、スマホのロック画面のようなデザインが展開されます。スワイプすると今度はアプリアイコンを模したコンテンツがたくさん並んでおり、タップすると各アプリが起動しているようで、不思議な感覚になれます。
もちろん、サイトのあちこちにいるキャラクターのイラストが可愛くて隅々まで見てしまう楽しさです。
PCブラウザではスマホのモックアップが追加されており、ここでもスマホを実際に触っているような体験ができます。カーソルの表現なども注目です。

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

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

BEAMS miniのキャンペーンサイト。
紙の上にコラージュしたり、手書きの文字やイラストがかわいらしい、コンテンツ全体が7DAYSコーデを記録するカレンダーのようなデザインです。
写真にあわせた手書きイラストがアニメーションで変化していくのも、webデザインならではの表現で楽しい！
PCブラウザではコンテンツメニューが目次のようにシンプルにレイアウトされています。メインビジュアルにさりげなく登場するクマのぬいぐるみがこちらでは重大な仕事を任されているようですね。

Salanaru(サラナル)

https://salanaru.jp/

プレスキンケアブランド「Salanaru」のブランドサイト。
動画を効果的に用いて、上品で洗練された世界観が演出されています。
ハンバーガーメニューを開いた時などにふわっと現れるアニメーションも、女性らしさやみずみずしさを感じます。

PCブラウザではコンテンツの左側でイメージ写真を複数展開。コンテンツを引き立てるようなカラーリングで、すっきり広々とした優しい印象が伝わる素敵なサイトでした！

マジックインキ×RAGEBLUE

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

「マジックインキ」とレイジブルーのコラボレーションキャンペーンサイト。
マジックインキでキュキューッと書いたような文字やアニメーションの動きが軽快で目を引きます。
ラフで少し個性的な商品の特徴がよくわかる、楽しさが伝わってくるデザインですね。ほしい！！
PCブラウザではスクロールに合わせてマジックインキが動き、カラーが変化していったりと、より「紙に描かれている」アナログな雰囲気が引き立っています。ほしいな！！

いかがでしたか？
どのサイトもスマホで見ることに特化したデザインながら、PCブラウザではまた違う楽しみ方ができて、そんなアイデアに脱帽してしまいますね。
どんなデバイスを使う人にも、等しく商品やサービスの魅力を伝えられるように工夫されたWebデザインに今後も注目していきたいと思います！

また次回！