みなさん、大変お待たせ致しました、デザイン編に突入します！
コンセプトの見直しが終わって、デザインのリフォームも方向が見えてきたと思います。
今回は大きく分けて2つの内容に分かれています。
「Chapter.01準備はOK?」でも触れていますが、何事もコンセプト中心に行うことがシンプルに作業をすすめるポイントです。当然デザインにもコンセプトやテーマがあるべきです。いろいろやってみたいと思うのもわかりますが、一言で言い切れてしまうぐらいシンプルにまとめましょう。
堅苦しく考える必要はまったくありません。例えば、部屋のリフォーム等をする際に「○○風」にしようとか、その程度で十分です。
みなさんは、このサイトのサイトイメージがどこから出てきているか、見てすぐ分かるのではないでしょうか？そうです、ロゴとミシンです。これはラフの時点ですでに作っていたものです。ラフがあることでページの作成はとてもスムーズになります。
そしてラフを必ず描かなくてはならないということではありません。コンセプト・コンテンツのときと同じように、今度はイメージに関して自己診断シートや新たに調査したり集めた資料から、コンセプトと合致するものを集め、その中で最もふさわしいイメージを選び取っておくだけでも十分役に立ちます。
※参照：コンセプト・コンテンツ
まずはどうしても使う色を決めておきましょう！3色以内で、もしくは一言で定義できる配色「春色」「パステル」「虹色」などでもかまいません。実際に使う色はここから選択または派生させて用います。
字の系統も決めておきましょう。できれば、3種類以内か同じようなテーマで作られたフォントにしましょう。
実際の文章（テキスト文章など）は一般的に見る側のフォントが用いられるため、日本語で言えば「ゴシック」「明朝」の二系統しかほぼ選べません。この2系統では印象がまったく変わってしまうこともあるので、その中でできるだけ選んだフォントに近いどちらかの系統でまとめましょう。
画面の特性と制限を理解した上で、画面をどう使うかを把握し使いこなしましょう。
まずは、舞台となる画面についての認識をチェックします。
Webページは、絵や本のように決まった大きさを持つことができません。 見る側の環境によって強制的にサイズが変更されるとこともよくあります。
デザインする上で可変させるかさせないかという判断をするにも、まずこの画面というものをはっきりと認識しておかなくてはなりません。
このページを例にチェックしてみましょう
このページでは、横はウィンドウサイズに依存、縦方向はコンテンツの量に応じて可変するようになっていますね。スクロール方向を縦のみにすることで、操作の簡便化および視線やコンテンツの流れを縦に限定できます。
点線で示す大きさで作ると縦と横にスクロールさせないと全体を見渡す事ができない場合があります。オレンジの線は縦スクロールだけで済みます。このように、大きく作りすぎると閲覧しにくい場合があります。そして全ての人がウィンドウを最大表示で使っているわけではないことを覚えておきましょう。
基本的には、横サイズ依存、縦自由が定石ですが、これといって決まっているわけではありません。たとえば横を固定することで、横の文字数が限定し文章が読みやすくなる効果を出すことができます。このようにメリットとデメリットなど多々あります。ここではまず画面をどう使っているのか明確に認識しているのかが重要なのです。
注、ここで縦横何ピクセルなどの要素については説明していませんが、横方向については６００ピクセル程度（最近は８００程度でもＯＫ）がどんなパソコンでも安定して閲覧できると思います。縦に関しては特に制限はありません。もちろんあまりにも長すぎるのは問題です。
レイアウトするためには、画面に含まれている要素を認識できることが重要です。
まず基本的なところからいってみましょう。チェックシートに書き込む作業で、ブラウザで表示されたページには、ナビゲーション（または訪問者に何らかのアクションを求める機能）、とコンテンツ、それ以外のもの（その他）に分けられていることがわかると思います。まずは、それを明確に意識できているかがチェックポイントになります。
まずは、今見ているこのページについて見てみましょう。
このページでは、上部と左側にナビゲーション、中央部（および右下方向に拡張可能）にコンテンツ、その他の要素も多少含まれています。よくみると、コンテンツ部分にも細かなナビゲーション要素がついてることに気づくはずです。
どんなページにも必ずこの３つの要素が含まれています。デザインする際にも忘れずにこのことを意識してください。いろいろなサイトを見て回り、３つの要素がどのように配置しているかを見ることはリフォームにもとても参考になるはずです。
ほかの項目でさらに詳しく触れますが、まず同じ要素はまとめてこくことが重要です。要素の整理整頓もレイアウトの作業のひとつです。
そして、ただだらだらと配置するのではなく、必要の無い物はばっさりカットしたりなど、必要なのかどうかをきちんと確認しながら作業しましょう。
優先順位がないデザインは、混沌としてとても分かりにくいものです。 優先順位をつけることでリフォームもやりやすく、見る側も分かりやすくなります。
まずは、先ほど触れた3つの要素の中でどれが最も優先順位が高いのかですが、これはきわめて単純です。
トップページでは、目次の役割がまず重要になるのでナビゲーションが最も優先順位が高くなります。テンプレートでは当然コンテンツが主役です。
同じ要素内での優先順位は、コンセプトやコンテンツとしての優先順位に従うだけです。事前にしっかりと決まっていれば、ここで迷うことはありません。
実際にデザインに反映させる方法は、「対比」という手法を用いて行います。配置や大きさ・色などさまざまな方法で
もっとも注目される場所に、優先順位の高いものを配置する。これが基本です。それ以外のものは優先順位を崩さないように配置していきます。
同一の要素内でも、優先順位があれば序列を崩さないように、配置の位置や間隔を調整すると、すっきりと分かりやすくなります。
場合によっては、順位の低いものを表示させないという手もあります。載せないというのではなく、スクロールさせないと見えない、想定した画面外に配置するということです。ほかにも画面中びっちりと配置するのではなく、配置にリズムを持たせたり、ちょっと崩したり、空白を持たせたりするほうがいい場合もあります。
もっとも注目される大きさで、優先順位の高いものを配置する。これが基本です。それ以外のものは優先順位を崩さないようにサイズを調整します。
同一の要素内でも、優先順位があれば序列を崩さないように、たとえば文章と見出しの文字の大きさが違うように、要素の大きさを変更するとすっきりと分かりやすくなります。
ただ大きければいいというものではありません。全体のバランスが崩れないような大きさを考えましょう。逆に空白をうまく使えば小さいほうが注目される場合もあります。
もっとも注目される色で、優先順位の高いものを装飾する。これが基本です。それ以外のものは優先順位を崩さないように色を調整します。調整に用いるパラメーターは「色相」・「明度」・「彩度」などです。
同一の要素内でも、優先順位があれば序列を崩さないように、たとえばリンクと文章の文字色が違うように、要素の色を変更するとすっきりと分かりやすくなります。
注意すべき点としては、目立てばいいのでは無いということです。もっとも目立つ配色としては「黄色と黒色」や「赤と緑」つまり完全な対比になってるような組み合わせがありますが、使い方を誤ると内容よりも色の印象しか残らないことになって目的をはたせません。
よくある失敗の原因は「原色」を「画面中」に使いすぎていて、注目点があいまいになり落ち着きの無い混沌とした画面になってしまうことにあります。注目させたい要素以外のものの色は「明度」・「彩度」・「面積」などを抑えるなどして、主役を引き立てるようにすると効果的です。
優先順位を表現する方法は音・動き・絵・文字等など、まだまだたくさんあります。Webはまだ進化途中なのでこれからも表現方法はどんどん増えていくことでしょう。
・画面（ウィンドウ）サイズ
・文字（文章などの）サイズ
・コンテンツ部分が膨大になったとき
・スクロールして初期表示位置では無いとき
以上の要素がよく変化しやすいものです。そういった変化に対応しろというものではなく、できるだけ対応し、できない場合のデメリットも十分理解しておいてほしいということです。
先ほども触れましたが、訪問者のPCや端末の画面の大きさによって、表示する画面やウィンドウの大きさが小さくなったり、果てしなく大きくなったりすることがあります。ここでは、リアルタイムに変わる場合や、細かい点での変化を想定するということです。
たとえば、JavaScript等を用いてサイズ変更可能不可能なウィンドウを作ることができますが、そのサイズが画面より大きくなってしまった場合や、フレームの固定エリアのサイズが大きすぎて、コンテンツ部分がつぶれてしまったりなど、閲覧が困難なエリアができてしまいます。
固定エリアや固定ウィンドウ、つまり「固定（またはサイズの絶対指定）」のあるデザインにはこういったトラブルがあることを認識しておきましょう。
訪問者のPCや端末の持っているフォントの種類や、訪問者が見やすくするために文字の大きさがデザインしたときとまったく違ってしまうことがあります。
たとえば、画像でぴっちりと枠のように囲んだ中のテキストなどは、ちょっとサイズが変わっただけで枠が崩れたり、テキストが読めなくなったりしてしまいます。他にも、一行あたりの文字数が変わってしまうことで読みにくくなることも注意することが必要です。
ひとつの解決法として、スタイルシートで文字サイズを固定する方法などがありますが、「文字が小さくて読みにくい」と思っている人には迷惑になって逆効果です。（注、純粋な画面拡大機能のあるブラウザやOSなどをつかえば、ピクセルベースの画像が拡大されますが閲覧は維持できます）
たとえばCGIを使った掲示板のように、訪問者側で情報が入力できるものの場合、長文などが入力されることを想定していないとデザインが崩壊することがあります。
膨大なコンテンツが入ることが想定される場合にはしっかりと準備し、CGIなども対応しているものを用いるようにしましょう。
今見ているこのページについて見てみましょう。このあたりまでスクロールしてくると、ナビゲーションの要素が見えない場合があります。たいした問題にはなりませんが、初期位置にまでに戻るリンク等細かい気配りをするのもいいでしょう。
スムーズに誘導しコンテンツを活かすポイントをチェックしましょう。
サイトの構造はスムーズなナビゲーションのためにあるといっていいでしょう。
コンセプトの時点でサイト構造のリフォームは終わっているはずです。ここでは特に作業はありませんが、もう一度見なおしておくといいでしょう。
コンテンツの優先順位によっては、ナビゲーションデザインの際に必ず載せるべきもの、載せなくても問題の無いものが出てくると思います。デザインやチェックのためにも、どの程度まで載せるべきかを決めておきましょう。
当然ながら、一定の階層まで載せる場合や、同階層でも重要なコンテンツはショートカットを設けたりその下の階層まで表示させるとこともあるかもしれません。慎重に取捨選択していきましょう。
細かな気配りがストレスを軽減するポイントになります。
ページを見ているときの目の動きやポインタなどを動かす手の動きなどを想像しましょう。面倒であったり疲れないようにできるだけ動きが一定方向になるようにしましょう。
ナビゲーションの要素は、繰り返し用いられることが多いので、ページごとに位置が変わってしまっては、「ナビゲーションの位置を探す」という作業が増えてしまって、ストレスを与えてしまいます。
一度決定した場所にできるだけ配置するようにしましょう。そして、要素内の順番も訪問者の意思なしには決して変更しないようにしてください。
何かものを選ぶときに、まとめて並んでいないとちゃんと選んだ気がしませんよね。ただし、きちんと階層やコンテンツごとに仕分けをしておきましょう。
サイト構造でクリック回数を減らすことができますが、さらにショットーカットやデザインの工夫でさらにクリック回数を減らすこともできるはずです。
たとえば、最初のページで「右向きの矢印で次のページ」、次のページで「下向きの指の絵で次のページ」になっていたとしたら、クリックしていいものか迷ってしまうことがあるはずです。
何かの同じアクションを要求するページ群では、必ず同じルールでアクションさせるようにしましょう。
ページには必須のナビゲーション機能を持つ要素があります。忘れずには位置しましょう。
基本的なページ移動用のナビゲーションの要素です。
この4つは、ページに必ず配置し、はずしてはいけません。そしてできるだけ操作しやすく、機能がわかりやすい形でデザインしましょう。ページが長くなる場合は複数配置（例えば上端と下端等）することをオススメします。
注、トップページには必要ない場合があります。
主なコンテンツや、現在のページと同階層のページへのリンクも配置しましょう。
サイトの戦略上アクセスしてほしいページに直接移動できるリンクも配置するための場所を確保しておきましょう。
今まで述べた要素は、「サイト構造にしたがってリンクをたどる」という方法ですが、他に目的地にたどり着く方法はあります。例えば「サイト検索」機能などは、キーワードを元にで目的のページや類似するページを提示することでナビゲーションを行います。
大規模になればなるほど検索の効果はあがります。検索機能の配置も考慮しておきましょう。
このような場合において表示されない場合があります。きちんと考慮しておきましょう。
画像によるリンクだけでなく、テキストのリンクも用意しておきましょう。（HTMLタグ内でALT属性に文字を設定するだけでもOK）
重要なリンクは、読み込みされてすぐの位置に表示されるようにデザインしましょう。基本的には上端・左端・左上などがオススメです。
他の位置に配置したい、もしくは常に配置したい場合は、フレーム機能を前提としたデザインをすると上手くいきます。
最近ではロボット検索サイトを利用する方が多く、フレームの設定などを無視してページに移動してくる場合があります。その場合に備えて、どのようなページにも「戻る」のリンクはつけて置きましょう。
製作者がチェックするだけではなく、一般の人にもテストしてもらいましょう。どうやって操作しようとしてるのかも観察しましょう。
まずは、画面に配置されている要素を理解できるかをチェックしてもらいましょう。優先順位が理解できているようならOKです。
次にどのように操作しようとしているかを観察しましょう。パソコンになれていない人は思いもよらない方法で操作する場合があるので、誤操作の少ないナビゲーションデザインを作る参考になるはずです。
リフォームしながら重要なポイントをチェックしましょう。
サイトの玄関であるトップページをリフォームしていきましょう。
実際の作業は以上のように行います。
以前のトップページを見ながら、基礎チェックとこのパートのチェックをします。ここで問題点を洗い出し、コンセプトを参照しながら新たなサイトの完成をイメージしていきましょう。
具体的にならなくてもかまわない程度に、ページのイメージを決めていきます。いろいろイメージしたままを書き留めておくといいでしょう。
イメージを参考にしつつ、機能としての面も重視して要素の配置を確定していきます。ある程度HTMLを意識することも重要です。
ラフイメージとレイアウトはどちらが先にしてもかまいません。歌にたとえれば「詩と曲がどっちが先か」のようなものと同じで、特に問題は無いので思いついたほうから先にはじめるといいでしょう。
ほぼ完成した状態を作成します。プロトタイプなので、デジタルで製作しましょう。画像ファイルでもHTMLでもかまいません。画像ファイルならイメージの編集が容易で、HTMLでつくれば後のHTML作成が容易になります。
ここでチェックを再度行い、クリアすれば後は作るだけです。チェックは念入りに行いましょう。
ここからは実際にサイトに載せるためのコーディングです。この時点でJavaScriptの付加や部品用画像の分割および配置、CGIとの接続、表示チェックや動作テストなどを行います。具体的な注意点はCh5で触れる予定です。
社名なら社名、サービスならサービス、ロゴならロゴ、商品なら商品、キャラクターならキャラクター。分かりやすいことが重要です。
分かりやすくする一番の方法は、提供するものをそのまま掲示することです。もちろん下品にならないように上手くデザインに組み込みましょう。
複数ある場合は、特にメインのものに注目してもらえるようにデザインしましょう。総合的に幅広くやっていることをアピールしたいなら、その周りにその他のコンテンツのイメージやリンクを配置するのもいい工夫です。
内容によっては掲示しにくいものもあるかもしれません。その場合は関連のあるイメージをもちいて、連想しやすいように工夫しましょう。
このサイトのトップページでは、提供するものをそのまま掲示していませんが、クリエイターの個人サイトであること、ルーツと「創造するための道具」というイメージの共通点からミシンの絵を採用しています。（連想しにくいかもしれませんね・・）
当然です。トップページは目次の役割、書籍で言えば表紙にあたります。
サイトの分かりやすさを出すのと同じように、リンクの存在もわかりやすく。はっきりとさせましょう。もちろん全体のバランスを崩してはいけません。
コンテンツ名が抽象的な場合は説明を入れることを忘れずに。
普通は、そのまま「コンテンツ名」などの文字情報で表現しますが、ページ全体を一つの装置のようにしてそのデザインの中に組み込んだり、「アイコン」などをもちいて、「見てすぐ分かる」用に作る方法もあります。
もっと単純に、ALTやJavaScriptなどを使ってリンクにポインタがのったときに説明が出たりするだけでもかまいません。（詳しくはCh5で）
画像によるリンクを作った場合、目立たない場所でもかまわないので、テキストのリンクも作っておきましょう。
更新情報をトップページに載せることは、スムーズなナビゲーションに効果があり、さらに何度も訪問されるかたのための気配りになります。
トップページは目次であり、当然更新情報や最新情報を掲示すべきです。最新という価値がつくことでそのコンテンツへ注目させることもできますし、無用なクリック回数も減らせます。
さらに、リピーター（何度も来てくださる方）が、最新情報を求めてうろうろされないようにするという気配りにもなって効果は抜群です。
注、ただし更新がまれな場合やとまってしまった場合は逆効果になることもあります・・・
どうしてもデザインの都合上組み込みにくい場合は、表示を予定しているエリアの外に配置しましょう。外であればイメージに大して影響はありません。他にもフレームやインラインフレーム（iframeタグ）などを用いる手法もあります。
とても初歩的なことかもしれませんが、歓迎して悪いことはありません。おもてなしの気持ちを素直にトップページで表しましょう。
人もサイトも第一印象が大切です。「ようこそ」の一言だけでも効果はあります。イメージ、テキストどんな方法でもかまいません。歓迎していることが伝わる表現を用いましょう。初歩的ですが重要な要素です。
くどくならないように注意すれば、多少インパクトがあってもかまいません。
それぞれのパターンについてポイントを解説します。
イメージを重視し、コンテンツの露出を控えめにしているため、内容がわかりにくい場合があるので、できるだけ内容をつかむヒントになる補助的なデザインを組み込んでおきましょう。
大量の情報が、トップページからあふれかえるので、どれを見ていいのか分からない状況にだけはならないように、ナビゲーションを明確に配置し、コンテンツの露出も重要度や鮮度によってサイズや配置を調整しましょう。
以上でチェックは完了です。デザインしながら何度もチェックしましょう。 次はテンプレートのページのリフォームです。
テンプレート（コンテンツを流し込むページの雛型）を画面の中で要素をうまく構成できているかチェックしていきましょう。
実際の作業は以上のように行います。細かい点では違いますが、トップページとほぼ同じです。テンプレートはトップページと違ってコンテンツごとに複数作る場合もあるので、それぞれのコンテンツの特徴を生かしながらデザインしましょう。
以前のトップページを見ながら、基礎チェックとこのパートのチェックをします。ここで問題点を洗い出し、コンセプトを参照しながら新たなサイトの完成をイメージしていきましょう。
具体的にならなくてもかまわない程度に、ページのイメージを決めていきます。いろいろイメージしたままを書き留めておくといいでしょう。
イメージを参考にしつつ、機能としての面も重視して要素の配置を確定していきます。ある程度HTMLを意識することも重要です。組み込むコンテンツによってレイアウトも多少変化します。
ほぼ完成した状態を作成します。プロトタイプなので、デジタルで製作しましょう。画像ファイルでもHTMLでもかまいません。画像ファイルならイメージの編集が容易で、HTMLでつくれば後のHTML作成が容易になります。
ここでチェックを再度行い、クリアすれば後は作るだけです。チェックは念入りに行いましょう。実際にコンテンツが入ったときのデザインもテストしましょう。
ここからは実際にサイトに載せるためのコーディングです。この時点でJavaScriptの付加や部品用画像の分割および配置、CGIとの接続、表示チェックや動作テストなどを行います。テンプレートなのでコンテンツをはめ込んでページを生成したりなども行います。具体的な注意点はCh5で触れる予定です。
テンプレートの主役はコンテンツです。テンプレートはあくまでも引き立て役です。
コンテンツが収まり、注目されるように取り囲むようにエリアを確保しデザインを配置しましょう。どのように格納するのかも決めておきましょう。
まずコンテンツを格納するエリアをどの方向に伸ばすのかを決めましょう。そしてそのエリアが伸びることによって他の要素がどのように変化するのか、もしくは伸びた場合に他の要素も追随して変化させるのか等も決めましょう。
1ページあたりどれくらいまでを限度とするか、ある程度まで出かまわないので決めておきましょう。あまりにも長すぎるのは問題です。
収めやすくするには、画面を直線的に区切るようにしましょう。区切ったエリア同士が影響を及ぼさないようにするとさらによくなります。
迷子を出さないためには標識になるものが必要です。メインのコンテンツへのリンクなどもあるだけで地図代わりになります。
訪問者が現在サイトのどの場所にきているか把握する方法は、基本的にはURLの情報を参考にしますが、それだけでは物足りません。（一度入力してから一切見ていないこともあります）
ホーム＞ビギナーズ＞Ch３
上記の例はとても単純なものですが、これでも十分機能を果たしています。テンプレートには現在位置を表示する場所を必ず表示しましょう。
メインコンテンツへのリンクを表示すれば、そのまま簡易サイトマップにもなります。これにより現在位置表示とリンクが一体化した表示もすることが可能です。
もちろん別のページにサイトマップを用意することも必要です。
コンテンツが1ページで終わらないことはよくあります。コンテンツ用のナビゲーションエリアと現在地表示・ページ数表示用のエリアなども忘れずに確保しておきましょう。
現在あるコンテンツがきっちり入るだけのデザインでは、コンテンツの増加に伴う更新に対応できませんし、ちょっとした更新にも支障が出る場合があります。テンプレートのデザインでは更新の可能性を十分考慮しましょう。
サイトにいついかなるコンテンツや要素が追加されるか分かりません。サイトにコンテンツが追加されれば今までのページもリンクなどを追加しなくてはなりません。追加に対応できるようにテンプレートのデザインにはちょっとした余白を設けるなど余裕を持たせておきましょう。
主なリンクやタイトルなどは画像データで作ることが多いのですが、ニュース系などの更新が頻繁に行われる種類の場合は、文字部分はHTMLのテキストでそれを飾る形で画像をつくる。つまり「テキスト＋画像」の形式でリンクやタイトルを作っておくことが必要です。
他にも、コンテンツ内で使われるかもしれない部品なども作って置きましょう。罫線・ちょっとしたアイコン・枠・表などなど。作っておくことで全体のイメージの崩壊を防ぐことができます。
どんな場合でも製作に使ったデータは取っておきましょう。例えばフォントなどは製作環境が変わったり、OSやソフトを再インストールしたりする際に紛失してしまうことがあります。
それぞれのパターンについてポイントを解説します。
一般的なデザインです。ナビゲーションは左か上に配置し、コンテンツは右下方向に自在に拡張できるようにしています。左と上どちらに上位のリンクを設定するかは、左上をどちらのデザインが占拠しているかで決めましょう。
中央に配置し幅も固定のため見やすくなりますが、コンテンツによっては横幅を破壊するほどのものがある場合もあることを考慮して、多少柔軟性のあるデザインにしましょう。
主要なコンテンツが増えるたびにすべてのページを編集する可能性があるので、そのリスクは把握しておきましょう。ただし、テンプレート管理機能のあるソフトや、CGI出力などを使えばこれらの問題を回避できます。
最近は携帯端末でもない限りフレーム未対応のブラウザはありませんが、見られない可能性もあることを把握しておきましょう。あと、訪問者の環境に合わせてどのフレームをサイズ変更可能にしておくかという点もきちんと決めておきましょう。すべてを変更可能にするとデザインが崩壊する危険もあります。
以上でチェックは完了です。デザインしながら何度もチェックしましょう。
チェックごとに確認していきましょう。
何かを伝えるには何を伝えたいのかが明確になっていることが重要です。コンセプトをきっちりまとめる事は、Webサイトという形に持っていく第一歩です。
何気なく見ているページにもレイアウトによる工夫が多々あります。「何気なく見れている」というところまで持っていくのは意外と難しいものです。Webならではの特性ををしっかり把握し、細かい点にも気を配れる配置を心がけましょう。
訪問者＝作った人ではないのですから、見知らぬページでナビゲーションは必須の要素です。 苦労せず自然と目的地にたどり着ける、そんなナビゲーションを目指しましょう。
サイトの玄関、第一印象を決定付ける大事なページです。何を提供しているのかを明示しコンテンツへ導くという基本を反映させましょう。そして訪問者を歓迎することを忘れてはいけません。
テンプレートは繰り返し表示され、さまざまなコンテンツが組み込まれます。ナビゲーションとコンテンツとの調和をうまく図り、主役であるコンテンツを引き立てることが重要です。
デザインはアートの面を持っていますが、本質はソリューション（問題の解決）です。答えは決してひとつではありませんが、見た目だけではなく、機能的なデザインを心がけましょう。