MD-Blog_Web Creative

Webデザインを生業にしているみなさん、こんにちはこんばんは！
もう梅雨の季節ですね。湿気が鬱陶しい季節がやってまいりました。
新卒デザイナーさんたちも、そろそろ会社に慣れてきた頃ではないでしょうか？
でも、デザイナーになりたての頃は、色々と覚えないといけないことも多いですよね？
なので、今回はそんな新人デザイナーさんに贈る、『画像を使う際に覚えておきたい基礎の基礎』として、僕が考える基礎を書いてみたいと思います。最後までお付き合いしていただければ幸いです。

僕が考える画像データの基礎

なぜ、画像データなの？　って思ったそこのあなた。いい質問ですね。
普段、デザイナーはフォント選びから、色、画像、サイズ等、様々な要素を組み合わせて一つのデザインを作成しますが、Webデザインにおいて画像は大きな存在感があります。
いくらタイポグラフィをうまく創れても、画像の扱いを間違える質が著しく低下しますので、そんな失敗をしないためにも、覚えてみてください。

解像度不足

解像度が足りない画像は使用しないようにしましょう。
画像の解像度が低いと、全ての印象がぼやけてしまいます。
最近はヒーローイメージや、レスポンシブ対応などで大きな画像を扱うことも多くありますので、解像度には注意しましょう。
レスポンシブに対応する場合には、様々なデバイスで解像度不足にならないように気を付けることも大事です。

縦横比の変更、反転

縦横比を変更したり、はたまた反転をすると違和感が出るのでやめましょう。
自然な画像にならないので、悪目立ちして他のデザインが死んでしまいます。
反転に関しては気づかない箇所で文字が裏返っていたりするのなど、致命的な印象も与えかねないです。
なんとかトリミングなどで乗り切ってみてはどうでしょうか。

画像のトーンやコントラストを合わせる

複数画像を使用する際には、画像のトーンやコントラストに気をつけましょう。
例えば、意味もなく暗い画像を使用したり、または突然彩度が高い画像などを使うと、たちまち世界観、統一感がなくなります。
撮った画像をそのまま使うのではなく、そのデザインにあるようにカラー調整することを習慣付しましょう。

質の悪い画像を大きく使う

質の悪い画像を大きく使うと、その大きさ分だけデザインの質が落ちるという可能性があるので、やめましょう。
どうしても質が悪い画像を使用しないといけない場合には、なるべく小さく使用しましょう。

トリミングで画像内の余白を調整する

画像以外のデザインに合わせて、画像の余白も調整してみましょう。
スッキリとしたデザインにしたい場合には被写体の周りに余白を取ってみたり、逆に乱雑なイメージにしたい場合には余白を少なめにすると、デザインの世界観を膨らませてくれるはずです。

画像の上にテキストを載せる

画像の上にテキストを載せる際には、注意が必要です。
テキストの視認性を確保し、テキストと画像が共に活きるように作成する必要がありますので、テキストや画像に加工などをして、画像の邪魔をすることなく、テキストの視認性を保つことが重要です。
オーバーレイや、シャドウ、シェイプなどを効果的に使いましょう。

著作権を確認する

画像を使用する際には、著作権を確認しましょう。
フリーを謳っているサイトの画像も、よくよく規約を読んでみるとそのまま使用できないなんてことも多々ありますので、 使用する際には、規約を必ず確認するようにしましょう。
規約を見逃して使用していると、後ほど痛い目に合うかもしれません。

まとめ

今回は画像を使う際に覚えておきたい基礎の基礎を書いてみました。
最近のWebデザインでは画像や動画が大きな役割を持つようになってきました。
なので、画像の使い方を間違えると、画像だけでなくデザイン全ての質を落としかねません。
基礎を覚えることで、画像をより有効に使用すれば、より良いデザインになりますので、ぜひ使用してみてください。

弊社MONSTER DIVEでは、Webデザインはもちろんのこと、インターネットの技術・知識や社内の制作環境に関する基礎講座、お題に沿ったモノヅクリにチャレンジする「勉強会」を開催しております。詳しくはコチラをご覧ください！

では、また！