これからのレスポンシブ対応ってサイドバーが当たり前になってくるんじゃないかなと思いました。

まずはこのサイトを見てください。

資生堂　INTEGRATE

きっかけは資生堂のインテグレートのCM

ふとテレビを見ていたら、資生堂のインテグレートのCMをやってまして。

ドラマのような間があったり、ストーリーも引き込まれるようなもので、とても印象的なCMだったので気になってスマホでサイトを見てみたんですね。

そしたらサイトもとても見やすくて、ユーザービリティ凄いなー使いやすいなーと関心しっぱなしでした。

それでふと「スマホでこれだけ見やすかったらPCってどんなんだろ」と職業病的に思ってPCでサイトを見てみました。

そこでタイトルに戻るんですが、「もうこれからはこのカタチで全然いいな」と思ってしまいました。

スマホ用サイトにサイドバーがくっついただけで全然問題ない

そのPC版のサイトはこちらです。

全部キャプチャで長いですが失礼します。

いかがですか？

なんというか、制作者側としては、「思い切ったな〜！」というか、清々しいというか。

これ見たときに直感的に思ったのが、「もうユーザーってパソコンでサイト見ないよな」ってことです。

今までならパソコンでの仕上がり、見た目も気にして横幅いっぱいとかに無理やり広げてたんですね。

パソコンなんて横長なのに、スマホになったら縦長になるもんだから色々しちめんどくさい調整をして、スマホサイトも完成させるわけですよ。

いくら「モバイルファーストだ、レスポンシブサイトだ」っつってもやっぱりPCの見た目も気にしてしまう。

まずそれじゃクライアントに通らないし、社内でも微妙な感じになっちゃうんじゃないでしょうか。

PCのインパクトはないけどスマホが良ければ良い

このインテグレートのPC版では、そこまでのインパクトはないかもしれません。

でも横幅いっぱいにして印象的にしたところで、ユーザーは既にスマホで見てるんですよね。

だからそこまで作り込む必要はないと。

これだけ全体の横幅をせまくして、更にメインカラムをここまで狭く作ったら、スマホ対応なんてほぼなしでいけるぐらいの簡単さ。

その無駄な工数を、スマホを見るユーザーを向いて対応することに当てれるんですね。

サイドバーなんてただのメニューだし。

スマホになったらそれがメニューとして来ると。

無駄がないです。

スマホから設計するとこんなに楽なんだなと思いました。

比較してみますが、ほぼスマホとかわんないと思います。

ほぼ一緒です。

なんら変わらないです。

今までのレスポンシブデザインといえば、シングルカラムレイアウトが王道

これだけ見てもいまいちわからない方は、こちらを見てみるとわかりやすいと思います。

こちらがPC

それで以下がスマホ

今まではスマホはPCを縮めるだけが基本

もちろんどっちもいいんですよ？

ただやっぱり手間だし、どちらかというとPCありきな部分はいなめないんじゃないかなと。

スマホから先に作ると色んな痒いところに手が届く

例えば、こんなメニュー部分。

これもPCのから作るとこんなにコンパクトにはなりません。

何だかんだ言っても、サイトの性質には寄りますが。

ほぼスマホが確定しているのなら、このくらい思い切ってしまっても良いんじゃないかなと。

最後に

自分としても、記憶にとどめるという意味で記事にしてみました。

もし今後のサイト製作の参考になれば幸いです。