よくWebやアプリで見かける、ぼかし背景にテキストを乗せる手法。

なんとなくオシャレで、文字の可読性もありちょっとした気のきいた手法なのかもしれません。
しかし、なぜ写真をぼかすだけで可読性がよくなるのか言葉で説明するのは難しいです。

「ぼかしフィルター」にはあるルールが存在しているので、そのロジックを知ると説明がつきます。

右と左、どちらの文字が読みやすい？

さて、この問いに左と答える人はいないと思います。右ですよね。
ではなぜ、右なんでしょう？
簡単に言ってしまうと背景色が一色だからです。もっと細かいことを言うと「読ませたいものの周辺で多くの情報を与えて邪魔している左は見ずらい」とも言えます。
でもあえて今は、一色だからということを答えとしておきます。

画像をぼかすロジックを知ればわかる

そもそも私たちがPhotoshopやSketchなどのグラフィックアプリケーションに実装されている「ブラー（ぼかし）フィルター」ってどういう原理で画像処理されているのかなんて、普通デザイナーが考えることはないと思いますが、原理は簡単なので紹介します。

つまり中心のピクセル色と、周辺のピクセルを足してその数で割った色を中心に戻すだけです。
この図はたった1ピクセルにおける画像の処理です、例えば100×100（ピクセル）の画像だと、この作業が10,000回行なわれることで、画像全体がボケる、これがブラーフィルターの原理です。

深くぼかす=隣接のピクセルを増やす

では「深くぼかす」という意味は何となくイメージがつきやすいのではないでしょうか？
「あー知ってる！Photoshopのぼかし（ガウス）の半径スライダーで多く設定すると、深くぼけるよね？」とか。
そうです、ぼかし量を多くすれば見た目にもわかりやすく、深くぼけてくれます。
では「深くぼかす」ためには先ほどのピクセル操作をどうしたらよいのでしょう？
このようなイメージだと考えてください。

これだけのピクセル色の平均色を取ります。

上記の原理を実際、JavaScriptを使えば、HTML5 canvasでピクセル操作が可能なので、画像をぼかすことができます。
このデモは先ほど説明したピクセル操作を実際にプログラミングしてみました。画像下のスライドを動かしてぼかし半径を変更してみてください。

どうでしょう？ぼかし半径が広がればそれだけ処理する量も多くなり、時間もかかりますね。

つまりブラーは1色塗りに近くなる

ここまで説明をして、気づいた方もいるのではないでしょうか？
つまり「強くぼかす」ということは、各ピクセルの色がだんだん平均化されること。

冒頭でお話しした通り、背景が一色に近づくことになります。
一色に近づくと、多くの色情報で邪魔されないので可読性がよくなる、ということです。
それに対し、背景が写真だと複雑な色が絡み合うので、テキストの置く場所によっては可読性が非常に悪くなります。

ぼかし背景に使う写真の選び方

ただし、なんでもぼかせばいいというわけではありません。
ぼかした背景色とテキスト色の差をつける必要があるので、もしも背景が明るい写真の場合だとブラーをかけても、ただ明るく白っぽい背景になる可能性があります。
そのため乗せる文字などは少々暗い（明度の低い）色を使う必要があるかもしれません。

逆に、テーマカラーのように文字の色が決まっている場合がありますので、それとは違う写真選びをすると良いです。
例えば白っぽい文字が基調だった場合、背景の写真は、白い雲の少ない青空に多少の緑がかかっている程度の写真を選びブラーをかけると、文字も映えて効果的になりそうです。（あくまで一例です）

まとめ

私の考えでいうと、ぼかす前提の写真選びは本記事で触れた通りロジカルに考えることができそうですが、どれくらい深くぼかすかは個々のセンスに左右されるかもしれません。

完全に一色にならないけど一色に近づくぼかし効果。
写真の雰囲気を残しつつ、限りなく一色ベタ塗りに近い効果、だからぼかし背景は使われやすいと考えられます。