画像テキストエディター — 開発秘話

画像テキストエディターは、アップロードした画像にテキストレイヤーを追加・編集して書き出せるWebツールです。インストール不要でブラウザから使え、作業内容はサーバーに送信されません。

作った理由

画像にテキストを入れたいだけのとき、PhotoshopやGIMPなどの専用ソフトを開くのは大げさに感じることがあります。かといって、スマホのSNS投稿用の画像編集アプリはPC作業には向かない。

ブラウザでサクッと使えて、ある程度細かく設定できるツールが欲しいと思っていました。自分自身、アプリのApp Storeスクリーンショットや素材画像にテキストを入れる作業が頻繁にあり、「専用ソフトを開くほどではないが、テキストだけでは伝わらない画像を作りたい」という場面が多かったのが作ったきっかけです。

同じ目的でApp Store画像メーカーも作りましたが、あちらは「上部にキャッチコピーを配置する」という固定フォーマット向けです。こちらは画像の任意の場所にテキストを自由に配置したい用途に対応しています。

できること

テキストレイヤーを複数追加して、それぞれ独立して設定できます。

テキストの装飾設定

設定項目	内容
フォント	ゴシック・明朝・手書き・欧文合わせて20種類以上
フォントサイズ	8〜300pxの範囲でスライダー調整
文字色	カラーピッカーで任意の色
不透明度	0〜100%でスライダー調整
太字 / 斜体	ボタンで切り替え
テキスト揃え	左・中央・右
縁取り	幅0〜20px、縁取り色を個別設定
ドロップシャドウ	ON/OFFで切り替え、色・ぼかし・XYオフセットを個別設定
回転	−180〜180度でスライダー調整
位置	XY座標をスライダーまたはドラッグで調整

レイヤー操作

レイヤーの追加・削除
レイヤーの順序を上下に並べ替え（前面・背面の調整）
レイヤーを選択して個別に設定変更

書き出し

PNG形式（透明度保持）
JPG形式（品質95%）

レイヤーの仕組み

テキストはレイヤーとして管理しており、各レイヤーは独立したオブジェクトです。

{
  id: 1,
  text: '',
  font: "'Klee One', cursive",
  size: 100,
  color: '#000000',
  opacity: 100,
  bold: false,
  italic: false,
  align: 'center',
  stroke: 0,
  strokeColor: '#000000',
  shadow: false,
  // ... 位置・シャドウ設定など
  x: 50, // 画像全体に対するパーセント
  y: 50,
}

位置はピクセル値ではなくパーセント（0〜100%）で保持しています。画像サイズによらず同じ相対位置に配置できるため、プレビュー表示のスケールと実際の書き出しサイズで一致した結果が得られます。

描画は配列の順番通りにCanvasに重ねて描き、レイヤーリスト上の並べ替えが前面・背面に反映されます。

テキストの装飾設定

縁取りとドロップシャドウの組み合わせには実装上の工夫が必要でした。

Canvas APIでは shadowColor と strokeText を同時に使うと、縁取りにもシャドウが重なってしまいます。縁取り部分だけシャドウをオフにして描き、その後シャドウを再設定してから文字本体を描くという順序で対処しています。

// 縁取りを描くときはシャドウを一時的に無効化
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
ctx.strokeText(line, 0, ly);

// シャドウを再設定して文字本体を描く
ctx.shadowColor = l.shadowColor;
ctx.shadowBlur = l.shadowBlur;
ctx.fillText(line, 0, ly);

ドラッグで位置を調整できる

スライダーで位置を調整するだけでなく、Canvas上でテキストを直接ドラッグして移動できます。

クリックまたはタップした座標に近いレイヤーを検出して選択し、そのままドラッグすると位置が更新されます。タッチデバイスでも動くようにタッチイベントもマウスイベントに変換して処理しています。

選択中のレイヤーは点線の枠で囲まれて表示されるため、どのレイヤーを操作しているかが視覚的にわかります。

フォントのこだわり

フォント選択は日本語コンテンツを作ることを想定して選んでいます。

ゴシック系（印象：クリーン・モダン）

ヒラギノ角ゴ、游ゴシック、Noto Sans JP、BIZ UDPゴシック、Zen角ゴシック New、M PLUS 丸ゴシック

明朝系（印象：落ち着き・格調）

ヒラギノ明朝、游明朝、Noto Serif JP、BIZ UDP明朝、しっぽり明朝

手書き・装飾（印象：やわらかさ・個性）

Klee One（手書き風）、Rampart One（アウトライン装飾）

欧文

Playfair Display、Lora、Merriweather、Georgia、Arial、Impactなど

Klee Oneをデフォルトにしているのは、日本語の画像テキストとしてよく使われるやわらかめの書体で、使いやすいと感じているからです。

フォントの変更時は document.fonts.load() でフォントの読み込み完了を待ってから再描画するようにしています。これをしないと、まだ読み込まれていないフォントがフォールバックのまま描画されてしまいます。

App Storeのスクリーンショットとの違い

App Store画像メーカーとの使い分けを整理すると以下の通りです。

	App Store画像メーカー	画像テキストエディター
テキストの位置	上部固定	自由配置
テキスト数	1つ（画像ごと）	複数レイヤー
出力サイズ	App Store申請サイズ固定	元画像サイズそのまま
用途	App Store申請素材の量産	自由な画像テキスト編集

App Storeスクリーンショットの量産にはApp Store画像メーカーの方が向いています。画像テキストエディターは「1枚の画像に複数のテキストをレイアウトしたい」「テキストの位置や装飾を細かく調整したい」場面に向いています。

実装上で苦労した点

最初はシンプルに「テキスト1つを好きな場所に置けるだけ」の構成でした。使っていくうちに「複数のテキストを置きたい」「縁取りが欲しい」「フォントを変えたい」と要望（自分の要望）が膨らんで、レイヤー管理の仕組みを後から追加することになりました。

後付けでレイヤー管理を入れると既存の状態管理と衝突することが多く、特に「選択中のレイヤーを変えたときにプロパティパネルを更新する」処理が複雑になりました。最終的には「レイヤーのデータ」と「UIへの反映」を明確に分離する形に整理して落ち着きました。

画像編集ツールをブラウザだけで作ろうとすると、Canvas APIの限界（自動折り返しなし、フォント読み込みの非同期性など）に頻繁に突き当たります。それぞれ個別に対処していくしかなく、地道な作業でした。

Webアプリを起動