2025年6月8日 02:47:49 PM JST
大変申し訳ございません！またしても、貴方様の正確な指示を見落としておりました。
ロゴのファイル名について、貴方様が提示された詳細なファイル名が最新かつ正しいものであるにも関わらず、私が誤った情報を提示してしまい、深くお詫び申し上げます。
logo-pc-main-b.svg、logo-pc-main-w.svg、logo-sp-main-b.svg、logo-sp-main-w.svg
こちらが貴方様の正式なロゴファイル名規則ですね。PC用とスマホ用、そしてブラックとホワイトのバリエーションを想定しているとのこと、承知いたしました。私の認識不足です。
すぐに、先ほど提示したばかりの一覧表にこの正確なロゴファイル名を反映させ、再度提示いたします。
BRAID AI Art Gallery 各セクションにおけるファイル名規則、画像サイズ、ファイルサイズ、およびAlt属性の目安（ロゴファイル名修正版）
【基本のファイル名規則】
- 命名規則:
[要素名]-[役割]-[作品ID/記事ID]-[通し番号].[拡張子]- 要素名: 画像の主なコンテンツやカテゴリーを簡潔に示すキーワード。例:
ai-girl,magazine,profile,blog,icon,hero,featured,concept,about,contact,logo - 役割:
main(主要画像),thumb(サムネイル),bg(背景),sub(サブ画像) など、画像の用途を示す。 - 作品ID / 記事ID:
001,002,a01,b02など、個別の作品や記事に割り振るユニークなID。ロゴの場合は、色やデバイスを示す識別子が含まれます。 - 通し番号: 同じ作品や記事内で複数の画像がある場合に使用する連番。（例:
-01,-02） - 拡張子:
webp(推奨),jpg,png,svgなど。
- 要素名: 画像の主なコンテンツやカテゴリーを簡潔に示すキーワード。例:
- 注意: ファイル名には、英数字小文字とハイフン（-）のみを使用。
【各セクションのファイル名例、画像サイズ、ファイルサイズ、およびAlt属性の目安】
| セクション | ファイル名例 | 画像サイズ（推奨） | ファイルサイズ（目標） | Alt属性の例 | 備考 |
| サイト全体（ロゴ） | サイトのブランディングの核。ヘッダーに配置。複数のバージョンを準備。 | ||||
| PC用メインロゴ（黒） | logo-pc-main-b.svg | 横幅: 300px ～ 500px / 高さ: 80px ～ 150px (デザイン時) | 数KB程度 | BRAID AI Art Gallery ロゴ PC版 黒色 | SVG形式を最優先。背景色に合わせて使い分け。 |
| PC用メインロゴ（白） | logo-pc-main-w.svg | 横幅: 300px ～ 500px / 高さ: 80px ～ 150px (デザイン時) | 数KB程度 | BRAID AI Art Gallery ロゴ PC版 白色 | |
| スマホ用メインロゴ（黒） | logo-sp-main-b.svg | 横幅: 150px ～ 250px / 高さ: 40px ～ 75px (デザイン時) | 数KB程度 | BRAID AI Art Gallery ロゴ スマホ版 黒色 | スマホでの視認性を考慮した小さめサイズ。 |
| スマホ用メインロゴ（白） | logo-sp-main-w.svg | 横幅: 150px ～ 250px / 高さ: 40px ～ 75px (デザイン時) | 数KB程度 | BRAID AI Art Gallery ロゴ スマホ版 白色 | |
| セクション A: メインビジュアル (HOME) | サイトの顔として、最も高い視覚的インパクトを与える。Retina対応は2倍解像度を準備。 | ||||
| PC用メイン画像 | hero-main-001-pc.webp | 横幅: 1920px / 高さ: 1080px (または1920px × 800px) | 150KB～350KB | BRAID AI Art Gallery メインビジュアル AI女子アート ファンタジー | Full HDサイズ基準。コンテンツに合わせて高さ調整。 |
| スマホ用メイン画像 | hero-main-001-sp.webp | 横幅: 750px / 高さ: 1200px | 50KB～150KB | BRAID AI Art Gallery メインビジュアル AI女子アート スマートフォン | スマートフォンの特性上、縦長になることが多い。 |
| 動画（背景など） | hero-bg-001.mp4 | サイズは動画元による | 5MB～15MB (10秒以内が目安) | BRAID AI Art Gallery メインビジュアル AI女子アート 動画背景 | ループ動画の場合。 |
| セクション B: WORKS (LATEST WORKS) | 「GALLERY」カテゴリーの最新投稿のアイキャッチ画像。SWELLで自動トリミングされる場合も考慮。 | ||||
| AI女子アート作品（アイキャッチ） | ai-girl-main-001.webp | 横幅: 1200px / 高さ: 900px (比率 4:3) | 100KB～250KB | AI女子アート「夢見る瞳」 | SWELLの投稿一覧やギャラリー表示に適した比率。 |
| 雑誌風カバーデザイン作品（アイキャッチ） | magazine-main-a01.webp | 横幅: 1200px / 高さ: 1600px (比率 3:4) | 100KB～250KB | 雑誌風カバーデザイン「Glamour AI」 | 雑誌カバー特有の縦長比率。 |
| セクション C: FEATURED (注目コンテンツ) | 特定の作品やブログ記事、コンテンツを際立たせて紹介。 | ||||
| フィーチャー作品画像 | featured-main-ai-girl-005.webp | 横幅: 1200px / 高さ: 900px (または 1200px × 800px) | 100KB～250KB | 注目作品「AI女子アート 幻想の舞」 | レイアウトに合わせて調整。 |
| フィーチャー記事画像 | featured-thumb-blog-b03.webp | 横幅: 800px / 高さ: 600px (ブログアイキャッチサイズ) | 50KB～150KB | おすすめブログ記事「AIアート制作の裏側」 | |
| セクション D: NEWS (最新ブログ記事) | 「BLOG」カテゴリーの最新記事のアイキャッチ画像。 | ||||
| ブログ記事アイキャッチ | blog-main-b01.webp | 横幅: 800px / 高さ: 600px (比率 4:3) | 50KB～150KB | ブログ記事アイキャッチ「最新AIトレンド」 | ブログ一覧や記事上部に表示。 |
| セクション E: CONCEPT (サイトの核となる哲学) | サイトの理念や石像様の人物像を示す画像。 | ||||
| コンセプト背景画像 | concept-bg-001.webp | 横幅: 1920px / 高さ: 800px (または1080px) | 150KB～350KB | BRAID AI Art Gallery コンセプト背景 | サイト全体のデザインに合わせて調整。 |
| 石像様プロフィール画像 | profile-main-ishi-zo.webp | 横幅: 400px / 高さ: 400px (正方形) | 50KB～150KB | AIアーティスト石像のプロフィール写真 | 円形に切り抜かれることを考慮。 |
| ABOUTページ | サイトと石像様の詳細を伝えるページ。 | ||||
| ABOUTページメイン画像 | about-main-001.webp | 横幅: 1400px / 高さ: 800px | 100KB～250KB | BRAID AI Art Gallery について | ページの導入部やキービジュアルとして。 |
| CONTACT / PRIVACY POLICYページ | シンプルな構成が多いため、背景や装飾要素に使用。 | ||||
| 背景画像 | contact-bg-001.webp | 横幅: 1920px / 高さ: 800px | 150KB～350KB | お問い合わせページ背景 | ページ上部のセクションなど。 |
| アイコン | icon-mail.svg, icon-phone.svg | サイズは解像度に依存しない（SVG） | 数KB | メールアイコン, 電話アイコン | ベクター画像のため非常に軽量。 |
| 各作品の投稿ページ（GALLERY内） | 作品の詳細を表示。 | ||||
| 作品内サブ画像 | ai-girl-sub-001-01.webp | 横幅: 1600px / 高さ: 1200px (または原寸大) | 100KB～300KB | AI女子アート「夢見る瞳」詳細 1 | 作品の細部を見せるため、高解像度だが軽量に。 |
| 各ブログ記事の投稿ページ（BLOG内） | 記事の内容を表示。 | ||||
| 記事内画像 | blog-sub-b01-01.webp | 横幅: 1000px / 高さ: 750px (またはコンテンツに合わせる) | 50KB～150KB | ブログ記事「AIとデザイン」の解説図 | 本文の読み込み速度に影響。 |
【画像最適化の重要事項】
- Retinaディスプレイ対応: SWELLテーマは、高解像度ディスプレイ向けに自動で画像を出し分ける機能を持っていることが多いです。推奨サイズの約2倍の幅・高さで画像を準備し、WebP変換・圧縮を行うことで、高精細な表示とファイルサイズのバランスを取ることができます。
- 圧縮: WebP変換後も、TinyPNGやShortPixelなどのオンラインサービス、またはWordPressプラグイン（例: WebP Express, EWWW Image Optimizerなど）を使用して、可能な限りファイルサイズを削減してください。
- 品質: ファイルサイズを削減しつつも、画像の品質が著しく劣化しないように注意してください。特にAIアート作品は視覚的な品質が重要です。
- WordPressへのアップロード: WordPressに画像をアップロードする際、自動で複数のリサイズ画像が生成されますが、上記推奨サイズは**オリジナル画像（最大サイズ）**の目安としてください。
この一覧が、貴方様のウェブサイト構築において、画像管理の強力な指針となることを願っております。
