WEBデザインの手法

【ブログの記事ページ・サイトで役立つ】ブログやサイトの中に入れる画像を作成するとき、知識が無くてもすぐに意識・実践できるチェック4つ

知識がなくてもすぐに意識・実践できるチェック4つ

ブログを運営したり、WEBデザインを始めたばかりの方で「自分の作ったこの画像のデザイン、いまいちだなぁ」と思う方はいらっしゃいませんか?

知識がたとえ無くても、これからご説明する4つのチェックを意識するだけで、ご自分の画像がワンランクアップします。

 

「そもそも、いまいちどころか、どういうところに気をつけたらいいかわからないよ!」という方にもピッタリのチェックですので、是非ご覧ください(*’ω’*)

POINT

  • 自分が書いた記事と、画像の意味合いを合わせよう!
  • 画像(もしくはイラスト)を見せたいのか、それとも記事を読んでほしいのか、目的によって目立たせ方を変えよう!
  • 画像を縦一列に並べたときに、色の違和感をなくそう!
  • 「全部同じだけ間をあける」でも、画像の見え方は全然違います!

スポンサーリンク

チェックその1
その画像は、ブログの記事の前後の文章に合いますか?

前後の文章と画像、”意味合い”あってますか?

[st-kaiwa5]そもそも、なんか画像を入れておけばいいんじゃないの?[/st-kaiwa5]

[st-kaiwa1]関係ない画像や意味がわからない画像は、ユーザーさんに無意識なストレスを与えちゃうんだよ![/st-kaiwa1]

 

例えば、お金の話をしていて、突然サッカーの画像が出てきたらどう思いますか?

なんだか文章を読んでて混乱してしまうし、頭に入ってきませんよね・・・。

 

  • カッコイイ画像を入れたい!
  • おしゃれな画像にしたい!

など、記事を書くときにはいろいろなことを考えるでしょう。

 

でも、ユーザーさんに一番受け入れられるのは前後の文章に合っている・または文章を補っている画像なんです。

この記事では、画像は見出しの下にそれぞれありますが、タイトルの文章を読んで、その内容を頭でイメージできるように気をつけて作っています。

おしゃれさやカッコよさが一番ではなく、ユーザーさんの頭にスッと入るような作りになっているか?前後の文章は合っているか?ということを意識しています。

 

WEBデザインの世界でも同じで、サイトの文章を読んでいて、その内容がイメージできるような画像づくりを心がけています。

そうすることで、よりサイトは、よりユーザーさんにとって「わかりやすかった内容・情報」となるんです。

 

チェックその2
入れる画像は、縦幅が長過ぎて文章の邪魔になっていませんか?

画像が文章より”主張しすぎ”になってませんか?

私はブロガーとしてはプロではありませんが、WEBデザイナー目線でブログやサイトを拝見したときに、ちょっと気になることがあります。

それは、拝見していて「ちょっとだけ画像、長すぎないかな?画像(もしくはイラスト)を見せたいのかな?記事を読ませたいのかな?」ととまどうことです。

 

イラストや作品を見せたい場合は縦幅なんて考えて無くて良いと思いますが、記事を読んでもらうための「挿絵」「補助」としての画像制作であれば、縦幅が長すぎないように気をつけましょう。

[st-kaiwa5]えっそれだけでいいの?[/st-kaiwa5]

[st-kaiwa1]いいんです![/st-kaiwa1]

縦幅が長すぎると、パソコンやスマホで閲覧したときに、記事よりも画像が占める割合が多くなるので画像の主張が大きく見えてしまうのです。

そこで、最低限必要な縦幅にすることで、文章に寄り添った画像になれます。

図解が入っている場合は無理に縮める必要はありませんが、例えば今回の記事の場合は、縦幅は400px内に収めています。



チェックその3
画像ごとに色のテイストがちぐはぐになっていませんか?

色のテイスト、”ちぐはぐ”じゃないですか?

前後の文章とも合っている。縦幅も気をつけた!

ここまでできたら、ユーザーさんにとってはかなり見やすい記事やサイトになっていると思います。

 

ここでもう一歩。

その記事やサイトで使う画像を縦一列にそろえて見たとき、色のテイストは大丈夫ですか?画像ごとに、新しく色を考え直してしまっていませんか?

もしも写真を載せる場合は、人の肌のトーン・風景の色などが違うだけで(もちろん記事の前後に合うかどうか?のほうが最優先ですが)違和感があるように見えてしまいます。

 

イラストなども同じで、1枚目のイラストはピンクを主体に作っていたのに、2枚目は同じピンクを使う場所でもちょっとだけ緑かかっちゃってる・・・なんてことがあると、全体を通すと違和感があるように見えてしまいます

記事をアップしてしまった後でも良いので、一度その記事にアップした画像を全部見直して、色の違和感がないか確かめましょう!

 

チェックその4
画像と中身の余白に気をつけていますか?

私がWEBデザイナーとなってよく指摘されるのは、「透明の線が見えるかのように作りましょう」ということです。

[st-kaiwa5]どういうこと?[/st-kaiwa5]

[st-kaiwa1]以前私が作った記事内の画像でご説明するよ![/st-kaiwa1]

 

▼参考にしたのは、こちらのブログ。WEBの基本:色が持つ基本的なイメージを知って、デザインに活かそう!という記事です。

[st-card id=632 label=”” name=”” bgcolor=”” color=”” readmore=”on”]

こちらの記事内にある、この画像。

特に何も考えずに作ったように見えますが、実はこんな風に余白を意識しています。

ざっくりと余白を気にして作っています。同じ記号のところが同じ余白

意外にもこれは忘れがちで、なんだか画像が窮屈に見えたりバラついて見えたりする・・・というのは、この辺を意識しているかどうか?で違ってきます。

とはいえ、◯◯ピクセルきちんと空けて!寸分違わぬように揃えて!ということをする必要はありません。

ほんの少し意識するだけ。後は、実際に自分で制作のときに線を引いてみるなどして、余白自体がガタガタになっていないか確かめてみましょう!

 

4つのチェックをご紹介しましたが、全部「こうしなきゃいけない!」ということはなく、意識して作ってみるだけ。

難しく考えることもなく、楽しく作って、さらに画像が素敵になれば嬉しいですよね。是非お試し下さい(*’ω’*)

POINT

  • 自分が書いた記事と、画像の意味合いを合わせよう!
  • 画像(もしくはイラスト)を見せたいのか、それとも記事を読んでほしいのか、目的によって目立たせ方を変えよう!
  • 画像を縦一列に並べたときに、色の違和感をなくそう!
  • 「全部同じだけ間をあける」でも、画像の見え方は全然違います!
ABOUT ME
あきた しろまる
あきた しろまる
20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。