コンピュータが画像を扱う場合、色情報として、各点についてR(赤)・G(緑)・B(青)の三原色のデータ領域(チャンネル)をもち、その組み合わせで色を表現する。 それぞれをグレースケールで表したものがカラーチャンネル。 これに加えて「透明度」（他の画像など…

撮影したRGBの画像データは、使用するモニターによって色が変わってしまうので詳細なRGBの情報を定める必要がある。 これを「プロファイルを埋め込む」という。 もしプロファイルが埋め込まれていない画像を扱うには、画像ソフトでプロファイルを設定するこ…

デジタルカメラでは、レンズを通して入ってきた光をCCDが受け取りそれを電気信号に変換することで写真に記録するが、そのCCDが生成した電気信号をほぼそのままデジタルデータとして記録したのがRAWデータ。 RAWデータは現像される前の状態なのでパソコンで現…

ウェブサイトの補足情報以外にもサイトマップとして機能するようなリンクの一覧をフッターに与える場合がある。 記載する情報はグローバルナビゲーションと同じ項目を再度羅列する形になるが、特に携帯端末での閲覧時はあると便利。 また、フッターに含める…

補足情報などを掲載するためにコンテンツを掲載する領域とは異なるデザインを施したフッター箇所を作る。 フッターに含まれる主な情報は、プライバシーポリシー、ヘルプ、サイト責任者の連絡先、コピーライトに関する説明。 補足説明的な箇所であるため、メ…

ポータルサイトやSNSのようにユーザー側で使いたい色で追加できる仕組みを持つウェブページの場合、ボックスを移動させたりサイズを変更できるといった機能が必要。 リサイズが可能であることをユーザーに知らせるためにはグラフィックに工夫する。 ドラッグ…

タブインターフェイスはウェブページを再読み込みすることなく表示内容を切り替える方法として使えるユーザーインターフェイスの一種。 主にカテゴリー別に仕分けたリンクリストを省スペースで提供する目的で使う。 タブインターフェイスを実装するには、適…

数値データなど読みにくくなりがちな情報を整理する方法がテーブル。 CSSの指定で特にポイントとなるのは、セルの背景色の設定と、罫線の色使い、セル内に与える余白の大きさ。 このビジュアルデザインに関する3点をそれぞれ最適化することで、読みやすく、…

ガジェットはウェブの技術を使ったサービスの中でも特に頻繁にアクセスするものを個別のアプリケーションにしてディスプレー上においておくための仕組み。 ガジェット化したサービスを使うことでユーザーは手間を省くことができる。 ガジェット配置画面には…

ウェブページに罫線を反映させるには、CSSのボーダープロパティを使う。 ボーダープロパティーはHTMLの要素が持っているボックスに対して与えることができる。 ウェブデザインで頻繁に使用する罫線だが、あまり自由度が高いとはいえない。より柔軟なデザイン…

JavaScriptの機能拡充やフラッシュなどのRIA技術が普及して、インタラクションに工夫を凝らしたフォームデザインができるようになった。 例えば入力フィールド数が多いフォームを前半と後半にわけ前半の入力が終わり次第後半の入力ができるようになるという…

フォームはウェブサイトに接していれば見ない日はないほど需要の高いパーツ。 ちょっとしたフォームでもきれいにレイアウトしてあるとウェブサイトに情報を渡す瞬間も安心出来る。 フォームを整理するポイントは、フォームのブロックだけを独立した囲みに入…

検索ボックスはどのウェブサイトにも当たり前に設置出来るようになったパーツ。 レイアウト上のポイントは、テキストフィールドにはボックスの外枠と検索ワードとの間に余白を設ける。 この余白は外観の質を決定づける非常に重要な役割を担っている。 この余…

動きを伴うコンテンツはいわいるリッチインターネットアプリケーション(RIA)作成ツールを利用する。 特にフラッシュのようにキーフレームアニメーションとスクリプティングアニメーションの両方を作成出来る機能を持ったツールは幅広い活用に耐えうる。 しか…

コンテンツのユーザーが行動や意思決定の助けと出来るような図は、言葉による説明より機能的。 こうした図はプロセスダイヤグラムと呼ばれている。 ウェブの場合ユーザーが読み進めるうちに必要な手続きを全て把握、あるいは実行出来るような仕組みを表現す…

組織の構成を図示したグラフィック要素は言葉では複雑になりがちな説明を一瞬で済ませられる優れた素材。 ハブアンドスポーク図 組織の中心人物とその影響範囲のように上下関係ではなくノードとなる物ごとの影響力の力強さや、クロスするコミュニティの属性…

図を使って数量に関する情報を表現する事をビジュアライゼーションという。 印刷物やウェブのように限られた面積の上で展開する場合伝えるべきテーマを絞って作る事が重要。 刻々と変化するデータの蓄積を得意とするウェブのシステムはビジュアライゼーショ…

一度に送受信できるデータ量に限りがあるウェブサイトの環境においてイメージデータの軽量化はデザイナに託された重要な責任。 ビット別の軽量化のポイント。 8ビット分の色彩で構成するインデックスカラーテーブルから、使用する色を選ぶ形でファイルサイズ…

写真画像と異なりイラスト素材は元のイメージがピクセル正式ではないケースが想定される。 代表的なイラストのデータ形式はベクターデーター。ドロー形式とも呼ばれる。 ピクセル形式でないため完成データを拡大縮小しても外見的な劣化発生しない点が長所。 …

写真画像を効果的に使用するために、トリミングを行いコンポジションの調整を行う。 写真をトリミングする場合に意識するポイントは三分割グリッドなど基本グリッド上における被写体の位置調整と、消失点など遠近法を配慮したコンポジション作りの2点。 グリ…

ディスプレーで観る写真画像は、紙向けよりコントラストを強く、明るめの設定をとる傾向があるがこれには理由がある。 一つは発色を美しくするため。ディスプレーは光で色を表現する。ビビッドな色を多く含む画像は明るく、発色がよく見える。 写真に含まれ…

デジタルイメージは1ピクセルごとに赤(R)、緑(G)、青(B)の三原色のデータの割り当て領域を持っている。この領域を「チャンネル」と呼ぶ。 RGB形式のイメージの場合、1チャンネルにつき最低でも8ビットのデータ領域が必要なので、フルカラーの色表現が可能な…

ウェブページに利用できるイメージの形式は大きく分けて３種類ある。 PNGは8ビット形式と24ビット形式の2種類がある。 8ビット形式はGIF同様パレットのうち1色を透過色に指定して透過PNGを作り背景を透過させることができる。 24ビット形式の場合、24ビット…

机の上の臨場感を強調するためアプリケーションランチャー用アイコンにパースペクティブを与える場合がある。 パースペクティブに従ってアイコンのグラフィックスを作るためには目安となるパースペクティブのガイドラインの上にグラフィックスを描き込む方法…

アイコンの用途に関わらずデジタルコンテンツにはピストグラムを使った意味付けを行う。 ピクトグラムは代表的な表現をがいくつかあり意味の解釈も一般化している。 オリジナルでアイコンをデザインする場合ベースとなるグリッドを先に決定する必要がある。 …

デジタルコンテンツ向けで作られているアイコンの代表はアプリケーションランチャー用アイコン。 ランチャーアイコンはプラットフォーム別に適切な作り方のガイドラインが示されている。 アイコンのピクセル寸法やスタイルの基本があるが、中でも重要なのは…

ウェブページではナビゲーションを中心に縦方向に増える情報量を抑えるための動的効果を使うことが可能。代表的な効果とデザイン上のポイント。 ディレクトリ メニューの展開機能と各項目へのジャンプの機能を1つにまとめたナビゲーション。 メニューの展開…

Ajaxやフラッシュといったクライアントサイドの技術を使って動きのあるナビゲーションを実現する事が可能。 ナビゲーションに動きを用いる利点はブラウザの領域の限界を気にせずに1ページの中に情報を掲載することが可能になること。 動きのあるナビゲーショ…

横方向に並ぶナビゲーションはグローバルナビゲーションなどの重要度の高いパーツであることがほとんど。 よってこの部分を作る際最も留意すべき事項は、クリックしやすい並び方になっているかどうか。 ネームの長さによらずボタンは一定の大きさを確保して…

垂直型のナビゲーションはリスト項目を垂直に並べてレイアウトする手法を利用する。 背景色やリストマーカー(ビュレット)を伴ったビジュアルデザインを与える。 ナビゲーションとして活用するリストの場合、項目名を示すテキストの部分のことを「ネーム」と…