Web

Web制作

hero

コーディング規約


コーディング規約は会社やプロジェクトによって違うので、実装前に確認しておきましょう。

 

基本

 

 

デザインカンプ通りに実装出来ているか

 

 

Webサイトの動作やデザインの確認について

確認するOSやブラウザは事前に確認しておきましょう。

一般的に、

での確認が多いかと思います。

Microsoft EdgeやBraveというブラウザは、Chromeと同じChromiumエンジンを使用しているため、Chromeで確認することが多いです。

Firefoxなどは、ユーザー数が少ないので確認しないことが多いです。

 

 

Meta情報の設定

・title、descriptionを設定しましょう。

・faviconを設定しましょう。

titleやfaviconはブラウザのタブで使われますね。

また、titleやdescriptionは、Google検索でインデックスされたときに表示する内容に優先的に使われます。

※Googleが決めるので、意図通りにならないこともあります。

 

 

OGP (Open Graph Protocol) 

Facebookが開発したウェブページのメタデータ（情報）を標準化するためのプロトコルです。OGPを使用することで、ウェブページがソーシャルメディア上でどのように表示されるかを制御できます。

主に<head>内で以下のような要素を指定できます。

OGPを正しく設定することで、ページがソーシャルメディアで共有された際に、タイトル、画像、説明などが適切に表示され、ユーザーがそのページをクリックしやすくなります。

 

🔗参考：headに設定しておきたいHTMLメタデータやOGP、構造化データ

 

 

WordPressでog:urlを動的に指定

<meta property="og:url" content="<?php
    if (is_single()) {
        echo get_permalink();
    } elseif (is_page()) {
        echo get_permalink();
    } elseif (is_archive()) {
        echo home_url('news');
    } elseif (is_category()) {
        echo get_category_link(get_queried_object_id());
     } else {
        echo home_url();
    }
?>" />

 

 

WordPressでog:typeを動的に指定

<meta property="og:type" content="<?php 
    if(is_front_page()){
        echo 'website';
    }
    elseif(is_archive()){
        echo 'blog';
    }
    elseif(is_category()){
        echo 'blog';
    }
    else{
        echo 'article';
    }
?>" />

 

・is_front_page(): WordPressのトップページ（フロントページ）の場合、og:type を "website" として指定します。これは、トップページを「ウェブサイト全体」として扱うためです。

・is_archive(): アーカイブページ（投稿一覧や月別一覧など）の場合、og:type を "blog" として指定します。アーカイブページは通常、複数の記事を表示するため、ブログ全体として認識されるのが適切です。

・is_category(): カテゴリーページの場合も同様に、og:type を "blog" として指定します。カテゴリーページは特定のカテゴリに属する複数の記事を表示するため、ブログ的な役割を果たします。

・else: 上記の条件に該当しない場合、og:type を "article" として設定します。これは、単一の記事ページや個別のページに対して適切です。

 

 

OGPがきちんと設定されているか確認するツールもあります。

🔗OGP確認

 

 

SEOを強化する「canonical」タグ

<link rel="canonical"> タグは、検索エンジンにページの正規のURLを示すために使用されます。例えば、同じコンテンツが複数の異なるURLでアクセスできる場合、このタグを使って「正しい」URLを指定します。これにより、検索エンジンが同じ内容のページを重複してインデックスしないようにし、SEO（検索エンジン最適化）の向上を目指します。

 

また、WordPressで動的に変更する場合、

<link rel="canonical" href="<?php
    if (is_single()) {
        echo get_permalink();
    } elseif (is_page()) {
        echo get_permalink();
    } elseif (is_archive()) {
        echo home_url('news');
    } elseif (is_category()) {
        echo get_category_link(get_queried_object_id());
        }else {
        echo home_url();
    }
    ?>">

のように書けますね。

・is_single(): 単一の投稿ページの場合、その投稿のパーマリンク（get_permalink()）を正規URLとして表示。

・is_page(): 固定ページの場合、同じくパーマリンクを正規URLとして表示。

・is_archive(): アーカイブページ（投稿一覧など）の場合、home_url('news') が正規URLとして設定されます。これは、アーカイブページが news というURLを持っていることを示唆しています。

・is_category(): カテゴリーページの場合、get_category_link(get_queried_object_id()) で、そのカテゴリーページのURLを正規URLとして指定。

・else: その他のページ（トップページや404など）では、home_url() でサイトのホームページを正規URLとして表示。

 

 

構造化データ

構造化データとは、検索エンジンが理解しやすい形式でWebページの情報をマークアップする方法です。JSON-LD、Microdata、RDFaなどの形式がありますが、JSON-LDを覚えておくと良いでしょう。

🔗参考：headに設定しておきたいHTMLメタデータやOGP、構造化データ

 

構造化データは「リッチリザルト」にも欠かせないです。

リッチリザルトとは通常の検索結果よりも視覚的・操作的な機能が追加された検索結果です。

（例）FAQリッチリザルトと呼ばれるものです

FAQリッチリザルトは、FAQページにFAQPageスキーマを実装することで表示されることがあります。これにより、ユーザーがクリックする前に必要な情報をすぐに確認できるため、便利な検索体験を提供します。

 

（例）リッチカードまたはリッチリザルトの一種

この場合、レシピリッチリザルトとして表示されており、レシピに関する評価、調理時間、カロリーなどの追加情報が表示されています。これも構造化データ（Recipeスキーマ）を使って実装されたもので、ユーザーがレシピの詳細を視覚的に確認しやすくなっています。

 

🔗Google リッチリザルトテストツール

Googleが提供するツールで、Webページに実装されている構造化データが正しく実装され、リッチリザルトとして表示されるかどうかを確認できます。

 

 

マークアップ

・h1、h2、など適切なマークアップを行っているかコンテンツとして表記する画像にalt属性を記述しているか

・コンソールのエラーは消えているか

・リンク切れがないか（開発時のパスが残っていないかも確認）

・すべてのリンクにhover設定してあるか

・外部リンクのときは、離脱防止のため、target="_blank"を入れる。

・UTF-8の指定

・不要なインラインスタイルでの記述はしない

・エリア検索が想定される場合のaddressタグの利用

・timeタグ、date-time属性の利用

・ハンバーガーメニューやモーダルのオープン時に、背景は固定しているか

・不要なコメントは削除してあるか

 

適切なマークアップを行っているかどうか

W3Cの公式バリデーションツールで、HTMLやCSSのコードがW3CのWeb標準に準拠しているかどうかを確認できます。HTMLの構造に関するエラーや警告を表示してくれるので、基本的なHTMLやマークアップエラーをチェックするには便利です。

🔗 Markup Validation Service

 

エリア検索が想定される場合の<address>タグの利用

<address>タグは、Webページ内で連絡先情報を指定するために使用されます。特に住所や電話番号などの情報を表す際に適しています。エリア検索が想定される場合、適切に構造化された<address>タグを使うことで、検索エンジンがその住所情報をより理解しやすくなり、検索エンジンのローカル検索（エリア検索）においても有利になる可能性があります。

<address>
  株式会社サンプル<br>
  〒100-0001 東京都千代田区千代田1-1<br>
  電話: 03-1234-5678<br>
  メール: <a href="mailto:info@example.com">info@example.com</a>
</address>

 

<time>タグとdatetime属性の利用

<time>タグは、Webページに日付や時刻を示す要素を指定するために使います。datetime属性を用いることで、検索エンジンやブラウザがその時刻や日付を機械的に解釈できる形で提供できます。

<time datetime="2024-10-16">10月16日</time>

 

 

キーボード操作を意識したHTML/CSSコーディング

・キーボードで操作可能か、outlineは表示されている
・ハンバーガーメニューのボタンやメニュー内（モーダル）はキーボード操作可能か、モーダル外に移動しないか、escで解除できるか
・スライダーはキーボード操作可能か

🔗参考：キーボード操作を意識したHTML/CSSコーディング

 

 

英字の大文字の仕様確認

HTML文書内で、テキストは元の形で記述しておき、CSSで見た目をコントロールする方法を使うと、SEOやアクセシビリティが向上します。
例えば、text-transform: uppercase を使うことで、HTML上のテキストは自然な形のまま残り、検索エンジンやスクリーンリーダーでの認識に影響を与えません。

 

（例）uppercase: すべての文字を大文字に変換

.uppercase-example {
  text-transform: uppercase;
}

結果：contact　→　CONTACT

 

（例）capitalize: 各単語の最初の文字を大文字に変換

.capitalize-example {
  text-transform: capitalize;
}

結果：contact　→　Contact

 

なぜやるか？

SEO: 検索エンジンはテキストの意味を理解する際に、そのテキストが文法的に正しく書かれているかを考慮します。HTML内で自然な文法を保ちながら、大文字に変換する場合はCSSで処理することが最善です。

アクセシビリティ: スクリーンリーダーなどを使用するユーザーにとって、すべてのテキストがHTMLで大文字に書かれていると、読み上げる際に不自然に聞こえる場合があります。CSSを使って見た目だけを大文字にすることで、読み上げや理解が自然になります。

 

 

電話番号やメールアドレスのマークアップ

電話番号やメールアドレスの表記方法は仕様に合わせてマークアップするのがSEO・ユーザービリティの観点から重要です。
特に、スマートフォンなどのモバイルデバイスでは、電話番号やメールアドレスをタップするだけで直接電話やメールアプリが起動するようになります。

# TEL
<a href="tel:+81312345678">03-1234-5678</a>

# メール
<a href="mailto:info@example.com">info@example.com</a>

# メールの応用（メールの件名や本文を事前に設定することもできます）
<a href="mailto:info@example.com?subject=お問い合わせ&body=ご質問の詳細をお書きください。">info@example.com</a>

 

 

スムーズスクロール

scroll-behavior:smooth;を入れるだけで、スムーズスクロールできるので便利ですよね。

ユーザーがページ内リンクをクリックした際に、瞬時にジャンプするのではなく、滑らかなアニメーションでスクロールする動作でユーザー体験を向上させ、ページの流れを自然に感じさせる効果があります。

 

（注意）scroll-behavior: smooth;を使用すると、アンカーリンク（例: https://example.com/#content06）にアクセスした場合、ページが最初にFV（ファーストビュー、つまりページの上部）を表示し、その後にスムーズにスクロールが始まるという挙動になります。
これはユーザーにとって違和感を与える場合があり、特にリンクで直接アンカー部分にアクセスしたい場合には不適切に感じることがあります。

このような場合は、JavaScriptを使ったスムーズスクロールの実装が推奨されます。JavaScriptで制御すれば、ページが最初にトップを表示せず、スムーズにスクロールするタイミングを調整することが可能です。

 

 

アニメーションは仕様通りに実装してあるか

遅延しすぎたりすると良くないですね。FVのメインビジュアル画像がスクロールしないと表示されないとかよくないですね。

 

 

画像はコンテンツ（HTML）として、装飾（CSS）として、それぞれ適切にコーディングしてあるか

 

 

画像

・FV以外にはLoding="lazy"をかける
・サイズの大きい画像は圧縮する
・webpを使う
・Retina対応はしているか
・引用画像に対しては引用の表記をしている

 

loading="lazy" は、画像やiframe の読み込みにおいて、ページのパフォーマンスを向上させるための属性です。
この属性を使用することで、ページ内の画像やiframeをすべて一度に読み込むのではなく、ビューポート（画面に表示される領域）に近づいたときに初めて読み込む、いわゆる遅延読み込み（Lazy Loading）が実現されます。

 

🔽便利なツール

🔗画像の圧縮あっしゅくまさん

 

🔗画像をWebPに変換 サルワカ道具箱

 

🔗インストールして使う「XnConvert」

Webにアップロードして画像を変換するより、インストールして使う方がセキュリティ的にも良いかと思います。

XnConvertは、WindowsでもMacでもLinuxでも使えます。

 

Retina対応はしているか

「Retina対応」とは、主にAppleのデバイスで採用されているRetinaディスプレイに最適化された画像やデザインが実装されているか、ということです。

通常の解像度（たとえば72ppi）の画像をそのままRetinaディスプレイ上で表示すると、画素が拡大されるため、画像がぼやけて見えたり、詳細が失われたりすることがあります。
これを防ぐためには、より高解像度の画像を提供する必要があります。

🔗Retina対応がイマイチ分からない人向けの簡単ガイド【初心者Webデザイナー向け】

 

対応するかどうかは、案件によります。なぜなら、対応のための工数もかかってくるからです。
画像をみせるサイトだと、対応するのが良いでしょう。

 

以下は出し分けのやり方の例です。

 

srcset属性の使用

<img src="example.jpg" 
     srcset="example.jpg 1x, example@2x.jpg 2x" 
     alt="Example Image">

1x 2x　を指定している。

 

また、 srcsetは、画面サイズに基づく画像の出し分け（幅に応じた出し分け）にも使います。

<img 
  src="example-small.jpg" 
  srcset="example-small.jpg 300w, example-medium.jpg 600w, example-large.jpg 1200w"
  sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
  alt="Example image">

 

 

HTMLの中で特別な意味を持つためエスケープする文字

タグの記述として解釈されないようにする

< (→ &lt; )
> (→ &gt; )
& (→ &amp; )
" (→ &quot; )
' (→ &apos; )

 

 

ホバーアニメーション

タッチパネルデバイスではホバーアニメーションが無効になっているかどうか

🔗参考：hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します

 

 

HTMLにインラインスタイルでCSSを記載していない

HTML内にCSSを記述するのは避けて欲しいのですが、js,phpの実装の都合上仕方ない場合は除きます。
また、FVを早く表示させるなど、パフォーマンス改善のためのように理由があればOKです。

 

 

フォーム

・フォームの送信確認はできているか
・確認ページや確認モーダル、サンクスページがある場合はきちんと動作しているか
・フォームは適切にマークアップしているか、label、inputなど
・必須項目が未記入であったり、入力内容が適切でない（メールアドレスに漢字など）場合に、バリデーションが正しく動作しているか
・フォーム送信後、送信者と管理者宛にメール送信されているか、内容が適切か、迷惑メールになっていないか
・キーボードで操作できるか、radioやcheckbox、selectなど含む
・フォーム上にカーソルをのせた時にカーソルが変化しているか、テキスト、radio、checkbox、select、submit など

 

HTMLの標準仕様では、フォーム要素（radio, checkbox, select, submitなど）はキーボード操作に対応しています。特に、タブキー、エンターキー、スペースキーなどを使って、キーボードだけでフォームを操作することが可能です。

 

フォーム上にカーソルをのせたときのカーソルの変化も、きちんとinputを使っていれば、動作します。

 

 

レイアウトシフト対策

レイアウトシフト対策とは、ページが読み込まれる際に、要素が意図せず移動すること（レイアウトシフト）を防ぐための対策を指します。

レイアウトシフトは、特に画像や広告、フォントの読み込みによって発生し、ユーザーがページを読み進めている最中に突然要素が動くことで、操作ミスやストレスを引き起こす原因になります。

そのため「表示領域を確保する」ことが基本的な解決方法になります。

 

レイアウトシフトの主な原因

  1. 画像や動画のサイズが未指定 ページに配置された画像や動画が、読み込み完了前にサイズ情報がないため、ページレイアウトに影響を与えることがあります。
  2. 広告や動的コンテンツ 動的に生成される広告や外部のコンテンツが、ページ読み込み後に挿入されることでレイアウトがシフトすることがあります。
  3. カスタムフォントの遅延読み込み Webフォントが遅延して読み込まれ、その間にフォールバックフォントが表示され、フォントが読み込まれた後にテキストのサイズが変わり、レイアウトがシフトすることがあります。
  4. JavaScriptによる動的コンテンツの追加 JavaScriptを使って動的に追加されたコンテンツ（ボタンやメニューなど）が読み込み後にレイアウトをシフトさせることがあります。

 

レイアウトシフト対策の方法

特にページ上部に原因となるものを置くとおきやすいですね。ページ下部であれば、見てないうちに読み込まれたりするので。

 

・画像や動画のサイズを明示的に指定

<img src="example.jpg" width="600" height="400" alt="Example image">

や

img {
  aspect-ratio: 3 / 2; /* 幅3、高さ2の比率 */
}

など。

 

・広告スペースの予約

<div class="ad-slot" style="width: 300px; height: 250px;">
  <!-- 広告がここに挿入されます -->
</div>

 

・フォントのプリロード

<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

 

・ローディングを入れるなど

 

 

WordPress

・最新バージョンを使っているか（構築前にバージョンの確認）
・管理者ユーザー以外に投稿者ユーザーを用意す
・カスタムフィールド未入力時、PHPエラーが表示されていないか
・メディア内（uploads）に不要な画像はないか
・不要なプラグインは削除する
・WP投稿画像にもalt属性を設定しているか

 

 

ページの表示スピード

GoogleのPageSpeed Insightsでパフォーマンスのスコアを測定できる。

 

 

確認依頼

 

※パスワードを送るときは注意しよう

 

公開