画像の背後にテキスト
被写体の後ろに大胆な文字を配置して、目を引く奥行きのある見た目に。サムネイル、ポスター、SNS投稿にぴったりです
被写体がはっきりした写真をアップロード
Works best with a person or a distinct object in the foreground
画像の後ろに文字を入れる方法
ページを開くと、デモ写真がすでに読み込まれています(農家の友人の帽子の後ろに "it ain't much" がすっきり収まった写真です)。何も触る前に、エフェクトの仕上がりを正確に確認できます。準備ができたら、自分の写真に差し替えましょう:
- 「写真をアップロード」をクリックして、被写体がはっきりした画像を選びます。人物がいちばんきれいに仕上がりますが、犬、車、コーヒーカップなど、背景から浮き立つものならなんでもOKです。
- テキストを入力。2行目が必要ならEnterを押します。テキストは自動で被写体の後ろに回り込みます。マスクもレイヤーパネルも、手作業の切り抜きも不要です。
- ドラッグで配置はプレビュー上で直接できます。キャンバスをつかみ、いちばん読みやすい位置へテキストを動かしましょう。たいていは被写体が1〜2文字に重なる位置です。その重なりこそが奥行きを生みます。
- スタイルを整える。フォントを選び、サイズや文字間隔を調整し、縁取りを付け、回転させ、不透明度を下げ、気分次第で疑似3Dの傾きも付けられます。
- PNGをダウンロード。書き出しはプレビューのサイズではなく、写真の元の解像度です。4000pxの写真なら4000pxの仕上がりになります。
裏側で実際に起きていること
写真を読み込むと、小さなAIのセグメンテーションモデルがブラウザ上で直接動き、どのピクセルが被写体でどれが背景かを判定します。次にツールが画像を3つのレイヤーで組み直します。いちばん下に元の写真、真ん中にテキスト、いちばん上に切り抜いた被写体を重ねるのです。目はこの重なりを奥行きとして捉えるので、テキストが最初からその場にあったように見えます。
すべてデバイス上で処理されるので、アップロードの待ち行列もサーバーの処理待ちもありません。最初の写真だけモデルのダウンロードに数秒かかりますが、その後はほぼ一瞬です。編集中に写真がブラウザの外に出ることはないので、知らないサーバーに送りたくない写真にも安心して使えます。
このエフェクトを見かける場所
正直、どこでも見かけます。YouTubeのサムネイルでは常に使われていて、巨大な "EXPOSED" や "I TRIED IT" の前にクリエイターの頭が飛び出すデザインは、もはやプラットフォームの定番スタイルです。Spotify風の歌詞ポスターも、アルバムジャケットも使っています。Instagramのフォトグラファーは誕生日投稿、旅の振り返り、婚約発表に使います。スポーツのページは選手の背番号を選手の後ろに置き、配信者はハンドル名をアバターの後ろに置いています。
効果がある理由はシンプルです。重なりは、脳にとって最も強力な奥行きの手がかりのひとつだからです。人物の肩が文字の一部を隠すと、テキストは上に貼られた平面のキャプションではなく、場面の一部になります。平面のテキストは被写体と注目を奪い合いますが、被写体の後ろのテキストは被写体を引き立てます。同じ写真、同じ言葉でも、印象がまったく違うのです。
切り抜きやすい写真の選び方
セグメンテーションモデルは優秀ですが、写真しだいで作業が楽にも難しくもなります。被写体が背景からはっきり分かれている写真(色が違う、明るさが十分、少し距離がある)なら、輪郭のくっきりした切り抜きになります。暗いジャケットが暗い戸口に溶け込んでいるような写真だと、重なり部分の輪郭がぼんやりと柔らかくなります。
いつも効果があるポイント:
- 被写体と背景のコントラスト。木々の前なら、緑の服の人より明るいシャツの人のほうがきれいに仕上がります。
- はっきりした被写体をひとつ。集合写真でも使えますが、一人の人物かひとつの物が画面の主役になっていると最も効果的です。
- 上や横に少し余白を。テキストを置く場所が必要です。顔ぎりぎりでトリミングした写真では、置く場所がありません。
- 被写体にピントを合わせる。背景が自然にぼけている写真なら、さらにいい仕上がりに。テキストにも重なり合った写真らしい雰囲気が出ます。
明るい場所でスマホで撮ったポートレートがいちばん向いています。このツールに使われる写真の大半がそれで、モデルも最も得意になるよう学習しています。
文字の選び方
半分隠れるテキストは30〜40%が見えなくても読める必要があるので、太いフォントが有利です。Antonがデフォルトなのには理由があります。太くて縦長で、肩がまるごと前にあってもはっきり読めるからです。Bebas NeueやArchivo Blackも近い仲間です。Impactはミームの定番。もう少しやわらかくしたいなら、PacificoやCaveatで手書き風に。線が細いぶん、サイズを大きめにしましょう。
厳選した12種類の見出し用フォントがすぐ選べるほか、検索ボックスの奥には必要に応じて読み込む約100種類のGoogle Fontsがあります。実用的なコツ:位置を細かく調整する前にフォントを決めましょう。細いフォントから幅の広いフォントに替えると、すべてがずれてしまいます。
色はたいていの写真で白が無難です。でも、空、シャツ、ネオンサインなど、写真の中にある色を拾うと、生成された感じではなくデザインされた仕上がりになります。カラーピッカーで背景の何かを選び、不透明度を85〜90%に下げると、テキストが写真の光になじみます。
説得力を出す小さな調整
アウトラインは、文字が写真の明るい部分と暗い部分の両方にかかるときに役立ちます。数ピクセルの暗い縁取りがあれば、明るい空の上でも文字が読みやすくなります。背景が均一ならゼロにしましょう。
回転と 3D 傾きはやりすぎになりがちです。数度の回転なら勢いが出ますが、45 度ではごちゃごちゃします。傾きスライダーは文字の面をゆがめて、シーンの奥へ遠ざかるように見せます。控えめな値(10〜20)にすると、驚くほど写真の遠近感になじみます。
反転オプションは仕組みをまるごと逆にします。被写体が文字の前に来るのではなく背景が前に来て、文字が被写体に貼りついたように見えます。正解なのは 10 回に 1 回くらいかもしれませんが、ハマったときは最高です。自動切り抜きがシーンの「違う」半分を選んでしまったときに試してみてください。
投稿前に透かしを入れよう
スタイル設定の下に透かし専用の入力欄があります。アカウント名やドメインを入力し、プリセット位置(四隅、端、中央)で配置するか、X/Y スライダーで正確な位置にドラッグしましょう。ピクセル単位のサイズ、色、背景に関係なく読めるようにするコントラスト縁取りも設定できます。透かしはダウンロードした PNG 自体に焼き込まれるので、画像が転載されても(いい画像は必ず転載されます)あなたの名前も一緒に広がります。
ファイルだけでなくリンクで共有
共有ボタンを押すと、写真、テキスト、スタイル、透かし設定を含む構成全体のリンクが作られます。開いた人はあなたと同じ設定が読み込まれたこのページに移動し、そのまま調整やダウンロードができます。投稿前に意見をもらいたいときや、チームのメンバーにテンプレートを渡したいときに便利です。スタイルを一度設定してリンクを共有し、写真だけ差し替えてもらいましょう。
よくある質問
Photoshop は必要ですか?
いいえ。Photoshop で被写体選択、レイヤーマスク、テキストレイヤーを使ってやる作業を、ブラウザで 1 ステップで行えます。細かい修正では Photoshop のほうが自由度は高いですが、定番の「被写体の後ろに文字」効果なら仕上がりに大きな差はなく、手間が 10 分ほど違うだけです。
無料ですか?
アカウントなしで構成を作り、すべてプレビューできます。フル解像度の PNG のダウンロードにはログインが必要で、現在のキャンペーンによって期間限定で無料か、サブスクリプションに含まれます。ツール上部のバッジで、今どちらが適用されるかを確認できます。
どのファイル形式をアップロードできますか?
JPG、PNG、WebP、GIF、AVIF、BMP、そして iPhone から直接の HEIC/HEIF に対応しています。書き出しは常に元の写真の解像度の PNG です。
切り抜きで被写体の一部が欠けたのはなぜ?
たいていはコントラストが低いためです。被写体の輪郭が背景に溶け込んでいるか、照明がとても暗い可能性があります。被写体がもっと目立つ写真を試すか、反転オプションを使ってみてください。難しい画像でもきれいに分かれることがあります。人がたくさん重なった雑然としたシーンが最も難しいケースです。
複数行書けますか?
はい。テキストボックスで Enter を押してください。行はまとめて中央揃えになり、サイズスライダーで一緒に拡大縮小されます。長い 1 行より短い 2 行のほうが効果的なことが多いです。行ごとに被写体と重なるチャンスがあるからです。
スマホでも使えますか?
はい。セグメンテーションは最新のスマホでも快適に動き、親指で文字をドラッグするのはマウスより正直自然です。ダウンロードしたファイルは、ほかの画像と同じようにカメラロールやファイルアプリに保存されます。