reynato.tokyo

CREATIVE TOPICS

2018.04.27

DESIGN

webデザインで重要な画像の入れ方

Scroll Down

webデザインで重要な画像の入れ方

 

効果的な画像の使い方として重要なポイント、それが「画像の挿入」です。

やみくもに画像を配置しても読者に伝えたい情報は伝わりません。

正しく情報を伝え、読者に関心を持ってもらうためには画像の配置場所を絞り、的確に配置する事が重要です。

画像を配置するポイントはその場所と関心を引く配置の仕方、そして文章の組み合わせ方です。

ここでは、魅力的なwebデザインの中でも極めて重要な、効果的な画像の使い方をご紹介します。

 

画像の挿入方法

 

HTMLIMGタグを使うことで簡単に画像を挿入できます。

しかし、ここではより効果的な画像の挿入方法について見ていきましょう。

 

トップページの頭に大きな画像使う

カラー主体のデザインよりも、画像を盛り込んだwebサイトの方が透明感や臨場感、そしてインパクトがあります。

特に画像が高画質かつオリジナリティが高いほど読者への印象も強く残ります。

企業サイトなどのトップページで商品や製品、サービスに関する大きな画像が挿入されているのはこうした理由があるためです。

 

記事の区切りごとに関連する画像を入れる

長い文章だけだと読者に飽きられてしまいます。

長文を最後まで読んでもらう時は、文章の区切りで内容に関連するイラストや画像を入れるようにしましょう。

そうすると、長文の圧迫感を解消できるため効果的です。

 

見てもらうための配置

 

webサイト内のヘッダーやメニュー、そしてコンテンツに画像を挿入しているケースが多く見られます。

共通している点は読者に「見てほしい」「興味を持ってほしい」場所に配置されている点です。

 

メインビジュアルで読者の心をつかむ

webサイトに訪れた読者が真っ先に目にするのが、トップページです。

トップページの頭に大きな画像を配置している企業サイトをご覧になったことはありますか?

あれは読者の目を引き、企業の製品やサービスに興味を持ってもらうといった狙いがあります。

 

記事に合った画像を随所にちりばめる

記事がいくら有益でも、テキストだけでは読者に最後まで読んでもらえないことがあります。

そのため、記事本文の随所に見出しや画像を配置し、見やすいレイアウトに整えることが必要です。

このように、画像はwebサイトのコンテンツ充実やレイアウトなどに欠かせない、重要な要素なのです。

 

文章との組み合わせ方

 

基本的にコンテンツは「画像+テキスト」といった形で構成されますが、中には広告バナーのように画像上に直接テキストを配置するケースもあります。

画像の上にテキストを並べても可読性が低くなりそうですが、こうした欠点を取り除きつつデザイン性を維持したままテキストを配置する方法があるのです。

 

画像にコントラストをつける

画像上にテキストを配置する際に良く使われる手法です。

画像の上に半透明の黒を重ね、その上に白文字でテキストを並べます。

こうすると画像の明暗に関係なく、その雰囲気を維持したまま手軽に文字を引き立たせることが可能です。

 

画像の余白にテキストを配置

画像に余白がある際に使える手法です。

画像に人物とその背景が写っている場合を例にとりましょう。

こうした画像にテキストを載せる際は、人物に文字が重なるのを避けるべきです。

なるべく背景に物が移っていない箇所に文字を配置すると、可読性を維持しつつ、画像としてもバランスが良くなるのでオススメです。

 

webデザインにおいて画像を使ったテクニックを習得することが非常に大切です。

それぞれの配置場所によって画像の持つ役割や意味は異なり、読者に与える印象も変化します。

特にスマホでwebサイトを閲覧する人が増える中、画像のサイズや解像度に配慮した画像加工技術も必要です。

こうした技術に加えて、画像の効果的な挿入方法や読者の関心を引く配置、そして画像と文章を組み合わせ方を知っておくことで、表現の幅もグンと広がります。

 

<参考サイト>

http://www.webdesign-fan.com

https://www.webcreatorbox.com

https://ja.wix.com

https://coliss.com