keyword インダストリアル [類義語]ノイズ、金属、メタル、スクラップ point ■素材写真は使い込まれた金属などを活用 ■全体的に彩度の低いビジュアルにする |
インダストリアル系のデザインは、メタリックなテイストだけではなく工業地帯のランドスケープや排気口から吹き出るスモッグなどのイメージが絡み合ったものである。また、鉄塔や高圧電線などのハイコントラストな写真を象徴的に扱ってもよい。使用する素材は、ピカピカの金属より使い込まれた感のある写真が適している。全体的にグレースケールもしくは彩度の低い色味のないビジュアルにすると、雰囲気が出てくる。
制作・文=境 祐司
■Design Parts/デザインパーツ
コンテンツ領域の背景に配置するビジュアルパーツは大きな画像だが、色が少ないためデータサイズはかなり小さい。素材となる金属や鉄塔などの写真は、そのまま使用するとページ全体が重たくなってしまうので、コントラストを高くしてハイライト部は完全に消してしまったほうがよいだろう。また、大見出しにはエイジングを施し、工場の壁に描かれたロゴなどのイメージを表現。かすれた感じを出す画像処理がポイントとなる。
■Layout/レイアウト
レイアウトは、インダストリアルのイメージに合わせるためグリッドに沿った規則性のある仕様にしている。ヘッダー、コンテンツ領域、フッターを配置した定番のデザインだ。メインビジュアルに強いインパクトがあるため、フリーレイアウトに近い見栄えになる。
■Texture/テクスチャ
背景の写真は、街道に設置された大きな防音壁を反転コピーしてつなげたものだ。きれいな金属だと近未来的なイメージが強くなってしまうため、ノイズを加えたり、コントラストを高くして意図的に劣化させているのが表現のポイントとなる。
■Example/実例
ARTBREAKHOTEL
www006.upp.so-net.ne.jp/abh/oto.html
背景画像にひび割れた壁面の写真を使い、全体の彩度を下げている。
■Application/応用
配置されている写真の一部に着色することで、ポップなテイストを加えることができる。応用作業のポイントは、鉛筆画に水彩絵の具で薄く塗るように色を加えること。塗る色が濃いとインダストリアルなイメージから離れてしまうので、注意しよう。
■Color map/配色
暗い青系と黒や灰色で硬く冷たいイメージに
#6699CC | #666699 | #003366 | abc | #333333 | #999999 | #003300 | abc | #336699 | #cccccc | #000000 |
#6699CC | #666699 | #003366 | #333333 | #999999 | #003300 | #336699 | #CCCCCC | #000000 |
キーワード1 「上品」
キーワード2 「健康」
キーワード3 「ナチュラル」
キーワード4 「インダストリアル」
本記事は『web creators』2008 vol.76からの転載です。本特集全記事は誌面でお読みになれます。
月刊『web creators』掲載記事号の情報はこちら!>>>