新年、明けましておめでとうございます。

大晦日、甘酒を飲もうとプラプラしていたら、
衝撃的な注意書きを目にしました。

「就寝注意」

寝る人が多かったんでしょうね、、、

そんな話は置いておいて、国内外から優れた
レスポンシブサイトをピックアップしました。

2つしかない厳選してあるので、就寝せずお付き合いください。

でんぱ組.inc公式サイト

URL:http://dempagumi.dearstage.com/

なんだ、アイドルのサイトかよ、なんて言わないでください。

特徴的なのは、フレキシブルなレスポンシブサイトということです。

ブレークポイントは横幅630px以上と以下の1つですが、
横幅の指定がなく、どのウィンドウ幅でも最適化されています。

よくあるレスポンシブサイトで、ブレークポイントが横幅640pxで、
ウィンドウ幅が650pxの時に横スクロールが必要、なんてことがありません。

これならどんなデバイスでもレイアウトが最適化されます。

ウィンドウ幅に合わせてコンテンツ部分のパネルが上下しますが、
こちらはjQuery masonryというプラグインを使用しているようです。

基本的に画像の切り替えがないという点も、「ワンソースで」
というレスポンシブサイト本来の目的に適っています。

もちろん、レンダリングを向上させるポイントでもあります。
（画像の切り替えはロゴくらいのようです）

JESSE BOYKINS III

URL:http://jbiiimusic.com/

続いて、Jesse Boykins IIIというシンガーのサイトです。

背景に動画を埋め込むことで、このアーティストの世界観を伝えています。

こちらのサイトも、フレキシブルなレスポンシブサイトとなっています。

注目したい点は、下層ページのUIです。
PCのウィンドウ幅でも、ハンバーガーメニューを用いています。

PCとスマホでUIが統一されているため、
PCで閲覧したユーザーがスマホで閲覧した場合、
「UIが違う！」なんていうストレスがありません。

また、ハンバーガーメニューの上に「Menu」とツールチップを表示させている点も、
ユーザーの理解度を向上させ、細かいところに気を配ったUI設計だと感心します。

そして一番感心する点は、ナビゲーションバーが右下に配置されている点です。

これなら、近年の画面サイズが大きくなったデバイスでも、
片手でサクっとメニューを開くことが可能です。

PCサイトもスマホサイトも、ナビゲーションバーは上に設置されている場合が大半
だと思いますが、その常識を覆す素晴らしいUIだと思います。

iOSのタブ、Androidのナビゲーションバーは、
標準UIでそれぞれ下に設置されています。

常識を覆すと言っても、スマホに慣れたユーザーが違和感なく操作できる、
良質なUIと言えると思います。

まとめ

近年、モバイルフレンドリーが重要視されています。

その手段として、レスポンシブサイトが推奨されています。

レスポンシブサイトを制作する際、改めて考えたいのが、
「なぜレスポンシブにするのか」という点です。

デザインが各デバイスで最適化されていれば、
言葉の意味では「レスポンシブサイト」となります。

しかし、各デバイスで最適化、という本来の目的から考えると、
ソースコードやUI設計にも気を配らなくてはいけません。

• 不要な画像を多く読み込み、レンダリングが低下したサイト。
• スマホで使うことを考慮していないUI設計のサイト。

上記のサイトは、いくらデザイン上スマホに最適化されていても、
レスポンシブサイトとは到底呼べないサイトだと思います。

ユーザーの感情、思考、習性、環境などを考慮して、
良質なサイト設計を心掛けたいものです。