第1回: WEB制作の全体像とHTMLの基礎

この回の目標

  • WEB制作の流れ（企画 → デザイン → コーディング → 公開）を説明できる
  • HTMLの役割を「構造を作るもの」として理解している
  • 見出し・文章・画像を使ったシンプルなHTMLページを自力で書ける
  • コーポレートサイトの“土台”を作れる
今回の学習内容
  1. この講座のゴール
  2. WEBサイトの制作フロー
  3. コーディングとは何か？
  4. 開発環境の準備
  5. HTMLの基本構造
  6. 自分で書いてみよう
  7. ファイルパスについて
  8. まとめ

この講座のゴール

コーポレートサイトを
1人でコーディングできるようになる 

TOP
├─ 会社概要
├─ サービス
├─ 採用情報
└─ お問い合わせ
  • 企業サイト（5〜6ページ想定）を一人で制作できる
  • デザインを見てhtmlを組み立てられる
  • コピペではなく構造を考えてかける
  • 軽めの修正・追加依頼なら対応できる

時給案件・小規模案件OKライン

WEBサイトの制作フロー

一般的な制作の流れ

01要件定義

目的・ターゲットを決める

02設計

ページ構成を考える

03デザイン

デザインを作る

04実装

コーディングする

05公開

webサイトとして公開する

01要件定義
02設計
03デザイン
04実装
05公開

要件定義

  • サイトの目的は？
  • 誰に向けたサイト？
  • 何をしてもらいたい？
  • 商品を買って欲しい
  • お問い合わせを増やしたい
  • ブランドイメージを伝えたい

「何のためのサイトか」を言語化する工程

01要件定義
02設計
03デザイン
04実装
05公開

設計

デザイン前の設計図＝ワイヤーフレームを作成

  • 情報の順番
  • 必要なコンテンツ
  • ページ構成

ここでは 見た目より構造が大事 です。

01要件定義
02設計
03デザイン
04実装
05公開

デザイン

デザインカンプ作成

フォント・カラー・写真などを含めた完成イメージを作ります。

  • 見た目の印象
  • ブランドイメージ
  • 余白やレイアウト
01要件定義
02設計
03デザイン
04実装
05公開

コーディング

デザインカンプをもとに、HTML・CSS・JavaScriptを使って Webページとして形にします。

デザインを「ブラウザで動く形」に翻訳する作業

01要件定義
02設計
03デザイン
04実装
05公開

公開

サーバーにデータをアップロードし、インターネット上からアクセスできる状態にします。

①Webページの作成
ローカル
アップロード
②Webページの公開
Webサーバー
ダウンロード
③Webページの閲覧
ローカル

コーディングとは何か？

コーディングとは、

デザインカンプをもとに
HTML / CSS / JavaScript などの言語で
Webページに翻訳する作業

  • HTML：情報や構造を配置する
  • CSS：見た目を整える
  • JavaScript：動きや反応をつける

今日はこの中の「HTML」だけに集中します。

フォルダ構成と拡張子


project/
├─ index.html
├─ css/
│   └─ style.css
├─ js/
│   └─ script.js
└─ img/
  • .html：HTMLファイル
  • .css：CSSファイル
  • .js：JavaScriptファイル

ファイルごとに役割を分けるのが基本です。

開発環境の準備

この講座では、テキストエディタとして Visual Studio Code（VSCode） を使用します。

インストールができればOKです。細かい設定は後回しで問題ありません。

HTMLの基本構造

Webページの基本的な構成

  • ヘッダー
  • メインビジュアル
  • コンテンツ
  • CTA（行動を促すエリア）
  • フッター

HTMLでは、この「構造」を表現します。

<header>…</header>
<main>
  <section>…</section>
  <section>…</section>
</main>
<footer>…</footer>
<header> ヘッダー※
<main> 主要コンテンツ部分※
<section> 各コンテンツ（会社案内・サービス・特徴など）
<footer> フッター※
※ページに1つ

タグの考え方

  • <タグ>：開始タグ
  • </タグ>：終了タグ

タグで囲まれた部分が「意味」を持つ

HTMLは「見た目」ではなく意味を決める

ネスト構造

HTMLは箱（ボックス）が入れ子になった構造でできている

ページ
 └ セクション
     └ コンテンツ
         └ テキスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル株式会社</title>
</head>
<body>

  <header>
    <h1>サンプル株式会社</h1>
    <nav>
      <ul>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>私たちについて</h2>
      <p>サンプル株式会社は〇〇を提供しています。</p>
    </section>
  </main>

  <footer>
    <p>© 2026 Sample Inc.</p>
  </footer>

</body>
</html>

Webサイトは箱の中に箱が入る構造で作られている

自分で書いてみよう

「架空の会社のトップページ」

次のコードをVSCodeに書いて、ブラウザで表示してみましょう。

  • 会社名を考える
  • メニューを3つ作る
  • 説明文を書く

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>＿＿＿＿＿＿＿＿＿＿</title>
</head>
<body>

  <header>
    <h1>＿＿＿＿＿＿＿＿＿＿</h1>
    <nav>
      <ul>
        <li><a href="#">＿＿＿＿</a></li>
        <li><a href="#">＿＿＿＿</a></li>
        <li><a href="#">＿＿＿＿</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>＿＿＿＿＿＿＿＿＿＿</h2>
      <p>＿＿＿＿＿＿＿＿＿＿</p>
    </section>
  </main>

  <footer>
    <p>© ＿＿＿＿＿＿＿＿＿＿</p>
  </footer>

</body>
</html>

書く内容のヒント

<title> ページの名前
<h1> ページの見出し
<p> 説明文
<alt> 画像の説明文

ファイルパスについて

<img src="./img/sample.jpg">

./img/sample.jpg のように、 今いるファイルから見た位置を書く方法を「相対パス」といいます。

Web制作では、基本的に相対パスを使います。

画像を表示してみよう

配布フォルダの中にある 「img」フォルダの中の画像を表示してみましょう。

ヒント

  • imgタグを使う
  • srcに「今いる場所から見た位置」を書く
  • altには画像の説明を書く

まとめ

  • HTMLは「構造」を作る言語
  • 企業サイトは「セクションの集合体」
  • 見た目より先に“意味”を作る