# 制作ガイドライン ## 策定の目的 **［1］制作の効率化** **［2］クオリティの均一化** ## 制作における行動指針 ### 1. 良質なコンテンツを作成します ![](https://i.imgur.com/xfOHofT.png) ### 2. 内部SEO対策を行います （1. 良質なコンテンツを検索エンジンに適切に評価してもらうための施策と定義します） ![](https://i.imgur.com/bxv2QYS.png) [ウェブマスター向けガイドライン（品質に関するガイドライン）](https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines?hl=ja) --- ### 2-1.内部SEO対策｜制作チームの責任領域 #### ページエクスペリエンス 〜Google検索結果への影響〜 ページエクスペリエンスとは、**情報そのものの価値以外**に関するエクスペリエンス（使用する際の印象や体験）の指標となるもののセットです。 以下の図の通り、ページエクスペリエンスはいくつかに分類されますが、 赤枠部分が制作チームが主体となって取り組むべきものです。 ![](https://i.imgur.com/gYUatHi.png) https://developers.google.com/search/docs/guides/page-experience?hl=ja ### ■ウェブに関する主な指標 **ウェブに関する主な指標(Core Web Vitals)** は **2021年5月から検索順位用のページ評価対象** に加えられます。 既存のページを改善しようとしたとき、簡単な改修で済むものもあれば、CSSやJSに根深い原因がある場合のものまで原因は様々で、調査、対策案の立案、実施から検証まで試行錯誤を粘り強く繰り返す必要があります。 そこで、新規ページや小さな改修を行う際にははじめからこの点に留意して制作するよう心がけていただけますようお願いいたします。 NKOHwebでもどんな手法が有効なのかは模索中のため、指標として明示できる具体的な数字は少ないこと、ご了承ください。 ### ■モバイル フレンドリー - PC、モバイル問わず、ユーザーが使用しているあらゆるデバイスに対して同一のコンテンツを提供・発信することを目的とし **レスポンシブWebデザイン** を採用します。 --- ## 制作ガイドラインの基本 **ベストプラクティスはGoogleより学びます** - HTML/CSSの基本方針は[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) に準拠します。 - JSの基本方針は[Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)に準拠します。 --- 目次 - [レスポンシブWebデザインの実現にあたり](#レスポンシブWebデザインの実現にあたり) - [ビューポート](#基本設定｜ビューポート) - [ブレークポイント](#基本設定｜ブレークポイント) - [コンテンツの最大幅](#基本設定｜コンテンツの最大幅) - [背景について](#基本設定｜背景について) - [フォント規定](#基本設定｜フォント規定) - [コーディングガイドライン](#コーディングガイドライン) - [共通基本ルール](#共通基本ルール) - [HTML](#HTML) - [CSS](#CSS) - [JS](#JS) - [画像](#画像) - [テキスト](#テキスト) - [動画](#動画) - PDF（必要に応じてご共有） - [head内に入れるべきもの](#head内に入れるべきもの) - [チェック依頼をする前に…](https://) - [その他サイトや目的別の固有ルール（別ページリンク集）](#その他サイトや目的別の固有ルール（別ページリンク集）) - [参考リンク集](#参考リンク集) ## レスポンシブWebデザインの実現にあたり - レスポンシブの基本方針は[Google レスポンシブウェブデザインの基本](https://web.dev/responsive-web-design-basics/) に準拠します。 - レスポンシブデザインはアクセシビリティの面でもメリットがあります。できる限りの対応を目指しましょう。 [アクセシブルなレスポンシブデザイン](https://web.dev/responsive-web-design-basics/) ### レスポンシブ留意事項 - 特定の画面サイズで不要な横スクロールバーがでることは禁止です。 - 特定の画面サイズで表示が崩れていることがないようにしてください。 ### 基本設定｜ビューポート ``` <!DOCTYPE html> <html lang="en"> <head> … <meta name="viewport" content="width=device-width, initial-scale=1"> … </head> … ``` ### 基本設定｜ブレークポイント 1つのメジャーブレークポイント基準値として**768px**を設定しています。 ただし、前述の[Google レスポンシブウェブデザインの基本](https://web.dev/responsive-web-design-basics/#breakpoints) では以下のように述べられています。 > ブレークポイントの選び方 >> デバイスの種類に基づいてブレイクポイントを定義することは推奨されていません。 > 現在使用されている特定のデバイス、製品、ブランド名、オペレーティングシステムに基づいてブレイクポイントを定義すると、メンテナンスに悪夢を見ることになりかねません。 > 最善の方法は、そのコンテナに合わせてコンテンツレイアウトをどう調整するかを決めるべきです。 しかしながら実際は、基準なしに決定するのは非常に難しいため、基準として「768px」を設けています。 これよりその他のブレークポイントの決め方として、2つの指針を紹介しますが、 いずれのパターンも制作前にチームで相談、仕様を細部まで詰めておくようにしてください。 （望ましいのはデザイン時からコーダーともすり合わせを行うこと） **［1］ メジャーなブレイクポイントにあわせる** 520px,640px,768px,960px,980px あたりがあります。ただしメジャーな値は時代とともに変化するため、やはりコンテンツに応じて検討が必要です。 また、コンテンツ特性、デザインによってはマイナーブレークポイントを設けることも検討してください。 **［2］ 使用するCSSフレームワークの仕様にあわせる** BootstrapなどのCSSフレームワークを使用する場合は、すでにブレークポイントの選択肢が決まっているので、その中から選びます。 ただし、CSSフレームワークを使って制作する場合はデザインデータもその幅で作成することが必要です。 #### 推奨記述方法 ``` @media screen and (min-width: 768px) { /* 768px以上の範囲に収めるデザインはこの中に記述 */ } ``` Googleモバイルファーストでは、最大を示す`max-width`でななく、最少の`min-width`を推奨していることからmin記述を優先します。 https://web.dev/responsive-web-design-basics/#viewport ただし、2021年3月現在、カバヤ食品、オハヨー乳業などの共通CSSは`max-width`で指定されていますので、2021年3月以降に制作する個別ページについては、`min-width`を優先するという方針とします。 ※max-widthを使ってはいけない、ということではなく、小さな画面のレイアウトを最適化することから始め、可能な限り少ない数でのブレークポイントにしたい、という意図です。 一方、既存ページ専用CSSですでに`max-width`が使われている場合は、CSS起因のトラブル発生のリスクを低減できるようページ内での統一を優先し`max-width`を採用するなど、ケース・バイ・ケースでの対応をお願いします。 ### コンテンツの最小幅 | ドメイン | 最小幅目安 | | -------- | -------- | | ALL | 360px| ※2024年2月現在 ### 基本設定｜コンテンツの最大幅 最大幅は目安です。 コンテンツ特性に応じて検討してください。 | ドメイン | 最大幅目安 | | -------- | -------- | | カバヤ食品 | 1040px| | オハヨー乳業 | 1040px | | ロイテリブランドサイト | 1170px| ### 基本設定｜背景について コーディングにあったっては、W 1920pxを超えた場合の幅も背景が切れることがないように調整をお願いします。その場合、W 1920pxを超えた際の実装がどうなるべきかを考慮したうえでデザインとコーディングのすり合わせをお願いします。 ### 基本設定｜フォント規定 標準サイズ： 16px 最小サイズ： 14px（注釈テキストなどで使用。本文は16px以上としてください） 単位推奨：相対単位（em） 柔軟なグリッドを最大限に活用するため、ピクセル値の代わりに、テキストサイズなどはemやremなど、相対単位を使用することを推奨。 [他テキストについての推奨事項はこちらを参照ください](#テキスト) --- ## コーディングガイドライン ## 共通基本ルール | DOCTYPE | 文字コード | 改行コード | | ------- |:----------------:| ---------- | | HTML5 | UTF-8（BOMなし） | LF | ### 改行とインデント - ブロック要素の終了タグのあとなど、ソースの改行は適宜行う - body内の要素には構造にあわせてインデントを施し、視認性の高いソースコードを実現する - インデントは**スペース2つ**とする ### パスの記述 - 基準とするページと同じ階層にディレクトリが存在する場合は相対パスとする（例： img/画像ファイル名） - ディレクトリが2階層以上さかのぼるときはルートパス指定とする（相対パスで../となるものはルートパス） ### 要素名・属性名 要素名および属性名は、すべて小文字で記述します。 例） ``` OK： <a href="">、 ＃e5e5e5; NG: <A HREF="">、 ＃E5E5E5; ``` ### コメントルール ソース内容やコードブロックの範囲を把握しやすくするため、classやidが付与されているブロック閉じタグのあとに、コメントを適宜挿入します。 コメントは`/.className`で記述してください。 ソースの視認性を上げ、人的ミスの発生を軽減することを目的にしています。 例） ``` <div class="contents"> ︙ ︙ </div><!-- /.contents --> ``` ### ファイルについて - CSS、JSなどは同一ページに直接記述せず、外部ファイル化してください。 - リリースファイルはできるだけひとつにまとめてください。 ### ディレクトリについて サイトによって基本構成は異なります。基本的には指定のディレクトリ配下以外は触らないようお願いします。 :link: [カバヤ食品、オハヨー乳業のページを制作いただく場合はこちらもご参照ください](https://hackmd.io/@nkohweb-fm/Bk-ycoam_) ### 各要素の対応状況に配慮する 使用しようとしているHTMLやCSS、JS、画像や動画などの技術が動作保証環境に対応しているか確認のうえ使用してください。 :link: [弊グループ共通動作保証環境](https://web.kabaya-ohayo.com/outsourcing/#20209) --- ## HTML - HTMLの基本方針は[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html#HTML) に準拠します。 - HTML5の基盤についてはWHATWGの[HTML Living Standard](https://momdo.github.io/html/)に準拠します。※1 ### 文書内容に適したマークアップを行う ページの内容を理解したうえで、要素や属性を本来の意味や仕様で示される用法に則って選択し、文章を構成しましょう。 ### 文章を構文として正しいものに バリデーションツールを用いてチェック、エラーのないようにしてください。 :link: https://validator.w3.org/nu/ ### h1要素の用法を明確に 可能な限りページ固有のタイトルにあたるテキスト、もしくはimg要素に対して使用してください。 ### section要素とdivの使い分けを守る 文書の論理構造にあわせて適宜section要素でマークアップすることで、明示的に情報（意味や機能）のまとまりと階層を示します。 section要素内の最初には、セクション内容を示す見出し要素（hｘ）が必要です。 レイアウト目的のみでsection要素を使用してはいけません。 レイアウトを区切りたい場合はdiv要素を使用してください。 ### img要素について - メインイメージ、単独で内容を説明している画像、文書を補完する画像などはimg要素として配置します。（CSS背景で指定しない） またalt属性は適切に設定してください。 :link:[alt属性についてのルール（別ページ）](https://hackmd.io/u3CczVEMQUa0RpMSCZIiwA?view) - <font color="tomato">ラスター画像を読み込む場合、WebP形式も用意、picture要素を用いて記述することを推奨します。 #### 読み込み記述方法の例 ``` <picture> <source type="image/webp" srcset="画像パス/ファイル名.webp"> <img src="画像パス/ファイル名.png or jpg" alt=""> </picture> ``` </font> ### リンクについて 外部リンクとPDFに関しては別タブで開くよう```target= _blank```を使用するようにしてください。 ### HTML禁止事項 - 改行でレイアウトの調整を行わないでください。 NG例）`<br>`を複数連続したマークアップ ``` (3)注意事項<br> ・登録情報に虚偽がある場合、当社が不正と判断した場合は応募自体が無効となります。<br> ・ご応募の際の通信費等、付随する費用の一切は、全てお客様のご負担となります。<br> ・応募フォーム以外からのご応募はできません。<br> ``` - 空タグの末尾にスラッシュはつけないでください。`<br />`など。 - 閉じタグは省略しないでください。 - 不要なスペースは入れないでください。 - ソースコード内に内容が伝わるメモは書かないでください。注意等ある場合は別途ドキュメントを作成してそちらにまとめてください。 - 非表示のためのコメントアウトは行わないでください。（脆弱性、無駄タグを増やす行為につながるため） - HTMLに直接Styleを記述することは避けてください。JSで必要、付与されるなどは問題ありません --- ## CSS CSSの基本方針は[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) に準拠します。 ### 心得 #### ［1］ HTMLの修正をせずにデザインの修正ができるようにすること 可能な限り変更への柔軟性をもたせるようにしてください。 例） 位置や色ではなく、役割や意味を表す識別子をつける など ``` NG: .contents_left、txt_red → デザインの修正で場所が入れ替わったとき、class名とHTMLの変更が発生。 OK: .contents_main、txt_strong → デザインの修正で場所が入れ替わっても、そのまま使用することが可能。（※意味がかわらない場合に限る） ``` #### ［2］誰がみてもわかりやすいものであること 誰がみてもそれとわかる一般的な名前であることが好ましく、より多くの人が、その単語からパーツを連想できるよう心がけてみてください。 例） ``` ◯: main-visual △: mv,main（ミュージックビデオ？ マックスバリュー？ なんのメイン？） ◯: inner △: inr,innr（インドルピー？ ここまで書くならinnerでよいのでは？） ◯: button △: btn,bt（ブータン？ ズボン？） ``` --- ### ファイル 読み込むCSSファイルそのものをデバイスによって変えるのではなく、読み込むstyleをデバイスによって変えるようにします。（ファイルはひとつに） ### id、class命名ルール CSS設計規則の指定は設けておりません。 ただし、メンテナンス性が高く、再利用性があることなど、長く運用していくなかで作業コストをできるだけ低減できるような命名規則としていただけますようお願いいたします。 新規ページ作成や大きなコンテンツ追加をご担当いただく際は、ベースとなる設計思想をコードレビューの際にご教示ください。 例）BEM記法やFLOCSS記法、独自のルールがある場合はその概要など **装飾目的でのid利用は禁止しています。装飾で使用する場合はclass指定でお願いします。** ### 識別子のフォーマット 基本的にはアンダースコア`_`を区切記号として単語をつなげる「スネークケース」を推奨。 単語同士の結びつきを示したり、接頭辞、接尾辞がつくなど、読みやすさをもたせるときはハイフン`-`でつなぐ。 ただし、一定の法則性をもっていれば、どの記法でも問題はないため、ケースバイケースで使い分けてください。 ### CSS推奨事項 - buttonなど、スタイルで再現できるものは画像ではなく、できるだけCSSで記述してください。（パフォーマンス対策の一環として） - ネガティブマージンはできるだけ使わないでください。（多用するとマージン計算が複雑になり、デザイン崩れの原因にもなりやすいため。ブラウザごとの挙動を把握して使えているのであれば問題ありません。） - floatは原則使わず、flex-boxなどで対応してください。 ### CSS禁止事項 - 装飾目的でのid利用は禁止しています。装飾で使用する場合はclassを使用してください。 :link: [NKOHナレッジ集](https://hackmd.io/@nkohweb-fm/HkUvhppmu) ### Sassについて - Sassを使用する場合は「SCSS」記法としてください。 - SCSSのコメントアウトは、スラッシュ2回にし、コンパイル時に出力されないようにしてください。 - Sassのimportファイルはどのセクションのスタイルかわかるようにしてください。（セクションの順番が変わっても支障のないよう、場所と名前を繋ぎます） 例：`soy-arrangeMenu`クラスなら`_arrangeMenu.scss` ※ サイトやページによって導入状況が異なります。導入状況は ファイル配置場所よりご確認いただけます。 :link:[ファイル配置場所についてはこちらをご参照ください。](https://hackmd.io/MZDZKd0XTfmGUuTI4apI2A?view#%E4%BD%9C%E6%A5%AD%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6) --- ## JS JSの基本方針は[GoogleJavaScriptスタイルガイド](https://google.github.io/styleguide/jsguide.html)に準拠します。 ### 記述場所 原則、外部ファイル化してください。 ### 不要なコードの削除 使用していない関数や変数、デバッグで使用したコンソールログなどは削除してください。 ### 命名規則 変数名や関数名に関して、特に決まった規則はないですが、 - 明確な単語 - 汎用的な名前を避ける - 抽象的ではなく具体的な名前 - 長すぎる名前は避ける 以上の点に注意して命名するようにしてください。 ### 変数 基本はconstを使用し、再代入が必要な場合はletを使用するようにしてください。 ### コメント コメントは簡潔に書き、関数の動作を説明する場合は正確に説明するようにしてください。 ### 条件分岐 条件式を使用する場合、条件の並び順は - 否定系よりも肯定系を使用する - 単純な条件を先に書く - 目立つ条件を先に書く などを意識して決定するようにしてください。 また、ネストは深くならないようにしてください。 ### JS禁止事項 - マジックナンバーは使用せず、適切な名前をつけて定数化するようにしてください。 - GTMでクリックされた要素の情報を取得しているので、リンククリックイベントのバブリングを止めるような記述をしないでください。 --- ## :camera:画像 - 画像の取り扱いについては[Google web.dev #画像を最適化する](https://web.dev/fast/#i18n.paths.fast.topics.optimize_your_images)にて提供されている基本的な考え方に従い、できる限り画像を最適化し、容量の削減とパフォーマンスの改善に努めることとします。 - 特定の圧縮ツールと画像コンテンツの組み合わせに応じて、固有の出力を行ってください。 - <font color="tomato">ラスター画像においては、WebP形式と従来の形式（JPEGやPNG）の両方を用意することを推奨します。</font> ### 画像全般における推奨事項 - 1ページあたりの容量は **合計1.6MB以内** を目指します。 出典：https://web.dev/total-byte-weight/?utm_source=lighthouse&utm_medium=unknown#how-to-reduce-payload-size - 影やグラデーションなどはCSS効果を使用する （解像度に依存しない、画像ファイルに必要なバイト数の何分の1かに抑えられる） - 画像テキストを控える 画像テキストの使用についてはよく検討してください。優れたタイポグラフィは、ブランディング、読みやすさにとっては重要ですが、ユーザーエクスペリエンスを低下させます。 （選択、検索、ズーム、アクセスができず、高DPIデバイスに適していない） 画像テキスト以外の方法で魅力的に表現する方法がないかチームで検討してください。 ### ラスター画像形式の選択基準 <font color="tomato">【WebP】 **JPGやPNGを使用する場合はあわせてWebPも用意してください。** WebPはGoogleが開発した、画質を維持しつつファイル圧縮率を高める事ができる新世代の画像フォーマットです。 WebP画像は、JPEGおよびPNGの画像よりも小さく、通常、ファイルサイズが25〜35％減少します。これにより、ページサイズが小さくなり、パフォーマンスが向上します。 2021年4月現在、Adobe Photoshop等ではWebP形式での書き出しは標準サポートされていないため、別途プラグインを導入いただくか、Webツールでの変換が必要です。 オンラインツール：https://squoosh.app/ WebPShop（Photoshopプラグイン）：https://github.com/webmproject/WebPShop [Google Developers：WebPについて](https://developers.google.com/speed/webp) </font> 【JPG】 明確な理由がない限り形式は`.jpg`を推奨します。 ◯.jpg △.jpeg 【GIF】 グラデーションには使用しないでください。 【PNG】 表現したい色数が少ない場合はGIF形式と比較、劣化がないようであれば、GIF形式を採用してください。（容量削減のため） ### ベクター画像（SVG） ベクター画像は解像度に依存しないため、使用が可能な場合はよい選択となります。 一方で、複雑なパスや効果が多く含まれていたり、古いバージョンで書き出すと、不要な情報も多くなり結果的に容量を圧迫してしまう可能性もあります。 使用については最新の知識をもって扱うようにしてください。 [MDN：SVG: Scalable Vector Graphics ドキュメント](https://developer.mozilla.org/ja/docs/Web/SVG) #### SVG推奨事項 - [最適化ツール](https://www.sarasoueidan.com/blog/svgo-tools/)などを活用し、サイズの削減に努めてください。 - 形式は1.0で書き出ししてください。（新しいバージョンでは正常に読み込まない場合がある） ## :pencil2:テキスト 日常で最も多い情報メディアは「文字」です。 文字を並べると「文章」になります。 「文字」の並べ方によって読みやすさ（可読性）に大きな影響を与えることを理解し最適化に努めることとします。 - 文字サイズは16px〜24pxを目安としてください。注釈など最小サイズは14pxが目安です。 - 行間（line-height）は150〜200%を目安としてください。（1.5em~2em） - 字詰（letter-spacing）は指定はなしで問題ありません。（指定初期値：normal（0））。ただし長文などは0.05em〜0.1em を設定したほうが読みやすい場合もあります。チームで相談、より良いものを目指してみてください。 - タイトル文字、見出しなどWebfontを使用してもよい場合は使用してください。 - WebFontを使用する場合は[WebFontサイズ最適化チェックリスト](https://web.dev/reduce-webfont-size/#webfont-size-optimization-checklist)に沿ってチェックを行ってください。 ※ AdobeFont、モリサワフォントであれば弊社アカウントでの契約があるのでご利用いただけます。ご利用の際は弊社担当までお申し付けください。 - デザイン性が優先されるタイトル文字、見出しなどWebfontを使えない場合は、基本SVGを使用してください。 ### テキスト推奨事項 - 単位は**相対単位**を使用する ピクセル値の代わりに、テキストサイズなどにemやremなどの相対単位を使用します。 - **テキストコンテンツの幅は640px** 前後を目安に Web Content Accessibility Guidelines (WCAG) 2.0では文章の幅が半角文字80字、40字を越えないことが推奨されています。これは、16pxの全角文字の場合、おおよそ640pxになります。 このサイズを超えた場合、ユーザーはコンテンツを見るために視線を大きく動かす必要が出てきてしまうようです。 ## :movie_camera: 動画 - 動画は「.webm」と「.mp4」の2つを用意、軽いほうから読み込ませてください。 - ページ表示時に、音声付き動画を自動再生することはお控えください。（モダンブラウザでは音声付き動画の自動再生を制限しています。） どうしても自動再生が必要な場合は、音声をミュートした状態で自動再生するよう設定すること、また画質の良いGIFアニメも用意してください。 - Youtubeの動画埋め込みを禁止します。弊社以外の関連動画や広告表示を防止するためです。 ### エンコード内容 - ビットレートは容量と画質の兼ね合いを見て、たとえ軽量でも著しく画質が劣化することのないように設定してください。 - サイズ目安：**15秒で5〜9MB以内** | .webm | 設定 | | ------ | ------ | | コーデック | VP9 | | サイズ | 720p | | フレームレート | 24fps | | オーディオコーデック | Opus | | サンプルレート | 48000hz | | チャンネル | ステレオ | | オーディオビットレート | 128kbps | | .mp4 | 設定 | | ------ | ------ | | コーデック | H.264 | | サイズ | 720p | | フレームレート | 24fps | | ビットレート | 5~10Mbps | | オーディオコーデック | AAC | | サンプルレート | 48000hz | | チャンネル | ステレオ | | オーディオビットレート | 320kbps | --- ## PDF 別途ルールを設けております。 必要に応じてご共有しますので、お申し付けください。 --- ## head内に入れるべきもの ### Title / Description ### OGP - 画像サイズ： 1200 x 630 px - 容量: 5MB 未満 - サービスによっては、正方形で自動トリミングされるため主要なコンテンツは630 x 630pxの範囲内に収めてください。 ### favicon **■関連サイズ一覧** |ファイル名|サイズ| | -------- | -------- | | favicon.ico| 48px*48px | | favicon-16×16.png | 16px*16px | | favicon-32×32.png | 32px*32px | | apple-touch-icon.png | 180px*180px | | android-chrome-192×192.png| 192px*192px | 見え方の確認、ジェネレーターはこちら↓ https://realfavicongenerator.net/ 500 x 500pxなど大きめで元画像を作成し、一括で変換すると楽です。 ### 推奨記述方法はこちら ``` 準備中… ``` --- ## チェック依頼をする前に… - HTML/CSSはバリデーションツールを用いてチェック、エラーはありませんか？ :link: [HTML/CSSチェッカー](https://validator.w3.org/nu/) - JSは開発者ツールを用いてチェック、エラーはありませんか？ - インデントの整理は済んでますか？（拡張機能を用いて一括整理することも可能です） --- ### 脚注 #### ※1 HTML5の基盤についてはWHATWGの[HTML Living Standard](https://momdo.github.io/html/)に準拠します。 とはいえ「HTML Living Standard」は日々更新し続けられています。 また、各ブラウザもすぐに対応しているわけではないため、全てを追って最新のものを採用というのは現実的ではありません。 基本的にはHTML5で加わった新たな要素などを適切に使っていただければ問題ありません。 --- ## その他サイトや目的別の固有ルール（別ページ） - [NKOH独自ルールブック｜作業の前に知っておいてほしいこと（カバヤ食品/オハヨー乳業共通）](https://hackmd.io/@nkohweb-fm/Bk-ycoam_) - [NKOH独自ルールブック｜動画コンテンツにおける実装方法](https://hackmd.io/MZDZKd0XTfmGUuTI4apI2A?view#%E5%8B%95%E7%94%BB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95) - [NKOH独自ルールブック｜アクセス解析のための実装留意点](https://hackmd.io/MZDZKd0XTfmGUuTI4apI2A?view#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E8%A7%A3%E6%9E%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E5%AE%9F%E8%A3%85%E7%95%99%E6%84%8F%E7%82%B9) - [NKOH独自ルールブック｜各サイトごとの制約事項](https://hackmd.io/MZDZKd0XTfmGUuTI4apI2A?view#%E5%88%B6%E7%B4%84%E4%BA%8B%E9%A0%85) - [alt属性についての基本方針](https://hackmd.io/u3CczVEMQUa0RpMSCZIiwA?view) - [NKOHwebナレッジ集](https://hackmd.io/@nkohweb-fm/HkUvhppmu) --- ## 参考リンク ### 技術対応状況確認サイト [Can I Use...](https://caniuse.com/) [MOBILE HTML5](http://mobilehtml5.org/) ### 各ブラウザ公式サイト [Chrome Platform Status](https://www.chromestatus.com/features) [mozilla ウェブ技術のリファレンス](https://developer.mozilla.org/ja/docs/Web) [Microsoft Edge 最先端の情報](https://www.microsoftedgeinsider.com/ja-jp/whats-new) [Apple Developer Safari Resources](https://developer.apple.com/safari/resources/) ### 仕様書 [WHATWG Living Standard 日本語訳サイト](https://momdo.github.io/html/) [ W3C CSS仕様書](https://www.w3.org/TR/?tag=css#w3c_all) [javascript-style-guide](https://mitsuruog.github.io/javascript-style-guide/) ### チェッカー [Nu Html Checker](https://validator.w3.org/nu/) ※ご使用のエディタの拡張機能などとの併用をお勧めします。 ### その他Google情報 [Google: 検索エンジン最適化（SEO）スターターガイド](https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ja) [Google: 開発者向けの最新ニュース、アップデート情報](https://web.dev/) [Google: サイトのパフォーマンスを向上させるためのテクニック](https://web.dev/fast/#optimize-your-images) [Google: レスポンシブ ウェブデザイン パターン](https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=ja) ### 制作便利ツール #### チートシート、ジェネレータ、シュミレータなど [半角・全角スペース、空行、改行の自動削除機](https://tarot-plot.com/special/space) [HTML5 入れ子チートシート](https://yoshikawaweb.com/element/) [レススポンシブグリッドデザイナー](https://responsive-grid-designer.netlify.app/) [計算が苦手な文系のためのコーディング単位計算ツール](https://お道具箱.com/calc/) [アスペクト比計算機](https://aspectratiocalculator.com/16-9.html) [アスペクト比を維持したCSS生成](https://ratiobuddy.com/) [画像軽量化｜Tinypng（一括調整におすすめ）](https://tinypng.com/) [画像軽量化（個別調整におすすめ）｜Google Chrome Lab: Squoosh](https://squoosh.app/index.html) [SVG画像最適化｜Useful SVGO ptimization Tools](https://www.sarasoueidan.com/blog/svgo-tools/) [ファビコン生成](https://realfavicongenerator.net/) [OGP画像シミュレータ](https://realfavicongenerator.net/)