ウェブデザインやSNS投稿を製作する際に、どんなレイアウトがオシャレなのか迷いますよね。
そんな時に使えるレイアウトのテクニックを紹介します。
この記事を読めばYoutubeサムネイルやアイキャッチ画像が作れるようになるテクニックが身につきます。
写真を利用したテクニック5選
ホームページのトップ画像、メインビューやバナー、Youtubeのサムネイルで使えるテクニックを5つ紹介します。
1. 余白に文字を入れる
使用例
2. 背景にインパクトのある文字を配置する
使用例
このテクニックは本当に使えます。インパクトのあるキャッチコピーや明確な訴求ポイントがある場合に積極的に使ってみるといいかもしれません。
バナー製作でよく使われるテクニックです。
背景の文字BELIEVEは隠れていても連想できますね。
3. 写真に文字を重ねる
配置時に写真に文字を重ねてあげるといい感じになります。16×９の横長バナーで写真とベタ塗りをスプリットして使います。重なる部分を丸く切り抜いたり、ぼかしを使ってあげるとよりオシャレな雰囲気に。MV（メインヴィジュアル）にも使えそうですね。化粧品会社のホームページ作成時に使いました。
メインビジュアル（MV）とは：ホームページのトップ画面のヘッダー下の画像です。1番最初に目につき範囲も広く取るため、視覚的に分かり易いようにサービス内容を表示します。インパクトのある写真が使われやすいです。
使用例
バナーでも使われています。ちょっと物足りないと思った時は写真に文字を重ねるだけでそれっぽくなります。
4. 隅に文字を配置する。
写真を配置した時にできた余白を活かして、４隅に文字を配置します。写真に重ねるテクニックやジャンプ率を活かして配置するとより効果的です。
使用例
5. 写真に窓を配置する
最後はシネマティックなVLOGやエモーショナルな動画のサムネイルなどに使われるテクニックです。この記事のキャッチコピーにも使用しました。筆者は海の動画をCinematicに編集するのが好きなので多用しています。アイキャッチやサムネイル向けになります。
まとめ
この記事では５つの写真を使ったテクニックを紹介しました。どれも多用されているテクニックなので覚えておいて損はないと思います。バナー紹介サイトで他の人の作品を見て使われているテクニックを観察するのもいい勉強方法だと思います。是非、色々試してみてください。
後半では写真に文字を重ねた際に可視性を上げるテクニックを紹介します。写真に重ねたけど文字が見えにくいってことありませんか？後半の記事はそんなお悩みを解決いたします。
写真に文字を重ねる際のテクニック4選
写真と文字を組み合わせる場合、文字情報の可視性は重要なポイントです。
ここからは、ビルボードやSNS用のデザインを見ていきながら、可視性を上げていくノウハウをご紹介していきます。
1. 背景をぼかす
Cinematic Vlogの動画のオープニングでも使うテクニック。より文字に注目させたい場合に効果的です。また立体感のある表現にすることができます。
2. オーバーレイを使う
写真にオーバーレイを使うことで、可視性をあげます。 写真の色がサイト全体の雰囲気を違う場合にも便利に使えます
3. シェイプを使う
写真と文字のコントラストがはっきりしなくて読みにくい場合には、文字の後ろにシェイプを入れる方法がお勧め。シェイプはほど良い不透明に設定しましょう。
4. ドロップシャドウを使う
視認性を上げる為に文字にドロップシャドウをつけるのも１つのテクニック。あまりかけすぎないように注意が必要です。
まとめ
いかがでしたでしょうか？
写真を使ったテクニックを紹介しました。世の中にある様々なデザインにこれらのテクニックが使われています。
デザインの基礎となりますので、ノンデザイナーもこれからデザインを覚えていく予定の人も覚えておきましょう。
