Blog
(1)サイトにおけるコンテクスト
トップページの役割が各コンテンツへの導線とするならば、下層ページはまさにコンテンツ本体である。Webにおけるコンテンツとは情報そのものであり、いかにスムーズにビジターに対して情報を提供するのかがサイトの真価となる。下層ページにおける情報提供は、トップページ以上に気を配りたい。
1-1.コンテクストとは
コンテクストとは「前後関係」や「文脈」といった意味を持つ単語だ。では、サイトにおけるコンテクストとは一体何なのだろうか？
サイトとは極論すれば、ある連続性を持った情報の構造体である。その連続性とはある一定のルールや流れのことであり、例えばこれまでに何度か登場したマージンやテキストのルーリング、ナビゲーションのインタラクションであったりする。
コンテクストを作り出すことは、すなわちユーザーの学習を手助けすることである。ある一定のリズムを持ったサイトであればユーザーは次に何が起こるのかを予測することができるようになるが、逆に学習しづらいサイトであればユーザーにストレスをかけることになってしまう。
●ナビゲーションのコンテクスト
ナビゲーションは大きく分けると縦型、横型があるわけだが、基本的に外観および機能は継承する。デザインによっては変化する場合もあるわけだが、少なくとも機能、およびインタラクションにおいての変更は避けること。
また、下層ページからは必ずホームページへ戻るための仕組みを組み込んでおかなければならない。
●構成要素のコンテクスト
リンクの表現や使用するボタン、デザインのテイストなどの外観、および機能を継承する。
例えばショッピングカートで決済手続きをしている時は1ページでは完結しない場合がほとんどだ。こうした時に、すべてのページで表記法法統一されていないとビジターは違う機能なのかもしれないと思ってしまう。
●情報のコンテクスト
これは下層ページだけの問題ではないが、ラベルと表現法法をサイト全体で一致させる。
サイトが大きくなると複数のスタッフが関わることになる。こうした時に、表記法が統一されていないと、人によってまちまちな表現をしてしまい、結果的にコンテクストを喪失してしまう恐れがある。
1-2.コンテクストの喪失
コンテクストについての解説が終わったところで、逆の状態についての話をしよう。先ほどWebサイトとは連続性を持った情報の構造体であると説明したが、この連続性が断絶した時に“コンテクストが喪失した”という状態に陥る。つまり、クリックした次の瞬間にビジターが「あれ？」と思ってしまう状態のことだ。
例えばデザインの外観が急激に変化してしまったり、下手をすると今まで使っていたナビゲーションがなくなってしまったりすることを指す。こうなってしまうとビジターは困ってしまい、ホームページへ戻ろうとする。しかし、戻るための機能を持ってない場合は、大体の場合サイトを立ち去ってしまう。
(2)ナビゲーションの展開
ナビゲーションの基本構造はトップと下層で維持するという原則に基づいて、実際に下層ナビゲーションを組み立ててみよう。
2-1.縦ナビゲーション
汎用性に優れ、メニューの増減に強いというメリットを持つナビゲーション。ただし、カテゴリーが増え過ぎると縦に長くなり過ぎるというデメリットを持つ。下層ページへの展開としては、直感的に構造の把握しやすい「多層構造型」と、操作性を重視した「縦横混在型」に分類される。
●多層構造型
現在位置をナビゲーションを見ただけでも把握しやすいというメリットを持つが、反面、以下のメニューが必要以上に下へ移動してしまうというデメリットを持つ。
●縦横混在型
サブメニュー部分をコンテンツ側に分離してしまう方式。ナビゲーションの位置が著しく変化することがないので、操作のコンテクストとしては優れている。ただし、ナビゲーションを見ただけでは現在位置が把握しにくいというデメリットを持つ。そのため、実用にはもう一工夫欲しいところだ。
2-2.横ナビゲーション
直感的に現在位置を把握できるというメリットを持つが、コンテンツの増減には弱い。しっかりとしたコンテンツ計画を立てないと成立しないため、事前の設計が肝になる。
こちらのナビゲーションも「多層構造型」と「縦横混在型」に分類される。
●多層構造型
メニューの増減に弱いという点以外、弱点らしき弱点の見当たらない優れたナビゲーション。現在位置の把握という点では他の追随を許さない。ただし、ヘッダー部分がだいぶ厚くなるので、情報の掲載方法には十分な注意が必要だろう。
●縦横混在型
情報量の多いサイトで一番利用されているナビゲーション。メニューの上下関係がコンテンツの階層そのものであり、得てして数の多くなりがちなサブメニューを縦ナビゲーションにすることができる。
2-3.その他のナビゲーション
FlashやDHTMLを使うと、さらにダイナミックなナビゲーションを組み立てることも可能だ。
●メタイメージによるナビゲーション
メニューの構造としては縦→横の「縦横混在型」だが、ノートというメタイメージを上手く使って直感的なナビゲーションに仕上げている。
●Flashを用いたナビゲーション
メニューの構造としては横→横の「多層構造型」だが、Flashを用いることでより直感的に、しかも面積の節約に成功している。
(3)下層ページに必要なもの
3-1.ホームページへ戻るボタン
サイト内でユーザーが迷子になった時、多くのユーザーはそのサイトのホームページへ戻ろうとする。この時にホームページへ戻るボタンがないと、慣れたユーザーであればURLの不必要な箇所を削除して戻ることができるが、不馴れなユーザーであればサイトから立ち去ってしまう。
こうした事態を避けるためにも、下層ページにはホームページへ戻るためのボタンを必ず設置しよう。このホームページへ戻るためのボタンの設置には現在のところ3種類存在する。
- ヘッダーに設置したロゴから戻れるようにする。
- 他のメニューと同様に明示的に設置する。
- メニューからは離れているが、ヘッダー内に収める。
パターンとしてはおおよそこの3種類が主流となっており、一番多いパターンとしてはロゴにのみ設置するパターンとなっている。
3-2.トピックパス
トピックパスは別名、「パン屑ナビ」とも呼ばれており、必須ではないが多くのサイトで利用されている。訪れているユーザーに対し、“現在位置”と“上階層への移動手段”を提供することができる。
この手段が特に有効なのはサイト構造が整然としており、上下間の移動が多いサイトだろう。逆に不規則な移動が多発するサイトには向かない。この場合はナビゲーションを工夫し、現在地を明確にするような処置が必要になるだろう。
(4)見出しの基本
文字を伴う画面のレイアウトは、些細な箇所への気配りで全体の印象が大きく変わってくる。知的に仕上げたいものでも、うっかり手を抜くとなかなか全体の印象がまとまらない。見出しと本文などの一見、何の工夫のしようもないところが、実は重要だ。
4-1.見出しの扱いを統一する
サイト内の情報をピックアップしやすく作るためには、細かい見出しの設定が必要だ。Webのようにモニタで見るような情報は、情報ごとに見出しを設けて掲載内容を示す方方が一般的である。こうした考えに基づいて、現在のWebサイトには多くの見出しが含まれているが、その場合、すべての見出しに統一した見栄えを持たせることが基本だ。
画像テキストを採用した見出しは、すべて同じフォントを利用すると、全体の統一感が得られる。また、フォントの形状だけでなく、位置関係を配慮に入れるとさらに良い。一度、見出しと本文という位置関係を決定したら、サイト全体でこれらの要素の位置関係を崩さないことが、レイアウトに一定のリズムを持たせ、レイアウトに安定感を持たせることに繋がる。
4-2.本文との位置関係に注意
見出しの位置と本文のスペースをきれいに揃えるコツは、見出しの位置と本文を若干離して配置することだ。この手法で要素にまとまりが出る。任意の空きスペースを作るには、HTMLの強制改行では無理なので、よりよい見栄えを追求するならCSSを用いて調整するとよい。また、見出しそのものをタグで段落扱いすると、HTMLでは完全に１行分の空きができる。見出しと本文位置が過剰に離れるとそれぞれの関係性がみにくいばかりか、レイアウトをコントロールしきれていない印象を与えるので注意して組みたい。
4-3.サイト機能で方法を検討
確かにポイントとなる見出しを画像テキストにすると、美しいレイアウト作りの近道となるが、サイトに必要な機能にも目を向けたうえで利用を検討しなければならない。
特に学術的な内容のサイトでは、利用者が資料としてテキストの一部を保存する可能性もある。この場合、ブラウザから直接適すとを選択、コピーできない画像テキストは、サイトの利用価値を下げてしまう。内容に合わせて活用すべきだ。
category : Blog, 講義資料 | この投稿にタグはありません。 | comment & trackback : 0
by Aoyama in 2008.03.18. 01:27
(1)色補正の基本
デジカメの普及とともに、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から実装された機能で、動物の毛のようなエッジが曖昧(あいまい)な画像を切り抜く場合に使用する。なかなか上手く行かないことが多いが、かなり強力な機能なので使い方だけ確認しておこう。
category : Blog, 講義資料 | この投稿にタグはありません。 | comment & trackback : 0
by Aoyama in 2008.03.14. 01:17
(1)配色計画とは？
表現における色彩の効果は極めて重要である。それだけに配色はしっかりとした計画に基づき、進めたい。配色の手順は、イメージの組み立てから、色をセレクトする段階までが特に重要だ。デザインは単なる思いつきや好みで決まることはなく、そこに裏付けが必要となるためである。
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.有彩色と無彩色
無彩色はいかなる有彩色とも調和しやすい。失敗しない配色。
ただし無彩色の面積が増えてくると、画面全体がくすんだ感じになりやすいので使用量には注意が必要。
category : Blog, 講義資料 | この投稿にタグはありません。 | comment & trackback : 0
by Aoyama in 2008.03.09. 15:46