写真ベースでお洒落なメインビジュアルを作る時の小技集【古性のち×世界写真さんぽ #05】

こんにちは。古性のち（@nocci_84）です。この「世界写真さんぽ」シリーズも、いよいよVol.5になりました。（前回までの記事はコチラから）。現在、タイトルにふさわしく旅真っ最中です。沖縄本島からこの記事を執筆させていただいています。

現在は旅先のフォテッセイやコラムなど、「写真」と「言葉」を軸に仕事をすることが多いわたしなのですが、実はもともと、Webデザイナーとして製作会社で3年間ほど働いていました。
そのため、ライティングや写真のお仕事のご依頼を受ける際「メインビジュアルの作成」もセットでご依頼いただくことが多かったりします。
このWorkshipMAGAZINEでも、自分の記事のメインビジュアルは自分自身で作成させてもらっています。

現役のデザイナーではないので、めちゃくちゃトレンドなもの！ や特別凝ったものは作れませんが、それでも基本の組み合わせが理解できていると「ここにちょっとデザインを入れたいな」とか「こういうテキスト入れてみたいな」な時に、70点くらいのデザインはささっと作れます。

なので今回はいつもとちょこっと趣向を変えて、写真を使った、簡単なメインビジュアルの作り方を、自分なりのノウハウを交えながらお伝えしてみたいと思います。
「自分でちょこっと簡単に写真に文字入れできたら良いな…」なんて方の何か手助けになれたら嬉しいです。

※ デザイン手法の基本にはあまり大きな差はないかもしれません。なので「これと似たような記事見たことあります！」な場合も、ご了承いただければ嬉しいです
※ あくまでもデザイン初心者さん向けです

写真を使った簡単なメインビジュアルの作り方

1. 自分にあった必要なツールを探す

Adobe Photoshop

メインビジュアルを作るのに手助けになってくれるツールは、さまざまなものがあります。いろいろ試した上で自分に合うものを探すのが良いですが、わたしの場合はAdobeの「Photoshop」を使用しています。

昔は少し高価なツールとして位置づけられていましたが、現在は最安値で月々980円から利用できるので、使ったことがない方も気軽に手が出しやすいかもしれません。

多様な使い方ができ、非常にデザインの幅が広がる便利ツールなのですが（写真を撮るのが好きな方にもおすすめです）、レイヤーの概念理解やツールの使い方習得には少々時間がかかります。

Canva

「そんなに凝ったデザインではなくて良いのでおしゃれに作りたい！」な方にはこちらの「Canva」もおすすめ。おしゃれなグラフィックデザインを簡単に作成できます。

Photoshopほどの自由度はないものの、ばちっとはまる、満足度の高いデザインが可能なので、「まずはここから！」にはぴったりのツールかもしれません。

2. 写真を選ぶ

使うツールを用意したら、次に素材となる写真を選んでいきます。メインビジュアルにテキストを入れる場合に考えたいのは「良い構図の写真」よりも「テキストの視認性」そして「テキストの入れやすさ」です。

ちょっと扱いが難しい写真例：背景もくっきり写っている

文字が乗りづらく、どうしても上にフィルターをかけたり、色付きの枠を引いたりしなければならなくなります。NGではありませんが、デザインが少し野暮ったくなりがちなので、できれば避けたいところではあります。

扱いやすい写真例その1：背景がしっかりぼけている

まず選びたいのが、背景がぼけている写真。テキストの下に何か引かずとも、可読性の高いメインビジュアルを作成できます。

扱いやすい写真例その2：写真内に単色のべた塗りの箇所が多い

もうひとつが、単色べた塗りの部分が多い写真。写真自体はくっきりしていますが、上に余白がたっぷり空いている＆色彩が複雑ではないため、テキストが入れやすい写真といえます。

こちらも。左のべた塗りの青の上にテキストがしっかり乗りそうです。

3. 作りたいビジュアルのイメージでテキストを選ぶ

写真が決まったら、次にテキストを選んでいきます。

テキストは、柔らかく作りたいのか、ナチュラルに作りたいのか、上品なものが良いのか、など、メインビジュアルの方向性やターゲットで選ぶフォントを変えていきます。ここではざっくりとスタンダードに「POP」と「綺麗」に分けてみました。

私が普段選んでいるフォントはこちら。特にこのWorkship MAGAZINE内のメインビジュアルは「こぶりなゴシック」と「游明朝」にめちゃくちゃお世話になっています。

分かりやすく、お気に入りのかごバッグに「こぶりなゴシック」をざっくりと合わせてみました。少しPOPな、やさしいイメージなのが伝わるでしょうか。コロンっとした可愛らしいフォルムをしたこのこぶりなゴシックは、テキスト間隔を少し離してあげると、より一層、優しくやわらかいイメージを作ることが可能です。

次にこちらが「游明朝」。見づらいかもしれませんが、少し清楚な涼しいイメージになりました。商品は変わっていませんが、ちょっと対象の年齢が上がったようにも見えるかもしれません。このように、出したいイメージでフォント選びも変わってきます。最初に「自分は今回のメインビジュアルをどんなテイストで作りたいのか」を、手を動かす前に決めておきましょう。

4. テキストを置く位置を考えてみる

使うフォントが決まったら、実際に写真に入れていきます。これもさまざまな方法がありますが、今回ご紹介する基本的なスタイルは以下の2つです。

真ん中に文字を入れたい場合：全ての余白距離が均一になるように配置する

まず、写真の中央に入れる場合。この場合、周りすべての余白が同じになるように心がけましょう。下に下がっていたり、右にずれていたりするとデザインが雑に見えてしまいがちです。

テキストが1列の場合、複数列の場合にかかわらず、考え方は一緒です。上下・左右の余白は均等に配置しましょう。テキストが横長、縦長になる場合は、上下で均等、左右で均等になっていれば問題ありません。

文字を左右どちらかに寄せて入れたい場合：左右の重さが同じになるような場所に配置する

これはイメージの話になってしまうのですが、持ったときに左右同じ重さになりそうな位置にテキストを入れてあげると全体のバランスが良くなります。例えばこのアイスの写真は、右にアイスがあるので、左にテキストを持ってきてあげることで、バランスが安定します。

真ん中にテキストを置いてあげても良いのですが、その場合は左に何かしらの装飾だったり、こんな風に何か物が置いてある場合が好ましいです。

黄色い枠を外してあげるとこんな感じになります。ちょっとみずらいかもしれませんが、白い線が左右の余白幅です。余白のバランスも、端っこからアイスまでの距離と、端っこからテキストまでの距離が均等だと美しく見えます。

5. デザインを華やかに見せるため、簡単な装飾をいれる

最後に、デザインに華やかさをプラスさせるための装飾パーツを入れていきます。あまり過度にしすぎると下品になってしまうので、ほどよく入れましょう。

ちなみにわたしがよく使用する装飾がこちら。特に①の筆記体や、②の吹き出しはよく使用します。

これらはPhotoshopのツールで簡単に作成できるほか、検索で「吹き出し 無料」など検索すると、クオリティの高いフリー素材がたくさん見つかります。ぜひ活用しましょう。

装飾を上手に使うと、のっぺりしていたデザインに躍動感を与えられます。料理でいうところの、調味料のような存在でしょうか。

「ちょっと寂しいな……」「何か物足りないな……」といった時にふりかけてあげられると、旨味が増します。お気に入りの装飾一覧をあらかじめ用意しておくことで、ささっとデザインクオリティをワンランクUPできるのでおすすめです。

まとめ

今回は、メインビジュアル作成の際の基本亭なポイントをずらりと並べさせてもらいました。「作ってみたけれど、なんだかイメージと違う……」そんな時に、上記の方法を思い出してもらえたらとても嬉しいです。

もちろん他にもたくさんの手法があると思います。ぜひ、いろんなメインビジュアルを研究しながら、自分の好みにカチッとはまるデザインを探してみてください。

それでは、今日も良い旅を。

メインビジュアル撮影: @ikepon_ism