WD101: 画面ではなく部品から始めてみよう

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。

• Webは見た目のコントロールがきかない
• モニターの外をデザインするのが大半である
• Webは寛容性をデザインする場である
• Webのデザインは枠のない世界である
• Webデザインであるもの、そうでないもの

Windows中心設計は5年前の話

すべてのデバイスやソフトウェアで同じように Web サイトをデザインするのは不可能といっても過言ではありませんし、むしろ違いを受け入れ、利用者の環境やニーズを尊重するのが Web デザインの本来あるべき姿です。柔軟性・拡張性をもつ Web ですが、Web デザインはページの概念を強く意識したビジュアルデザインが最優先された時期がありました。

パソコンが Web アクセスの中心だった頃は、利用環境が限られていたので、同じような見た目を再現するのは難しくありませんでした（もちろん IE6 問題などはありますが）。グラフィックデザインの要素が強いページデザインでも、どのパソコンからでも見ることが出来たので柔軟性や拡張性が重要視されることがあまりありませんでした。「Windows で見れればだいたいの人が見れる」と考える人がいたのも、Web アクセスするための OS の 9 割を Windows が占めていた時期がありましたし、Web利用環境も限定されていたからでしょう。

上図は KPCB が 2012 年末に公開した インターネットトレンド にあるデータからつくった Web アクセスをしている OS / デバイスの比較図です。これを見ても分かるとおり、今は Android が最も Web アクセスがある OS に迫る勢いですし、Apple （iOS）も昔に比べると無視できない存在になりました。わずか数年で世界が大きく変わったのが分かります。

この変化の要因のひとつは、スマートフォンやタブレットをはじめとした、パソコン以外での Web アクセスが増加したことと関係しています。スクリーンサイズ、解像度、回線、用途、インタラクションすべてにおいて多様になり、「最もシェアが多いデバイス向けに作れば大丈夫」と言えるのは遠い過去の話になりました。

Web へアクセスするデバイスが増えただけでなく、Web との関わり方も多様化した中、従来のような「ページ作り」は非効率どころか何を作っているのかさえ分からなくなってくるでしょう。状況が大きく変わった今だからこそ、従来の Web ページデザインの思考パラダイムも変わらなくてはいけません。

ページの枠が消えたときに見えるコト

多彩なデバイスに対して柔軟に対応する手法のひとつとして レスポンシブ Web デザイン が大きな支持を得ました。しかし、レスポンシブ Web デザインにしても「このブレークポイントでこのレイアウト」といった条件分岐でページレイアウトを作るという考え方を続けていると、従来のようなページレイアウトの概念に捕われる恐れがでてきます。

最近注目しているのは There’s No Breakpoint で紹介されているような、各スタイルに Media Queries を挿入する手法。これによって UI コンポーネントごとに動作を確認したり調整することが容易になります。特定のブレークポイントによる制約から逃れ、より柔軟で自由なデザインができます。

では、レスポンシブ Web デザインを長所を活かすにはどうすれば良いのでしょうか。特定のデバイスに向けたデザインをする際にも言えることですが、ページレイアウトではなく、コンポーネントを設計し始めると良いでしょう。ここで言うコンポーネントとは、コンテンツとしてまとめることが出来る最小の塊を指します。例えば、タイムラインに入るようなニュースアイテム、製品情報、お問い合わせ情報があります。レイアウト要素以外のすべてといっても良いでしょう。

これらをデザインする際に以下のような要素に注目します。

• 文字の大きさや行間
• 空白（可変グリッドだからこそ必要になる可読性）
• 情報フロー（意味が通じる順に情報が並んでいるか）

ひとつひとつのコンポーネントを設計が出来たら、今度は画面全体の組み立てに入るわけですが、ここでも上記の要素の確認が必要になるでしょう。組み合わせたことによって見えてくるリズムや組み替えが必要な情報フローが見つかるかもしれません。画面単位でのデザインをする前に、画面を構成する『部品』から作り始めることで、ページという枠から離れた柔軟性の高い設計が可能になります。

枠がない世界でのルール作り

様々な可能性をスケッチした後、最適な形を選んでマークアップをはじめます。

どのように部品を作りはじめたら良いのか分からないかもしれませんが、良いインスピレーションは Web 上にたくさんあります。例えば Twitter Bootstrap は Web サイト／アプリケーションを構成する様々なコンポーネントが揃ったライブラリのような存在です。Bootstrap で挙げられている UI 要素を自身のサイトに活かすなら、どのような形が最適なのか考えてみるのは良いスタートです。

こうした現存するライブラリからコンポーネントを設計するのも手段ですが、特定の Web サイト／アプリケーションのニーズを満たすためであれば、以下のようなステップを踏むと良いでしょう。

• 必要なコンテンツ、配信しているコンテンツを洗い出す
• コンテンツをタイプ別にグループ分けをする
• グループごとにコンポーネントのスケッチを行う
• スケッチを基にマークアップとスタイリングを行う

出来上がったコンポーネントを組み合わせて画面でテストし、再び設計・調整を行いまたテスト。この繰り返しがコンポーネントが洗練され、環境が変わる度に設計のし直しになる可能性を低くしてくれます。

人がどのように、あなたが作ったサイトを見るかが分からない時代。レイアウトという大きな枠組みが、利用者のスクリーンにきれいな形で見えるとは限らないわけです。だからこそ、小さなコンポーネントが「このサイトにいるのだ」というイメージを利用者に与えることができる要素になります。