blog

ブログ

  1. top
  2. blog

最近気になるwebデザイン。モバイルファーストなレイアウト!

スタッフブログ

こちらも
読みます?
ほう!

こんにちは、安藤です。

今回は私が最近気になってるモバイル端末に特化したレイアウトを採用したサイト、超モバイルファーストなサイトを紹介したいと思います。

(※超モバイルファーストとは安藤が勝手に呼んでいるだけです)

超モバイルファースト(以下、超モバ)とは???という方、はいこちら!

 

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

こちらはSALONIA春夏限定ヘアアイロンのスペシャルサイト

PCで見ると真ん中にスマホのレイアウトがそのままはめ込んであり、左側にはロゴ、右側にはメニューというシンプルなつくりになっています。右下にはスマホへの誘導のためのQRコードもあり、スマホで見てくださいね!というスマホメインのサイトになっています。

コーポレートサイトよりも、特設ページや主にスマホを使う層がターゲットのサイトなどに向いてそうですよね。

いくつか良き!と思った超モバなサイトを紹介していきます。

 

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

こちらはBEAMSminiの特設サイト

【左側:メニュー / 右側:スマホのレイアウトコンテンツ】という構成になっています。

先程のSALONIAのサイトもそうですが、スマホのサイトはどうしても縦長のコンテンツになってしまいがちで、それをPCで見るとスクロールが大変…という部分を左側のメニューでフォローしています。

写真に手書き風イラストが添えてあってとっても可愛くて、ママ受けよさそうですね!

 

Salanaruプレスキンケアブランド

お次はプレスキンケアブランドSalanaruの公式サイト

こちらも【左側:メニュー / 右側:コンテンツ】の構成になっています。

こちらのサイトは右のコンテンツをスクロールしていくと、それに応じて左の写真が変わっていきます。この一工夫があることで、PCユーザーも最後まで飽きずにスクロールできるように感じました。

 

THE FIRST TAKE

こちらはTHE FIRST TAKEのサイト。

こちらは【左側:イメージ画 / 右側:コンテンツ】の構成になっています。

今までのサイトとは違いメニューは表には出てきていませんが、縦にそこまで長くないデザインなので、PCでも気持ちよく見ることができます。

暗めの写真に彩度高めのラインが映えますね!かっこいい。

 

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

最後は漫画「ブルーロック」のキャンペーンサイト

【左側:イメージ画 / 真ん中:コンテンツ / 右側:メニュー】の構成になっています。

ボリュームのあるコンテンツですが、スクロールするとテンポよくアニメーションが入ってくるのでPCで見ても気持ちよく最後までスクロールしちゃいます。

ただメインの漫画を見る部分は、操作性も含めやはりスマホで見たほうが見やすいですね。

超モバサイトなので、やはりメインはスマホユーザーですね。

超モバなサイト、いかがでしたか?

このレイアウトは、情報量が多くなりがちなコーポレートサイトや通販サイトには難しそうですが、情報量がそこまで多くない特設サイトやキャンペーンサイトなどにハマりそうだな!と思いました。

超モバサイトは昨年からちらほら目にするようになりましたが、今年になってグッと増えているので、もしかしたらトレンドになるかも…!

超モバではないですが、モンブランもいろいろなもの作ってます!こちらも是非チェックしてみてください!

 

→モンブランの変わったものについてはこちら