calloutって？ 図の一部に線を引いて、
機能などを説明するテキスト #デザイナーの英語帳

callout は、イラストや技術図面などの一部に線を引いて、機能などを説明するテキストのことで、ウェブ以前の紙ベースのデザインにまでさかのぼる用語です。

Source: menu - Difference between "callout" and "popup" (terminology) - User Experience Stack Exchange

グラフィックデザインや、ウェブデザインでも、デザインの指示書をつくったり、フィードバックをまとめるときに、線を引いて説明を書き加えることがあると思いますが、それも callout です。

その形状はさまざまで、矢印がついていたり、吹き出しの形をしていることもあります。（例: Google Slides のスクリーンショット）

吹き出しがなく、単純に説明を目立たせるためのボックスの場合もあります。（例: Notion のスクリーンショット）

例文

Here's the presentation deck. I've included callouts on the new feature page.

こちらがプレゼンテーション資料です。新機能のページに、矢印を引いて説明を加えておきました。（コールアウトを追加しておきました。）

コールアウトを一語でそのまま訳す言葉がうまく浮かばなかったのですが、みなさんなら日本語でどのように言いますか？単に「説明」や、文脈によっては「補足説明」でしょうか。

線や吹き出しなどの視覚的なものがなくても、人に注意を向けるための言葉や、指摘を指すこともあります。call out には大声で呼ぶ、という意味もあるのですが、注意を引くというニュアンスがあるのではないかと思っています。

例えばプロダクトの改善点や、見逃している点を指摘してもらったときに「Good callout（良い指摘）」と返事をすることがあります。

Ah, that’s a good callout.

あぁっ、それは良い指摘ですね。


動詞としても使えます。

Minor thing to call out, the text color is not pure black, but #333333.

細かな指摘ですが、テキスト色は真っ黒ではなく、#333333 です。

We'll need to call out which icon should change.

どのアイコンを変更すべきか、線を引いて分かりやすくする必要があります。（コールアウトを追加する必要があります。）

call out の動詞は、コールアウトの矢印や吹き出しで注意を引く、コールアウトを追加する、という動作を表すこともできます。

参考記事

・Callout | Definition of Callout at Dictionary.com
・menu - Difference between "callout" and "popup" (terminology) - User Experience Stack Exchange
・Callout - Wikipedia
・「callout（コールアウト）」とは？ | グラフィックデザイナーのための英語講座

----------✂︎----------

注釈：私はアメリカのサンフランシスコに住んでいるデザイナーです。同じ英語でも使う言葉や言い回しは国や地域によっても違う可能性があります。

スペルや文法ミスがあったら教えてください。また、「私はこんな時に使ってます」というのもあったらぜひコメント欄や、Twitterでハッシュタグ #デザイナーの英語帳 と共に教えてください。私も英語を勉強中の身ですので、みなさんと一緒にデザイナーが使うボキャブラリーを増やしていけたら嬉しいです 🙌