Webサイト制作の流れと効率的なコードの書き方

Web制作を学び始めると、「HTMLやCSSの書き方」は教材で学べます。でも、実際の仕事の流れやコーディングを効率よく進めるコツは、なかなか教材には載っていません。

この記事では、現場で使われている知識の中から、学習の早い段階で知っておくと役立つ内容を4つのテーマでまとめます。

目次開く閉じる

1. 実際のWeb制作の流れ

コーディングは、Web制作というプロセスの一部です。全体の流れを知っておくと、自分が今どの工程を担っているのかが見えやすくなります。

① ヒアリング・要件定義 クライアントから目的・ターゲット・掲載内容を聞き出します。「誰に、何を伝えるサイトか」を明確にする工程です。

② サイト設計・ワイヤーフレーム ページ構成や情報の優先順位を整理します。設計図にあたる工程で、コーディング前に全体像を固めます。

③ デザイン制作 Figmaなどのツールでビジュアルデザインをつくります。クライアントの承認を得てから次の工程へ進みます。

④ コーディング HTML・CSSでデザインを実装します。デザインを忠実に再現することがコーダーの仕事です。

⑤ テスト・公開・運用 複数のブラウザで表示を確認・修正し、本番サーバーへ公開します。公開後も更新・修正が続きます。

VS Codeには、最初からコード補完機能が搭載されています。タイピング量を減らしながら、スペルミスも防げる便利な機能です。積極的に使いましょう。

新しいHTMLファイルを開いて ! と入力し、Tabキーを押すと、HTMLの基本構造がまるごと展開されます。毎回手で書く必要はありません。

CSSファイルで fon と打つだけで、font-size や font-family などの候補が表示されます。正確なプロパティ名を覚えていなくても大丈夫です。

補完候補が表示されたら、Tabキーで選択・確定できます。マウスを使わず素早く入力できます。

補完を使うのは「手抜き」ではなく、プロの習慣です。使いこなすほど作業が速くなります。

PC1台でコーディングをするとき、画面を左右に分割すると表示が狭くなり、本来のデザインが確認できなくなることがあります。

おすすめは、VS Codeとブラウザをそれぞれ全画面表示にして、ショートカットキーで素早く行き来する方法です。

理想は2画面以上です。将来の作業環境づくりの参考にしてください。

コードが動いたとき、「なぜ動いたのか」を確認する習慣をつけましょう。

ネットなどで見つけたコードをコピペして「動いた、OK」で終わってしまうパターンです。その場は解決しても、似た問題が出たときに対処できません。

コードを書いたあとに、「このコードは何をしているのか」を一言で説明できるか確認してみましょう。うまく説明できれば理解できている証拠です。うまく言えなければ、もう少し調べてみましょう。

ブラウザ上で右クリック→「検証」を選ぶと、開発者ツール（DevTools）が開きます。どのCSSが効いているか、なぜ崩れているかをリアルタイムで確認できる強力なツールです。詳しい使い方は別途紹介します。

理解が積み重なると、応用が効くようになります。「なんとなく動く」より「わかって動かす」を目指しましょう！