Canvas Graphics & Layout Logic
週刊誌の「インパクト」を
Canvasで動的に構築する
週刊誌の表紙が持つ「強烈な視認性」は、何重にも重なった文字の縁取りや、計算された色のコントラストによって生まれます。本ツールがいかにしてブラウザ上でこの「スキャンダラスな質感」を再現しているか、その実装の裏側を公開します。
このツールの入力から出力まで
現行コードの確認日：
- 入力
- 写真と表紙に使う見出し・文字を入力します。
- 処理
- 写真と文字、図形をCanvasで重ね、週刊誌風の静止画へまとめます。
- 出力
- 出力は 800×1130px の JPEG（品質指定 0.9）です。
まず確認する点：文字と被写体の衝突を自動解決しません。強い見出しの表現が写真の内容と誤解を招かないかも、作成者が確認します。
仕上がりの例
写真に見出しや帯を加え、週刊誌の表紙風にした例です。
掲載画像はサイトにある既存の公開作例です。保存済みの資料では運営者の愛猫の写真を使用しています。今回の確認日が、この作例を実行した日を表すわけではありません。
保存済み検証記録の条件を見る
資料の種類は「ツールの出力画像を保存した記録」です。公開作例と保存済み記録で素材や色などが異なる場合があるため、下の数値は保存済み検証記録の条件として読んでください。
- 記録の入力画像
- 800×667px (JPEG)
- 記録の出力画像
- 800×1130px (JPEG)
| 画面の項目 | 記録の値 | 現行コードの初期値・範囲 |
|---|---|---|
| 記録で選択されていた項目 | カラー | — |
| 雑誌名 | 週刊 ネコノテ | 初期値 週刊 ネコノテ |
| 斜め見出し (左上) | 衝撃の二度寝！ | 初期値 衝撃の真実！ |
| 特大スクープ (縦書き・右側) | 特等席を独占 | 初期値 特大スクープ発覚 |
| サブ見出し (横書き・下部・改行可) | 日なたでの密会 おやつの時刻に目覚める | 初期値 謎の密会現場を 激写！ |
| ズーム | 100 | 初期値 100 ／ 範囲 50〜300 |
記録では「完成！表紙を飾る」から完成表示へ進んでいます。初期値と記録値を比べてから、効果を1項目ずつ変えると作用を確認しやすくなります。
資料ファイルの作成日は実行日として扱っていません。個別端末の処理速度や、ほかの写真に対する検出・加工の精度を測定した資料でもありません。
実装の確認箇所：src/pages/image/magazine/index.astro。以下のコード抜粋と出力条件は、この本番実装に基づいて説明します。
仕組みを読み進めるときは、Canvas APIと画像処理（画像寸法、drawImage、画素と透明度の扱い）、メモリ管理と画像処理（画素バッファ、縮小と容量予算）が参考になります。
1. 視認性を極める「多層袋文字」レンダリング
週刊誌のデザインにおいて、複雑な背景色に埋もれない「強い文字」を作るには、単一の縁取りでは不十分です。
本ツールでは、strokeText を異なる lineWidth で段階的に重ねて描画する手法を採用しています。これにより、外側に太い黒縁、内側に細いアクセントカラー、そして最前面にメインの白文字を配置するといった、複雑な「多重袋文字」を Canvas API の標準機能のみで実現しています。
パパラッチ風の明暗変換を1画素に適用する例です。128 を中心にコントラストを 1.3 倍にします。
function paparazziGray(r, g, b) {
const luma = r * 0.299 + g * 0.587 + b * 0.114;
return Math.max(0, Math.min(255, (luma - 128) * 1.3 + 128));
}
この実装のメリットは、CSSの text-shadow では表現が難しい「均一で多重な縁取り」を、どんなフォントサイズでもピクセル単位の精度で制御できる点にあります。
2. 互換性と表現力を両立する「ピクセル直接操作型フィルタ」
「パパラッチ風」のモノクロ効果を実現する際、ブラウザ標準の ctx.filter = 'grayscale()' を使うのが簡単ですが、一部のモバイルブラウザでは動作が不安定になったり、保存時にフィルタが適用されなかったりするリスクがあります。
本ツールでは getImageData を使用し、RGB値を直接取得して輝度計算を行うことで、Canvas の filter に依存しない色変換を実装しています。ブラウザ全体の動作保証とは異なります。さらに、単なるモノクロ化ではなく、コントラストを動的に補正することで「スキャンダル写真」のような荒々しい質感を演出しています。
3. モバイル端末を守る「動的ダウンサンプリング」
近年のスマートフォンのカメラ性能は非常に高く、数千万画素の画像をそのまま Canvas で処理しようとすると、メモリ不足でタブがリロードされる原因となります。
本ツールでは、画像読み込み時に長辺をチェックし、実装で定めた長辺 1500px 以下に収めるためのリサイズ処理を自動的に実行します。これにより、編集で扱う画素数を減らします。写真のデコード時や HEIC 変換時のメモリ不足まで防ぐものではありません。
出力の仕様と確認する点
出力は 800×1130px の JPEG（品質指定 0.9）です。写真は表紙内の写真領域に切り抜いて描き、ドラッグとズームで構図を変えます。写真の縦横比そのままの出力ではありません。
メインの横書きは、幅に収まるまで文字サイズを 2px ずつ小さくします（下限 10px）。縦書きも高さに応じて縮小しますが、長文では文字が小さくなるため短い見出しが向きます。
モノクロ処理は写真領域だけに適用し、文字や帯の色は維持します。表紙の文字・価格・バーコード風の装飾は画像表現であり、出版物の登録情報を生成するものではありません。