2026.1.14 【ホームページ制作ってなにするの？】HTML/CSSによるサイト制作の流れ

皆さんお疲れさまです！

今日は、
「自分でHTML/CSSを使ってホームページを作ってみたい！」
「制作会社に依頼する前に、大まかな流れを知っておきたい！」
そんな方に読んでもらいたい、サイト制作はどうやって進んでいくのかを書いていきたいとおもいます。

1. 【ヒアリング】

まずは、「どんな目的で、どんなデザインにしたいか」をじっくり伺います。 目的は人によって様々。「新しく会社を立ち上げるから名刺代わりのサイトが欲しい」「売り上げを伸ばしたい！」など、そのゴールに合わせた最適なデザインの方向性を、ここで一緒に決めていきます。

2. 【設計】

いきなり作り始めるのではなく、まずは「下書き」から。 Illustratorなどのツールを使って、ヒアリング内容をもとに構成案を組み立てていきます。この下書きのことを、専門用語では「ワイヤーフレーム」と呼びます。家でいう「間取り図」のような、とても大切な工程です。

3. 【デザイン】

ワイヤーフレームができたら、いよいよビジュアル作りです！ 色使い、写真の選定、イラストの配置などを行い、実際のWebサイトと同じ見た目の完成図（デザインカンプ）を作り上げていきます。

4. 【コーディング】

デザインが完成したら、いよいよエンジニアの作業へ！ VSコード（エディタ）を開いて、HTMLやCSSをガシガシ書いていきます。Googleの検証ツールなどを使って、スマホで見ても画面が崩れないよう調整（これをレスポンシブ対応と言います）していく、一番技術が必要な工程です。

5. 【公開】

最後に、作成したデータをWordPressなどのサーバーへアップロード！ これで世界中の人が見られる状態になります。これが、サイト制作の全体の流れです。

• 正直、ここが一番大変！ 「コーディングが一番時間がかかりそう」と思われがちですが、実は「設計（ワイヤーフレーム）」と「デザイン」が一番の踏ん張りどころ。ここでしっかりゴールを固めておかないと、後でコーディングをするときに迷子になっちゃいます😂

• 依頼する時にやっておくと良いこと もし制作会社やフリーランスに依頼するなら、「好きな雰囲気のサイトURL」を2〜3個用意しておくのがおすすめ！これだけでヒアリングがめちゃくちゃスムーズになり、理想の完成形にグッと近づきます💪

• 私なりのこだわり 私は普段VSコードでコードを書いていますが、イラストを自作するときはアイビスペイントも使っています。ツールを使い分けることで、その人にしかない「手作り感」や「ぬくもり」のあるサイトが作れるのが、この仕事の最高に楽しいところです。

最後に

ホームページ制作は長い道のりに見えますが、一つひとつの工程を丁寧に進めれば必ず形になります。この記事が、あなたの第一歩や、納得のいくサイト制作のヒントになれば嬉しいです！