はみ出させる bleed

bleed の代表的な意味は「出血する」であるため、使う機会には縁がないように思えますが、実は印刷に携わるデザイナーにとっては馴染み深い言葉でもあります。

業務用の印刷では、写真や絵柄を紙面いっぱいまで印刷したい場合、仕上がり線より3ミリメートルほど外側にはみ出すようにデータを作成します。このはみ出した「裁ち落とし」の部分も bleed と呼ばれます。

紫色の部分が bleed にあたります

また、裁ち落としを利用して紙面いっぱいまで印刷することを full bleed print と言います。ウェブデザインでもその考え方が受け継がれており、余白を設けず、ビジュアルが画面いっぱいに広がるレイアウトを full bleed と呼びます。

full bleed の例。写真の左右に余白がなく、画面の幅いっぱいに広げられている - Source: Full-bleed images – Squarespace Help

例文

The product images on this page should be full-bleed so that users can see the details.
ユーザーが細かい部分を見られるように、このページの商品画像は画面いっぱいに見せた方がいいと思う。

For this landing page, we should use a full-bleed gradient background to create a sense of depth and texture.
ランディングページだけど、画面いっぱいのグラデーションの背景を使って奥行き感と質感を出そう。

動詞として使われるときは「端まではみ出させる」「裁ち落としまで伸ばす」といった意味になります。印刷だけでなく、ウェブデザインでも画像や背景を画面いっぱいまで広げる場面で使われます。

例えば bleed the image off the right edge のように off と組み合わせて「画像を右端からはみ出させる」のような意味で使われるのをよく見かけます。

Looks great! The one thing I would suggest is to bleed the image off the right edge so that the visual is more dynamic.
良いね！ビジュアルに動きを出すために画像を右端をはみ出させるのはどうだろう。

If we're going to bleed the logo off the top, let's make sure this doesn't happen when you overscroll.
ロゴを上端で切れるレイアウトにするなら、オーバースクロールしたときにこのような見え方にならないようにしよう。

I bled the image off the page edge.
画像をページの外側まではみ出すように配置しました。

---

TIPS

Overscroll を想定する

スクロール可能なコンテンツを端までスクロールした際に、さらにわずかに動く挙動を overscroll と呼びます。もともとは、スマートフォン向け OS のインターフェースで、それ以上その方向にコンテンツが存在しないことを伝えるために使われるようになり、現在ではさまざまなプラットフォームで見られるインタラクションになっています。

一方で、プロダクト内のコンテンツをデザインする立場からすると、この領域は意外と作り込みを忘れがちな部分でもあります。まるでコンテンツが bleed されたかのようになってしまうのです。

オーバースクロールしたときに起きたら悲しいこと

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

この例では、上部がカットされたロゴがウェブページに配置されていますが、ブラウザの端を超えてスクロールすると、余白が表示されてしまっています。

このような挙動は scroll bounce や bounce effect と呼ばれます。CSS の overscroll-behavior プロパティを使えば、オーバースクロール自体を無効にすることもできます。

ただし、プラットフォームの標準的な挙動を変えるほど重要でないのであれば、オーバースクロールが発生しても破綻しないデザインにしておく、という考え方もあるでしょう。