Webデザイン実践Ⅰ<ビジュアル> |2.レイアウト/ビジュアル表現

UIとブロークングリッドについて

UIとグリッドについて

グリッドのメリット

参考サイト

ビジュアル表現

主なビジュアル表現

イラストレーション

手書きからベクター調、3Dまでさまざまな手法があるが、ひとつのサイトの中では同じタッチ・彩色のものを一貫して使用することが望ましいです。

写真

撮影や写真の購入ののち、適切なレタッチ・トリミングを施して使用します。その際重要になってくるのが構図です。

代表的な写真の構図

解説スライド

レタッチにおいては、その写真に対してどのような印象を持ってもらいたいのかをベースに色彩を考えます。カラー以外にもモノトーンや2色を使用したデュオトーンも近年のトレンドです。

写真の色

インフォグラフィックス

データや情報などをわかりやすく視覚的に表現する際に用いる。グラフと併せたものや、電車の路線図などが代表的。

ウェブデザインでは、マイクロインタラクションと併せて実装し、よりリッチな効果を目指すものも多い。

ピクトグラム

一般に「絵文字」「絵単語」「絵記号」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)。言語に頼らないコミュニケーションが可能。非常口やトイレのマークなどが代表的。

アートディレクションの重要性

イラストのトーンがばらばらだったり、写真の雰囲気が違っていたりすることがあります。こうした"残念な"ビジュアル表現を防ぐためには、絵の管理=アートディレクションの能力が必要不可欠です。