Webサイトができるまでの全体像｜Web制作・コーディング編の学び方

バナーや資料は作れるようになった。では、Webサイトはどうやって形になるんでしょうか。

この編では、Webサイトができるまでの流れと、HTML・CSSといったコード（Webページの構造や見た目を指定するための言語）の基礎知識を扱います。
先に言っておくと、ゴールは自分でコードを書けることではありません。コードが読めて、作る人と会話できることです。デザイナーはそこまでで十分に仕事になりますよ◎

Webサイトができるまでの4段階

Webサイトの制作は、大きく4つの段階で進みます。まず全体像から見てみましょう。

1. 設計：何を載せるか、どのページに分けるかを決める。ページの一覧（サイトマップ）と、線だけの下書き（ワイヤーフレーム）を作る段階です
2. デザイン：色・フォント・写真を決めて、本番と同じ見た目の完成見本（デザインカンプ）に仕上げます
3. コーディング：カンプをHTMLとCSSに置き換えて、ブラウザ（ChromeやSafariなど、Webページを見るためのソフト）が表示できる形にします。ここを担当する人がコーダーです
4. 公開：できあがったデータをサーバー（サイトのファイルを置いておく、24時間動き続けるコンピュータ）に置いて、URLで誰でも見られる状態にします

デザイナーの担当は1と2が中心です。3と4は分業なら別の人がやります。
それでも3と4を知らないままだと、2で作るカンプが「実装しにくいデザイン」になりがちです。だからこの編で、あとの工程をひととおり見ておきます。

デザイナーがコードを知ると何が変わるか

「コードはコーダーの領域だから、知らなくていいのでは？」と思うかもしれません。実際、書く仕事は任せて大丈夫です。それでも読める状態を作っておくと、次の3つが変わります。

• 実装を想定したデザインが作れる：Webで再現しやすい表現と、手間のかかる表現の区別がつきます。作り直しが減ります
• 指示が正確になる：「もう少し空けて」ではなく「この余白を24pxに」と言えます。伝わり方がまるで違います
• 修正の重さが見積もれる：文字の変更は軽く、レイアウトの組み替えは重い。この感覚があると、依頼の仕方と納期の読みが現実的になります

小さな案件を自分ひとりで受けるときにも、この知識は使います。コードを書かずにサイトを納品できるノーコードツールという選択肢もあり、どの作り方を選ぶかの判断には、まず仕組みの理解が要ります。

目指すのは「書ける人」ではなく「読めて、話せる人」です。カンプを渡すとき、修正を頼むとき、実務で必要になるのはこの水準です。

この編で学ぶ8本と学ぶ順番

この編は8本のレッスンで構成しています。前半でコードを読める状態を作り、後半で現場の作り方と公開までを見る、という順番です。

1. HTMLの基礎：ページの骨組み。タグと文書構造の読み方
2. CSSの基礎：色・余白・配置。デザインの指定がコードになる仕組み
3. レスポンシブデザイン：スマホ対応の仕組みと、デザイナーが指定すること
4. JavaScriptでできること：サイトの「動き」の正体を知る
5. デザインカンプからコーディングへ：コーダーへの受け渡しの実務
6. WordPressとCMS：あとから更新できるサイトの仕組み
7. ノーコードツール：コーディングしないでサイトを作る選択肢
8. サーバー・ドメインと公開：公開までの最後の一歩と表示速度の基礎

順番どおりに読むのがおすすめです。前半4本で言語の基礎ができていると、後半のレッスンに出てくる用語がそのまま分かります。
すでに知っている項目は飛ばして構いません。あとから辞書のように戻ってくる使い方もできます。

学ぶときの心構え

コードの話になると、急に難しく感じる人が多いです。安心してほしいのですが、この編に暗記はほぼありません。

覚えるのは仕組みと考え方だけ。タグやプロパティ（CSSの指定項目）の名前は、必要になったときに調べれば足ります。プロのコーダーも毎日検索しながら書いています。
それより大事なのは、ここまで学んできたデザインの基礎です。デザインの4原則も余白も、コードの世界ではそのまま数値の指定になります。デザインが分かる人ほど、コードの話は早く飲み込めますよ💡

最初のレッスンへ

1本目はHTMLの基礎から。すべてのWebページの土台になっている言語です。
1本あたりの読了時間は5〜7分ほど。各レッスンにはミニ実践が付いていて、HTMLの回ではメモ帳だけでページを1枚作ります。読むだけより、手を動かした方が確実に残るので、ぜひ試しながら進めてくださいね。

あわせて読みたい

HTMLの基本構造とタグの読み方（デザイナーのための入門）コーダーから「ここの見出しはh2でいいですか？」と聞かれて、返事に詰まる。Webデザインの仕事を始めると、この場面が必ず…

コース全体の並びはデザイン基礎コースの目次から確認できます。