トップページの役割が各コンテンツへの導線とするならば、下層ページはまさにコンテンツ本体である。Webにおけるコンテンツとは情報そのものであり、いかにスムーズにビジターに対して情報を提供するのかがサイトの真価となる。下層ページにおける情報提供は、トップページ以上に気を配りたい。

1-1.コンテクストとは

コンテクストとは「前後関係」や「文脈」といった意味を持つ単語だ。では、サイトにおけるコンテクストとは一体何なのだろうか？
サイトとは極論すれば、ある連続性を持った情報の構造体である。その連続性とはある一定のルールや流れのことであり、例えばこれまでに何度か登場したマージンやテキストのルーリング、ナビゲーションのインタラクションであったりする。
コンテクストを作り出すことは、すなわちユーザーの学習を手助けすることである。ある一定のリズムを持ったサイトであればユーザーは次に何が起こるのかを予測することができるようになるが、逆に学習しづらいサイトであればユーザーにストレスをかけることになってしまう。

●ナビゲーションのコンテクスト

ナビゲーションは大きく分けると縦型、横型があるわけだが、基本的に外観および機能は継承する。デザインによっては変化する場合もあるわけだが、少なくとも機能、およびインタラクションにおいての変更は避けること。
また、下層ページからは必ずホームページへ戻るための仕組みを組み込んでおかなければならない。

●構成要素のコンテクスト

リンクの表現や使用するボタン、デザインのテイストなどの外観、および機能を継承する。
例えばショッピングカートで決済手続きをしている時は1ページでは完結しない場合がほとんどだ。こうした時に、すべてのページで表記法法統一されていないとビジターは違う機能なのかもしれないと思ってしまう。

●情報のコンテクスト

これは下層ページだけの問題ではないが、ラベルと表現法法をサイト全体で一致させる。
サイトが大きくなると複数のスタッフが関わることになる。こうした時に、表記法が統一されていないと、人によってまちまちな表現をしてしまい、結果的にコンテクストを喪失してしまう恐れがある。

1-2.コンテクストの喪失

コンテクストについての解説が終わったところで、逆の状態についての話をしよう。先ほどWebサイトとは連続性を持った情報の構造体であると説明したが、この連続性が断絶した時に“コンテクストが喪失した”という状態に陥る。つまり、クリックした次の瞬間にビジターが「あれ？」と思ってしまう状態のことだ。
例えばデザインの外観が急激に変化してしまったり、下手をすると今まで使っていたナビゲーションがなくなってしまったりすることを指す。こうなってしまうとビジターは困ってしまい、ホームページへ戻ろうとする。しかし、戻るための機能を持ってない場合は、大体の場合サイトを立ち去ってしまう。

(2)ナビゲーションの展開

ナビゲーションの基本構造はトップと下層で維持するという原則に基づいて、実際に下層ナビゲーションを組み立ててみよう。

2-1.縦ナビゲーション

汎用性に優れ、メニューの増減に強いというメリットを持つナビゲーション。ただし、カテゴリーが増え過ぎると縦に長くなり過ぎるというデメリットを持つ。下層ページへの展開としては、直感的に構造の把握しやすい「多層構造型」と、操作性を重視した「縦横混在型」に分類される。

●多層構造型

現在位置をナビゲーションを見ただけでも把握しやすいというメリットを持つが、反面、以下のメニューが必要以上に下へ移動してしまうというデメリットを持つ。

●縦横混在型

サブメニュー部分をコンテンツ側に分離してしまう方式。ナビゲーションの位置が著しく変化することがないので、操作のコンテクストとしては優れている。ただし、ナビゲーションを見ただけでは現在位置が把握しにくいというデメリットを持つ。そのため、実用にはもう一工夫欲しいところだ。

2-2.横ナビゲーション

直感的に現在位置を把握できるというメリットを持つが、コンテンツの増減には弱い。しっかりとしたコンテンツ計画を立てないと成立しないため、事前の設計が肝になる。
こちらのナビゲーションも「多層構造型」と「縦横混在型」に分類される。

●多層構造型

メニューの増減に弱いという点以外、弱点らしき弱点の見当たらない優れたナビゲーション。現在位置の把握という点では他の追随を許さない。ただし、ヘッダー部分がだいぶ厚くなるので、情報の掲載方法には十分な注意が必要だろう。

●縦横混在型

情報量の多いサイトで一番利用されているナビゲーション。メニューの上下関係がコンテンツの階層そのものであり、得てして数の多くなりがちなサブメニューを縦ナビゲーションにすることができる。

2-3.その他のナビゲーション

FlashやDHTMLを使うと、さらにダイナミックなナビゲーションを組み立てることも可能だ。

●メタイメージによるナビゲーション

メニューの構造としては縦→横の「縦横混在型」だが、ノートというメタイメージを上手く使って直感的なナビゲーションに仕上げている。

●Flashを用いたナビゲーション

メニューの構造としては横→横の「多層構造型」だが、Flashを用いることでより直感的に、しかも面積の節約に成功している。

(3)下層ページに必要なもの

3-1.ホームページへ戻るボタン

サイト内でユーザーが迷子になった時、多くのユーザーはそのサイトのホームページへ戻ろうとする。この時にホームページへ戻るボタンがないと、慣れたユーザーであればURLの不必要な箇所を削除して戻ることができるが、不馴れなユーザーであればサイトから立ち去ってしまう。
こうした事態を避けるためにも、下層ページにはホームページへ戻るためのボタンを必ず設置しよう。このホームページへ戻るためのボタンの設置には現在のところ3種類存在する。

1. ヘッダーに設置したロゴから戻れるようにする。
2. 他のメニューと同様に明示的に設置する。
3. メニューからは離れているが、ヘッダー内に収める。

パターンとしてはおおよそこの3種類が主流となっており、一番多いパターンとしてはロゴにのみ設置するパターンとなっている。

3-2.トピックパス

トピックパスは別名、「パン屑ナビ」とも呼ばれており、必須ではないが多くのサイトで利用されている。訪れているユーザーに対し、“現在位置”と“上階層への移動手段”を提供することができる。
この手段が特に有効なのはサイト構造が整然としており、上下間の移動が多いサイトだろう。逆に不規則な移動が多発するサイトには向かない。この場合はナビゲーションを工夫し、現在地を明確にするような処置が必要になるだろう。

(4)見出しの基本

文字を伴う画面のレイアウトは、些細な箇所への気配りで全体の印象が大きく変わってくる。知的に仕上げたいものでも、うっかり手を抜くとなかなか全体の印象がまとまらない。見出しと本文などの一見、何の工夫のしようもないところが、実は重要だ。

4-1.見出しの扱いを統一する

サイト内の情報をピックアップしやすく作るためには、細かい見出しの設定が必要だ。Webのようにモニタで見るような情報は、情報ごとに見出しを設けて掲載内容を示す方方が一般的である。こうした考えに基づいて、現在のWebサイトには多くの見出しが含まれているが、その場合、すべての見出しに統一した見栄えを持たせることが基本だ。
画像テキストを採用した見出しは、すべて同じフォントを利用すると、全体の統一感が得られる。また、フォントの形状だけでなく、位置関係を配慮に入れるとさらに良い。一度、見出しと本文という位置関係を決定したら、サイト全体でこれらの要素の位置関係を崩さないことが、レイアウトに一定のリズムを持たせ、レイアウトに安定感を持たせることに繋がる。

4-2.本文との位置関係に注意

見出しの位置と本文のスペースをきれいに揃えるコツは、見出しの位置と本文を若干離して配置することだ。この手法で要素にまとまりが出る。任意の空きスペースを作るには、HTMLの強制改行では無理なので、よりよい見栄えを追求するならCSSを用いて調整するとよい。また、見出しそのものをタグで段落扱いすると、HTMLでは完全に１行分の空きができる。見出しと本文位置が過剰に離れるとそれぞれの関係性がみにくいばかりか、レイアウトをコントロールしきれていない印象を与えるので注意して組みたい。

4-3.サイト機能で方法を検討

確かにポイントとなる見出しを画像テキストにすると、美しいレイアウト作りの近道となるが、サイトに必要な機能にも目を向けたうえで利用を検討しなければならない。
特に学術的な内容のサイトでは、利用者が資料としてテキストの一部を保存する可能性もある。この場合、ブラウザから直接適すとを選択、コピーできない画像テキストは、サイトの利用価値を下げてしまう。内容に合わせて活用すべきだ。

デジカメの普及とともに、Web制作のための撮影をデジカメで済ましてしまうケースが増えている。しかし、プロがライティングした写真と異なり、発色がおかしかったり、露出が足りない場合がよくある。そんな時に行うのが、写真の色補正である。

1-1.明度・暗度の補正

写真撮影時に露出が合っておらず、全体的に薄暗くなってしまうことはよくある。こうした時には明度を補正する。ただし、写真が明るくなりすぎた「白トビ」、逆の暗くなりすぎた「黒ツブレ」を起こしてしまっているものについては補正しきれないことが多い。そういった場合には思いきってハイキーなカラーにしてしまうのも一つの手だろう。

●レベル補正

レベル補正は「ヒストグラム」を見ながら補正することができるので、写真全体の明度・暗度を補正するのに向いている。
ただし、補正は全体にかかるので、あるレベルだけを調整したい場合には向かない。

●トーンカーブ

トーンカーブはレベル補正に比べるとピンポイントで明度・暗度の補正をするのに向いている。使いこなすのは難しいツールだが、トーンの意味さえ掴んでしまえば様々な補正を行うことができる。

●明るさ・コントラスト

トーンカーブを使って中間色を補正するとコントラストが弱い、いわゆる「眠い」画像になってしまう場合が多い。こうした時はコントラストを強くすることで、印象を変えることができる。ただし、あまり強度な効果を加えると「トーンジャンプ」を起こしてしまうので注意しよう。

1-2.カラー補正

室内で撮影を行うと、“色が被っている”ケースは頻繁に発生する。
蛍光灯下の青カブリなどがこれにあたり、。こうした時は、被った色相の彩度を抑えるのが基本となる。

●色相・彩度

色の構成要素である「色相・彩度・明度」を調整することができる。色々な意味で使い勝手の良いツールなので覚えておくと良いだろう。

●バリエーション

ワンクリックでプレビューを見ながら色を調整することができるので、非常に便利だ。ただし、「色相・彩度」と異なり被っている色を調べることができないので、この方法で色補正をするには多少の慣れが必要だろう。
また、明確に傾けたい色が存在する場合は、この補正の利用価値は十分にあると言える。

1-3.調整レイヤーの利用

一度、色を補正してしまうと再度、補正し直すのは非常に手間だ。こうした時には「調整レイヤー」を利用すると便利だ。
調整レイヤーを使って補正された部分はいつでも削除・編集を行うことができるので、オリジナルの画像を保持したまま色補正を行うことができる。また、調整レイヤーにもマスク・グループ化を設定することができるので、有効に活用しよう。

(2)リサイズ・トリミング

デジカメで撮影した写真をWebサイトで利用しようと思うと大きすぎる。こうしたケースはあらゆるシチュエーションで発生する。この場合に行うのが、「リサイズ」と「トリミング」という作業だ。両方とも“画像を小さくする”という点では同じだが、それぞれ目的が異なるので、ケースバイケースで使い分けていこう。

2-1.リサイズ時の注意

画像の変形を行うとき、決してやってはいけないのは元画像よりも拡大することだ。元画像よりも拡大すると、 Photoshopは計算によって足りない部分の画素情報を生成する。確かにある程度であれば気にならないレベルだが、画像全体が荒れた印象になってしまう。こうなるとせっかくの画像も台なしになってしまうので、画像の変形は「大→小」が鉄則と覚えておこう。

2-2.リサイズ

画像のサイズそのものを小さくして、任意の画像サイズにおさまるようにする手法。被写体全体を見ることができるのでイメージはつかみ易いが、その反面、画像が細かくなりすぎて視認性が落ちることもあるので注意が必要だ。

2-3.トリミング

画像の必要な部分のみを大きく扱う手法。トリミング次第では非常にインパクトのある画像を作ることができるが、トリミングする箇所の選択を失敗すると、伝えたいことが伝わらなかったりと多少の慣れとセンスを必要とする。

2-4.シャープ

縮小した画像はPhotoshopで補正されるが、この時、特にエッジの部分の処理が甘くなる。結果、“ゆるい”印象になってしまうので、シャープ系フィルターを使って画像を補正しよう。これだけでも随分と印象が引き締まって見える。
縮小したらシャープ。これが基本だ。

(3)画像の変形

拡大・縮小以外の変形も操作法法はほとんど同じだ。一応、確認の意味でざっと見ていこう。

3-1.回転

バウンティングボックスを回転させることで、画像を回転させることができる。

3-2.ゆがみ

バウンティングボックスの4つ角を起点にして、画像を変形することができる。

3-3.遠近法

「3-2.ゆがみ」と似ているが、必ず2つの角がセットになって変形するという点がことなる。
切り抜いた画像の影を作成する場合などに利用される。

3-4.180度回転・90度回転(時計回り)・90度回転(反時計回り)

それぞれの角度で画像を回転させる。

3-5.垂直方向に反転

縦方向に画像を回転させる。180度回転と同じ機能。

3-6.水平方向に反転

左右を反転させる。

(4)画像の切り抜き

4-1.マスクの基礎

マスクは不必要な部分を表示しないようにするための機能だ。画像の合成などに利用され、高度なグラフィックの作成には欠かせない機能の一つとなっている。
Photoshopにおけるマスクは、「長方形選択ツール」や「自動選択ツール」で作成した「選択範囲」に対して適用される。つまり、マスクとは“画像の表示制御用の特殊な選択範囲”だと言い換えることもできる。
マスクは適用対象となっているレイヤーと共に保存されており、いつでも再編集することができる。また、削除と異なりいつでも復帰させることができるのも魅力だ。

4-2.選択範囲の作成

Photshopは選択範囲に対して処理を行うソフトウェアだ。つまり任意の選択範囲を作成することができるようになることが、Photoshopを扱うための第一歩と言える。ただし、目的とする選択範囲によって使用するツールが異なるので、それぞれの特性を理解しておこう。

●自動選択ツール

マスクしたい範囲が単色もしくはそれに近い場合。また逆にマスクしたい範囲外が単色もしくはそれに近い場合に効率良く選択範囲を作成することができるツール。
上部パネルで選択する範囲やアンチエイリアスの有無などのオプションを設定することができる。

●色域指定

色域から選択範囲を作成するツール。
範囲、複数の色など、細かく操作することができる。

●クイックマスク

クイックマスクはこれまでのツールと毛色が異なるが、細かい選択範囲を作成することができる。

●ペンツール

ペンツールはベジェ曲線を描くためのツールだ。パラメトリック曲線によって曲線や直線を効率良く描くことが可能で、選択範囲を作成することも可能。
なお、本講議ではベジェ曲線について履修している時間がないので、省略する。

4-3.チャンネル

チャンネルは選択範囲を保存するための特殊なレイヤーだと思ってもらって良い。チャンネルにおけるアルファ値 100%は白(#FFFFFF)であり、アルファ値0%は黒(#000000)である。つまり、黒→白のグラデーションを使用すれば、だんだん表示されるといったことが可能となる。
マスクとは特殊な選択範囲であることは前述した通りだが、このマスクもチャンネルから編集することができる。なお、チャンネルにマスクが出現するのはマスクが適用されているレイヤーがアクティブになっている場合のみなので注意すること。

4-4.抽出ツール

抽出ツールはPhotoshop 6.0から実装された機能で、動物の毛のようなエッジが曖昧(あいまい)な画像を切り抜く場合に使用する。なかなか上手く行かないことが多いが、かなり強力な機能なので使い方だけ確認しておこう。

表現における色彩の効果は極めて重要である。それだけに配色はしっかりとした計画に基づき、進めたい。配色の手順は、イメージの組み立てから、色をセレクトする段階までが特に重要だ。デザインは単なる思いつきや好みで決まることはなく、そこに裏付けが必要となるためである。

1-1.配色の手順

[STEP.1]イメージを決める

Webサイトを作成する際に基本的にしておかなければならいないのは、サイトを通してどのようなメッセージを発信するのかということになる。これは掲載するコンテンツに関わってくるので、内容が明確に決まっていれば問題はない。
次にどのようなイメージに統一するか、コンセプトを立てなければならない。このイメージコンセプトは、Webサイト全体に影響するものだ。これによって配色、レイアウト、ビジュアルを制作することになる。イメージコンセプトという言葉が分かりづらいということであれば、“サイトの雰囲気”と言い換えても良い。

[STEP.2]イメージを言葉で表現する

自分が作りたいWebサイトのイメージは、最初は漠然としている。配色では具体的なイメージでなくてもいいのだが、大切なのは「イメージがある」ということだ。このイメージがないと、デザインの途中でつまずくことが多い。
次にそのイメージを単純な言葉で表現するとどうかを考える。例えば、「ナチュラルな感じ」とか「シックな感じ」いった具合だ。

[STEP.3]配色方法

色にはその背景にイメージがあり、これはこれまでの社会での経験に基づくものだ。例えば黄色と黒色は注意といった具合だ。
このように色にはイメージが付いており、これを一般的な平均値としてとったものがカラーチャートである。
【参考サイト】
技術評論社Website Design「Webセーフカラー配色辞典」

(2)色の組み合わせ

カラーは「色相、彩度、明度」によって表現される。配色はこの組み合わせだが、その組み合わせパターンを知っておくと、デザインの幅が広がる。

2-1.色相の同系(明度・彩度の変化)

異なるトーンでも色相が同じ色は、協調性が高いので配色しやすい。特に背景色と文字はこの色の関係を利用すると自然に収まる。

2-2.トーンの類似(色相の変化)

色相が異なる色でも、トーンをそろえてカラーバリエーションを考えると、まとまりやすい。

2-3.色相の類似(色相・明度・彩度の変化)

色相環の中で隣り合った関係にある色は、親和性がある。ただし、背景とタイトルの関係では可読性を妨げる。

2-4.色相の対比(色相の変化)

いわゆる補色の関係。色相環で反対に位置する色を合わせると、インパクトの強い表現になる。ただし、うるさい印象になるので使いどころには注意が必要になる。

補色の組み合わせはRBGの場合、色同士が隣接するエリアでハレーション(ギラついた感じ)を発生させることが多いので、もし使うのであれば白などのセパレータを挟むのも手。

2-5.有彩色と無彩色

無彩色はいかなる有彩色とも調和しやすい。失敗しない配色。
ただし無彩色の面積が増えてくると、画面全体がくすんだ感じになりやすいので使用量には注意が必要。

Webブラウザは狭いインターフェースと広い情報開示エリアを持っている。しかも、機能として用意されているのは「進む」や「更新」など極めてシンプルな機能ばかりだ。
これが何を意味するのかというと、Webサイトの閲覧にはこちらで用意したインターフェースだけが頼りということだ。つまり、機能的なレイアウトやユーザーインターフェース(以下、UI)のデザインが極めて重要なのである。

1-1.縦方向基準フォーマット

レイアウトを構成するにあたり基準となる考え方は、実際に閲覧するスペースと操作用の機能を盛り込むスペースをわけるといった、機能別に画面を分割するものだ。一般的には縦方向に画面をわける方法がもっとも用いられている。このとき、画面を移行するためのメニュー郡を左部分に配置するケースが一般的だ。
いまさらながらだが、Webは左を基準に考える。
これはブラウザにリサイズという機能があることが理由で、リサイズすることによってページの右側が移動するためだ。移動するのが何故、まずいのかと言うとUIが移動することでユーザーが混乱する可能性がある。

1-2.横方向基準フォーマット

ビジュアルを前面に押し出すようなサイトで非常に効果的なレイアウト。
ブロードバンド化が進み、大きなイメージを見せることが多い昨今では、よく利用される。

1-3.機能を考えた分割を

縦横の選択基準は、制作するサイトの目的によりだいたいの傾向が決定できるが、最も重視すべきはサイト全体の情報量だ。メニュー構成を重視して、大量の情報へ簡単にアクセス可能なサイトを実現したいのであれば縦方向分割が適している。反対に、写真を見せるなど、ゆったり余裕のあるレイアウトが必要な時は横分割が適してることになる。
大まかなフォーマット決定にも、こうしたサイトの性質を見極めることが重要だ。

1-4.レイアウトの種類と特徴

・左ソデ型縦方向分割

メニューとコンテンツを明確に分けた形。
もっとも一般的な分割方法で、左ソデはメニューにのみ利用する場合が多いが、サイトタイトルを大きくする必要のないものは、左側上部に固定して配置しても、情報掲載面積が保持できる。こうしたパターンでは、左側の作り込みによってサイトの質が決まってくる。

・両ソデ型3分割

ポータルサイトなど大量の情報を扱うサイトで利用される。
こちらは「左ソデ型縦方向分割」の構成に右ソデを足した形となるので、左側の重要度が高く捉えらえられる。右はバナー広告や、付加的なトピックへのリンク集を配置する認識が強い。おまけの要素として、トップページ以降は右ソデが省略され、「左ソデ型縦方向分割」の構成に戻る傾向もある。

・左ソデ型ロゴスペース付

タイトルを上部スペースに配置するためにとられるフォーマット。
また、この箇所はもっとも目立つので、広告スペースやメインメニュー用としてケースもある。
このレイアウトの最大の特徴は、メインメニューとサブメニューを明確に分割できることにあり、多くのコンテンツを抱えるサイトでよく利用される。

・上下横分割

ビジュアル重視の構成が多いパターン。
上部のスペースに質の良いイメージを配置することで、十分な効果を発揮する。このパターンであまりに多くの情報を掲載すると、とたんにバランスが悪くなる。情報を掲載するにしても、情報の絞り込みを検討しよう。
このパターンは中央寄りで作成されることが多いようだ。

(2)内容別ルール

基本フォーマットを選択しても、実際にレイアウトをすすめるにはちょっとしたルーリング(規則付け)が必要だ。
第2回で見たようにサイトにはある種のルール付けが行われており、それをきちんと適用することで、よりクオリティの高いデザインを施すことができる。ここでは素材の配置、マージンの取り方を覚えよう。

2-1.縦の方向を活かす

縦方向のフォーマットを選択した場合、レイアウトによってその流れをより明確にできる。まず、メニュー用のスペースとサイトのロゴマークを配置すると、その位置を基準として、2つの流れが決まってくる。一つはメニュー項目、もう一つはページタイトルの配置位置だ。
このレイアウトの印象は左部分のメニューの作り込みにかかっているといっても過言ではない。余裕ができてきたら、十分に作り込んでみよう。
(サンプル：02-01.psd)

2-2.イメージを活かす

上下2分割の構成はメインイメージの際立つスマートなレイアウトができる。ここでポイントになるのは、画像のクオリティ以上に画面全体の調和を配慮することだ。
いかなるレイアウトでも言えることだが、掲載される情報・パーツにはすべてパワーバランスや関係が存在する。1画面で簡潔するレイアウトの場合、これがとくに顕著に目立つ。その画面で伝えたいことをきちんと把握し、明確に配置することが重要である。
(サンプル：02-02.psd)

素人が作成したWebサイトと、デザイナーが作成したWebサイトの差は、極論すればクオリティの差である。この差がどこから来るのかと言えば、やはりきちんとしたデザインを施しているかどうかである。
この点で言えば、前期のようなパーツ毎に画像を作成し、HTMLに埋め込んでいくという手法はその手軽さにおいてメリットがあるものの、クオリティの追求と言う点においてデメリットが目立つ。これは、コーディング(HTMLの作成)と、デザインを同時に行う場合、場当たり的な発想が増加し、しかも実際にコーディングしてしまうとデザインの変更が困難になってくるからである。
そこで現在のWebデザインの手法は、まずPhotoshopやFireworksを使ってデザインをすべて行い、その上でコーディングに入るというものである。こうすることで、コーディングの際によりベストなWebページの作成が可能となる。
本講議ではこのワークフローに習って、コーディングの前に全てのデザインを済ましてしまうという手法をとる。

(2)Webサイトの模写

Webサイトの模写は、レイアウトの基本、コーディングのテクニックなど非常に多くのことを気付かせてくれる。
特に今回、題材としているアップルのサイトはシンプルな形状ながらも、Webデザインに必要な多くのものを含んでいるので、最初に模写するにはうってつけの題材と言える。

■手順

1. Photoshopでレイアウトのトレース
2. 質感の調整
3. Dreamweaverを使ってのコーディング

(3)グリッドシステム

現在のWebサイトはグリッドシステムというデザイン手法が多く用いられる。もともとは紙面のレイアウト手法として開発されたが、現在のテーブルタグを用いたWebに最適なので、広く普及している。
グリッドとは「格子」のことで、画面を機能ごとに分割・整理していくことで比較的容易にレイアウトを整えることができるのである。
説明だけではなかなか分かりにくいので、アップルのサイトを分析してみよう。

■手順

1. サンプルファイル「wd_b01_01a.psd」をPhotoshopで開く。
2. [ビュー → 定規]でルーラーを表示する。
3. ルーラーからドラッグするとガイドを引くことができるので、メニューやトピックス部分にガイドを引く。
   サイトの多くは5pxや10pxなど5の倍数でできていることが多いので、それを基準にすると分かりやすいだろう。ガイドを精密に引く時は、選択範囲を上手く使うのがコツ。

(4)レイアウト

次に、ガイドに沿って各画面要素を配置してみよう。
今回は質感なしで、アウトラインを配置する。

■手順

1. メニュー→ニュース→トピックスの順で要素を配置する。
   角丸の四角は標準のツールでは描くことができないので、「矩形選択ツール」と「楕円形選択ツール」を併用して作成する。描写色で塗りつぶしは[編集→塗りつぶし]で実行できるが、このコマンドは頻繁に利用することになるので、ショートカット[alt+delete]を覚えておくと便利だろう。
2. 次にメインの画像を配置する。
   アップルのサイトから画像をコピーしてきたら、ペーストして配置する。今回は模写が目的なので、写真をペーストしたレイヤーの描写モードを「差の絶対値」にしておくと分かりやすい。
3. ここまででの作業で完成したのが「wd_b01_01b.psd」だ。実際に開いてみて、自分の作成したものと比べてみよう。

(5)演習

「wd_b01_02.psd」を開いて、ガイドの配置を実際にしてみよう。

(6)総括

今回の講議で見たように、整ったデザインを行うのにグリッドシステムは非常に威力を発揮する。ある一定のリズムで構成された画面は見ていて安定感があり、読み易い。また、分類ごとマージンを調整してやれば括りが分かりやすく、理解を促すという効果を持つ。
クオリティを高めるにはグラフィックテクニックも必要だが、まずはレイアウトの基本を身に付けるのが一番、近道である。そして、その近道でも最も効率的なのがグリッドシステムなので、この手法をまずはモノにすること。
Webページは1ページでは完結しないことがほとんどだ。こうした時に、そのページの機能をしっかりと考え、最適なレイアウトを導き出すことができれば優れたサイトを作成することができる。反対に、この設計の部分で方向を誤ると、後々まで後を引くことになるので注意が必要だ。