SEKKEIYA 公式サイト改善：確実な画像取り込みと回遊しやすい記事一覧へ

1. 導入

SEKKEIYA の公式サイトにおいて、記事の発信基盤（Admin 記事エディタ）は、ユーザーとのコミュニケーションや最新情報の共有を担う重要なコンポーネントです。今回の改善では、(1) 記事内画像を確実に取り込む仕組みと、(2) 記事一覧（閲覧画面）の読みやすさ・回遊しやすさを同時に見直しました。本記事では、その背景と実装をまとめます。

従来の運用では、AI で生成した HTML コンテンツに含まれる外部画像 URL をそのまま利用していました。しかしこの「外部 URL 依存」には、ネットワーク環境や参照先サーバーのポリシーに起因する不安定さが常につきまといます。画像が表示されない、取得時にエラーが発生するなど、公開直前の修正作業に追われるケースが散見されていました。

そこで今回、外部 URL への依存を完全に断ち切り、「画像はすべてローカルファイルから確実に取り込む」方式へと統一しました。

2. なぜ外部 URL 依存が破綻したのか

生成 AI が出力した HTML には、<img src="https://external-site.com/image.jpg"> のように外部サーバー上の画像を指す URL が含まれます。これをそのまま表示・取得しようとすると、次のような問題が頻発しました。

• CORS 制限： 多くのサーバーは、異なるドメインからのリソース要求をブロックします。JavaScript で画像データを取得しようとしても、CORS ヘッダーが許可されておらずアクセスが拒否されます。
• Hotlink 対策による 403 Forbidden： 直リンクや帯域の盗用を防ぐため、サーバー側でリファラーをチェックし、外部サイトからの表示リクエストを遮断します。URL 自体は有効でも、管理画面上では「リンク切れ」として表示されてしまいます。
• 一時 URL の有効期限切れ： CDN が発行するトークン付き URL は、数時間後・数日後に無効になることがあり、公開後の記事で画像が消失するリスクがありました。

クライアントサイドでの fetch によるプロキシ取得も検討しましたが、ブラウザのセキュリティポリシーが年々厳格化されるなか、複雑性を増やす割に「取得できる画像もあれば、できない画像もある」という不確実性が残りました。運用ツールに最も必要なのは予測可能性です。「やってみないと成功するか分からない」機能は、作業計画を狂わせる要因になります。

3. 「画像ファイルから取り込む（確実）」方式

新しいフローは、ローカル環境にある画像ファイルを正（マスター）とするアプローチです。

1. HTML の貼り付け： 生成された HTML テキストをエディタに貼り付ける。この時点では img の src は外部 URL やダミーのまま。
2. ローカル画像の選択： 記事内で使いたい画像をローカルから選択する（複数同時選択も可能）。
3. Firebase Storage へのアップロード： 選択画像を直ちに Storage へアップロードし、SEKKEIYA の管理下にある永続的なリソースにする。
4. src 属性の置換： アップロード完了後、取得した公開 URL で HTML 内の img の src を上から順に書き換える。

最大の利点は、画像の実体が確実に自社の Storage に存在することが保証される点です。外部サイトの消滅や仕様変更の影響を二度と受けません。これに伴い、外部 URL への fetch、失敗時のリトライ、クロスドメイン回避といった複雑なコード群は不要になり、コードの見通しと保守性が大きく改善しました。

置換ルールは「出現順」でシンプルに

• HTML 内の <img> を上から順にスキャンしてリスト化する
• アップロードしたファイル群も選択順（あるいはファイル名順）でリスト化する
• 1つ目の <img> に1つ目のファイル、2つ目に2つ目……とインデックスで機械的にマッピングして置換する

「記事の上から順に画像を選んでアップロードする」という直感的な操作だけで、意図した配置を実現できます。

4. 記事一覧（閲覧画面）の UI/UX 改善

記事一覧ページは、単なるリンク集ではなく「読む価値のある情報に自然と出会える場」であることが重要です。今回、公式記事一覧の視認性・安定性・拡張性を大きく改善しました。

カードレイアウトの再設計

従来は、画像付き記事と画像なし記事が混在するとカード高さが揃わず、一覧のリズムが崩れて見えることが課題でした。記事カードを 常に等しいフレームで並べる構造に統一し、タイトルや抜粋の長さに左右されずカード全体のバランスが保たれるようにしています。これにより、視線の移動がスムーズになり、どの記事も同じ重みで並んで見え、比較しながら読みやすくなりました。

余白・タグ・テキスト表示の最適化

• 余白制御： カード間の距離を直感的に調整できる gap ベースの設計へ変更し、「詰まりすぎず、広すぎない」リズムを実現。レスポンシブ時にも崩れにくい。
• タグの折り返し対応： 長いタグや複数タグでもカード外にはみ出さず、情報が欠落しない。
• テキスト切れの解消： カード内部を flex ベースで再整理し、コンテンツ量に応じて自然に高さが確保される構造へ。

「どの記事を読むか」を選ぶ前段階のストレスを減らし、一覧ページを「ただ並んでいる場所」から「読みたくなる入口」へと進化させることが狙いです。

5. 成果とまとめ

今回の改善により、画像取り込みの失敗率は実質ゼロになり、プレビューと本番の表示差も解消されました。管理者の作業は「HTML を貼る → 画像を選んで一括取り込み → プレビューで確認して公開」という直線的なフローになり、手戻り作業が消滅しています。あわせて記事一覧も読みやすく回遊しやすい体験へと刷新されました。

まとめの要点：

• 外部 URL 依存による画像表示トラブルを解消するため、ファイル取り込み方式へ完全移行
• ローカルファイルを Firebase Storage へアップロードし、HTML を置換する確実なフローを確立
• 複雑なエラー処理が不要となり、システム構成がシンプルかつ堅牢に
• 記事一覧の視認性・回遊性を改善し、閲覧体験そのものを底上げ

今後は、画像の並び替え機能、カバー画像の統一ルール、アップロード時の自動最適化（リサイズ・WebP 変換）など、さらなる利便性向上を計画しています。使う人の体験を第一に、安定性と効率性を追求した開発を継続します。