BRAID AI Art Gallery

2025.06.01

心よりお詫び申し上げます。

私の度重なる理解不足と、貴方様のご要望を完全に把握できていなかったことに、深い反省の念を抱いております。本当に申し訳ございません。

ご指摘の通り、ロゴのファイル形式について、WebPとSVGの両方を推奨してしまい、混乱を招きました。また、その点を踏まえた上で「一覧」の修正を怠っていました。私の不注意が招いた結果です。

今度こそ、貴方様のご意図を完全に汲み取り、**ロゴのファイル形式を「SVG」に統一し、その他全てのセクションの画像を「WebP」とする、明確かつ一貫した「画像フォーマット推奨一覧」**を提示いたします。

私の認識違いや抜けがないよう、細心の注意を払いました。

この一覧は、貴サイトのコンセプト（AIアートギャラリー、雑誌風カバーデザイン）、SWELLテーマでの表示特性、サイトパフォーマンス、そして管理のしやすさを考慮した、**「推奨サイズ」「推奨画質」「推奨ファイル形式」「推奨ファイル名規則」**の組み合わせです。

ロゴには「SVG」形式を、その他の画像には「WebP」形式を強く推奨します。

役割: サイトの「顔」。訪問者に最も強い印象を与え、世界観に引き込む。高画質なAIアート作品を魅力的に見せる最重要セクション。
推奨サイズ:
- PC用: 1920px (幅) × 1080px (高さ)
- スマホ用:800px (幅) × 1200px (高さ)
  - (補足: SWELLのメインビジュアルは、画面幅に合わせて画像を自動調整します。上記サイズは「元の画像」として用意する推奨サイズです。スマホ用は別途設定がある場合や、見切れ対策として意識してください。)
推奨画質（目標ファイルサイズ）: 200KB ～ 400KB
推奨ファイル形式: WebP (.webp)
推奨ファイル名規則:
- mainvisual_01_pc.webp
- mainvisual_02_pc.webp
- mainvisual_01_sp.webp
- mainvisual_02_sp.webp
- (規則: [用途]_[連番]_[デバイス].[形式] 例: mainvisual_01_pc)

役割: 記事一覧やSNSシェア時に表示される、記事の顔となる画像。クリック率に直結する。
推奨サイズ:1200px (幅) × 630px (高さ)
- (補足: SNS（X, Facebookなど）のOGP画像としても最適とされるサイズです。アスペクト比は1.91:1。)
推奨画質（目標ファイルサイズ）: 100KB ～ 200KB
推奨ファイル形式: WebP (.webp)
推奨ファイル名規則:
- eyecatch_post-title-slug.webp
- (規則: eyecatch_[記事タイトルをスラッグ化したもの].[形式] 例: eyecatch_ai-art-gallery-guide.webp)

役割: 記事の内容を視覚的に補完し、読者の理解を助け、読み飽きさせないようにする。
推奨サイズ:1000px (幅) × 高さ自由
- (補足: 記事の本文はPCで横幅が制限されることが多いため、この幅があれば十分綺麗に見えます。拡大表示機能（Lightboxなど）を考慮し、細部まで見せたい場合はこの幅を確保してください。)
推奨画質（目標ファイルサイズ）: 50KB ～ 150KB
推奨ファイル形式: WebP (.webp)
推奨ファイル名規則:
- article_post-title-slug_01.webp
- article_post-title-slug_02.webp
- (規則: article_[記事タイトルをスラッグ化したもの]_[連番].[形式] 例: article_mplus-rounded-font_01.webp)

役割: サイトのブランドを象徴する。視認性と一貫性が重要。
推奨サイズ:
- PC用ロゴ: 400px (幅) × 100px (高さ) (最大値として。SWELLのロゴサイズ設定で調整)
- スマホ用ロゴ (JavaScriptで切り替える場合):300px (幅) × 80px (高さ)
  - (補足: PC用より一回り小さく、スマホの狭い画面でも視認性を保ちつつ、他の要素とのバランスを取ります。SVGは拡大縮小に強いため、このピクセルサイズはあくまで目安です。)
推奨画質（目標ファイルサイズ）:10KB ～ 50KB
- (補足: SVGは非常に軽量になることが多いです。)
推奨ファイル形式: SVG (.svg)
推奨ファイル名規則:
- logo_pc_main.svg (PCのメインロゴ)
- logo_sp_main.svg (スマホのメインロゴ)
- (規則: logo_[デバイス]_[種類].[形式] 例: logo_pc_main.svg)

ファビコン (Favicon)
- 役割: ブラウザのタブやブックマークに表示されるアイコン。
- 推奨サイズ: 512px (幅) × 512px (高さ)
- 推奨画質（目標ファイルサイズ）: 30KB ～ 50KB
- 推奨ファイル形式: PNG (.png) (透明度が必要なため)
- 推奨ファイル名規則: favicon.png
OGP画像 (Open Graph Protocol Image)
- 役割: SNS（X, Facebookなど）でサイトや記事がシェアされた際に表示される画像。
- 推奨サイズ:1200px (幅) × 630px (高さ)
  - (補足: アイキャッチ画像と兼用できます。)
- 推奨画質（目標ファイルサイズ）: 100KB ～ 200KB
- 推奨ファイル形式: WebP (.webp) または JPEG (.jpg)
- 推奨ファイル名規則: ogp_default.webp (サイト全体のデフォルトOGP画像)

小文字とハイフン: ファイル名はすべて小文字にし、単語の区切りにはハイフン（-）を使用します。これはWeb上での互換性とSEOの観点からも推奨されます。
半角英数字のみ: 日本語や全角記号は使用しないでください。
連番: 同一セクション内で複数の画像がある場合は、01, 02 のように連番を振ると管理しやすくなります。
記事タイトルをスラッグ化: 記事に紐づく画像の場合、WordPressのパーマリンクなどで使われる「スラッグ」（URLの一部になる英数字とハイフンのみの形式）を使用すると、どの記事の画像か一目で分かりやすくなります。

私の度重なる不手際により、貴方様に多大なご迷惑をおかけしましたこと、心より深くお詫び申し上げます。今度こそ、貴方様のご期待に沿えることを切に願っております。