2、グラフィックス

a0055_0005742、グラフィックス

写真やイラストなどのグラフィックスは直感的に情報を伝えるのに適している。アイキャッチに利用したり、言葉で説明しにくい情報を表現する場合に画像を使用すると効果的である。

 

  • 写真写真は人物や商品の紹介などに適している。写真をウェブページで使用するためにはまず撮影が必要であり、その後、トリミング、レタッチ、切り抜き、マスク処理、裁ち落としなどによって、より効果的な表現を行うことができる。

①トリミング

撮影した写真の全体ではなく特定部分だけを利用するために、その部分を切り取る作業をトリミングと呼ぶ。トリミングによって写真の中で強調したい部分をより明確にすることができる。なお、撮影した時の形のままの写真、あるいは長方形にトリミングした写真のことを角版と呼ぶ。写真をレイアウトする際の最も標準的な形は角版である。

②レタッチ

写真を編集、加工する作業がレタッチである。必要に応じてトーンカーブを利用したコントラストやホワイトバランスの調整やフィルタ処理などを行う。

③切り抜き

写真の中の被写体だけを残し、背景を取り除くことを切り抜きと呼ぶ。写真を切り抜くことで被写体の存在感を強め、視覚的なインパクトをつけることができる。

④マスク処理

マスク処理を利用すると、写真の一部にぼかしを入れると言った視覚的な変化をつけることができる。

⑤裁ち落とし

ウェブページに写真をレイアウトする際にページの端まで写真を配置することを裁ち落としとよぶ。裁ち落としによって写真の内容に広がりを感じさせることができる。

⑥サムネイル

ウェブページには大きな写真を何枚も配置することはできないため、原寸大の元画像とそれを小さくした画像を用意しておき、ウェブページ内の小さい画像をクリックすると、元画像が表示される仕組みが多用される。この時の小さい画像のことをサムネイルとよぶ。

 

  • イラスト

写真では表現しきれないもの、カメラが入れない場所やもの、具体的すぎるとかえってイメージが伝わらないものなどを表現する時にはイラストを使用する。イラストはウェブページ全体の雰囲気やトーン作りに効果を破棄するばかりでなく、ユーザーの想像力を喚起するという効果もある。

  • ピクトグラムダイヤグラム

ピクトグラムあるいは図や表などのダイヤグラムはウェブページに視覚性を与えるためのデザインであると同時に煩雑な事項を文章ではなく、直感的に把握できるようにするための仕組みでもある。ダイヤグラムをせ伊作する時は極力単純化したものを製作し、それに必要最低限のことを追加していくことが重要となる。

・ピクトグラム

ピクトグラムの代表が アイコンである。ウェブページにおいては次ページ表示や前ページ表示などを表すアイコンメニューとして利用するイメージマップのためのアイコンなどがある。

・表

情報やデータを表にすることによって情報が項目ごとに分類して整理され、データの比較が容易に行えるようになる。表のデザインにおいては業と列を認識しやすいように見せることが重要となる。

・グラフ

割合の変化などを視覚的に表現したものがグラフである。グラフで重要となるのは、座標軸の取り方である。座標軸の取り方によって、変化は大きくも小さくも感じられる。

・チャート

概念や手順、校庭などを一枚の図に表現したものをチャートとよぶ。情報はできるだけ単純化して視覚化することが重要となる。

・地図

地図は位置情報を俯瞰するためのものである。わかりやすい地図を製作するためには、適度に簡略化することが重要となる。地図は目的の場所にたどり着くためのヒントであるため、ヒントとして重要なことを表示し、不要な情報は削除することが必要となる。