好きなモノだけに囲まれて生きるライフハック

これからのレスポンシブデザインはサイドバーが当たり前になってくるんじゃないかと思った話

ホームページ制作 16/10/01
TOP > 記事一覧 > ホームページ制作 > これからのレスポンシブデザインはサイドバーが当たり前になってくるんじゃないかと思った話

人気記事全くの未経験から独学でwebデザイナーに転職する為の方法【完全版】

人気記事断言する!最高のseo内部対策ツール、オロパス社のパスカルがやばいぐらい使える

人気記事オンラインで受講可能なIT・プログラミングスクールのオススメ4選

人気記事webデザイン会社で働く僕が選ぶコスパ最強のレンタルサーバー3選

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

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

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

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

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

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

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

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

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

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

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

integrate%ef%bd%9c%e8%b3%87%e7%94%9f%e5%a0%82

いかがですか?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

無駄がないです。

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

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

integrate%ef%bd%9c%e8%b3%87%e7%94%9f%e5%a0%82_sp

 

ほぼ一緒です。

なんら変わらないです。

 

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

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

%e7%a5%9e%e6%88%b8%e5%a5%b3%e5%ad%90%e5%a4%a7%e5%ad%a6

こちらがPC

それで以下がスマホ

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

%e7%a5%9e%e6%88%b8%e5%a5%b3%e5%ad%90%e5%a4%a7%e5%ad%a6_sp

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

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

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

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

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-01-23-03-27

 

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

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

 

最後に

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

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

人気記事全くの未経験から独学でwebデザイナーに転職する為の方法【完全版】

人気記事断言する!最高のseo内部対策ツール、オロパス社のパスカルがやばいぐらい使える

人気記事オンラインで受講可能なIT・プログラミングスクールのオススメ4選

人気記事webデザイン会社で働く僕が選ぶコスパ最強のレンタルサーバー3選

関連記事はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)