1-3
Web デザインの新しいトレンド
レスポンシブ Web デザイン
レスポンシブ Web デザインは、デバイスの画面幅などに応じて、Web サイトそのものの幅やレイアウトを変える手法です。

CSS、スマートフォン用の CSS というように、それぞれのデバイスごとに異1HTML は共通のものを用いながら、パソコン用の CSS、タブレット用のなる CSS を適用します。

うな Web サイトに適しているのか、またメリットやデメリットについて解説します。

ひとつの HTML ソースを CSS で切替表示

デバイスごとに異なる CSS を適用する

HTMLCSS

CSS

スマートフォン

タブレットWeb デザインの変化

詳しい実装方法や取り組み方は 4 章で詳しく説明しますが、ここではどのよCSS

パソコン

スマートフォン専用の Web サイトが不要にスマートフォン用に最適化した Web サイトを別途提供する方法もあり、Webサイトの目的や設計によってはそちらが適している場合もありますが、パソコン用、タブレット用、スマートフォン用など異なる HTML ファイルを用意せず、共通の HTML を使うことによるメンテナンスのしやすさが、レスポン
シブ Web デザインの大きなメリットです。
コンテンツを修正、追加する際に、ひとつの Web サイトを更新するだけで、すべてのデバイスに反映されることは、実装面や管理面、運用コストの面で大きなアドバンテージがあるといえます。
また、Web サイトにアクセスしたデバイスを判別して振り分けるリダイレクト設定の必要もなく、異なるデバイスでも同一の URL でユーザーがアクセスできます。
33

デザインテイストを保てる
パソコン用サイトとスマートフォン用サイトで、まったく異なる印象の企業サイトを見たことがある人は多いでしょう。意図的にデバイスごとにデザインを変えて表現することもありますが、どのデバイスで閲覧した際にも同じ印象を与えたい場合、レスポンシブ Web デザインで構築していると、デザインテイストを比較的スムーズに統一できます。
これは、見出しのデザインやボタンなど、デザイン上のスタイルを共有した状態で、デバイスごとに異なる表現部分のみを書き換えて対応できるためです。企業のブランドイメージの統一により、ユーザーに覚えてもらいやすい Web サイト、印象にズレのない Web サイトを提供しやすくなります。

柔軟な切替パターン
パソコン用、タブレット用、スマートフォン用の 3 パターンでレイアウトを切り替える手法が多く見られますが、TNW の Web サイトのように、高解像度のパソコンを意識して 4 パターンで切り替える Web サイトも存在します。

スマホ用（幅 480px 以下）

タブレット用（幅 768px 以下）

パソコン用 -1
（幅 1130px 以下）

http://thenextweb.com/

パソコン用 -2
（幅 1131px 以上）

切替パターンが増えるほどに制作・検証コストが発生することもあり、スマートフォン用とタブレット・パソコン用だけの 2 パ
ターンのみで切り替えるサイトもあります。
近年、スマートフォンやタブレッ
トの画面サイズ（px）は拡大する方向にあり、画面サイズだけではデバイスの切り分けが難しくなっていることも理由のひとつです。

34

W3C のサイトでは、480px を境にレイアウトを切り替えている
http://www.w3.org/

実装するときに気をつけること
レスポンシブ Web デザインは、実装前の準備段階が非常に大切です。単純に「画面サイズが小さなデバイスで表示させる」というだけではなく、ユーザーの操作性を配慮したうえでインターフェイスを設計し、実装しなければなりません。
特にナビゲーションの一貫性は、実際に操作し、検証する必要があります。規模が大きく、ユーザーがたくさんいる Web サイトほど、操作性の検証が重要になるでしょう。また、デバイスごとのレイアウトの切り替えにおThe Great Discontent（TGD）

1いて、実装が困難なデザインにならないように配慮する必要があります。

コンテンツ幅が伸縮するレイアウト。レイアウトのパターンは2種類ですが、Web デザインの変化幅に応じてカラム数を調整するなどの工夫をほどこしています。

http://thegreatdiscontent.com/

TodoMVC
コンテンツ幅が伸縮するレイアウト。パソコンとタブレットのどちらにも同じレイアウトを提供しています。スマートフォンの場合のみ、ヘッダーの大きな画像を表示せず、レイアウトを変化させています。

http://todomvc.com/

35

設計や実装方法の兼ね合いから、比較的シンプルなデザイン要素で構成した Web サイトが多く見られるレスポンシブ Web デザインですが、MediaQueries というショーケースサイトを見ると、さまざまな工夫を凝らした秀逸なデザイン事例を知ることができます。
Media Queries
レスポンシブ Web デザインの参考サイト

http://mediaqueri.es/

レスポンシブ Web デザインに適しているサイトのタイプ
レスポンシブ Web デザインは、一般的な企業サイトはもちろん、情報系サイトなどあらゆる Web サイトで取り入れられています。現在の、また、今後の Web 制作の現場でも、ひとつの選択肢として無視できません。
ただし、設計段階が重要なことから、階層の深い Web サイトや規模の大きな Web サイトの場合は、採否を慎重に検討する必要があります。詳しくは 4 章で掘り下げます。

36

パララックスなど動きのある Web デザイン
スクロールに応じて複数の画像やテキストが異なる速度で移動することで、立体感や浮遊感を伝える手法を取り入れた Web サイトが多くなってきました。この手法を「パララックス効果」（parallax scrolling effect）といい、スクロール操作を前提にした縦に長いデザインで構成するのが一般的です。
「パララックス」とは「視差」、つまり「遠近や位置の見え方の差」という意味

Web デザインの変化

1です。

2005年ごろからよく見られたフルFlashサイトに近い印象があるかもしれま
せん。絵コンテにもとづくビジュアルの考案、さまざまなデザイン要素の移動や組み合わせによる表現など、手法として共通する点があります。
パララックス効果は、ブランドイメージを重視する企業サイトやキャンペーンサイトなど、ビジュアルデザインやユーザーへのインパクトを優先したい場合に有効です。ただし、レスポンシブWebデザインと同様、実装前の設計や準備がとても大切です。

unfold
画面全体がダイナミックに変化するパララックス効果を採用。右上のメニューはスクロールに対して固定されています。

http://unfold.no/37絵コンテによるデザインゴールの共有
パララックス効果を採用する場合は、静的なビジュアルのデザインカンプだけでは完結しません。単純に画像やテキストが移動するだけならまだしも、レイヤー状に配置したそれぞれのパーツが、スクロールで縦に移動するときにうまく重なり合うことが効果的な演出のポイントとなるため、絵コンテの準備やエンジニアとのコミュニケーションが不可欠です。
絵コンテ

どのスクロール位置でどのようなビジュアルを表現するのか、それぞれのパーツがどのように動くのか、クリック操作にどのように応じるのかなどを綿密に設計します。見栄えだけにこだわるのではなく、デザイン全体を通してユーザーに何を伝えたいのかをきちんと考えることが重要です。設計や操作感、ギミックだけにとらわれず、本来の Web サイトのゴールを明確にし、それに貢献できるデザインを目指しましょう。

エンジニアと Web デザイナーの連携と動作チェック
絵コンテやデザイン設計も大切ですが、さらに大切なのが「実際に操作してみること」です。ブラウザーによって、またバージョンによっては、スムーズに操作できない場合があります。その際、原因は何なのか、解決するために削ることのできる装飾はないかなど、エンジニアと Web デザイナーで綿密なコミュニケーションを行いながら調整する必要があります。

手法とパターンパララックスを取り入れた Web サイトは複雑なデザインになる場合が多く、ページの表示後にユーザーが戸惑うことも少なくないので、普段のWebデザインのときよりも操作するボタンを明快に示すことも重要です。上向きや下向きの矢印を一目でボタンとわかるように目立たせたり、ナビゲーションを画面の上下や左右に固定するパターンが多く見られます。
38

パララックス効果は JavaScriptで制御する。ライブラリを利用して実装するのが一般的

Jarallax
jQuery のプラグインhttp://www.jarallax.com/

メニューを固定したレイアウト
東京スカイツリー

左メニューの表示位置を固定しつつ、トップページにパララックス効果を用いています。ファーストビューできちんと必要な情報を伝えながら、スクWeb デザインの変化

1

ロールをするとパララックス効果がはじまります。

http://www.tokyo-skytree.jp/

東京スカイツリーという高い建物を表現するために、長尺のページとパララックス効果が上手くフィットし、効果的な演出方法になっています。ほぼ際限なく縦に長くできるという Web ページの特性を活かしながらも、操作性を確保したナビゲーションの好例です。
39

象徴的な要素を固定し、まわりを変化させて演出する
縦方向の移動に合わせてほぼすべての要素が変化する Web サイトが多い
なか、象徴的な要素をあえて固定化して演出する方法もあります。

These Are Things
中央の男女のイラストの位置を固定し、縦スクロールによって周囲の要素が変化します。浮遊感が楽しいデザインです。
男女のイラストを最前面にしないことで、ちょっとした着せ替え風に演出したり、ベランダに座ったような演出がなされたりと、ユーザーを楽しませる工夫が随所に見られるのが印象的です。ナビゲーションを常にヘッダーに固定しており、操作性も確保されています。

http://thesearethings.com/

40

横スクロールなどの変則的なレイアウト
パララックス効果には、縦方向、横方向、背景全体の動きだけでなく、コンテンツ部分のみをスライドさせるスタイルなど、さまざまな演出方法があります。

Head2Heart
フッターにナビゲーションを固定配置しており、最初の表示位置がスタート地点であることが明確になっています。右に向いた矢印を随所に取り入れることで、右方向に次のコンテンツがあることが示唆されており、クリ1

エイティブでありながらも操作しやすい構成です。

Web デザインの変化

http://www.head2heart.us/

Dean Oakley
背景要素をレイヤーのように重ねてスライドさせるものが多いなか、背景を固定し、コンテンツを横にスクロールさせる演出方法を取り入れた Webサイトです。幅の狭いデバイスでは縦スクロールで動作する点にも工夫が感じられます。
http://deanoakley.com/

41

ナビゲーション全体を固定し、商品を象徴的に配置
Mobile phones wholesale - ATANAI PLUS
商品が表示されたスマートフォンが横方向へのスクロールに合わせて回転し、それに合わせてコンテンツが多方向から出現しレイアウトされます。
問い合わせ先のみ、画面遷移せずに右方向からフォームエリアが押し出されるという工夫も見られます。
http://atanaiplus.cz/

パララックス効果を取り入ると効果的なサイト
表現力の豊かさから、キャンペーン用の Web サイト、ファッション系サイト、ビジュアルデザインを重視する企業サイトなどに効果的です。企業イメージやブランドイメージを強いインパクトで伝えたい場合に適しています。
逆に、スムーズな情報取得にはあまり適していないので、読みやすさを重視するような情報系サイト、階層が深い大規模サイトなどに適しているとはいえません。なお、レスポンシブ Web デザインと併用する場合、設計が複雑になりやすくデータ量が多くなる傾向があるので、スマートフォンやタブレット用の別ページを用意しておくことも考えておくとよいでしょう。
42

縦長の web デザインギャラリー・サイトリンク集MUUUUU_CHANG Web DESIGN Showcasehttp://muuuuu.org/category/taglist/parallax

モバイル・ファーストな Web デザイン
スマートフォンを代表とするタッチデバイスは基本的に画面が小さく、通信速度は遅いといえます。そのため、本当にユーザーが必要な情報を見極「モバイル・ファースト」 は、2009 年に Luke Wroblewski 氏によって提唱され、Google 社の会長である Eric Schmidt 氏が世界的に広めた

めてシンプルにする必要があります。スマートフォンでの閲覧や操作を前提に考え、次に比較的大きな画面のタブレットやパソコンに展開する手法を「モバイル・ファースト」といいます。
モバイル・ファーストでデザインを考える場合、次の点に注意して制作する

大きめのインターフェイス

1必要があります。

タッチ操作を前提にし、ボタンの領域を大きめに取ります。また、誤って広めの余白をとります。
http://www.apple.com/jp/

Web デザインの変化

押してしまうことのないように、隣接するボタン（やテキストリンク）同士に大きめのフォントサイズ
スマートフォンは画面サイズが小さいことに加えて、屋外では日光の反射などがあり、文字が見にくい場合があります。タブレットはリビングで家族みんなで見るといった利用シーンが考えられ、やや画面が遠い場合や、正面からではなく横からのぞきこんで見る場合があります。これらのデバ
イスでも文字が読みやすいように、背景色とテキストのカラーのコントラス
トを強く、大きめのフォントサイズを心がけるとよいでしょう。
43シンプルなレイアウト

1 カラムで構成するなどシンプルなレイアウトを採用する Web サイトも増えています。

モバイル・ファーストが適しているサイト
ビジュアルのインパクトや世界観よりも、わかりやすい情報提供を優先するWebサイトに適しています。業種による向き不向きはほぼなく、

http://www.kotonoca.com/

メンテナンス性を優先する場合にも適します。

2013 年のリニューアルでスマートフォンでの利用を最優先に考え、パソコン用のサイトもほぼ同一のレイアウトでかなりすっきりさせた
http://canon.jp/

44シンプルなデザイン、フラットデザインへの変化「フラットデザイン」の対義語は「スキュアモーフィズム」（ソフトウェアの UI に過去の実世界の物の特徴を取り込むデザイン手法）といえる

iOS（Mac OS）は長らく、スキュアモーフィズムが追求されてきたが、iOS 7 からフラットデザインに変更される

数年前は装飾を盛り込んだリッチな Web デザインが多く見られましたが、最近では Web デザインそのものがシンプルになりつつあります。レスポン
シブ Web デザイン、モバイル・ファーストを考慮すると、ビジュアルデザインがシンプルであるほうが実装がしやすいのは容易に想像できます。
さらに、Windows 8 が採用した新しいユーザーインターフェイス（ModernUI）の登場や Google の一連のサービスのインターフェイスの変化がこの流れを後押しし、2012 年ごろから「フラットデザイン」と呼ばれるインターフェイスを用いた Web デザインが多く見られるようになりました。

Web デザインの変化

1

フラットデザインを採用した新
しい UI は、評価版では「MetroUI」と呼ばれていたが、製品版では「Modern UI」（日本語名は「新しい UI」）という名称に変更された

フラットデザインとは、立体的な装飾を極限まで削ぎ落とし、配色などで差別化し、ボタンやグラフィックスを平面状にデザインして並べる手法です。また、タッチ操作に最適化するため、従来のボタンよりヒットエリアを大きめに設計します。

Column フラットデザインの特徴
ソシオメディアの上野 学さんは「フラットデザインは UI を進化させるか」にて、以下をフラットデザインの特徴として挙げています（https://www.sociomedia.co.jp/4262）。

• UI 要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする• ドロップシャドウやベベルといった立体感を出す表現を用いない• 角丸を用いない。あるいは半径を非常に小さくする• ボーダーや罫線を用いない。あるいは非常に細く淡くする• 背景色の違いや余白によってエリアの境界を示す• タイポグラフィを重視し、文字の大きさにメリハリをつける• 最低限の視覚情報で強調表現する• ピクトグラム風のアイコン
45

シンプルだからこそ難しい
従来なら立体的にするだけでボタンらしくなったものを平面で表現する必要があるため、いっそう Web デザイナーの力量を要します。また、アイコンやタイポグラフィもフラットデザインにおける重要な要素です。
レイアウト全体についても、立体的にしたりグラデーションを多用するよりも、極力シンプルにするほうがデザイン力を問われます。グリッドシステムの理解や、全体のレイアウトバランスの技術から、均整のとれた美しさが導き出されるからです。また、Web デザインの特性として、デバイスごとの表示領域や操作感も考慮しなくてはなりません。

配色とタイポグラフィ、アイコンデザインが重要にビジュアル的な装飾を削ぎ落としたなかでその Web サイトをユーザーに印象づけるには、配色とタイポグラフィが重要です。また、ボタン内に表現するアイコンデザインのクオリティが、全体のクオリティに影響します。

フラットデザインを取り入れたサイト
フラットな Webデザインを取り入れているWebサイトを紹介します。どのサ

CSS3 の Web フォント機能と組み合わせると、さらにマルチデバイス対応が容易になる
ただし、日本語フォントは英文フォントに比べてファイルサイズが大きく、デザイン上扱いにくい場合があるので、それらも考慮する必要がある

イトも効果的な配色で、余白を大胆に活用しているのが特徴的です。

Buffalo
少ない色使いのシンプルなデザインです。背景色でナチュラルなテイストを演出しているため、ほかのビビッドな色がさらに際立っています。
メインとなるビジュアルに正六角形を整然と配置し、要素それぞれの余白を大きめにとることで見分けやすくなっており、全体のデザインにもリズム感があります。
http://builtbybuffalo.com/

46

The Smartphone Reinvented Around You | Windows Phone

Windows Phone そのもので使われているカラフルな配色をデザイン全体にも取り入れています。大きめのフラットなボタンやグリッドで構成するのではなく、レイアウトブロック（エリア）ごとに配色を変えているのが印象的です。レイアウトブロックごとで異なるシンプルな単色と共通のタイポグラ
フィによって、全体の統一感が生まれています。

Web デザインの変化

1

http://www.windowsphone.
com/en-us/

47

Etch
黒をベースの背景色とし、グレーと赤でスタイリッシュにデザインされた

Web サイトです。
レイアウトやデザインも秀逸ですが、まずタイポグラフィが注目に値します。
細めのフォントでありながらも、フォントサイズを大きく設定しているため、読みにくさはほぼ感じません。また、ジャンプ率（文字の大小差）の高さが、デザインにメリハリを与えています。

5 カラムで構成されたグリッドのなかで大小のエリアを並べ、均等な余白を設定しているため、美しく整然とした印象を与えています。ヘッダーのナビゲーションをクリックすると、グリッドが再構成され、コンテンツの並びが変わります。また、レスポンシブ Web デザインを採用し、デバイスごとの画面サイズの違いも考慮されています。
http://etchapps.com/

48

The Ecology Center
これまで紹介したサイトは 1 カラムで構成されていたり、ナビゲーションがヘッダーに横並びで配置されているものが多いなかで、このサイトは左側にナビゲーションを配置しています。
日本の Web サイトでも従来からよく見られるレイアウトですが、ボタンなどのパーツにはフラットデザインを採用しています。従来の Web デザインの特徴を活かしながら、トレンドをうまく取り入れている好例です。

Web デザインの変化

1

http://theecologycenter.org/

左側にメニューを配置しているレスポンシブ Web デザインとの相性
フラットデザインは、4 章で詳しく解説するレスポンシブ Web デザインと相性がよいといえます。グリッドや余白をうまく活かしたレイアウト設計、タイポグラフィや配色などのデザイン力は要しますが、要素そのもの構成は非常にシンプルで汎用性が高いからです。

49

インフォグラフィックスから学ぶ
Web デザインやグラフィックスのフラット化が進むにつれ、よく見かけるようになったのが「インフォグラフィックス」です。
インフォグラフィックスとは、言葉だけでは伝わりづらい情報を視覚化することで、伝えやすくしたものです。Wikipedia では次のように定義されています。
「インフォグラフィック（英語 : infographics）は、情報、データ、知識を視覚的に表現したものである。インフォグラフィックは情報をスピーディに簡単に表現したい場面で用いられ、標識、地図、報道、技術文書、教育などの形で使われている。また、計算機科学や数学、統計学においても、概念的情報をわかりやすく表現するツールとしてよく用いられる。科学的情報の可視化にも広く適用される。」
日常的に目にする機会が多く、かつ、古くから使われているインフォグラフ
ィックスの代表例として、地下鉄の路線図があげられます。

路線図は代表的なインフォグラフィックスと言えますが、それ以外にもさまざまなものが公開されています。なかには非常にユニークなものや独自性のあるものがあり、多くの人の興味を集めています。

50

資料：東京都交通局

Coffee drinks illustrated by Lokesh Dhakar
コーヒーの種類をインフォグラフィックスにしたものです。分量や成分を視覚的に表現するほうが、口頭で説明するよりも伝わりやすいことがわかる好例です。

Web デザインの変化

1

http://lokeshdhakar.com/
coffee-drinks-illustrated/

Transparency: The Largest Bankruptcies in History
アメリカの企業の倒産規模を船に例えたユニークなインフォグラフィックスです。船の大きさが額を表しています。
http://www.good.is/posts/
transparency-the-largestbankruptcies-in-history/

51

Flickr - User Model

Flickr ユーザーの行動モデルのインフォグラフィックスです。色分けやアイコンの大きさ、矢印による関連づけによって表現されています。
http://www.flickr.com/photos/bryce/58299511/

Web Trend Map 4

Web のトレンドを図式化した Webトレンドマップです。Google や Yahoo! はもちろん、Facebook、Twitter、Apple、Microsoft などの有名企業やサービスを網羅しています。

かなり詳細に作り込まれているので拡大して確認したい

http://ia.net/blog/web-trend-map-4-final-beta

52

インフォグラフィックスのメリット
インフォグラフィックスは視覚的に理解できるため、複雑な事柄でもわかりやすく伝えられるメリットがあります。文章や表などではわかりにくい情報も、デザインをほどこすことで整理され、理解しやすくなります。

Web サイトで複雑な情報を伝える場合やグラフなどが必要な場合に、デザインの引き出しのひとつとして、インフォグラフィックスのようなアプローチを持っておくとよいでしょう。

海外ではインフォグラフィックスを集めた Web サイトや制作ツールが公開されています。配色、タイポグラフィ、イラストやアイコンなどさまざまなデ1

秀逸なインフォグラフィックスを探す

コンテンツが重要な要素になっている昨今だからこそ、情報を視覚的にデザインすることは、今後、大きな付加価値となるでしょう。

• インフォグラフィックスを集めたサイト
http://www.coolinfographics.com/
http://infogra.me/ja/
http://www.visualthinking.jp/

Web デザインの変化

ザイン要素について、秀逸な例が多く存在しています。

• インフォグラフィックスの制作ツール
http://piktochart.com/
http://visual.ly/
http://infogr.am/

53