こんにちは、安藤です。
今回は私が最近気になってるモバイル端末に特化したレイアウトを採用したサイト、超モバイルファーストなサイトを紹介したいと思います。
(※超モバイルファーストとは安藤が勝手に呼んでいるだけです)
超モバイルファースト(以下、超モバ)とは???という方、はいこちら!
こちらはSALONIA春夏限定ヘアアイロンのスペシャルサイト。
PCで見ると真ん中にスマホのレイアウトがそのままはめ込んであり、左側にはロゴ、右側にはメニューというシンプルなつくりになっています。右下にはスマホへの誘導のためのQRコードもあり、スマホで見てくださいね!というスマホメインのサイトになっています。
コーポレートサイトよりも、特設ページや主にスマホを使う層がターゲットのサイトなどに向いてそうですよね。
いくつか良き!と思った超モバなサイトを紹介していきます。
こちらはBEAMSminiの特設サイト。
【左側:メニュー / 右側:スマホのレイアウトコンテンツ】という構成になっています。
先程のSALONIAのサイトもそうですが、スマホのサイトはどうしても縦長のコンテンツになってしまいがちで、それをPCで見るとスクロールが大変…という部分を左側のメニューでフォローしています。
写真に手書き風イラストが添えてあってとっても可愛くて、ママ受けよさそうですね!
こちらも【左側:メニュー / 右側:コンテンツ】の構成になっています。
こちらのサイトは右のコンテンツをスクロールしていくと、それに応じて左の写真が変わっていきます。この一工夫があることで、PCユーザーも最後まで飽きずにスクロールできるように感じました。
こちらはTHE FIRST TAKEのサイト。
こちらは【左側:イメージ画 / 右側:コンテンツ】の構成になっています。
今までのサイトとは違いメニューは表には出てきていませんが、縦にそこまで長くないデザインなので、PCでも気持ちよく見ることができます。
暗めの写真に彩度高めのラインが映えますね!かっこいい。
【左側:イメージ画 / 真ん中:コンテンツ / 右側:メニュー】の構成になっています。
ボリュームのあるコンテンツですが、スクロールするとテンポよくアニメーションが入ってくるのでPCで見ても気持ちよく最後までスクロールしちゃいます。
ただメインの漫画を見る部分は、操作性も含めやはりスマホで見たほうが見やすいですね。
超モバサイトなので、やはりメインはスマホユーザーですね。
・
・
・
超モバなサイト、いかがでしたか?
このレイアウトは、情報量が多くなりがちなコーポレートサイトや通販サイトには難しそうですが、情報量がそこまで多くない特設サイトやキャンペーンサイトなどにハマりそうだな!と思いました。
超モバサイトは昨年からちらほら目にするようになりましたが、今年になってグッと増えているので、もしかしたらトレンドになるかも…!
超モバではないですが、モンブランもいろいろなもの作ってます!こちらも是非チェックしてみてください!