ワンコンテンツ

web制作とかiPhoneのこととか書いていきます

Web/Design/Creative

ウェブページにおける画像には2つの役割がある:ウェブデザイン

投稿日:2019/4/25 更新日:

このエントリーをはてなブックマークに追加

今回はウェブの作り方のお話です。特にウェブデザイン独特の考え方でもあるのですが、私がデザインを教育する際に必ず入れる考え方です。これからデザインに取り組む方は参考にしてもらえると幸いです。画像の作り方の話ではなく概念なので少し難しいかもしれません。

ウェブサイト内のトップページだろうがコンテンツページだろうが画像を使わないページは無いと思います。スタイルで処理する場合もありますが、装飾もデザインとして考えます。ウェブ制作に関してはページ内に利用されている画像は二つの役割に分類して私は考えています。画像形式ではなくて、画像がもつ役割のを分類して考えます。

スポンサーリンク

広告

「情報の補強」と「行動の誘発」の2つに分類

2categoy

画像をただ配置しただけではデザインとは呼べないのはもちろんですが、「情報の強調」と「行動の誘発」の2つを意識しないとデザインとして成り立っていない状態になります。

とてもキレイなウェブサイトなのに無意識に感じる「使いにくい」や「わかりにくい」には2つの分類が正常に行われていない事が原因です。

1.情報の補強のための画像

information

ページ内の情報を閲覧者に伝えることが主な役目の画像たちです。主に以下の3つの効果を狙うための特性を持つ画像です。どれもページ内の情報を補いわかりやすくさせる効果を持たせた画像です。

強調の効果

メインビジュアルやキービジュアル、ロゴやブランドイメージはデザインのうえでサイトコンセプトや伝えたいイメージを強める効果を期待して配置されるので大きく・派手に使われることが多い。

整理の効果

図式化したりグラフ化する事で記載している情報を理解しやすくしたり解説したりするための画像で、分かりやすさを重要視した画像ですね。

分割の効果

エリアの区切り線や余白など情報「コンテクスト)を分割するために使われる処理は情報を分割する種に配置される。強調するわけではないのでうっすら使われることが多い画像(処理)です。

2.行動の誘発のための画像

start

主にバナーや、ボタンのデザインになりますが、閲覧者に行動してもらうためのデザイン処理で、リンク先のページへ誘導する事が主な目的です。

クリックできる感じやリンク先のお得な情報を画像内に表現する事で誘導しようとデザイナーさんが苦労されているところですね。

LPなどは「行動の誘発」をつかうことで購入やコンバージョンを高める為に日夜試行錯誤されています。

ウェブのデザインでは2つの分類を意識する

印刷物のデザインでも行動の誘発は意識するものですが、ウェブの場合は行動させることで収益につながることが多いので、ウェブデザインには求められる重要な要素です。

デザイン上での意識されているか?

情報の補強と行動の誘発の2つの分類の視点でウェブサイトを見ていくと多くのものがわかるようになってくると思います。逆に悪い点を確認できる方法としても活用できる考え方と思っています。

  • このサイトの中で「情報の補強」のデザイン処理はなんだろう?
  • 「行動の誘発」を意識している点はどの部分だろう?

また、施されているデザインが適切に機能しているかどうかを判断する基準として2つの分類を当てはめてみると答えがでてきます。

  • このボタンは「行動の誘発」につながっていないから良くない。
  • この「情報の補強」は強調ではなく整理ではないか?

行動の誘発の目的なのに誘発されない(押されない、押せると思わない、押したいと思わない)デザインは本末転倒です。

2つの分類をマスターする勉強法

昔デザインの勉強をしているときに良いものだけを見続けると良い目が育ち、悪いものを見ると目が腐ると教えられたことがあります。

良いものを見ることで勉強になるのは当たり前ですが、さらに効果的な勉強方法として2つの分類を使っていくことをお勧めしています。

サイトを見る→サイトの目的を想像する→2つの分類にあてはめて良い点・悪い点を書き出す。

参考サイトを見るときにただ見るのではなく、サイトの目的(販売・ブランド認知・問題解決・情報認知なそ)を想像しサイトのゴールを想像します。

そのうえで意識的に「情報の補強」と「行動の誘発」の分類を当てはめ、どう効果的なのか・効果的ではないのか分析してみることが大事です。

スポンサーリンク

広告

デザイン参考サイト

  1. Responsive Web Design JP 
  2. スマートフォンサイトのデザインリンク集 sps collection
  3. ランディングページ集めました。
  4. レトロバナー
  5. Bannnner.com

ランディングページ集めました、レトロバナー、Bannnner.comは「行動の誘発」に特化したデザインがたくさん集まっているので、設定されたデザインのゴールを想像して見ていくと、多くのことを読み取ることができます。

まとめ

デザインとは画像の配置や処理のしかたではなく、目的に対して写真、イラスト、色、形で見ている人に行動・感情を誘発させることが目的の技術です。

答えがない分難しいと考えられがちだったり、センスが必要だと考えられていたりしますが、学習と練習で高めていく技術です。

ウェブデザインの中で必要な2つの分類「情報の補強」と「行動の誘発」を是非マスターしてデザインの質を高めていきましょう。

広告

広告

このエントリーをはてなブックマークに追加

-Web/Design/Creative

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

GoogleドキュメントでWordPressの下書き保存ができるアドオン

Googleドキュメントの音声入力を試してみたくてGoogleドキュメントに原稿を書いてワードプレスアプリ(Mac)に貼り付けてみたら、Googleドキュメントでワードプレスの原稿が書けるとアナウンス …

同業者からのセールスメールを読んで、その会社のことを真面目に分析してみた。

「ウェブサイトリニューアルしませんか」とか「SEOお手伝いします」ってメールが未だに会社宛に来るのだけれども、いったいどんな会社がこのメールを配信して、リンクした先にはどんな明るい未来が待っているのか …

シークレットモード 開き方:Google Chrome

GoogleChromeには閲覧履歴や入力したフォームの内容を記録しないシークレットモードがあります。 例えば他の人のパソコンを使わせてもらってSNSやWEBメールを閲覧するなど、記録を残して置きたく …

Web屋が使うGoogle Chrome エクステンションまとめ

仕事上ブラウザはよく使う方ですが、ウェブ制作するうえで必須だと思っているエクステンションをまとめました。 ページ内容の目次1 pasty2 Website IP3 FireShot4 Link Che …

Mac keyboard

GoogleChromeデベロッパーツールをファンクションキーで開く設定:Mac

サイトの制作や修整の際にいまやデベロッパーツールを使わない人はもういないと思います。サイトのチェックだけでなく、レスポンシブチェック、サイトのデータサイズチェック、JSの動作チェック、オーバーライド機 …

検索

サイドAD02

AD