[{"data":1,"prerenderedAt":603},["ShallowReactive",2],{"navigation_docs":3,"-frontend-media-naming":190,"-frontend-media-naming-surround":598},[4,136,150,183],{"title":5,"path":6,"stem":7,"children":8},"Frontend","\u002Ffrontend","1.frontend",[9,13,39,76,109,130],{"title":10,"path":6,"stem":11,"order":12},"フロントエンド ガイドライン","1.frontend\u002Findex",1,{"title":14,"path":15,"stem":16,"children":17},"HTML","\u002Ffrontend\u002Fhtml","1.frontend\u002F1.html\u002Findex",[18,19,23,27,31,35],{"title":14,"path":15,"stem":16},{"title":20,"path":21,"stem":22},"コードスタイル","\u002Ffrontend\u002Fhtml\u002Fcode-style","1.frontend\u002F1.html\u002Fcode-style",{"title":24,"path":25,"stem":26},"見出しタグ","\u002Ffrontend\u002Fhtml\u002Fheading","1.frontend\u002F1.html\u002Fheading",{"title":28,"path":29,"stem":30},"img タグ","\u002Ffrontend\u002Fhtml\u002Fimg","1.frontend\u002F1.html\u002Fimg",{"title":32,"path":33,"stem":34},"パスとリンク","\u002Ffrontend\u002Fhtml\u002Flink","1.frontend\u002F1.html\u002Flink",{"title":36,"path":37,"stem":38},"品質管理","\u002Ffrontend\u002Fhtml\u002Fquality","1.frontend\u002F1.html\u002Fquality",{"title":40,"path":41,"stem":42,"children":43},"CSS","\u002Ffrontend\u002Fcss","1.frontend\u002F2.css\u002Findex",[44,45,49,52,56,60,64,68,72],{"title":40,"path":41,"stem":42},{"title":46,"path":47,"stem":48},"命名規則・コンポーネント設計","\u002Ffrontend\u002Fcss\u002Farchitecture","1.frontend\u002F2.css\u002Farchitecture",{"title":20,"path":50,"stem":51},"\u002Ffrontend\u002Fcss\u002Fcode-style","1.frontend\u002F2.css\u002Fcode-style",{"title":53,"path":54,"stem":55},"Web フォント","\u002Ffrontend\u002Fcss\u002Ffonts","1.frontend\u002F2.css\u002Ffonts",{"title":57,"path":58,"stem":59},"記述順番","\u002Ffrontend\u002Fcss\u002Forder","1.frontend\u002F2.css\u002Forder",{"title":61,"path":62,"stem":63},"プロパティのルール","\u002Ffrontend\u002Fcss\u002Fproperties","1.frontend\u002F2.css\u002Fproperties",{"title":65,"path":66,"stem":67},"Tailwind CSS","\u002Ffrontend\u002Fcss\u002Ftailwind","1.frontend\u002F2.css\u002Ftailwind",{"title":69,"path":70,"stem":71},"値のルール","\u002Ffrontend\u002Fcss\u002Fvalues","1.frontend\u002F2.css\u002Fvalues",{"title":73,"path":74,"stem":75},"CSS 変数（カスタムプロパティ）","\u002Ffrontend\u002Fcss\u002Fvariables","1.frontend\u002F2.css\u002Fvariables",{"title":77,"path":78,"stem":79,"children":80},"JavaScript","\u002Ffrontend\u002Fjs","1.frontend\u002F3.js\u002Findex",[81,82,85,89,93,97,101,105],{"title":77,"path":78,"stem":79},{"title":20,"path":83,"stem":84},"\u002Ffrontend\u002Fjs\u002Fcode-style","1.frontend\u002F3.js\u002Fcode-style",{"title":86,"path":87,"stem":88},"エラーハンドリング","\u002Ffrontend\u002Fjs\u002Ferror-handling","1.frontend\u002F3.js\u002Ferror-handling",{"title":90,"path":91,"stem":92},"ライブラリの利用","\u002Ffrontend\u002Fjs\u002Flibraries","1.frontend\u002F3.js\u002Flibraries",{"title":94,"path":95,"stem":96},"HTML への読み込み","\u002Ffrontend\u002Fjs\u002Floading","1.frontend\u002F3.js\u002Floading",{"title":98,"path":99,"stem":100},"モジュール","\u002Ffrontend\u002Fjs\u002Fmodule-structure","1.frontend\u002F3.js\u002Fmodule-structure",{"title":102,"path":103,"stem":104},"命名規則","\u002Ffrontend\u002Fjs\u002Fnaming","1.frontend\u002F3.js\u002Fnaming",{"title":106,"path":107,"stem":108},"パフォーマンス最適化","\u002Ffrontend\u002Fjs\u002Fperformance","1.frontend\u002F3.js\u002Fperformance",{"title":110,"path":111,"stem":112,"children":113},"画像・メディアリソースガイドライン","\u002Ffrontend\u002Fmedia","1.frontend\u002F4.media\u002Findex",[114,115,119,123,127],{"title":110,"path":111,"stem":112},{"title":116,"path":117,"stem":118},"アクセシビリティ","\u002Ffrontend\u002Fmedia\u002Faccessibility","1.frontend\u002F4.media\u002Faccessibility",{"title":120,"path":121,"stem":122},"画像フォーマット","\u002Ffrontend\u002Fmedia\u002Fformats","1.frontend\u002F4.media\u002Fformats",{"title":124,"path":125,"stem":126},"ファイル命名規則","\u002Ffrontend\u002Fmedia\u002Fnaming","1.frontend\u002F4.media\u002Fnaming",{"title":106,"path":128,"stem":129},"\u002Ffrontend\u002Fmedia\u002Foptimization","1.frontend\u002F4.media\u002Foptimization",{"title":131,"path":132,"stem":133,"children":134},"開発環境テンプレート","\u002Ffrontend\u002Fenvironment","1.frontend\u002F5.environment\u002Findex",[135],{"title":131,"path":132,"stem":133},{"title":137,"path":138,"stem":139,"children":140,"page":149},"Deploy Release","\u002Fdeploy-release","2.deploy-release",[141,145],{"title":142,"path":143,"stem":144},"デプロイ","\u002Fdeploy-release\u002Fdeploy","2.deploy-release\u002Fdeploy",{"title":146,"path":147,"stem":148},"リリース","\u002Fdeploy-release\u002Frelease","2.deploy-release\u002Frelease",false,{"title":151,"path":152,"stem":153,"children":154},"Git","\u002Fgit","3.git",[155,159,163,167,171,175,179],{"title":156,"path":152,"stem":157,"order":158},"Git ガイドライン","3.git\u002Findex",3,{"title":160,"path":161,"stem":162},"ブランチ戦略","\u002Fgit\u002Fbranch","3.git\u002Fbranch",{"title":164,"path":165,"stem":166},"CI\u002FCD運用","\u002Fgit\u002Fcicd","3.git\u002Fcicd",{"title":168,"path":169,"stem":170},"コミットメッセージとタグ","\u002Fgit\u002Fmessage","3.git\u002Fmessage",{"title":172,"path":173,"stem":174},"Pull Request運用","\u002Fgit\u002Fpull-request","3.git\u002Fpull-request",{"title":176,"path":177,"stem":178},"リポジトリ運用","\u002Fgit\u002Frepository","3.git\u002Frepository",{"title":180,"path":181,"stem":182},"GitHub権限・セキュリティ","\u002Fgit\u002Fsecurity","3.git\u002Fsecurity",{"title":184,"path":185,"stem":186,"children":187,"order":189},"AI 利用ガイドライン","\u002Fai","4.ai\u002Findex",[188],{"title":184,"path":185,"stem":186,"order":189},4,{"id":191,"title":124,"body":192,"description":591,"extension":592,"links":593,"meta":594,"navigation":595,"path":125,"seo":596,"stem":126,"__hash__":597},"docs\u002F1.frontend\u002F4.media\u002Fnaming.md",{"type":193,"value":194,"toc":580},"minimark",[195,199,251,255,262,320,325,369,373,383,393,396,400,406,410,430,433,439,443,461,464,495,499,515,518],[196,197,198],"p",{},"開発において画像ファイルの命名規則を統一することで、管理や運用の効率化、チーム間の認識齟齬防止につながります。 以下のルールに従って、画像ファイルの命名を行ってください。",[200,201,202,210,220,228,240],"ul",{},[203,204,205,209],"li",{},[206,207,208],"strong",{},"接頭辞を使用",": 画像の種類を明確にするため、接頭辞を必ず使用します。",[203,211,212,215,216],{},[206,213,214],{},"小文字のみ使用",": ",[217,218,219],"code",{},"icon-arrow.svg",[203,221,222,215,225],{},[206,223,224],{},"ハイフン区切り",[217,226,227],{},"bg-pattern-main.webp",[203,229,230,215,233,236,237],{},[206,231,232],{},"連番の場合",[217,234,235],{},"img-gallery-01.webp",", ",[217,238,239],{},"img-gallery-02.webp",[203,241,242,215,245,236,248],{},[206,243,244],{},"レスポンシブ用",[217,246,247],{},"banner-hero-desktop.webp",[217,249,250],{},"banner-hero-mobile.webp",[252,253,254],"h2",{"id":254},"接頭辞ルール",[196,256,257,258,261],{},"ファイル名は以下のような接頭辞のいずれかで始める必要がありますが、特定の要件やデザインシステムにより、",[206,259,260],{},"プロジェクト内で一貫性を保つこと","を前提に上記以外の接頭辞を使用しても構いません。",[200,263,264,272,280,288,296,304,312],{},[203,265,266,271],{},[206,267,268],{},[217,269,270],{},"icon-",": アイコン画像",[203,273,274,279],{},[206,275,276],{},[217,277,278],{},"bg-",": 背景画像",[203,281,282,287],{},[206,283,284],{},[217,285,286],{},"img-",": 一般的な画像",[203,289,290,295],{},[206,291,292],{},[217,293,294],{},"figure-",": 図版・説明画像",[203,297,298,303],{},[206,299,300],{},[217,301,302],{},"banner-",": バナー・ヒーロー画像",[203,305,306,311],{},[206,307,308],{},[217,309,310],{},"text-",": テキスト画像・ロゴタイプ",[203,313,314,319],{},[206,315,316],{},[217,317,318],{},"logo-",": ロゴ画像",[196,321,322],{},[206,323,324],{},"例:",[200,326,327,333,339,345,351,357,363],{},[203,328,329,332],{},[217,330,331],{},"icon-menu.svg"," - メニューアイコン",[203,334,335,338],{},[217,336,337],{},"bg-pattern.webp"," - パターン背景",[203,340,341,344],{},[217,342,343],{},"img-product.webp"," - 商品画像",[203,346,347,350],{},[217,348,349],{},"figure-diagram.webp"," - 図解画像",[203,352,353,356],{},[217,354,355],{},"banner-hero.webp"," - ヒーロー画像",[203,358,359,362],{},[217,360,361],{},"text-heading.webp"," - テキスト画像",[203,364,365,368],{},[217,366,367],{},"logo-company.svg"," - 会社ロゴ",[252,370,372],{"id":371},"命名パターン例","命名パターン(例)",[374,375,380],"pre",{"className":376,"code":378,"language":379},[377],"language-text","images\u002F\n├── common\u002F # 共通画像\n│   ├── logo-company.svg\n│   ├── icon-menu.svg\n│   └── bg-pattern.webp\n├── pages\u002F # ページ固有画像\n│   ├── top\u002F\n│   │   ├── banner-hero.webp\n│   │   └── img-feature-01.webp\n│   └── product\u002F\n│       ├── img-main.webp\n│       └── img-gallery-01.webp\n└── ui\u002F  # UI要素画像\n    ├── bg-button.webp\n    └── icon-decoration.svg\n","text",[217,381,378],{"__ignoreMap":382},"",[384,385,386],"blockquote",{},[196,387,388,392],{},[389,390,391],"span",{},"!WARNING"," 例外ケース\nシステムの制限や、サイトリニューアルなどの際にパスを変更したくない場合、既に同名のディレクトリが存在する場合などは、この限りではありません。",[252,394,395],{"id":395},"ファイル名の構成要素",[397,398,399],"h3",{"id":399},"基本構成",[374,401,404],{"className":402,"code":403,"language":379},[377],"[接頭辞]-[詳細]-[連番].[拡張子]\n",[217,405,403],{"__ignoreMap":382},[196,407,408],{},[206,409,324],{},[200,411,412,418,424],{},[203,413,414,417],{},[217,415,416],{},"banner-hero-main.webp"," - メインのヒーロー画像",[203,419,420,423],{},[217,421,422],{},"img-product-gallery-01.webp"," - 商品ギャラリーの 1 枚目",[203,425,426,429],{},[217,427,428],{},"icon-arrow-right.svg"," - 右矢印アイコン",[397,431,432],{"id":432},"レスポンシブ対応時",[374,434,437],{"className":435,"code":436,"language":379},[377],"[接頭辞]-[詳細]-[ブレークポイント].[拡張子]\n",[217,438,436],{"__ignoreMap":382},[196,440,441],{},[206,442,324],{},[200,444,445,450,456],{},[203,446,447,449],{},[217,448,247],{}," - デスクトップ用ヒーロー画像",[203,451,452,455],{},[217,453,454],{},"banner-hero-tablet.webp"," - タブレット用ヒーロー画像",[203,457,458,460],{},[217,459,250],{}," - モバイル用ヒーロー画像",[397,462,463],{"id":463},"連番使用時",[200,465,466,481],{},[203,467,468,215,471,236,474,236,477,480],{},[206,469,470],{},"2 桁でゼロ埋め",[217,472,473],{},"01",[217,475,476],{},"02",[217,478,479],{},"03","...",[203,482,483,215,486,236,489,236,492,480],{},[206,484,485],{},"3 桁の場合",[217,487,488],{},"001",[217,490,491],{},"002",[217,493,494],{},"003",[196,496,497],{},[206,498,324],{},[200,500,501,507],{},[203,502,503,236,505],{},[217,504,235],{},[217,506,239],{},[203,508,509,236,512],{},[217,510,511],{},"figure-step-001.webp",[217,513,514],{},"figure-step-002.webp",[252,516,517],{"id":517},"禁止事項",[200,519,520,529,537,546,554,562,571],{},[203,521,522,215,525,528],{},[206,523,524],{},"日本語ファイル名",[217,526,527],{},"画像.jpg"," ❌",[203,530,531,215,534,528],{},[206,532,533],{},"スペース",[217,535,536],{},"icon menu.jpg",[203,538,539,215,542,545],{},[206,540,541],{},"アンダースコア",[217,543,544],{},"icon_menu.jpg"," ❌ (ハイフンを使用)",[203,547,548,215,551,528],{},[206,549,550],{},"大文字",[217,552,553],{},"Icon-Menu.jpg",[203,555,556,215,559,528],{},[206,557,558],{},"特殊文字",[217,560,561],{},"icon@menu.jpg",[203,563,564,215,567,570],{},[206,565,566],{},"接頭辞なし",[217,568,569],{},"menu.svg"," ❌ (必ず指定の接頭辞を使用)",[203,572,573,215,576,579],{},[206,574,575],{},"不適切な接頭辞",[217,577,578],{},"pic-gallery.jpg"," ❌ (規定の接頭辞以外は使用禁止)",{"title":382,"searchDepth":581,"depth":581,"links":582},2,[583,584,585,590],{"id":254,"depth":581,"text":254},{"id":371,"depth":581,"text":372},{"id":395,"depth":581,"text":395,"children":586},[587,588,589],{"id":399,"depth":158,"text":399},{"id":432,"depth":158,"text":432},{"id":463,"depth":158,"text":463},{"id":517,"depth":581,"text":517},"接頭辞ルール、ファイル名構成、レスポンシブ・連番対応の命名規則","md",null,{},true,{"title":124,"description":591},"pQ5h7Y9Stq9UgZL6jqQigUNiuy2r5B_XjmKImbQ_oow",[599,601],{"title":120,"path":121,"stem":122,"description":600,"children":-1},"WebP・AVIFの選定基準、複数フォーマット対応、レスポンシブ画像の実装",{"title":106,"path":128,"stem":129,"description":602,"children":-1},"loading属性、プリロード、構造化データによるパフォーマンスとSEO最適化",1780099579931]