超セマンティックな HTML から、エンティティ SEO や E-E-A-T まで。協会のサイトを、中身から作り直しました。
公益社団法人 日本グラフィックデザイン協会（JAGDA）の福岡県の地区組織、JAGDA福岡地区の公式 Web サイトは、2023 年に私が制作し、その後の運営も担当しています。
2026 年 11 月、このサイトを Ver2.0 にアップデートしました。見た目と動きはこれまでのまま、WordPress を最新のバージョンに上げ、HTML・CSS・JavaScript を一から書き直しました。
とくに力を入れたのは、超セマンティックなマークアップ、アクセシビリティ、エンティティ SEO、E-E-A-T、コーナーストーンコンテンツ、そして AI に向けた LLMO です。この記事では、それぞれで何をしたのかを紹介します。
きっかけは、PHP の安全への対応でした。
2026 年 10 月、サイトを動かしている PHP（サーバーで動くプログラムの言語）に、重大な脆弱性が公表されました。PHP を新しいバージョンに上げるには、WordPress とプラグインもあわせて更新しなければなりません。
せっかくの機会なので、安全だけでなく、表示の速さ、使いやすさ、検索への対策まで、サイト全体を見直すことにしました。改修は 11 のカテゴリー、70 項目にのぼり、報告書にまとめて本部へ伝えています。
div をほとんど使わない、超セマンティックな HTML に書き直しました。
書き直すときに決めたのは、「div は原則使わない」「class は 1 つの要素に 1 語まで」「開いているかどうかは aria 属性で表す」の 3 つです。その結果、トップページで使っている div は 6 個だけ。class に使った単語は 102 個、読み込むファイルは JavaScript が 10 本、CSS が 2 本です。
タグは、見た目ではなく意味で選びました。名前を並べた一覧はリスト（ul・li）で、幹事の一覧のように「役職」と「名前」が対になる情報は説明リスト（dl・dt・dd）で書いています。名前の間の「/」も文字では入れず、CSS で表示しています。表には読み上げ用の表題（caption）を付け、メニューや共有の操作には button 要素を使いました。
section・article・aside には、どれも aria-labelledby で中の見出しを名前として結び付けています。パンくずリストは、nav 要素とラベル、順番のあるリスト（ol）、今いるページを示す aria-current で組みました。W3C の HTML の検査（Nu Html Checker）にかけると、テーマが書き出す部分は、全 62 ページで誤りも注意も 0 件でした。
WEB事業のページには、マウスの周りの円の中だけ、そのページの HTML・CSS・構造化データが透けて見える演出を入れました。「裏側を覗く」を押すと画面全体が裏側に切り替わり、文書のアウトラインも見られます。サイト全体の見た目と動きはこれまでのままで、新旧のすべてのページを 11 の画面の幅とナイトモードで撮り比べ、違いが無いことを確かめています。
WCAG と JIS X 8341-3 を基準に、アクセシビリティを整えました。
2024 年 4 月に施行された改正障害者差別解消法で、民間の事業者にも、障害のある方への合理的配慮の提供が義務になりました。Web サイトのアクセシビリティは、その前提になる「環境の整備」にあたります。基準は、日本では JIS X 8341-3、国際的には WCAG です。グラフィックデザインの職能団体のサイトだからこそ、情報をすべての人に届けることまでをデザインと考えました。
全ページで見出しの順番を整え、一番大きな見出しは 1 ページに 1 つにしました。画像 112 枚には内容を説明する代替テキストを入れ、スマホでは指で広げて拡大できるようにしています。読み上げソフトでランドマークの一覧を開くと、「よくある質問」「会員の種類と年会費」のような名前が並び、目的の場所へ直接移れます。
メニューやサイドパネルを開くと、キーボードのフォーカスが中へ移り、閉じると元のボタンに戻ります。フォーカスの枠は、キーボードで操作したときだけ出て、マウスで押したときには出ません。サイト内検索は 2 文字から候補が出て、全角と半角のスペースの違いを気にせず探せます。
ナイトモードを付け、どの画面でも読みやすい色にしました。
ヘッダーのボタンで、ライトとダークを切り替えられます。最初は端末の設定に合わせ、一度選んだモードは、次に開いたときも引き継ぎます。押した所から円が広がって画面が塗り替わり、太陽と月のアイコンが形を変え、ヘッダーのロゴの G が 1 回転します。
ページを描く前にモードを決めるので、ダークで開いても一瞬白く光ることはありません。全ページで文字と背景のコントラストを測り、どのカードの上でも文字が読める色にそろえました。
エンティティ SEO で、協会が「何者で、どこに属するか」を検索エンジンに伝えました。
エンティティ SEO は、組織が何者で、どこに属するのかを、検索エンジンに正しく理解してもらうための対策です。構造化データで、協会の名前と別名、ロゴ、1978 年の設立、活動地域の福岡県、分野、そして JAGDA 本部が親の組織であることを示し、Wikidata にある JAGDA の情報とも結び付けました。
協会の正式な紹介ページとして「JAGDA福岡地区とは」を新しく作り、構造化データでもこのページを指すようにしました。ページには、点で描いた日本地図に JAGDA の全国 8 ブロックを書き入れ、九州ブロックの中での福岡地区の位置と会員数を示しています。1978 年からの歩みは、横にスライドする年表で読めます。
検索結果には、サイト名が「公益社団法人日本グラフィックデザイン協会 福岡地区」と出るようにしています。パンくずリストは、画面に出るものと、検索エンジン向けの構造化データ（BreadcrumbList）が必ず一致するように作りました。
E-E-A-T を意識して、コーナーストーンコンテンツを決めました。
E-E-A-T は、Google がページの品質を評価するときに重視する、経験（Experience）・専門性（Expertise）・権威性（Authoritativeness）・信頼性（Trustworthiness）のことです。
経験と専門性は、正会員一人ひとりの作品ページで伝えています。正会員 11 名のページには、名前と読み、JAGDA 正会員であること、本人のサイトや SNS を、ProfilePage と Person の構造化データで示しました。生年や住所などの個人の情報は出していません。権威性は、本部の地区組織であることと設立年、Wikidata との結び付けで示しています。信頼性のためには、公式の紹介ページ、プライバシーポリシー、お問い合わせ、公式 SNS を互いにつなぎました。
サイトの柱になる 4 ページ（JAGDA福岡地区とは、正会員の作品紹介、入会案内、CREATIVE TALK）は、Yoast SEO でコーナーストーンコンテンツに指定し、本文も書き足しました。とくに入会案内は、JAGDA 本部の 2027 年度の内容に合わせて、会員の種類と年会費の表、正会員の入会の流れ、推薦者がいない場合や学生・若手の方への案内、よくある質問まで作り直しています。あわせて、すべてのページの題名と説明文も書き直しました。
LLMO で、AI にも協会を正しく案内してもらえるようにしました。
LLMO（大規模言語モデル最適化）は、ChatGPT や Google 検索の「AI による概要」のような AI に、協会の正しい情報と、正しいページを使ってもらうための対策です。
AI 向けには、サイトの主なページとその説明をまとめたファイル（llms.txt）を置きました。協会と会員の情報は、AI も検索エンジンも読み違えないよう、構造化データで示しています。協会を 1 ページで説明できる紹介ページや、よくある質問も、そのための土台になっています。
その一方で、AI の学習のためにサイトを巡回するクローラーには、会員の作品や文章を集めさせない設定にしました。案内には使ってもらい、作品は学習に使われにくくする、という線の引き方です。
サイトを止めたのは、切り替えの約 3 分だけでした。
切り替えの前には、本番のデータの写しで予行をして、手元の環境と同じ結果になることを確かめました。本番でメンテナンスの表示を出していたのは、新しいテーマへ切り替える約 3 分だけです。
切り替えたあとも、全 62 の URL で、応答と題名が前と変わらず、エラーが出ていないことを確かめています。
JAGDA FUKUOKA
公益社団法人 日本グラフィックデザイン協会（JAGDA）の福岡県の地区組織です。グラフィックデザインの発展とコミュニケーション環境の質的向上に寄与し、デザインの力や魅力を通して、福岡をはじめ、九州、全国の地域の活性化や発展に貢献することをビジョンに掲げています。