#西東のデザイン分解【vol.7】　しゃしんともじ

ハイキュー!!と呪術廻戦のアニメが最近の楽しみな，西東です．

この note は，Twitter にて発信中の
#西東のデザイン分解 をまとめるシリーズです．

vol.7 の今回は 写真と文字の話 です．
写真を単体でなく文字と一緒にあつかう機会もしばしばありますよね．

今回は，写真に関わる文字について，

・文字入れ（コントラスト）
・キャプション

をまとめます．

文字入れ（コントラスト）

写真に文字を入れる場合は，コントラストがとくに重要です．
もともと，写真と文字の内容は相互に補完する目的があるので親和性が求められると同時に，視認性を高める必要があります．

このとき，写真と無彩色の文字の相性は抜群です．写真の色彩は連続的な変化や密集具合などによって複雑になりやすいため，文字の色を無彩色の単色にするとバランスが整います．また，コントラストが強まる補色を用いる方法もあります．（補色については後日書きます．）

もちろん配色以外の方法もあります．たとえば，写真と文字の色に大きな対比が無くともうっすらとシャドウをかけて文字の存在感を消さない方法や文字に背景のシェイプ（帯・座布団）を敷いて存在感を高める方法などが挙げられます．この他にも，背景の輝度を下げる，背景をぼかす，ラインを併用するなど場合によって様々な手法が用いられます．

※今回はコントラストにフォーカスしましたが，構図やバランスなどもベースとなる写真に合わせて同時に意識するポイントとなります！

（参考：画像の上に文字を載せる5つのテクニック～Webデザインのタイポグラフィ２｜B!ND CAMP
デザイナーにおすすめ！写真に文字をうまく入れる、6個の秘訣テクニック完全ガイド｜PHOTOSHOP VIP ）

キャプション

キャプションとは，表・図・写真などに付ける短い標題や解説文を指します．一般的には本文より小さくし，はみ出しのないように組みます．かなり小さい要素ですが，これもデザインの重要な構成要素です．キャプションひとつとっても，配置・書体・行長・行間など考慮する点はたくさんあります．

表記は「左揃えで写真の真下に差し込む」手法が基本ですが，その他にも「写真に数字を入れ後から補足する」手法や「写真には手を加えず写真と同じレイアウトの補足を表記する」手法など様々なレイアウトが考えられます．

（参考：キャプション - 印刷用語集｜一般社団法人 日本印刷産業連合会
　　　　増補改訂版 レイアウト、基本の「き」｜佐藤直樹（アジール））

写真と文字の親和性は
目的によって変化する

視認性を放棄せず、写真の
持ち味を生かすためには
コントラストが重要 pic.twitter.com/8ofeXQDLzQ

— 西東 (@sa__i__to) August 2, 2020

たかがキャプション
されどキャプション

こんなに小さな要素も
デザインの重要なピース

配置、書体、行長、行間など
必要な要素は山ほどある pic.twitter.com/KhXpBm1Jm1

— 西東 (@sa__i__to) August 3, 2020

いかがでしたでしょうか．

写真と文字の併用にも多くの可能性がうかがえます．重要なのは，様々な手法を知り，目的に寄り添える使い分けと組み合わせを身に着けることだと考えています．

ご指摘ご意見ご感想お待ちしております．
Twitter もよろしければお願いします．

それではまた次回．
お読みいただきありがとうございます．

西東