こんにちは、社内で黙々とWebデザインを担当しているYUYAです。
これから何回かに渡りホームページを作るにあたり基本的な事項を他人に説明する練習として掲載していきます。
今Webデザイナーを目指している方、一緒に私と勉強していきましょう。
では本題に。
WEBサイト制作の流れ
Web制作では全体の流れや各フェーズでの役割を理解しておくことが大切です。
計画を立てて、設計して、形にしていく。
一軒家を建てるように、サイトを作っていきます。（家を建てたことありませんがきっとそんな感じです。）
この記事では、Webサイト制作の一般的な流れと、フェーズごとの実務的なポイントを“ホーム”ページということで家に例えて紹介します。
①企画と目的「ディレクション」
まずは、どんな家を建てるのかを考えるところから始まります。
Webサイトでも、最初に「誰のために」「何を目的として」作るのかを整理する必要があります。
• 誰がこのサイトを使うのか
• どんな情報を届けたいのか
何度も打ち合わせを重ね、サイトの内容やデザイン、方向性を決め、しっかりと暮らしのイメージ（サイトの目的）を固めておきます。
②間取りを決めて設計する「ワイヤーフレーム」
お客様との打ち合わせでいただいた情報を整理し、イメージが固まったら、次は設計をしていきます。
家でいう「間取り」や「図面」のように、Webサイトでもレイアウトを設計します。
見る人が置いてけぼりにならないよう、伝えたいことをまとめ、見やすく分かりやすく図面を引きます。
専門用語で“ワイヤフレーム”と言ったりします。
この段階では、まだ装飾のない骨組みだけの設計図を描いていきます。
③外観や内装を考える「Webデザイン」
間取りが固まったら、次は家の外観や内装を考えます。
Webサイトでは、ここで初めて色・フォント・写真・余白などのビジュアル面を整えていきます。
イメージに合った配色やフォントの選定やスマホやPCで見やすいレイアウトの微調整を行い、ボタンやリンクなど、操作しやすいデザインを意識していきます。
ここで出来上がるものが「デザインカンプ」といわれるものです。
④施工「コーディング」
いよいよ、設計図をもとに家を建てる工程です。
Webサイトでは、コーダーがHTML・CSS・JavaScriptを使って、ページを組み立てていきます。
また、最近ではノーコードツールやビルダー（STUDIO、ペライチ、WordPressのブロックエディタなど）を使って、コーディングせずにページを組み立てることも可能です。
職人の手による建築もあれば、パーツを組み合わせて建てる方法もあり、予算や目的によって施工方法が変わります。
⑤メンテナンス環境を整える「CMS導入」
ただ建てるだけでは、住むことはできてもメンテナンスしやすい家にしておかないと、修繕がしにくく長くは住めませんよね。
Webサイトは公開してからがスタートです。常に新し情報にしとくためにも、更新しやすい仕組み(CMS)を入れていきます。
—————————————————————————————
CMSとは？
CMSとは「Contents Management System」の略で、専門知識がなくてもWebサイトの中身（テキストや画像など）を管理・編集できるシステムのことです。
たとえば：
• ブログ記事を追加する
• 写真を入れ替える
• お知らせや価格表を簡単に更新する
といったことが、HTMLやコードを触らずにできるようになります。
CMSでもっとも代表的なのはWordPressですが、ほかにもいろいろあります。
• STUDIO（デザイン性の高いノーコードツール）
• Wix / Jimdo / ペライチ（誰でも簡単に更新可能）
• microCMS / Contentful / Strapi（フロントエンド分離型のヘッドレスCMS）
• Shopify（通販(EC)サイト向け。商品や注文の管理も可能）
用途や費用によって、CMSの選択肢は変わってきます。
⑥ 引き渡し「公開」
すべてが整ったら、いよいよ公開のタイミングです。
お客様へ納品し、問題なければサーバーにアップロードします。
公開後の動作確認も忘れずに行います。
⑦ 定期点検「保守・更新」
家は建てたあとも、メンテナンスが必要です。
Webサイトも同じく、修正や追加、セキュリティの対応など、定期的なサポートが求められます。
「建てて終わり」ではなく、「支え続ける」視点が大切です。
まとめ
Webサイトをつくるというのは、ただページを作るだけではありません。
どんな目的で、誰のために、どう使われていくのかを考えながら、ひとつひとつの工程を大切に積み重ねていくことが大切です。
「ホームページ」という言葉のとおり、WEBサイトは「家」のようなもの。
安心して見てもらえるように、しっかりと基礎から丁寧に作っていきましょう。
次回はWEBサイト制作に使われる言語と役割について書いてみようと思います。お付き合いいただければ幸いです。
以上、YUYAでした。
