構造設計は情報設計（IA）をWebサイトへ変換する工程です

情報設計（IA）では、

• ユーザーが何を知りたいのか
• どの順番で理解するのか
• どのような検討行動を取るのか

を整理しますが、情報設計（IA）で整理した内容を検索エンジンに伝わる構造へと落とし込む必要があります。

実際には、見出しの重みづけやmeta構造などを整理し、HTML化することです。私たちは、この工程が構造設計だと考えています。

つまり、構造設計は、情報設計（IA）をWebサイトとして成立させるための設計です。

HTMLは見た目ではなく意味を伝えるもの

Webサイトを見るユーザーは、デザインを見ていますが、検索エンジンやAIは、HTMLを見ます。

例えば、ページのタイトル、h1～h3などの見出し、リスト形式、テーブル形式などの要素です。見た目が同じであっても、HTML構造が異なれば、検索エンジンやAIへの伝わり方も変わってきます。

私たちは、HTMLをデザインを表現するための構造として組むのではなく、情報を検索エンジンやAIへ、より丁寧に深く、文章の意味を伝えるためのプログラムを組む行為であると考えています。

meta情報を整理する

head要素は、検索エンジンやSNS、ブラウザへページの情報を伝える重要な領域です。

HTML内のhead要素内には、titleやdescription、SNS用のOGPやTwitter Card、canonicalやrobots設定、view port、icon、font、css、また、近年では当たり前になったGAの設定などの重要な要素が多数存在しています。

これらを制作のたびに、毎回一から設定を集めたり、また、以前作成したサイトの流用をしたりする場合には、古い情報がそのまま残ったり、新しい状況に対応できなかったりと抜け漏れが発生する可能性が高くなります。

弊社では、head要素内の設定項目については、一定期間ごとに確認し、テンプレートとして社内で共有し、一定の品質を維持することに努めています。。

URL・タイトル・見出しは同じ方向へ向ける

Webページの重要な構成要素として、URL / title / h1 / パンくず / 内部リンクなどが存在します。

これらは、このページの存在を表す重要な要素で、それぞれが統一的に同じ方向を向いていることが重要です。

あまり推奨できない例としては、URLが「/service/website」で、タイトルでは「ホームページ制作について」、大きな見出しであるH1では、「Webサイトリニューアル」と表記が揺れているような状態です。

「Webサイト」と「ホームページ」くらいの差であれば、検索エンジンは、もはや吸収できる位に優秀ではあると思いますが、ある程度キーワードを一つに寄せていく意識は重要だと考えます。

同様に他のページからの内部リンクのキーワードもH1やタイトルに合わせることで、そのページへのキーワードの重みが増すと考えられるため、構造設計の段階で注意しながら設計しています。

スマホで読めることを前提にする

現在では、BtoBサイトですら、スマートフォンからのアクセスを検討から外すことはできません。

スマートフォンのアクセスが少ないから、スマホサイトをあまり重視しないというリニューアルもよくありますが、そもそも、スマホサイトが強化されていないから、アクセス数が少ないという可能性もありえます。

また、いまだに良く出会うのが、PC用とスマホ用のHTMLを分けてHTMLを構成しているサイトに出会うことです。

弊社のような制作会社としては、一つの修正指示に対し、二か所の変更が必要な点で、品質保持の観点からも不安になりますし、また、そもそもクローラーが二つのページをクロールするという意味でも、クロールリソースの浪費につながるのではないかという懸念もあります。

一般的にHTMLをワンソース化することをレスポンシブ対応といいますが、PC用の見た目をそのままスマホ用にレイアウトしただけでは、十分ではありません。

Googleは、モバイルファースト インデックスという表現で、優先してスマホサイトを読むことを宣言しています。

モバイル版のページを用意することは、コンテンツを Google の検索結果に表示させるための要件ではありませんが、非常に強く推奨されています。

引用：モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

まずは、スマートフォンで読みにくくはないか、

例えば、

• 長すぎる見出し
• 読みにくい表
• 小さすぎるボタン
• 画像頼りの説明

などを考慮し、スマホで読むことを前提に情報構造を考えることが重要だと考えます。

アクセシビリティへの配慮

アクセシビリティは、特別な意識がなくとも、ある程度実装はされます。一方でその知識がないばかりに意図的にアクセシビリティ機能を損なう場合があります。

例えば、ボタンなどにフォーカスされると出るアウトラインは、デフォルトでは黒枠ででてきますが、これは、アクセシビリティとしては重要な機能です。

一方で、お客様からすれば不具合と見られる場合があり、その指示により、黒枠を削除してしまう場合が多々見受けられますが、この機能に依存しているユーザーにすれば、サイトの使い勝手の品質が低いという評価につながりかねません。

弊社では、ご依頼を頂かない限り、強固なアクセシビリティ設計は行いませんが、ボタンのサイズや色に頼りすぎる表現などは、デザイン時に配慮し、制作を行っております。

クローラーやAIに伝わる構造を考える

検索エンジンやAIは、Webサイトを人と同じように表面を見ているわけではありません。

そのための構造として、HTMLがあり、また、近年では、Schema（構造化データ）の存在が改めて注目されています。

Googleの検索結果では、リッチリザルトという形で表示するためには、構造化データを利用していることを明示しています。

参考サイト：Google 検索がサポートする構造化データ マークアップ

また、「Googleしごと検索」や「Indeed」でも求人情報を構造化データとして表現することで採用されやすくなるとしています。

Schemaは、どこまで採用するかは初期設計時に検討することにはなりますが、ユーザーだけではなく、検索エンジンやAIにも伝わる構造にするためには必要は検討事項です。

Flying High Worksの考え方

私たちは構造設計を、HTMLやコーディングのルール作りとは考えていません。

構造設計とは、情報設計で整理した内容を、ユーザーと同時に、検索エンジンやAIへ正しく伝えるための翻訳作業だと考えています。

どれだけ良い情報設計を行っても、構造が整理されていなければ、その価値は十分に伝わりません。

私たちは、情報設計で整理した内容を、長期的に運用できるWebサイトとして形にするために構造設計を行っています。