WEB構成の基礎知識
私たちが日々閲覧しているWEBページはどういう仕組みでできているのでしょうか？
この記事では、WEB制作に関わるなら知っておきたい「WEB構成の基礎知識」を分かりやすくご紹介します。
1.WEBページってどう表示されているの？
WEBページは、FigmaやPhotoshop等で作成したデザインデータを元に、HTML（HyperText Markup Language）という言語で骨組みを作って制作されています。
HTMLで文章に意味づけを行い、CSSで見た目やレイアウトを整え、JavaScriptで動きを加えることで、私たちが普段見ているWEBページが完成します。
HTML
HTMLは、打ち込んだテキストに「意味」を与えて、WEBページとして正しく機能させるための言語です。
見出しにしたい部分：
<h1>段落（本文）にしたい部分：
<p>画像を表示したい部分：
<img>
このように、表示したい要素ごとにタグと呼ばれる単語を割り当てて記述します。他にも、リンクを貼ったり、動画や音声を埋め込んだりすることができます。
HTML内の要素を制御する言語（CSS と JavaScript）
HTMLで骨組みを作った後は、デザインを整えたり動きを付けたりする言語を使います。代表的な2つの言語を見てみましょう。
言語 | 役割 | 主な役割・できること |
|---|---|---|
CSS | 見た目・レイアウトを調整する | 色を変える、文字の大きさを指定する、余白を取る、スマートフォン表示に対応させる（レスポンシブ対応） |
JavaScript | 動きや機能を制御する | スライドショー、ポップアップ（モーダル）表示、アニメーション、データの送受信 |
ブラウザとWEB標準について
WEBブラウザとは、WEBサイトを閲覧するために使うソフトウェアのことです。現在、日本で主に使われている代表的なブラウザは以下の通りです。
デバイス | 主なブラウザ |
|---|---|
PC | Google Chrome, Microsoft Edge, Safari, Firefox |
スマートフォン | Safari (iPhone), Google Chrome (Android等) |
※ブラウザによって見え方や挙動にわずかな違いが出ることがあるため、複数の環境で表示チェックを行うことが大切です。
誰がタグやWEBのルールを決めているの？
「どんなタグが使えるか」「どう表示されるべきか」というルールを決めているのが、国際的な標準化団体です。
WHATWG（ワットダブルジー）：現在、HTMLの仕様（HTML Living Standard）を策定・更新している中心組織（Apple、Google、Mozilla、Microsoftなどが参加）。
W3C（ダブリュースリーシー）：CSSやWebアクセシビリティなどの国際標準を策定している団体。
これらの組織が「世界共通のWEBのルール（WEB標準）」を決めてくれているおかげで、世界中どのブラウザでも同じようにページが表示されます。
JavaScriptとjQueryの違い
Webサイトに動きをつける際によく耳にする「jQuery（ジェイクエリ）」は、JavaScriptを使いやすくしたライブラリ（便利な部品集）です。
JavaScript | jQuery | |
|---|---|---|
分類 | プログラミング言語そのもの | JavaScriptのライブラリ（補助ツール） |
特徴 | 自由度が高い反面、一から記述するためコード量が多くなりがち | あらかじめ便利な機能がまとまっており、短いコードで簡単に書ける |
知っておきたい最近の動向
以前は「動きをつけるならまずjQuery」と言われるほど必須の存在でしたが、最近ではJavaScriptそのものが進化して短い記述で書けるようになったことや、React・Vue.jsなどの新しい制作手法が普及したことで、新規のサイト制作ではjQueryを使わずに制作するケースも増えています。ただし、既存の多くのサイトやWordPressテーマなどで今も広く使われています。
2.SEOってなに？
WEBサイトを作っても、誰にも見てもらえなければ成果につながりません。検索したときに上位に表示させ、多くの人に見つけてもらいやすくするための取り組みをSEO（Search Engine Optimization：検索エンジン最適化）と呼びます。
SEOは大きく分けて2つのステップと3つの要因で考えます。
ステップ1：キーワードの選定と評価
「ターゲット層がどんな言葉で検索しているか」「検索している人のニーズ（検索意図）は何か」を調査し、狙うキーワードを定めます。
ステップ2：SEO施策の実施（3つの要因）
◆ 要因1：ページ要因（コンテンツ＆HTML）
検索意図に応える有益でオリジナリティのあるコンテンツ（一次情報や体験談）を書く
見出しタグ（
h1、h2など）を正しく使い、検索エンジンが理解しやすいHTML構造にするページのタイトルやmeta description（説明文）を適切に設定する
◆要因2：サイト内要因（構造＆表示体験）
サイト全体のテーマ性を揃える
ページの表示速度を速くし、スマートフォンでも快適に読めるようにする（Core Web Vitals・UX改善）
検索エンジンのロボットが巡回しやすいサイト構造（内部リンク設計）にする
◆ 要因3：サイト外要因（被リンク＆評価）
他の良質なサイトから自然にリンクを貼ってもらう
SNSや他メディアで言及・認知される
現在の検索エンジンは、「ユーザーにとって本当に役立つか」「表示速度など使い心地が良いか」を重視しています。
まとめ
WEBサイトの基本構造（HTML・CSS・JavaScript）やSEOの基礎を理解しておくと、デザインを作るときにも「実装しやすさ」や「成果の出やすさ」を意識した設計ができるようになります。
ぜひこの機会に一歩踏み込んで、より魅力的で効果的なWebサイト制作に役立ててみてください！
この記事を書いた人
