coding guidelines

セマンティックなマークアップ

header・nav・section・articleなど、要素の意味に沿ったタグで構造を組んでいます。

見出しの階層

見出しの階層を意識し、ページの内容が分かりやすい構造にしています。

alt・aria属性

画像には内容が伝わるaltテキストを設定しています。sectionにはaria-labelを付け、開閉UIにはaria-expanded・aria-controlsを設定しています。

実装例：FAQアコーディオン

<div class="faq__item is-open">
  <button type="button" class="faq__question" id="faq-question-1"
    aria-expanded="true" aria-controls="faq-answer-1">…</button>
  <div class="faq__answer" id="faq-answer-1" role="region"
    aria-labelledby="faq-question-1">…</div>
</div>

実装例：FAQ構造化データ

FAQの質問と回答の配列から、表示するHTMLとJSON-LDの両方を生成しています。

foreach ( $faqs as $faq ) {
  $faq_schema_items[] = array(
    '@type'          => 'Question',
    'name'           => $faq['q'],
    'acceptedAnswer' => array( '@type' => 'Answer', 'text' => $faq['a'] ),
  );
}

SassとBEM

SCSSで記述し、クラス名はBEMで命名しています。

実装例：SCSSのフォルダ構成

scss/
├─ base/
├─ config/
├─ layout/
├─ object/
├─ project/
└─ style.scss

プロパティ順の統一

stylelint(stylelint-config-recess-order)でプロパティの並び順を統一しています。

ブレイクポイントの管理

ブレイクポイントはSassのmapにまとめ、mixinから呼び出しています。

実装例：ブレイクポイント

$bp: (
  "sp": "screen and (max-width: 768px)",
  "tb": "screen and (max-width: 1024px)",
  "pc": "screen and (min-width: 1025px)",
);

@mixin mq($breakpoint: sp) {
  @media #{map-get($bp, $breakpoint)} {
    @content;
  }
}

画面幅と実機の確認

ブラウザの開発者ツールで320〜1920pxの画面幅を細かく確認し、スマートフォンはiPhone 16eとiPhone SE（第3世代）の実機でも確認しています。

カンプとの比較

ピクセルパーフェクトの拡張機能で、カンプと実装画面を重ねて細かな違いまで確認しています。医療の現場で10年以上続けてきた確認作業の習慣を、この確認にも生かしています。

使用しているライブラリ

jQueryを使用しています。アニメーションにはGSAPを使用しています。

実装例：ハンバーガーメニュー

閉じている間のドロワーはinertでフォーカス対象から外し、Escキーで閉じてハンバーガーにフォーカスを戻します。

$('#js-drawer').attr('aria-hidden', 'true').prop('inert', true).removeClass('is-open');

$(document).on('keydown', function (e) {
  if (e.key !== 'Escape') return;
  if ($('#js-hamburger').attr('aria-expanded') !== 'true') return;
  closeDrawer();
  $('#js-hamburger').trigger('focus');
});

固定ページとカスタム投稿の使い分け

更新が続くコンテンツはカスタム投稿タイプにし、固定ページと使い分けています。

register_post_type( 'works', array(
  'public'      => true,
  'has_archive' => false,
  'rewrite'     => array( 'slug' => 'works' ),
  'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt', 'page-attributes' ),
  'show_in_rest' => true,
) );

管理画面から更新できる範囲の実装

カスタムフィールドを使い、管理画面から編集できる項目を決めて、更新する方が使いやすい形にしています。公開後の修正や保守のご相談にも対応します。

実装例：作品の入力欄（管理画面）

作品ごとに担当範囲・使用技術などを管理画面から入力でき、入力した内容は一覧と個別ページに表示されます。

見出し構造

h1は1ページに1つにし、h2・h3と順番どおりの階層で組んでいます。見出しだけを読んでも、ページの内容が分かる構造にしています。

AI検索を意識した情報の整理

見出しの直下に結論を書き、料金やサービス内容はテキストで記載しています。検索エンジンにもAI検索にも読み取りやすい形にしています。

表示速度の確認

サイトの表示速度を確認し、画像のWebP化や遅延読み込み、Webフォントの軽量化などを行っています。

ページ情報

ページごとにtitleとmeta descriptionを設定しています。

テーマの編集

ShopifyのテーマをLiquidで編集し、デザインカンプに合わせて調整します。

セクションの設定

セクションのスキーマを設定し、管理画面から内容を編集できるようにします。

商品ページの作成

商品ページのレイアウトや表示項目を、デザインに合わせて実装します。