Webデザイントレンド定点観測 グラフィックで差別化を図るレスポンシブレイアウト
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
当連載をお読みの方の中には、「Bootstrap」や「Foundation」などのフレームワークを利用して、レスポンシブレイアウトのサイトを既に作成している方も多いかもしれません。
フレームワークというのは、いわば「Webサイト設計のルール」がひとつのセットとなって配布されているもの。HTMLとCSSの実装に割くコスト（時間＝お金）を圧倒的に減らすことができます。
さらに、リスト、ボタン、テーブル、フォーム……などの要素を一通り破綻の無いように揃えてくれていますので、「あ、フォーム周りのデザインもしなければ……！」というような、デザインの抜け漏れを防ぐことができます。
しかし、一方で、このようなフレームワークを利用した多くの方が悩み始めるのが、「他のサイトと印象が似てしまう」ということではないでしょうか。「同じルールのセット」を流用しているので「当然」と言えることでもあり、なかなか払拭することが難しい問題ではあります。
ここで少し視点を変え、フレームワークの利用で浮いた時間的／経済的コストを「写真やイラスト等のグラフィック」の作成に振り分ける、と考えてみてはいかがでしょうか。レイアウトが似たサイトでも、一点豪華主義のグラフィックにリソースを割くことで、差をつけることができるでしょう。
ということで、今月は前置きが長くなりましたが、「レイアウト的には似ているけれど、印象的なグラフィックで他との差をつけているレスポンシブレイアウトのサイト」をいくつかピックアップしていきます。
今回はどのフレームワークを利用しているかどうかは問わず、以下の条件を満たしているレスポンシブレイアウトのサイトを拾ってみました。
- ひとつのHTMLに対し、CSS3のメディアクエリとviewportの指定により、画面サイズに応じて異なるレイアウトを提供しているサイト
- ファーストビューが横幅いっぱいの1カラムのグラフィックである
- 1カラムの枠を積み重ねているレイアウト、もしくは、1カラムと複数カラムがサンドイッチ状に重なっているレイアウト
すべて似たようなレイアウトの骨組みなのですが、個性的で強烈なグラフィックにより、レイアウトの平凡さがまったく気にならなくなっています。
では、早速、それぞれを見ていきましょう。
New York Website Design Company + Mobile App Developers | Lounge Lizard
Bootstrapを利用したサイトです。会社名とサービス内容を示したネオンサインの写真がファーストビューで印象的なことに加え、スクロールしていくと非常にジャンプ率の高い極太の見出しが目を引きます。
New York Website Design Company + Mobile App Developers | Lounge Lizard
Totem – организация мероприятий, дизайн, реклама
男性が色とりどりの粉をかぶった、強烈な色彩の写真を撮り下ろしています。様々な画面サイズのデバイスで見た時にも、トリミングがそれなりにバランス良くなるように、たっぷりした空間が人物の左右に用意されています。
機械翻訳によると、ロシアの制作会社のサイトのようです。
Totem – организация мероприятий, дизайн, реклама
Delaneau
女性向け高級時計メーカーのサイトです。商品の豪華な装飾を印象づける、ボタニカルアート的な精密かつ豪華なイラストレーションが、メイングラフィックに利用されています。
画面全体を埋め尽くすように細かなモチーフが配されていますので、画面横幅の変化に伴ってトリミングが変わっても、比較的バランスが保たれた見栄えになっています。
STYKI
これも機械翻訳によると、ポーランド語の制作会社のサイト。メイングラフィック部分は、CSSを使った泡が膨らむような華やかなアニメーションで、画面サイズを変えてもそれに応じてアニメが再生されます。
Teamgeek | Think. Build. Grow.
PCのように横幅の大きいデバイスで閲覧した際は、メイングラフィックのロゴマークがJavaScriptによって素粒子のように弾けるアニメーションが展開され、マウスカーソルに反応して粒子が動きます。しかし、横幅が狭いデバイスで閲覧すると、ロゴは静止画像になります。
スマホはPCに比べてスペックが低いため、アニメーションを再生するのは過剰な負荷になるという判断でしょう。
Teamgeek | Think. Build. Grow.
Upturn
メイングラフィックを始め、ページ内のほぼすべてのイラストがSVGで作成されていますので、どのような画面サイズでも、非常にクリアでシャープな印象です。
また、「Service/Scope」のセクションを見ながら、横幅を変更してみてください。イラスト内の建物の軒数が変わるなど、芸が細かく面白いので、ぜひ参考にしてみたいところです。
Designer Trek by Circles Co.
クリエイター向けイベントサイトの告知ページです。メイングラフィック下部の針葉樹林の深緑色が、そのまま下部の背景色に使われていき、独特の配色を生み出しています。
画面の横幅を変更すると、それに応じて星空の写真部分が高さを増し、レイアウトのバランスを保っています。
Island – Marketing, Print, Website Design & Mobile Development
モノクロの背景写真に、手描き風フォントがとても強い印象を残します。画面の横幅を変えると写真の縦横比率が変わってしまうことに違和感があり、ちょっともったいなさを感じますね……。
画面全体を覆うような背景画像は、画面が横長でも縦長でも破綻の無いものを作る必要があることが、よく分かります。
Island – Marketing, Print, Website Design & Mobile Development
Ende
デジタルメディアのデザインとコンサルティング会社のサイトなのですが、メイングラフィックが古い新聞からとってきたようなざらついた写真、かつ、とぼけた羊がメインの被写体なので、そこはかとない不安感をかき立てます。
さらに、本文のフォントが、通常のサイトでは選ばれないmonospace系のフォント（ソースコードの表示などに利用される）ですので、他のどこの会社とも違う個性を強く印象づけます。
それぞれのサイトのレイアウトの骨組みだけを抽出してみると、ほぼ同じようなルールで成り立っています。しかし、「レイアウトが同じ感じ」よりも、リソースをつぎ込んだグラフィックの印象が強く感じられたのではないでしょうか。
そして、レイアウトのみならず、ボタンやアイコン等のデザインもフレームワーク内に用意されているものを利用することにより、様々なサイトを通じて閲覧者の学習機会が増えます。それにより、別のサイトでも操作が予測しやすくなる、というメリットも見逃せません。
フレームワークの利用を通じた、実装の省力化、浮いたリソースでグラフィックの作り込み強化、ぜひ検討してみてはいかがでしょうか。
（了）