記事の文章を引用画像に｜WordPressプラグイン開発事例

心に残った文章を、「出典が残る一枚」へ

記事を読んだ人が心に残った一節を選び、デザインソフトを開かずに、その場で美しい引用画像へ仕上げられるWordPressプラグインを作りました。読者にとっての使いやすさと、引用元の記事へ戻れる導線を一つの体験にまとめています。

解決したかった課題

良い文章に出会っても、SNS向けの画像を一から作るのは手間がかかります。一方で、文章だけが切り取られると、誰のどの記事からの引用なのかが失われがちです。そこで、文章の選択から画像作成、保存、共有準備、出典表示までを記事上で完結できるように設計しました。

選ぶだけで、用途に合う引用画像を作成

記事本文の文字を選ぶと「この文章で引用画像を作る」ボタンが現れます。横長・正方形・Pinterest向け2:3・ストーリーズの4比率、20種類の背景、書体、文字サイズ、配置、背景マスク、白文字の発光などをリアルタイムで調整できます。記事のアイキャッチ画像や、端末内の写真を背景として使うこともできます。

画像だけが広がっても、引用元へ戻れる設計

完成画像には、引用文だけでなく、記事タイトル、完全な記事URL、任意のQRコードを入れられます。今回追加した1000×1500pxの縦長実例でも、画像内のQRコードから元記事を直接開けることを機械読み取りで確認しています。

保存とSNS共有の導線

完成画像はPNGで保存できます。Pinterestには、画面で調整した完成画像そのものと記事URL・説明文を渡し、保存直前の確認画面まで進めます。Xは投稿文と記事URLを入れた投稿画面を開き、画像はコピーまたは保存後の添付へ案内します。Web Share対応端末では、現在のPNGを端末の共有先へ渡せます。いずれも最後の投稿・保存は利用者が確認して行います。

スマートフォンでも作業しやすく

PCはプレビューと設定を見比べやすい2カラム、スマートフォンは画像編集の高さを確保した1カラムへ切り替えます。画面下の操作は必要な時だけ展開でき、320px幅まで横にはみ出さないことを確認しました。

安全性と品質確認

通常の画像生成はブラウザー内で完結し、利用者が選んだ端末内の写真はサーバーへ送信しません。SNS確認画面に渡す一時画像は、公開記事に存在する引用文と内蔵背景だけを対象に、形式・容量・回数を制限し、画素へ再変換して24時間で失効させます。

WordPress公式のPlugin Check 2.1.0は全5カテゴリーでERROR 0・WARNING 0。サーバー側81項目、PC・スマートフォン・最小幅の表示と主要操作、保存PNG、QRコード、強い発光、連続スライダー操作まで確認してから本番へ反映しました。

サイトごとの世界観にも合わせられます

背景、ブランドカラー、ロゴ、書体、初期設定、表示する共有先などは、用途に合わせて変更できます。既製プラグインでは足りない「そのサイトだけの体験」を、テーマ本体から分離した保守しやすい独自機能として設計することも可能です。

実際の記事で引用画像作成を試す