誰かに見てもらうための、簡単なデザイン

写真を大きく使ったデザインの特徴と簡単な作り方を考えてみた

前回のパワーポイントの記事が思いのほかアクセスがあったので(ありがとうございます)、続編として、写真を大きく使ったデザインをパワポでしよう、という記事を考えてたんですが、そのために写真を使ったデザインを探したり考察したりしていると長くなってしまったので、それはそれでまとめてみた、のが今回の記事です。

世の中には写真を使った広告などは溢れているわけで、いい写真があればそれだけで十分ビジュアルとして使えますし、上手く撮れていない写真でも、工夫次第で綺麗に見せることができます。
今回は、そんな写真を使ったデザインを見て、どのように構成されているかを分析して実践していこうかと思います。
分析といっても、そんな大したことしませんが…加えて私は写真に詳しくないので、なんか間違ったことを言ってしまうかもしれません…(´・ω・`)ショボーン。
初心者でもすぐに使えそうな、簡単なことばかりを書いていきます。
デザイナーじゃない人でも、さらっと使ってもらえたらなぁと思います。

29_letter-on-photo_03

写真を使う、とは

綺麗な写真を大きく使うと、それだけでインパクトがありますよね。
そして何も装飾しなくても、情報を伝えることができます。
写真を大きく使ったデザインの、よく見るパターンで簡単にできそうなのは2種類かなぁ…と思います。

  • ・写真をどーんと載せて、その上に文字を置くパターン。
  • ・写真と文字の部分が分かれているパターン

他にも写真をタイル上に並べたり、切り抜いて配置したり…など、使い方を細かく見ていくと様々あるんですが、この2つの形が分かりやすくてそこそこ良いものが作れるんじゃないかなと思います。

どんなデザインがあるのか?

写真を大きく使ったデザインって、ポスターやフライヤーが多いイメージなので、Googleで「ポスター デザイン」という単語で検索した…ら…めっちゃ出てきた…。

googlesearch_poster

色んなデザインがあります…これ眺めているだけでも、十分参考になります。
見たいのは、それぞれの構成と効果。写真の配置はもちろんのこと、上に重ねている文字の色使いや、どんな装飾が施されているか(影付き、周りが光っている、枠線付き…など)。これが大事。

まぁ、そんな中から、分かりやすそうなデザインをチラリ。

赤い羽根共同募金

akaihane_akita

赤い羽根共同募金 あきた

写真メイン。あとは文字と羽根だけでシンプル。よい写真なので、それだけで温かみが伝わってきます。
羽根の散らせ方が独特な以外は、文字は白背景にそのままポンと置いているだけだし、シンプルながらに色や配置にこだわっているかとは思いますが、再現しやすそうなデザインです。

一風堂

ippudo-poster

一風堂

有名ラーメン店一風堂。じゅるり。
ラーメンの写真は切り抜かれていますが、どーんと使われています。
背景を赤でベッタリ塗ってあるので、文字や写真が分かりやすくなっています。更にラーメンと文字は、背景から浮き上がって見えるように影が付けられていたり。文字の色もインパクトがあったり。
写真を見せながら文字も見せるデザイン。

大阪市 人権ポスター

osaka-jinkenposter

大阪市

これもシンプル。写真が語るカンジ。
写真素材には、文字などを入れやすいように、背景に余白が多めにとられているものがあります。
これなんかそうですね。Photoshopなどの画像加工ソフトがあれば、背景をわざとぼかしたり薄くしたりして、文字を乗せる範囲を作ることもできます。
こんな写真だと文字が乗せやすく、また文字を乗せるだけで綺麗なポスターになります。

YOSAKOIソーラン祭り

yosakoisoranmatsuri

YOSAKOIソーラン祭り 公式ホームページ

にぎやかな写真をどう前面に出すか。そして必要な情報をどう入れるか。非常に難しいと思うんですけど、これは良く出来てるなー!と思ったわけです。
いろんな写真を組み合わせながら、画面いっぱいに使う。そして白色で文字を入れる。
この文字は、これだけの太さと大きさがあるからこそ、写真に負けずはっきり見えるのでは…と思います。
時には思い切ってどーんといくことも大事だな。
よさこいソーラン祭りのホームページも、祭!活気!って感じで素敵なデザインだと思いました。

個人の感想がメインになった感がありますが、こういうのを参考にやっていきたいなぁと。
と、他にもう1つ参考にしたいものがありますので、そちらもご紹介。

写真をメインに使ったアプリ

ポスターだけでも十分ですが、写真をうまく使ったスマホアプリがあるので、それも紹介します。

Flipboard

IMG_1283

その日のニュースやツイート、facebookの投稿などをピックアップして表示してくれるアプリ。ツイッター、facebookとの連携はもちろんのこと、表示するニュースのカテゴリを選んで登録しておけます。写真メインでニュースが表示されるので、分かりやすいというか、オシャレに見えるというか。

IMG_1288

ピックアップというコンテンツでは、スタッフが厳選した美しい写真が見れたりします。
写真もオシャレながら、文字の配置などもオシャレです。
これもよく見ると、文字には影がついていて、写真に埋もれないようにしています。

IMG_1285

写真と文字が分けられている部分もあったり。白い部分に載せている記号など、細めの線のものが使われています。こうやって線の主張をちょっと抑え、スッキリさせることで、写真の邪魔にならないというか…写真を活かすデザインになるんだなぁ。

IMG_1287

これは、写真が上手く撮れている、というわけではないと思うのですが、大きく見せて、そこに文字を乗せることで一枚のページとして上手く出来ています。下部に黒色グラデーションを重ねて、写真自体がフェードアウトしていくような効果をつけているところも素敵。
プロじゃない人が撮った写真でも、こういった装飾次第で綺麗に見えますね。

IMG_1289

これはプロが撮った写真でしょうか…とても美味しそう。
料理の写真は、暖色系でアップで撮ったものが美味しそうに見える…と思っているのですが、これはまさしくそう。オレンジ系でまとめられた写真に、白の文字がよく映えます。

FlipboardはiPhone、Android、Windowsでも使えるみたいです。無料。デザイン系のコンテンツも充実していますので、綺麗なインターフェイスで写真やニュースを楽しみたい人にはオススメです( ´∀`)♪

旨い店が分かるグルメアプリ【テリヤキ】

IMG_1281

ホリエモンプロデュースのグルメアプリ、らしい。iPhoneでもAndroidでも無料でダウンロードできますが、ガッツリ使うには有料会員登録をしなければいけません。

これは写真メインで飲食店を紹介してくれるアプリです。なんでもかんでも紹介してくれるわけではなく、お店を知ってる人々が、本当に美味しいお店だけを紹介してくれるらしいです。ちょっと使ってみたんですが、関西圏在住の私にとっては、無料の範囲内ではあまり店がヒットしないような…?東京が多そう。
まぁしかし、皆さんがスマホなどで撮影された写真がどーんと効果的に使われているなぁと思ったアプリです。
これはトップページですが、料理写真がメインで、黒のグラデーションの上に文字を乗せていますね。
黒は画面をグッと引き締める色であり、さりげに透かすことで、折角の料理写真を隠してしまわないところも良いですねぇ。上に文字が乗ってるので、写真が何の写真かもよく分かるし。

IMG_1282

個々のお店紹介のページでも、写真がどーんと。facebookやツイッターのカバー写真を彷彿とさせます。
おっ…おいしそう…!
トップページとは違い、写真を一枚ドンッと乗せて、その下に別途説明を書いている形だと、説明文は読みやすいですし、大きく使われた写真はやっぱりインパクトがあるなぁ…。
説明文の背景も、写真を邪魔しないように淡い色合いが使われているのも、写真がよく見える秘訣なのやもしらん…。

以上を見て、写真を効果的に扱うためのデザインのポイントをまとめて実践していこうと思います。

写真を使ったデザインのポイント

背景はベタ塗り、淡い色の方が馴染みやすいかも

29_letter-on-photo_07

文字と写真を分けて使う時、写真が映える背景は、やっぱり単色での塗りつぶしではないかと。わずかなグラデーションとかでもいいと思いますが、ベタッと塗るの…簡単だよー。
ちょっと淡めの色で塗りつぶすと、どんな写真にも割となじみやすくなります。そして、写真が少し浮き上がって見えるという効果もあります。
上の例でも、左の水色背景のものが一番馴染みがいいかなぁと思ったりします。真ん中の青だとちょっとキツイような。右の写真背景だと、写真の境界線がよく分かりませんしね…。
写真を大きく使う場合は、背景はあまり装飾しない方がいいかもです。
色に関しては、薄い色が絶対いい!というわけではなく、写真によって変わると思いますが、まぁ、無難で使いやすいのは薄い色じゃないかと。

文字を乗せる時は、どーんとorさりげない装飾を

29_letter-on-photo_11_03

伝えたい言葉があるなら、どーんと配置したらいいんじゃないでしょうか。
インパクトもありますし、写真を気にして中途半端になるよりは、どーんとした方がいいかも。
写真に文字がなじんでしまって見にくい時は、影をつけたり、周りをぼかしたり、枠線を引くなどの装飾をするととハッキリしてきます。あんまりやりすぎないのがポイント。
最近は、影をつけるパターンをよく見るような。個人的な感想ですが。

29_letter-on-photo_15

左は、文字にIllustratorの「効果→スタイライズ→ドロップシャドウ」を影の色はグレーで、真ん中は「効果→スタイライズ→光彩(外側)」を赤色でかけています。この写真だと、この2つの効果はさりげなく馴染んで良いかもですね。
右は、文字の周りにグレーの線をひいてみたんですが、左の2つに比べたら、なんだかちょっと野暮ったいカンジかなぁ…。使い所はあるんですけどね。私は、枠線は、こういう風にどーんと文字を乗せる時ではなく、小さくちょこんと文字を乗せる時によく使うかも。

そして、ミラクルが1つ。

29_letter-on-photo_19

これは何の装飾もしておらず、写真の上に白文字を乗せただけです。
「Man in the mirror」は何の問題もなく見やすいと思うのですが、その下の「Micheal Jackson」は、白い文字に背景の白い部分が少しかかって、「Man in the mirror」よりはちょっと見にくいかと。でも、マイケルジャクソン、と普通に頭の中に入ってきます。
これなんですが、人間は前後の文字、全体の並びで「何て書いてあるか」を認識することがあるそうで…なので文字列の中の何文字かがちょっと見にくくても、自然に「こう書かれているな」と想像して読んでしまうわけです。
もちろん、単語丸々や重要な漢字などが全然見えなかったらダメですが、ある程度馴染みのあるフレーズなどは、ちょっと文字が見にくくても意外に読めるかも。
荒技かもですが、装飾を使いたくない時などは、これに頼っても良いかもしれません。

この例もそうなのですが、写真に文字を乗せる時、文字は白色が多いイメージがあります…。まぁ無難なのかも…。

透明やグラデーションを使う

29_letter-on-photo_23

透明やグラデーションにしなくてもいいんですが、せっかくの写真なので、写真の良さを活かすためにも、さりげないグラデーションや透過したボックスなどを置いて、その上に文字を重ねたりしたいものです。
写真も隠れませんし、透過は何だかオシャレになるんじゃないかなぁ…と思ったり。
前回の記事でも、透明グラデーションは使いましたが、結構使いやすくて綺麗な仕上がりになるので、素人っぽさは脱却できます多分。
イラレでもフォトショでもパワポでもお手軽に出来る効果です。

写真の色合いを統一する

29_letter-on-photo_27

Photoshopなどの画像加工ソフトをお持ちだったら、写真の色合いを統一してしまうのも1つ。
LINEなどのアプリや、パワポなどでも写真の色合いを簡単に変更できるようになりましたね。
色合いを統一すると、文字も乗せやすくなります。
ただ、元の色と違った色合いになるので、元の色を伝えたい時には不向きです。
イメージ画像などを作る時に、割とよく使われているんじゃないかなぁ。

写真の良い部分を大きく使う

29_letter-on-photo_31

これは私がスマホで撮影した写真を、そのままなーんも加工せずに使っています。
これも時と場合によるんですが…写真のメインとなるものが大きく配置されている方がよく見えるんですよね…特に食べ物。右のほうが美味しそうに見えませんか?
ただ、この「チキン丼プレート」にはスープもドリンクもついていますので、それらも入れたい!という時は例外なのですが…。でもなんか美味しそうに見えるのは、丼が大きい右の写真かなぁ。
実際メニューなどで、右の写真のようにメインを大きく配置する時は、どこかに「スープ・ドリンク付き」など明記して、スープやドリンクはお客さんの想像に任せる、というのもアリです。
写真と文章からの想像の相乗効果で、さらに「美味しそう」と思わせることも出来るかと思うんですけどねぇ…ただ、実物が見たいという方もいますし、想像よりもショボかったとか言われちゃうと悲しいので、臨機応変なのかなぁ。

以上、私が思いついた簡単にできるものばっかりをピックアップしました。まだありそうな気もするけど。
次はこれを使って、パワポでPOPを作っていこうかなと思っています。
まぁ、それも簡単です。

それでは!Have a nice design!!