見出し画像

bleed 断ち切る、裁ち落とす #デザイナーの英語帳

今回紹介する単語は bleed です。出血するという意味の他に、デザイナーにとって馴染みのある「断ち切る」「裁ち落とす」という意味もあります。

名詞

まず、bleed (名詞)は、印刷データにおける「裁ち落とし」「塗り足し」エリアのことを指します。仕上がりサイズいっぱいまで色や写真を配置したいときに、裁断のズレによる白地が出ないようにするために、仕上がり線を越えて配置すること、また、そのはみ出た部分のことです。

画像6

印刷用語から来たこの言葉は、ウェブなどのデジタルデザインでも使用されています。例えば full-bleed は、余白のないレイアウトを指し、メインビジュアルが画面いっぱいに広がっているデザインを full-bleed heroや、full-bleed image と呼んだりします。

画像2

参考: Full-bleed images – Squarespace Help

動詞

bleed (動詞)は「断ち切る」「裁ち落とす」となり、写真やイラストなどの画像を、画面の端などでカットする行為を表せます。名詞同様、印刷に限らず使われています。
画像をすべて表示させずに配置することで、物体が画面よりも広がっているように見え、動きを感じさせることができます。

例えば、こんなレイアウトです。

画像5

Luxury Botanical Hand Wash - Soap Shop

例文

Looks great! The one thing I would suggest is to bleed the image off the right edge so that the text doesn’t get cut off.

良いね!ひとつ提案したいのは、テキストが途切れないように、画像を右端で切ることです。

bleed は off とセットで使われることが多いです。offには離れる、分離するという意味があり、offの後には裁ち落としたい場所をおきます。この例文であれば、bleed the image (画像を切って)off the right edge(右端から離す)というイメージです。

画像4

bleed the image off the right edge のイメージ https://www.cloverly.com/


If we're going to bleed the logo off the top, let's make sure this doesn't happen when you overscroll.

ロゴを上部で裁ち落とすなら、端までスクロールしたときにこのようなことが起こらないことを確認しよう。

画像4

やりとりする時に、すべてを言葉で説明するのではなく、画像を一緒に添付して説明することがあります。この例文で指している this が上記の画像です。
シールやワッペン的な表現で画像の上部をカットすることがあります。画面の一番上に、余白なく配置されていれば良いのですが、スクロールしたときにカットした部分が見えてしまうことがあるので、実装上これを避けましょうーというやりとりです。

ちなみに  overscroll は、上下のスクロール領域の境界に達したときに、それをユーザーに視覚的に伝えるエフェクトのことですが、動詞としても使われています。


I bled the image off the page a bit.
画像を少し裁ち切りました。

過去形は bled です。

ところで、ウェブデザインの場合は、断ち切ると言っても、実装の仕方によっては画像をトリミングする訳ではなく、位置指定でコントロールしているので、日本語訳としては「(画面を)はみ出す」とできる場合もあるのかな?と思ったりしました。

全体的に私の日本語訳がぎこちないので、参考程度に見てもらった方が良いかもしれません。印刷用語から来ていることを念頭に置いておくと、イメージが掴みやすいと思います。


自動翻訳にかけると、bleedが「出血する」と訳されてしまうことが多々あります 😇 専門的な話かつ、単語が複数の意味を持っているときに、こういう誤訳は起こり得るので、まだまだ自動翻訳にすべてを委ねるのは難しいなぁと感じます。逆に言えば、一度自動翻訳にかけてみて「あれ、なんか変だな」と感じた時は、原文の該当箇所を見てみると新たに単語を知ったり、学ぶきっかけになったりします。

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

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

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


最後まで読んでいただきありがとうございます! デザイナーの英語帳コンテンツについては、ニュースレターに移行しました。よければご購読ください→ https://eigo.substack.com/