書籍『マルチデバイス時代のWebデザインガイドブック』サポートサイト

リンク集

1章 Webデザインの変化

1-1 Webへアクセスできるデバイスと画面サイズの多様化

アップル
iPhoneなどのスマートフォンでアクセスすると、そのままパソコン向けのデザインで表示されます。シンプルな構成のため、縮小したように見える状態でも、ゴチャゴチャとした雑多な印象がありません。
Top 10 Screen Resolutions from Jan to Dec 2012 | StatCounter Global Stats
StatCounter Global Statsの登録ユーザー300万人以上を対象に調査したデータ（2012年）。ディスプレイサイズは大型化し、それにともなってWebサイトのコンテンツ幅も変化しています。ページ下の「Region」で「Japan」を選ぶと、日本のデータに絞ることができます。

1-2 モバイルデバイスからのアクセスを考えた軽量化

スマートフォン所有率は、全体で40.2%。タブレット端末所有率は、11.3%と二桁に到達。 | ビデオリサーチインタラクティブ | プレスリリース
2013年2月時点での15歳から69歳までのスマートフォン所有率は全体で40.2%、タブレット所有率は11.3%です。この結果からも、スマートフォンやタブレットの所有率がますます高くなり、インターネットの閲覧環境が多様化してることがうかがえます。

1-3 Webデザインの新しいトレンド

レスポンシブWebデザイン
The Next Web - International technology news, business & culture
パソコン用、タブレット用、スマートフォン用の3パターンでレイアウトを切り替える手法が多く見られますが、このWebサイトのように、4パターンで切り替えるWebサイトも存在します。
The Great Discontent (TGD)
コンテンツ幅が伸縮するレイアウト。レイアウトのパターンは2種類ですが、幅に応じてカラム数を調整するなどの工夫をほどこしています。
TodoMVC
コンテンツ幅が伸縮するレイアウト。パソコンとタブレットのどちらにも同じレイアウトを提供しています。スマートフォンの場合のみ、ヘッダーの大きな画像を表示せず、レイアウトを変化させています。
Media Queries
設計や実装方法の兼ね合いから、比較的シンプルなデザイン要素で構成したWebサイトが多く見られるレスポンシブWebデザインですが、このショーケースサイトを見ると、さまざまな工夫を凝らした秀逸なデザイン事例を知ることができます。
パララックスなど動きのあるWebデザイン
Wildlife
※現在、Flashサイトになっています。
Unfold
画面全体がダイナミックに変化するパララックス効果を採用。右上のメニューはスクロールに対して固定されています。
東京スカイツリー TOKYO SKYTREE
左メニューの表示位置を固定しつつ、トップページにパララックス効果を用いています。ファーストビューできちんと必要な情報を伝えながら、スクロールをするとパララックス効果がはじまります。
inTacto 10 Years
上から下ではなく、下から上へのスクロールを前提にした珍しいパララックス効果を実装しています。左側のタブとロケットの位置を固定し、周囲のイラストや背景が変わる演出方法で、2001年から2012年までの時間軸の変化という構成になっています。
These Are Things
中央の男女のイラストの位置を固定し、縦スクロールによって周囲の要素が変化します。浮遊感が楽しいデザインです。
Head2Heart
フッターにナビゲーションを固定配置しており、最初の表示位置がスタート地点であることが明確になっています。右に向いた矢印をデザイン上の随所に取り入れることで、右方向に次のコンテンツがあることが示唆されており、クリエイティブでありながらも操作しやすい構成です。
Dean Oakley
背景要素をレイヤーのように重ねてスライドさせるものが多いなか、背景を固定し、コンテンツを横にスクロールさせる演出方法を取り入れたWebサイトです。幅の狭いデバイスでは縦スクロールで動作する点にも工夫が感じられます。
Color rush｜【ELLE】2012春夏ファッショントレンド大図鑑｜エル・オンライン
写真、ビジュアル、文字要素それぞれがレイヤー状に配置され、雑誌風に横方向にめくっていく感じで構成しているWebサイトです。タイポグラフィの美しさと重なりによるバランスが心地よく、スピーディでクールな操作感です。
Yakult Singapore
ナビゲーションをヘッダーとフッターに固定し、それぞれの項目をクリックすると、レイヤー状に重なって配置されたイラスト群が移動します。手前の方のイラストのほうが早く移動し、奥の方に描かれたイラストはゆっくり移動することで、奥行きのある世界観を演出しています。
モバイルファーストなWebデザイン
アップル
タッチ操作を前提にし、ボタンならボタンとはっきりとわかるインターフェイスで、かつ、誤って押してしまうことのないように、隣接するボタンやリンクとの間に広めの余白をとったデザインです。
キヤノン：キヤノンホームページ
ゆとりのある画面構成で、そのままスマートフォンで表示しても、見やすさや操作性が確保されています。
リネン/亜麻の雑貨 コトノカ/Kotonoca リネンスリーパーと亜麻雑貨のブランド
トップページのコンテンツそれぞれを、スマートフォンではタブ切り替えに変更したり、複数の商品を3カラムではなく1カラムで配置されるように変更していますが、もともとの画面構成がシンプルなので、ほぼそれくらいの調整で済んでいます。
シンプルなデザイン、フラットデザインへの変化
Buffalo - Web Development, E-Commerce & Web Design - Brighton UK
少ない色使いのシンプルなデザインです。背景色でナチュラルなテイストを演出しているため、ほかのビビッドな色がさらに際立っています。
United Pixelworkers — Welcome
Tシャツの販売サイトです。グリッドで忠実にコンテンツを区切ったデザインで、不要な要素を削ぎ落とし、製品写真そのものを全面に押し出しています。フッターの入力フィールドやボタンにもフラットなテイストが見られます。
The Smartphone Reinvented Around You | Windows Phone (United States)
Windows Phoneそのもので使われているカラフルな配色をデザイン全体にも取り入れています。大きめのフラットなボタンやグリッドで構成するのではなく、レイアウトブロック（エリア）ごとに配色を変えているのが印象的です。レイアウトブロックごとで異なるシンプルな単色と共通のタイポグラフィによって、全体の統一感が生まれています。
We make apps | Etch
黒をベースの背景色とし、グレーと赤でスタイリッシュにデザインされたWebサイトです。レイアウトやデザインも秀逸ですが、まずタイポグラフィが注目に値します。細めのフォントでありながらも、フォントサイズを大きく設定しているため、読みにくさはほぼ感じません。また、ジャンプ率（文字の大小差）の高さが、デザインにメリハリを与えています。
Lorenzo Verzini
カラフルで色相差の高い配色であり、デザインにメリハリのあるインパクトの強いWebサイトです。サイト内で使われているアイコンも同じ配色にすることで、デザインの単調さを防ぐとともに、統一感を演出しています。
Warp Japan
日本のWebサイトです。サイト全体にフラットデザインを採用しています。ホワイトベースのデザインに鮮やかなブルーが映え、全体のテイストに合ったタイポグラフィ、写真から醸し出される洗練された雰囲気が特に目を引きます。
Video Hosting for Business
再生開始（プレイボタン）のアイコンをWebサイトの装飾として扱いながら、配色のテイストを合わせることで統一感を演出しているWebサイトです。レゴブロックのように重ねられたさまざまな再生開始アイコンは、ページの読み込み時にブロックが落ちるように配置されます。
The Ecology Center
多くのサイトが1カラムで構成されていたり、ナビゲーションがヘッダーに横並びで配置されているものが多いなかで、このサイトは左側にナビゲーションを配置しています。
インフォグラフィックスから学ぶ
Pop Chart Lab --> Design + Data = Delight --> The Insanely Great History of Apple
Apple製品の歴史を並べたインフォグラフィックスです。
Coffee drinks illustrated by Lokesh Dhakar
コーヒーの種類をインフォグラフィックスにしたものです。分量や成分を視覚的に表現するほうが、口頭で説明するよりも伝わりやすいことがわかる好例です。
Transparency: The Largest Bankruptcies in History | Business on GOOD
アメリカの企業の倒産規模を船に例えたユニークなインフォグラフィックスです。船の大きさが額を表しています。
Flickr User Model, v0.3
Flickrユーザーの行動モデルのインフォグラフィックスです。色分けやアイコンの大きさ、矢印による関連づけによって表現されています。
Web Trend Map 4 | Information Architects
Webのトレンドを図式化したWebトレンドマップです。GoogleやYahoo!はもちろん、Facebook、Twitter、Apple、Microsoftなどの有名企業やサービスを網羅しています。
Blog About Infographics and Data Visualization - Cool Infographics
ランディ・クラム氏が運営するインフォグラフィックスを集めたサイトです。
infogra.me（インフォグラミー） | インフォグラフィックスコミュニケーションサービス
インフォグラフィックスの投稿・共有サイトです。
ビジュアルシンキング | 「たのしいインフォグラフィック入門」著者サイト
櫻田 潤氏が運営するインフォグラフィックスの総合情報サイトです。
Piktochart: Infographic and Presentation Tool for Non-Designers | Infographics | Best Info graphic Design
アメリカの大手企業や教育機関も利用しているインフォグラフィックスの制作ツールです。
Infographics & Data Visualization | Visual.ly
インフォグラフィックスの制作・共有のためのクラウドサービスです。
Create infographics & online charts | infogr.am
チャートを選び、データを入力することで、インフォグラフィックスが制作できるサービスです。PNGやPDF形式でダウンロードできます。

1-4 Webデザインのカンプについて

The Grid System
グリッドシステムに関する総合情報サイトです。
Black Estate
グリッドシステムを活かしたサイトの例です。/dd>
51bits - Interface Design for iOS, Mac and the Web
グリッドシステムを活かしたサイトの例です。
The Golden Grid - A complete grid system for super fast wireframing and visual design.
長方形の幅と高さ（a/b）が黄金比を基準に設計されているだけではなく、余白の横と縦の比率（x/y）も黄金比で作られています。12カラム、16カラム、24カラムのテンプレートが用意されています。

1-5 HTML5とCSS3

ウェブの進化
Webの技術やブラウザの進化を美しいグラフィックスで表現したサイトです。HTML5で作られています。
Peanut mouse wireless rechargeable mouse by acme
ピーナッツ型のワイヤレスマウスを販売するヨーロッパ企業のサイトです。このような表現は、以前はFlashで実現することが多かったのですが、HTML5で作られています。
Symfony development India
インドのWeb制作会社のサイトです。パララックス効果を組み合わせたダイナミックな表現です。
Mundo Belros
スペインのお菓子メーカーのサイトです。CSS3のtransformプロパティによる「傾き」を多用した遊びのある配置が印象的です。

2章 スマートフォンとタブレット向けのWebデザイン

2-1 設計とデザイン

iOSヒューマンインターフェイスガイドライン（PDF）
iOSでユーザーが利用しやすいインターフェイスを制作するためのガイドラインです。
Design | Android Developers
Androidデバイス向けのガイドラインが確認できます。
Windows Phone のユーザー エクスペリエンスのデザイン ガイドライン
WindowsPhoneというプラットフォームの特徴から、デザインの考え方、ユーザーインターフェイスの制作方法などが示されています。

2-2 ユーザーのシチュエーションを考慮する

Our Mobile Planet: 日本 モバイルユーザーの実態 2013年5月
過去7日間に毎日スマートフォンを使用したユーザーは80％、スマートフォンを持たずに外出することはないと答えたユーザーが79%など、国内のモバイルユーザーに関する調査結果が確認できます。
「全国スマートフォンユーザー1000人調査」第4回分析結果報告 | 博報堂DYホールディングス
タブレットの利用シーンが男女で大きく違うことがわかります。男性はビジネス目的でひとりで利用する人が多いのに対し、女性は自宅で利用する人が多いのが特徴的です。
タブレット端末所有者の62.3％が2012年にタブレット端末を購入したと回答 ｜ MMD研究所
タブレットでよく使われるアプリのジャンルに関する調査結果です。天気やニュースなどの情報源、ソーシャルメディア、エンターテイメントやゲーム、仕事効率化などが目立っています。
タブレット端末ユーザーの利用実態調査 - 株式会社 MM総研
タブレットの通信環境やシェアに関する調査結果です。

2-3 タブレット向けWebデザインの必要性

2012年度通期国内タブレット端末出荷概況 - 株式会社 MM総研
タブレットの出荷台数やシェアに関する調査結果です。
スマートフォン市場規模の推移・予測（2013年3月） - 株式会社 MM総研
スマートフォンの現状と予測に関するレポートです。

2-4 さまざまな画面サイズへの対応

Screen Sizes
代表的なスマートフォン、タブレット、パソコンのスクリーンサイズを表にしたサイトです。

2-5 パーツをデザインする

iPhone GUI PSD | Teehan+Lax
iOS 6の標準UIをPSD（Adobe Photoshop）形式で配布しています。
Android GUI PSD | Teehan+Lax
Androidの標準UIをPSD（Adobe Photoshop）形式で配布しています。
Patterns
スマートフォンのデザインパターンごとにカテゴリーを分けたUIギャラリーです。
Mobile Patterns
デザイン要素ごとにWebサイトやアプリのUIをまとめたUIギャラリーです。
Pttrns — Mobile User Interface Patterns
カレンダーのUIやカメラコントロール、データが存在しなかったときの画面デザインなど、珍しいデザイン要素が多く掲載されたUIギャラリーです。
UICloud | User Interface Design Search Engine, UI Inspiration, UI Elements, GUI Design, Freebies
スマートフォンだけはなく、Webデザイン全般のデザイン要素をUIごとに閲覧できるWebサイトです。

2-6 スマートフォン用サイトの主なUIパターン

CB2 - Modern Furniture and Home Decor
スマートフォン用ではヘッダーを比較的狭めにレイアウトしたサイトです。スクリーンサイズが小さく、できるだけ多くの情報をファーストビューで見せるためと考えられます。メニューや問い合わせなどのユーティリティ的なボタンをヘッダー内に一緒に配置しています。
Stowe Mountain Resort - Vermont Ski and Golf Vacations - Dining, Lodging, Shopping, Spa and Fun
かなり狭めのヘッダーでデザインされているサイトです。ヘッダーにはサイト主要メニューではなく、ホーム、検索、問い合わせといったユーティリティを配置し、主要メニューはダッシュボード風にメインビジュアルの下にアイコンとして配置しています。
Nothing Interactive | User Experience Design Services For The Rocket Age | Switzerland, Bern | Contao, Drupal, Symfony2
ヘッダーに企業ロゴ、ショッピングカート、検索窓、ナビゲーションを機能的に配置したサイトです。それぞれヒットエリアを広めにしており、誤操作が起こらないように工夫されています。
Viget | Strategy, Design, Development
※リニューアルされました。
Nike.com (JP)
※リニューアルされました。
Flixster - Buy, Rent, and Watch Movies & TV on Flixster
※リニューアルされました。要ログイン。
Roadtrippers | Road Trip Planner | Route Planning
アコーディオン型のサイト。ナビゲーション項目をタップすると下側が開き、そこにサブメニューがリスト状に表示されます。
Ithaca College, Ithaca, NY
リスト型メニューを中心に構成したサイトです。
Custom Software | Cloud Services, iOS Developer, HTML 5 Developer | Eureka Software
http://eurekasoft.com/m.html
ダッシュボード型のサイト。トップページにアイコンを並べたスタイルで、一見、スマートフォンのホーム画面に近い印象のナビゲーションです。
Popsicle
カルーセル型のサイト。メインビジュアルがいま表示している画像が何番目なのかわかるように、小さな丸いボタンを表示しています
Forside | Mesan
カルーセル型のサイト。同じく、メインビジュアルがいま表示している画像が何番目なのかわかるように、小さな丸いボタンを表示しています
Digital paper prototyping - Free trial available - by Pidoco
ペーパープロトタイプの制作支援ツールです。
UI Stencils—iPhone Stencil Kit
ペーパープロトタイプを作成するためのステンシルです。
Website wireframes: Mockingbird
モックアップ作成のための支援ツールです。

2-7 スマートフォン向けWebサイトのレイアウトパターン

Top Graphic Design Agency, Creative Design Agencies, Website Design Studio Sydney | The Creative Company
ナビゲーション項目をコンパクトに4つにまとめています。スタイリッシュな印象を高める要素のひとつに配色がありますが、このサイトは黒に近いグレーのベースカラーのなかで、淡いブルーが際立っています。トップページはこの2色に白のテキストで構成しており、スタイリッシュな印象を高めています。また、アイコンやボタンのデザインがフラットに表現されている点も、最近のトレンドを取り入れている印象です。
エステならグランモア
右上にサロンリストというひとまとめのメニューエリアも見られますが、基本的なメニューはメインビジュアルの下にリスト状に配置し、ほかの補足的なメニューもすべて同じデザインテイストで作成しているので統一感があります。
2012 AUTUMN SHOES COLLECTION | ファッション通販のパルコ・シティ
主要メニューをリスト状に配置しているパターンです。ページ上部のデザインで「オータムコレクション」をイメージする秋っぽいデザインが採用されています。
Hover Studio / London interaction design agency
メニューの項目名によって「どのようなコンテンツがあるか」よりも、企業イメージを優先してアピールしたいという意図と、ひとまとめにしたメニューの必然性が感じられます。
THE STABLES ステーブルズ
スマートフォンでは縦スクロールがしやすいという特性を活かして、トップページは非常に長く、ページ上部で商品カテゴリーなどが選択できるように設計されています。一度読み込めば、縦にスクロールすることでウィンドウショッピングをする感覚で閲覧できます。
Etsy - Your place to buy and sell all things handmade, vintage, and supplies
メインビジュアルでアイテムをランダムに表示し、そこからの動線を優先する設計になっています。商品写真それぞれには価格のみが掲載され、タップするとポップアップで詳細情報が表示されます。また、メインビジュアル全体がカルーセルでスライドするようになっています。スマートフォン特有の操作性と、ビジュアルの目新しさの両方を兼ね備えたインターフェイスの例といえます。
三井住友銀行
縦に長いページで、たくさんのナビゲーションやボタンで構成されています。多様なユーザーにとって必要と考えられるナビゲーションを、省略するのではなくすべて掲載している感じですが、配色やアイコンなどのテイストに統一感があり、きちんとまとまっている印象です。
法政大学
メニューを右上にまとめながら、「ニュース」や「アクセス」といった主要コンテンツのボタン、「在学生の方へ」といった対象ユーザー別のボタンを、大きめのアイコンとテキストで示しています。
東京スカイツリー TOKYO SKYTREE
異なるカラーリングのボタンをツリーの周りを囲むようにレイアウトし、ヒットエリアも十分広くとっています。このようにファーストビューはアプリに近いデザインですが、以降は「イベント情報」や「お知らせ」などのテキスト情報を中心に構成しています。
Acumen is a Bold New Way of Tackling Poverty
トップページでは、右上にメニューを開くボタンがひとつ設置されており、画面全体に写真を大きく使っています。メニューをタップすると、左側から項目がスライドされます。また、ファーストビューの下側に、次の画面への誘導をうながすボタンを配置しています。
Samo Vidic Photography
グリッド状の写真で構成したデザインです。トップページのデザイン要素の配置にもアニメーションを用いるなど細かな演出が見られます。テキストがほぼなく、写真中心の構成です。「写真が主役」のギャラリーサイトならではの大胆なレイアウトといえるでしょう。
Brandified - Web Design & Development - Caernarfon, North Wales
メニューをフッターに固定し、コンテンツをセクションごとに色でセパレートする手法をとっています。同じページでもコンテンツの区切りが明確にわかることに加えて、視覚的なインパクトを強めています。
Hover Studio / London interaction design agency
パソコン版でもタブレット版でも同じ1カラムのレイアウトです。「モバイルファースト」を意識したレイアウトといえます。
Red Bull Studios Network
タブレットにはカラム数を切り替えることで対応。パソコン用サイトと比較すると、メインビジュアルのレイアウトが大きく異なることがわかります。左側のリスト状に並んだメニュー、ビジュアル上の再生ボタンやコピーが削除され、スペースをとらないように縦が狭くなっています。
Second Story Interactive Studios | Interactive Media Design & Development
横スライドを前提にしたレイアウトです。左側にメニューを固定し、コンテンツエリアを横方向にスライドさせて操作します。カタログや雑誌をめくるように、タブレット画面をスワイプしながら見ることを想定しているといえます。
TRACK EM, FIND EM, KILL EM
横スライドを前提にしたレイアウトです。は質感として手作り感を取り入れたデザインであり、アイコンや見出しのデザイン、タップしやすい左右の操作ボタンなど随所にトレンドの影響が見られ、デザイン性の高さがうかがえます。
Woodwork Amsterdam
横スライドを前提にしたレイアウトです。縦に敷き詰めたエリアを折り畳んだ構成になっており、タップするとそのエリアが広がり、詳しく読めるようになっています。ビジュアルと操作感の両面で、スタイリッシュな印象を強く受けます。

3章 アプリのデザイン

Xcode Downloads and Resources - Apple Developer
iPhoneアプリ開発ツール「Xcode」がダウンロードできます。
Getting Started with Android Studio | Android Developers
Androidアプリ開発ツール「Android Studio」がダウンロードできます。
PhoneGap | Home
HTML5、CSS、JavaScriptで作成したWebサイトをアプリに変換できる開発ツールです。
Titanium Mobile Application Development | Appcelerator Inc.
JavaScript にとてもよく似たプログラミング言語でネイティブアプリを開発できるツールです。
iOS Human Interface Guidelines: Introduction
iOSでユーザーが利用しやすいインターフェイスを制作するためのガイドラインです。
iOSヒューマンインターフェイスガイドライン（PDF）
上記ガイドラインの日本語版PDFです。
Design | Android Developers
Androidデバイス向けのガイドラインが確認できます。
Dashboards | Android Developers: Screen Sizes and Densities
Androidデバイスの画面解像度の分類とそれぞれのシェアが確認できます。
Foursquare
デバイスの違い、デバイスの向きに応じて各UIパーツのサイズや位置が変化しているのがわかるサイトです。画面上部のナビゲーションバーは幅が広がり、それと合わせて検索窓の幅が広がりますが、左右に配置されているボタンの位置はそれぞれ左上隅と右上隅のままです。
iPhone GUI PSD | Teehan+Lax
iOS 6の標準UIをPSD（Adobe Photoshop）形式で配布しています。
Android GUI PSD | Teehan+Lax
Android（2.3.x系）の標準UIをPSD（Adobe Photoshop）形式で配布しています。
Downloads | Android Developers
Android 4.x用のUIパーツ素材集。Adobe Illustrator 用、Photoshop用、 Fireworks 用、OmniGraffle用あり。アイコン素材やAndroid 4.xの新システムフォントRobotoもTrueTypeフォントで用意されています。
Android UI Design Kit PSD 4.2 [Free Download] | Android User Interface | User Experience
Android 4.2用のUIパーツ素材集。Nexus 4の画面サイズに合わせて作成されており、Google NowのCardsや、Crouton、Drawer Menu、Action Barsなどがレイヤーグループでまとめられています。
iOS 6：フォントリスト
iOS 6にあらかじめインストールされているフォントのリストです。
POP - Prototyping on Paper | iPhone App Prototyping Made Easy
ペーパープロタイピングに役立つアプリです。実際にタッチデバイスを利用した検証が簡単にでき、現実感のある精度の高い検証作業が可能になります。

4章 レスポンシブWebデザイン

This is the web.
「Webとは何か」をわかりやすく示したグラフィックスです。
Yahoo! JAPAN
パソコン用サイトではViewportを指定していないため、タッチデバイス搭載ブラウザーのデフォルト値で表示されます。なお、スマートフォンには専用のサイトを用意しています。
アップル
Viewportに数値（width=1024）を指定している珍しいサイトです。
Google HTML/CSS Style Guide
Googleが公開しているSyle Guideです。HTMLやCSSの記述のルール、idやclassの命名規則などが記されています。
Style Guide
米Starbucks Coffee社のStyle Guideです。罫線の引き方からブログエントリーのレイアウトまで定義されています。例として、Style Guideで定義されたブログエントリーのレイアウトと実際のブログエントリーを確認してみてください。
Components · Bootstrap
CSSフレームワークとして有名なBootstrapのCompornentsページ。このようにHTMLソースをコピー＆ペーストできるようにしてあると、制作効率がいっそう向上します。
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
画面解像度やウィンドウサイズに応じて固定サイズのグリッドを表示するフレームワークで、HTMLの各要素へのスタイリングは最小限に留められています。以前は、404.htmlやタブパネルを作成するための コードが記述されたJavaScriptファイルが同梱されていましたが、バージョン1.2以降では削除され、かなりシンプルな作りになっています。
Bootstrap
Twitter社が公開している非常に知名度の高いCSSフレームワークです。デザイン性の高いパーツを豊富に揃えており、特にWebアプリケーションや管理画面の開発、さらにプロトタイピングに適しています。一方、Webサイトでデフォルトのスタイルのまま使うと、デザインテイストがほかのサイトと同じようになってしまうことがあるので、入念にカスタマイズしたり、配色などを変更したテーマの生成ツールを利用するとよいでしょう。
Foundation: The Most Advanced Responsive Front-end Framework from ZURB
カリフォルニアにあるWeb制作会社「ZURB」が公開しているCSSフレームワークで、Bootstrapと同様にデザイン性の高いパーツを豊富に揃えています。
Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar
Google Chrome、Firefox、Opera、Safari のブックマークレットとして利用できるツールで、ブラウザーウィンドウ内で特定のViewportサイズをシミュレートできます。
FitWeird by davatron5000
画面解像度やウィンドウサイズをpxからemへ動的に変換してくれるブックマークレットです。
Skinny Ties | Nothing but skinny ties.
レスポンシブWebデザインを採用しつつ、さまざまな仕掛けがほどこされており、非常に参考になるサイトです。グローバルナビゲーションからドロップダウンで展開されるメガメニューは、商品が視覚的にわかりやすく選択できるようになっていたり、メインイメージの並んだネクタイをタップすると次のページに誘導されるしくみになっています。
Tilde Inc.
シンプルでありながらも、青と黄色という色相差がはっきりとした配色を効果的に使い、レイアウトのバランスもよい秀逸なデザインです。また、ナビゲーションをページ上部にまとめていますが、フッターにはす べて表示させており、ページ全体を見終わったあと、スムーズに別のページに移動できるように配慮されています。
Fashion News, Latest Trends, Catwalk Photos & Designers (Vogue.com UK)
イギリスのVogueのサイトです。ソーシャルメディアのアプリケーションでよく使われているアイコン、たとえば横棒を並べてメニューを表すアイコンがWebデザインに取り入れられています。
Focus Farther | space150
同じく、横棒を並べてメニューを表すアイコンが取り入れられているサイトです。
Káva Růžová - prodej čerstvě pražené kávy
パソコン用サイトでは縦に3分割したレイアウトを提供していますが、スマートフォンでは横分割に変更されます。パソコンでは大きく表示される地図エリアを、スマートフォンでは非表示にし、シンプルな構成になっています。
Future Insights Live 2013
タブレットで見ると、パソコン版の幅を縮めただけですが、スマートフォン版では大きく異なるレイアウトに変更しています。このサイトも、ページ上部にメニューアイコンを配置しています。ドロップダウンで下に展開するのではなく、左側からスライドし、メイン部分を右に押し出す表現を採用しています。
Web designer freelance Michela Chiucini - Web agency Viareggio Lucca
細部まで行き届いたデザインが印象的です。スマートフォンやタブレットではメインビジュアルを非表示にしており、低速回線の環境でも表示を待つストレスを感じさせません。
Rainbow Nursery — Bathgate
スマートフォンやタブレットで見た場合も、イラストのエリアが画面の大部分を占めていますが、パソコン版では表示される背景やアニメーションのイラストを非表示にし、シンプルにしています。

5章 プロトタイピングの活用

.: FLASH VS HTML :.
かなり高度なパララックスが採用されているサイト。このようなWebサイトは静的カンプを作成し、それにもとづいて、という制作は不可能に近いでしょう。
Mailbox - Put Email In Its Place
iPhoneアプリ「Mailbox」のWebサイト。このように1ページからなるWebサイトは「ペライチ」と呼ばれますが、特に凝った装飾もなく、必要なコンテンツがきちんと設計できており、ワイヤーフレームさえ描いておけば、わざわざAdobe PhotoshopやFireworksで静的なカンプを作成する必要はないでしょう。
Sass - Syntactically Awesome Stylesheets
特に利用者の多いCSSプリプロセッサー。
CodeKit — THE Mac App For Web Developers
Mac用のアプリで、Sass、LESS、Stylusに対応。ソースコードの監視と自動コンパイル、CoffeeScript対応、画像の最適化（軽量化）機能など、ほかにも豊富な機能を搭載。シェアウェアで、$25で購入可能（2013年8月現在）。
Scout - Compass and Sass without all the hassle
Mac用とWindows 用の両方があるアプリ。Sassのみの対応。
modern.IE
Microsoft社が提供しているサービス。Webページの互換性を確認できる検証ウィザードやクロスブラウザーチェックのための検証環境が利用できます。
Adobe Edge Inspect
Adobe Systems社が提供しているツール。実機検証の際、ファイルを修正するたびにタッチデバイスのブラウザーのリロードボタンを押したり、WebページのURLを入力しなければなりませんが、このツールを利用すればこれらの手間がなくなり、実機検証を大幅に効率化できます。
LiveReload
HTMLファイル、CSSファイル、画像ファイルなどが更新されると、それを検出して自動的にブラウザーをリロードしてくれる有償アプリです。

6章 サンプル＆チュートリアル

ベクターベースのドローイングツールで、Fireworksの操作感に似ています。ワイヤーフレームの作成にはもちろん、シャドウやグラデーション、ブレンドといったエフェクトの作成・管理も可能で、@2x画像の書き出しへも対応しているなど、リッチなグラフィックに凝らないシンプルなサイトのデザインであればデザインツールとして十分に使えます。
Bootstrap
Twitter社が公開している非常に知名度の高いCSSフレームワークです。デザイン性の高いパーツを豊富に揃えており、特にWebアプリケーションや管理画面の開発、さらにプロトタイピングに適しています。一方、Webサイトでデフォルトのスタイルのまま使うと、デザインテイストがほかのサイトと同じようになってしまうことがあるので、入念にカスタマイズしたり、配色などを変更したテーマの生成ツールを利用するとよいでしょう。
html5shiv - HTML5 IE enabling script - Google Project Hosting
HTML5をサポートしていないInternet Explorer 8以前のようなブラウザーでも、HTML5のタグを認識させられるようにするJavaScriptライブラリ。
scottjehl/Respond
Internet Explorer 8以前でも、Mediq Queriesが利用できるようになるJavaScriptライブラリ。
Placehold.it - Quick and simple image placeholders
URLのパラメータに生成する画像のサイズを指定すれば、簡単にアタリ画像を作成できるツール。
Style Tiles
Style Tilesのサイト。Style Tilesの活用方法についての解説はもちろん、サンプルやテンプレートをダウンロードできる。