奥深くていつも悩ましい…。WEBコンテンツに添える画像の選び方。

テキストだけ物足りない、かと言ってイラストやアイコンを多用するような業種でもない…。

さらにカメラマンに撮影している商品もスタッフもない、そんな案件のときに重宝するのが有料・無料を問わず汎用性の高い「画像素材」たち、ですよね!

上手に使えばシンプルな構成のWEBサイトも、わかりやすくメリハリをつけられますが、慣れないとなかなか難しいので、私どもなりのポイントをご紹介!

なるべく統一感を持たせる

特定のコンテンツや対象のために撮影する写真とは異なり、素材集サイトに掲載されている画像って並べてみても意外と違和感なくできるのがありがたいところ!

かと言ってテイストはもちろん、補正やコントラストの種類がページごと、段落毎に異なってくると、ページ数が多いサイトほど、潜在的な違和感が蓄積されます。

またデザインやページ構成を分業して行う場合に、選ぶ担当者が違うと、なんとなく好みの違いも出てくるので、弊社の場合なるべく同じ担当者に選定してもらうよう意識してスケジュールを組んでいます。

見出しとテキストと画像、どれが「主」として見せたいか?

ネットショップの商品サムネイル画像ならともかく、テキストを読ませたい場合には「アイキャッチ」の役割、つまりディスプレイをスクロールしていく中で「目が止まる」ために画像素材を掲載することも多いですね。

スクロールを止めた瞬間において、見出しとテキストと画像、どうレイアウトするのがそのページの目的に対して有効か?

選んだ画像が見出しやテキストに対して主張しすぎていないか?というのも重要ですね。

画像にある情報量の密度や粒度は適切か?

集合写真って、見始めるとついつい全員の顔を見てしまったりしませんか?

人間の顔って、当たり前ですがパーツがいろいろあって認識していくので結構な情報量だったりします。

完全に文章に添えるような画像の場合には複数の要素があったりすると、そこに意味合いが生まれてしまうことがあるので、適正な密度や粒度かチェックするのは大事ですね。

デザインの配色との調和を考える

全体的に明るめで優しい雰囲気の配色のなかに、やっぱり明るめで優しい雰囲気の画像を選んだほうが調和が取れて、見出しやテキストにもすんなり入り込めると思います。

逆にそこにシャープでスポーティーな画像やモノクロな画像を入れるのは不協和音的な印象になり、論理的な文章構成でも、どこか釈然としないページに仕上がってしまうことも。。

レスポンシブのレイアウトも考慮する

これはなかなか文章で伝えるのは難しいですけど、パソコンでの表示(ex.テキストが左、画像が右)と、スマホでの表示(ex.テキストが上、画像が下)といったレイアウトをディスプレイサイズによって切り替える場合には、その縦横比も同じでいいのか考慮する必要があると思います。

あまり縦長な画像をレスポンシブでもそのまま…なんてことはページからの離脱につながるのでよくチェックしないと、ですよね。

まとめ:画像を多用しすぎないことも大事

要点をまとめた模式図や要点のみを指し示すイラストなどに比べて、画像のほうが挿入しやすいためか、無駄に画像を入れているWEBサイトってありますよね。

確かにテキストだらけ…よりはいいけれど、やはりページごとの目的に応じて適切に使い分けるのが一番重要ですよね。

シェアする

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

フォローする