入門編 06 / 10 入門 約7分
サイトが公開されるまでの全体像｜5つの工程
設計・デザイン・CMS設定・公開・運用という5工程を図解で整理します。いま自分がどこで詰まっているのかを特定できるようになる、制作の地図にあたる回です。
この教材で学べること
- 制作を構成する5つの工程と、それぞれで決めること
- 工程を飛ばしたときに、どこで手戻りが起きるか
- 運用の結果が次の設計に戻ってくるという考え方
Studioの操作を覚えることと、サイトを1本完成させることは別の話です。実際の制作は5つの工程で進みます。この地図を持っておくと、「操作が分からない」のか「決めるべきことが決まっていない」のかを切り分けられます。
5つの工程
工程は一方通行ではありません。公開して運用した結果が、次の設計に戻ってきます。作って終わりではなく、回していくものだと捉えてください。
工程を飛ばすと何が起きるか
初学者がつまずきやすいのは、1の「設計」を飛ばして2の「デザイン」から始めてしまうことです。ページの数と役割を決めないままデザインを始めると、途中で構成が変わるたびに作り直しが発生します。
| 工程 | そこで決めること | 飛ばすとどうなるか |
|---|---|---|
| 1. 設計 | ページ数・各ページの役割・導線 | デザインの途中で構成が変わり、作り直しになる |
| 2. デザイン | レイアウト・配色・文字・余白 | —（ここが制作の本体） |
| 3. CMS設定 | あとから増える情報の入れ物 | 更新のたびに制作者が呼ばれる状態になる |
| 4. 公開 | 独自ドメインの接続・公開設定 | 「作ったのに見られない」状態で止まる |
| 5. 運用 | 更新のしかた・改善の判断 | 納品後に放置され、成果につながらない |
設計で最低限決めること
設計と言っても、最初から立派な資料は要りません。紙に3つ書ければ十分です。ページの一覧、各ページで一番言いたいこと、そしてゴール（問い合わせなのか、来店なのか）。この3つが決まっていれば、デザインの判断がぶれません。
| 決めること | 書き方の例 | 後工程で効く場面 |
|---|---|---|
| ページの一覧 | トップ／サービス／実績／会社概要／問い合わせ | 見積もりの根拠、CMSの要否判断 |
| 各ページの役割 | 実績＝信頼してもらう、サービス＝比較検討させる | 載せる情報の取捨選択 |
| サイトのゴール | 問い合わせフォームの送信 | ボタンの配置、導線設計 |
この教材では、第2章で工程2、第3章で工程2の仕上げ（レスポンシブ）、第4章で工程3を扱います。工程1と5は第5章のヒアリングと要件定義で戻ってきます。次は学習ロードマップです。