“Junior Designers vs Senior Designers”というエントリーで、経験の少ないデザイーナーとデキるデザイナーの違いが、わかりやすいイラストで簡潔に表現されています。（実際にイラストを見ないとわかりづらいかもしれないので、サイトで確認ください。）

この中で、FacebookのDesign DirectorのJulie Zuoが紹介しているポイントは、

• 1) プロセス: やみくもに迷走しながら進むのではなく、論理だったメソッドを順次検証することによりゴールに到達する。
• 2) 目標: 「よく見せる」、つまり、型の決まった箱の中でパーツを整理して並べるのではなく、「価値をつくりあげる」、つまり、パーツをうまく組み合わせて美しい顔を表現する。
• 3) バリューが発揮されるステージ: 課題を解決するソリューションをデザインするのが最も大変なのではなく、「課題の把握」->「ソリューションのデザイン」->「ユーザに提供」->「課題を解決しきるまでブラッシュアップし続ける」という段階に従って、難易度 & バリュー発揮への期待度は上がっていく。アイデアにはあまり価値はなくて、エグゼキューションと結果が全てである。

さて、2) で挙げられている、美しい顔をつくりあげるようなバランスという観点からすると、昨今は、かなりチャレンジな状況になってきました。デバイスのフラグメンテーションは、

• スマホ / タブレット / ウェアラブル / PC / TVというデバイスセグメントの増加
• 膨大な数の機種
• タッチ & キーボード & ジェスチャー & 音声などのインプット手段の多様化
• スクリーンサイズ & 解像度の細分化

と広がっています。とすると、webサイトを作成する際に、三つほどのブレークポイントを設定して、その閾値でレイアウトを変更するだけのアプローチでは、理想のバランスに対応しきれず、「しっくりこない」デザインを生み出してしまう可能性があります。

これに対して、2010年にレスポンシブデザインを唱えたEthan Marcotteは、

• 「ページをつくるのではなく、スクリーンサイズに合わせて、メッセージを伝えるのにベストなかたちに再アレンジされたコンテンツのネットワークをつくる。」（Trent Walton）
• 「心配というのは未来のことを考えるからではなく、未来をコントロールしたいと思うからである。」(Khalil Gibran)
• レスポンシブデザインにおいて、デバイスごとにコントロールしたいという従来のアプローチでなく、レイアウト / ナビゲーション / アニメーションに対して、ありのままの状況を許容するアプローチを採ると、どのスクリーンサイズでもインターフェースが再編集される伸縮自在さがもっと表現できるのではないか。
• 「アニメーションはそれ以前からあったが、ストーリーとして語られるかたちに仕上げたものはなかった。（Marc Davis）」と評された初期のディズニーの取組みは、いかにリアリズムのあるアニメーションを実現するかということ。そこで求められる12パターンのエッセンスは、"The illusion of life”という二分あまりの短いビデオにまとめられている。
• （これに倣い、）最近は、インターフェースでなく、トランザクション（画面の操作/変化）をデザインする仕事が増えてきている。

という方向性を、E4E Developer Conf 2014の講演で紹介しています。

事例として挙げられている取組みは下記の通り。

ビデオのレイアウト

• Edible Vineyardのこのページように写真であれば、ブラウザで表示サイズを小さくしていっても、CSSでmax-widthを指定しているので、コンテナのエレメントを超えてレイアウトが崩れることもなく、また、適切な縮小効果で比例してリサイズしてくれて違和感はない。一方、自分のブログに掲載したビデオの場合、確かに表示サイズはレスポンシブに変化してくれるが、ビデオとしてのあるべき縦横比まで考慮したかたちにはなっていなかった。heightが対応できていない。
• MADE BY HANDやThe DO Lecturesでは、適切な縦横比をキープしたまま、リサイズしてくれる。ページの最初の読込みの際に、JavaScriptでビデオのサイズを把握し、ブラウザのサイズの変化 / 画面の方向の切替に対応して、その都度描画し直している。
• JavaScriptでなく、CSSネイティブでやりたい場合は、Thierry KoblentzがA List Apartで紹介しているアスペクト比を利用したアプローチを参照されたし。

柔軟なグリッド

• Editorially（残念ながらこのサイトはクローズされたようなので、ビデオの16分時点〜をご覧ください。ワザノバのように、記事のブロック列で構成されているページレイアウトです。）の事例。
  • まずは、Fluid Gridの基本として、エレメントのピクセル幅（この例では、278px）÷ コンテナのピクセル幅（887px）= 31.0033821871476%、エレメント間のマージン: 22px ÷ 887px = 3.0439684329%、のそれぞれの%の数値を自分で切り上げしないで、実数をCSSに貼付けてブラウザ側で処理させている。
  • また、nth-child()を利用。例えば、.doc-cell:nth-child( 2n ) { … }とすると、nがカウンターの役割をするので、記事ブロックがいくつあれど、偶数番目のブロックに反映させることが可能。三列ブロックにおいて.doc-cell:nth-child( 3n ) { … }を設定すると、三つ目ごと、つまり一番右側の列にmargin-right: 0;を適用できる。同じく.doc-cell:nth-child( 3n+1 ) { … }だと、一番左側の列だけにclear: left;を使える。古いIEには対応できないが、表示する列の数にあわせてn値を増やして最適なレイアウトを指定するこの手法を組み合わせると、ブラウザのサイズの変化にかなりスムーズ、かつ限界なく対応するサイトをつくることができる。

コンテンツにあわせたレイアウトという考え方

• Nathan FordのA List Apartの記事は、コンテンツ駆動型のデザインをどのようなケースで採用すべきかを紹介している。

ナビゲーションの工夫

• 小さい画面サイズにおいて、FiveThirtyEightのケースはメニューバーがプルダウンリストに、Walmartではキャンバスの横に隠れているメニューを表示させる（Facebookのようなかたちですね。）かたちにしている。
• 採用に賛否両論のあるハンバーガーメニューも、Timeはサイトリニューアルに際して、Menuというテキストを下部に配し、かつマウスオーバーとするとサイトナビゲーションの機能であることの説明をだすことで工夫している。
• 4者択一のケースで、ラジオボタン付きのリストではなく、選択肢をクリックすると、アニメーションが変化して確認画面に変わる。（文字で説明しづらいので、ビデオの38分あたり を確認ください。）

#レスポンシブデザイン

---

ワザノバTop200アクセスランキング

---