web-design-lectures

Webデザイン 基本~上級編を学ぶ 第6回(全10回)

使う画像はセンスよく選ぶ

ほとんどのサイトには何らかの画像が使われていると思いますが、目に入りやすく印象に残りやすいのが画像です。
人がサイトを判断する基準は1秒あれば十分と言われています。
本当に一瞬なので、より効果的な画像を使いましょう。
こういった人を引き付ける役目を果たす画像やイラスト、または文字をアイキャッチーといいます。
一般的なのはタイトルを大きくしたり、画像をファーストビューに大きくだすなどです。
最近ではファーストビューにあえて小さいタイトルを中央に見せるなど個性的なものも増えています。
最初からそういった個性を出すのは難しいと思うので、まずはスライドやタイトルを大きくするところから始めてもいいと思います。

画像は同じ形にする

写真などを素材として使うことは多いと思いますが、カメラで撮ったそのまま使うのでなく、ある程度加工して手を加えたほうがオシャレに見栄え良くなります。
とはいえ加工といってもある程度経験も必要ですし、まずは形をそろえるところから始めてみましょう。
サイトの雰囲気にもよりますがまずは合わせやすい正方形からやってみましょう。
写真は、メインで見せたい物体、例えば料理写真であればメインディッシュを中央に置いたほうがいいでしょう。
その他の余分なところはトリミングし整えれば少なくとも変な写真にはなりません。

フローチャートは見栄え良く

フローチャートとは、プロセスの各ステップを図で表し、矢印などで表現することです。
実際の手順や説明を分かりやすく表現できるので、複雑な説明などに使うといいです。
複雑でわかりにくいものを分かりやすくするので、見栄え良く明解であるとよりいいでしょう。
1つの方法として、行ごとに枠を作りその中に入れるという方法があいrます。
同じ枠を連続して並べることで、これは同じものを説明しているんだなと分かりやすくなります。

背景に四角を使う

テキストや画像などは整列したり、同じグループのものは近く配置すると見やすくなりますが、中には揃えにくい画像やテキストもあると思います。
そういったときは背景に四角いグレーなどを敷くとおさまりがよくなることがあります。
例えば、画像とグラフを並べて表示したいけど、比率が違うので同じ大きさにできないときなど有効です。

第6回まとめ 画像の見せ方に気をつける②

今回は画像の見せ方について前回に引き続き紹介しました。
画像でユーザーによい印象を残せれば、それがリピートのきっかけになりますので是非画像を有効に使っていきましょう。

次回7回目は11月1日更新予定です。

第5回はコチラ
第4回はコチラ
第3回はコチラ
第2回はコチラ
第1回はコチラ