実はこのページはMTOSをカスタマイズしたCMSで作られているのですが、すぐ上のタイトル画像、記事のタイトル文字列から自動的に画像を吐き出す仕組みになっています。
これはPHPのクラスモジュールのひとつである「GDライブラリ」という機能を用いることで可能になるのですが、もしこれで美しいフォントの書き出しができれば、例えばこのページのようにブログの記事タイトルをリッチに表現したり、検索キーワードに応じてメインビジュアルのキャッチコピーをフレキシブルに変える（=LPOへの利用）など、さまざまな応用が効きますので、大きな可能性が拡がりますね。
しかし、普通に書き出した結果はこのようになってしまいます。
| No. | 出力結果 | 解説 |
|---|---|---|
| 1 |
|
普通にGDライブラリで描きだした画像の出力結果。 |
特に縦横の直線ライン部分が、アンチエイリアスがうまくかからずに大雑把な表現になってしまっています。
非常に見苦しく、これはデザインの一部としては使えませんね。
普通であれば、ここで「なるほど、これは使えない！」と諦めるところですが、なんとか美しく書き出す方法はないものかと試行錯誤した結果、ひとつの方法を思いつきました。
プログラムの処理として、小さな文字をいきなり書き出すのではなく、一度大きく書き出してから、それを縮小する、という工程を踏むのです。
ということで、横幅800pxの画像に大きく書き出した文字列を、縮小した結果が下のものになります。
| No. | 出力結果 | 解説 |
|---|---|---|
| 2 |
|
テキスト画像の品質を上げたパターン。 |
どうでしょうか？特に「時計」という部分の精細感がかなり向上しました。
しかし、やはり縦横のラインの出方に若干のクセが残ります。ぼやけ過ぎているところと、クッキリし過ぎているところが混在している感じです。欲をいえばですが。
そこで、かなり狂気的な発想だと思いますが、縦横のラインに強制的にアンチエイリアスをかけるために、文字列を水平ではなく斜めに書き出し、そこから逆の方向に回転させ、水平の状態にしてから部分的に切り出し、それを更に縮小する、という工程を踏んでみました。
| No. | 出力結果 | 解説 |
|---|---|---|
| 3 |
|
更に精細感を上げたパターン。 |
これは文句のないクオリティだと言えるのではないでしょうか？
調子にのって、これに影を付けてみました。
| No. | 出力結果 | 解説 |
|---|---|---|
| 4 |
|
影をつけることによって立体感を演出。よりリッチな表現になります。 |
これならデザインの一部として、充分に通用するクオリティだと言えます。
かくして、このようなあきれるような処理を重ねて、このページのタイトル画像は自動生成されているわけですが、もちろんこんな動作を何度も繰り返すのはサーバーに負担がかかるので、一度つくった画像はキャッシュとして残し、同じ文言を要求されたときには在庫から引っ張ってくる、という処理にしています。
ちなみに、下記に用意したフォームで、フォントや色、表示するテキスト内容までを指定して、上記４パターンの文字列が変化する様をご確認いただけます。
前の記事はありません
次の記事はありません
サイトロジックでは、コンテンツ制作に関わるさまざまなノウハウを、惜しみなく公開しています。
コンテンツ制作のご参考に、ぜひお役立てください。
全21件の記事中最新の10件を表示 >> 続きを見る