[{"data":1,"prerenderedAt":539},["ShallowReactive",2],{"navigation_docs":3,"-frontend-media-optimization":190,"-frontend-media-optimization-surround":534},[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":106,"body":192,"description":528,"extension":529,"links":530,"meta":531,"navigation":284,"path":128,"seo":532,"stem":129,"__hash__":533},"docs\u002F1.frontend\u002F4.media\u002Foptimization.md",{"type":193,"value":194,"toc":521},"minimark",[195,212,328,332,339,405,409,412,416,419,488,491,494,517],[196,197,198,199,203,204,207,208,211],"p",{},"遅延読み込みは、ページの初期表示速度を向上させるための重要な手法です。ファーストビュー以外の画像には ",[200,201,202],"code",{},"loading=\"lazy\""," 属性を設定し、必要なタイミングで画像を読み込むことで、無駄な通信を減らします。",[205,206],"br",{},"\nただし、LCP（Largest Contentful Paint）に影響する重要な画像には ",[200,209,210],{},"loading=\"eager\""," を指定し、すぐに表示されるようにします。",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003C!-- ファーストビュー外の画像 -->\n\u003Cimg src=\"\u002Fimages\u002Fcontent.webp\" alt=\"\" loading=\"lazy\" \u002F>\n\n\u003C!-- ファーストビューの重要な画像 -->\n\u003Cimg src=\"\u002Fimages\u002Fhero.webp\" alt=\"\" loading=\"eager\" \u002F>\n","html","",[200,220,221,229,280,286,291],{"__ignoreMap":218},[222,223,225],"span",{"class":224,"line":12},"line",[222,226,228],{"class":227},"su8Ar","\u003C!-- ファーストビュー外の画像 -->\n",[222,230,232,236,240,244,247,251,255,257,260,262,265,268,270,272,275,277],{"class":224,"line":231},2,[222,233,235],{"class":234},"sN50r","\u003C",[222,237,239],{"class":238},"sF3G6","img",[222,241,243],{"class":242},"sAjK8"," src",[222,245,246],{"class":234},"=",[222,248,250],{"class":249},"ssQ5U","\"",[222,252,254],{"class":253},"scigg","\u002Fimages\u002Fcontent.webp",[222,256,250],{"class":249},[222,258,259],{"class":242}," alt",[222,261,246],{"class":234},[222,263,264],{"class":249},"\"\"",[222,266,267],{"class":242}," loading",[222,269,246],{"class":234},[222,271,250],{"class":249},[222,273,274],{"class":253},"lazy",[222,276,250],{"class":249},[222,278,279],{"class":234}," \u002F>\n",[222,281,282],{"class":224,"line":158},[222,283,285],{"emptyLinePlaceholder":284},true,"\n",[222,287,288],{"class":224,"line":189},[222,289,290],{"class":227},"\u003C!-- ファーストビューの重要な画像 -->\n",[222,292,294,296,298,300,302,304,307,309,311,313,315,317,319,321,324,326],{"class":224,"line":293},5,[222,295,235],{"class":234},[222,297,239],{"class":238},[222,299,243],{"class":242},[222,301,246],{"class":234},[222,303,250],{"class":249},[222,305,306],{"class":253},"\u002Fimages\u002Fhero.webp",[222,308,250],{"class":249},[222,310,259],{"class":242},[222,312,246],{"class":234},[222,314,264],{"class":249},[222,316,267],{"class":242},[222,318,246],{"class":234},[222,320,250],{"class":249},[222,322,323],{"class":253},"eager",[222,325,250],{"class":249},[222,327,279],{"class":234},[329,330,331],"h2",{"id":331},"プリロード設定",[196,333,334,335,338],{},"重要な画像やリソースは、",[200,336,337],{},"\u003Clink rel=\"preload\">"," を使って事前に読み込むことで、表示の遅延を防ぎます。特に LCP 要素となる画像にはプリロード設定を推奨します。",[213,340,342],{"className":215,"code":341,"language":217,"meta":218,"style":218},"\u003C!-- 重要な画像のプリロード -->\n\u003Clink rel=\"preload\" as=\"image\" href=\"\u002Fimages\u002Fhero.webp\" type=\"image\u002Fwebp\" \u002F>\n",[200,343,344,349],{"__ignoreMap":218},[222,345,346],{"class":224,"line":12},[222,347,348],{"class":227},"\u003C!-- 重要な画像のプリロード -->\n",[222,350,351,353,356,359,361,363,366,368,371,373,375,378,380,383,385,387,389,391,394,396,398,401,403],{"class":224,"line":231},[222,352,235],{"class":234},[222,354,355],{"class":238},"link",[222,357,358],{"class":242}," rel",[222,360,246],{"class":234},[222,362,250],{"class":249},[222,364,365],{"class":253},"preload",[222,367,250],{"class":249},[222,369,370],{"class":242}," as",[222,372,246],{"class":234},[222,374,250],{"class":249},[222,376,377],{"class":253},"image",[222,379,250],{"class":249},[222,381,382],{"class":242}," href",[222,384,246],{"class":234},[222,386,250],{"class":249},[222,388,306],{"class":253},[222,390,250],{"class":249},[222,392,393],{"class":242}," type",[222,395,246],{"class":234},[222,397,250],{"class":249},[222,399,400],{"class":253},"image\u002Fwebp",[222,402,250],{"class":249},[222,404,279],{"class":234},[329,406,408],{"id":407},"seo-最適化","SEO 最適化",[196,410,411],{},"検索エンジン最適化の観点からも、画像の扱いは重要です。構造化データを活用して検索エンジンに情報を伝えたり、ファイルサイズや配信速度の最適化を行ってください。",[413,414,415],"h3",{"id":415},"構造化データの活用",[196,417,418],{},"構造化データを用いることで、検索エンジンに画像や商品の情報を正確に伝えることができます。",[213,420,422],{"className":215,"code":421,"language":217,"meta":218,"style":218},"\u003C!-- 商品画像の構造化データ -->\n\u003Cscript type=\"application\u002Fld+json\">\n  {\n    \"@context\": \"https:\u002F\u002Fschema.org\u002F\",\n    \"@type\": \"Product\",\n    \"image\": \"\u002Fimages\u002Fproduct-main.webp\"\n  }\n\u003C\u002Fscript>\n",[200,423,424,429,450,456,461,466,472,478],{"__ignoreMap":218},[222,425,426],{"class":224,"line":12},[222,427,428],{"class":227},"\u003C!-- 商品画像の構造化データ -->\n",[222,430,431,433,436,438,440,442,445,447],{"class":224,"line":231},[222,432,235],{"class":234},[222,434,435],{"class":238},"script",[222,437,393],{"class":242},[222,439,246],{"class":234},[222,441,250],{"class":249},[222,443,444],{"class":253},"application\u002Fld+json",[222,446,250],{"class":249},[222,448,449],{"class":234},">\n",[222,451,452],{"class":224,"line":158},[222,453,455],{"class":454},"sKuZN","  {\n",[222,457,458],{"class":224,"line":189},[222,459,460],{"class":454},"    \"@context\": \"https:\u002F\u002Fschema.org\u002F\",\n",[222,462,463],{"class":224,"line":293},[222,464,465],{"class":454},"    \"@type\": \"Product\",\n",[222,467,469],{"class":224,"line":468},6,[222,470,471],{"class":454},"    \"image\": \"\u002Fimages\u002Fproduct-main.webp\"\n",[222,473,475],{"class":224,"line":474},7,[222,476,477],{"class":454},"  }\n",[222,479,481,484,486],{"class":224,"line":480},8,[222,482,483],{"class":234},"\u003C\u002F",[222,485,435],{"class":238},[222,487,449],{"class":234},[413,489,490],{"id":490},"ファイルサイズとページ速度",[196,492,493],{},"画像は圧縮や CDN の活用、キャッシュ設定などで最適化し、ページの表示速度が向上するよう努めてください。。",[495,496,497,505,511],"ul",{},[498,499,500,504],"li",{},[501,502,503],"strong",{},"画像圧縮",": 品質を保ちつつ最適化",[498,506,507,510],{},[501,508,509],{},"CDN 活用",": 配信速度の向上",[498,512,513,516],{},[501,514,515],{},"キャッシュ設定",": 適切なキャッシュヘッダーの設定",[518,519,520],"style",{},"html pre.shiki code .su8Ar, html code.shiki .su8Ar{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sF3G6, html code.shiki .sF3G6{--shiki-light:#22863A;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sAjK8, html code.shiki .sAjK8{--shiki-light:#6F42C1;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .ssQ5U, html code.shiki .ssQ5U{--shiki-light:#032F62;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .scigg, html code.shiki .scigg{--shiki-light:#032F62;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":218,"searchDepth":231,"depth":231,"links":522},[523,524],{"id":331,"depth":231,"text":331},{"id":407,"depth":231,"text":408,"children":525},[526,527],{"id":415,"depth":158,"text":415},{"id":490,"depth":158,"text":490},"loading属性、プリロード、構造化データによるパフォーマンスとSEO最適化","md",null,{},{"title":106,"description":528},"itk_vcO0sMg2LCsBw39CxZtzU0sV5WuCsfDkpsa9V5k",[535,537],{"title":124,"path":125,"stem":126,"description":536,"children":-1},"接頭辞ルール、ファイル名構成、レスポンシブ・連番対応の命名規則",{"title":131,"path":132,"stem":133,"description":538,"children":-1},"本ガイドラインで定義しているコードスタイルや品質管理基準に準拠した静的サイト制作用の Vite テンプレートと、WordPress ローカル開発環境テンプレートです。",1780099580002]