サイト制作の流れ

これからWebデザイナーとして勉強をしていきたいけど、

どんな流れなのか、どのくらいのボリュームがあるのかイマイチ想像がつかなくて不安…

という方も多いのではないでしょうか？

実際に私もwebデザインの勉強を始めた時、全体像が把握できなくてとても不安でした。

たくさんのサイトを見ても、あるサイトには書いてある工程が他のサイトでは紹介されていなかったり、制作の順番が異なったりしていたので、

何が正解なの？
どのやり方が一番いいの？

などと、困惑していた記憶があります。

そのため、先が見えない不安を解消するために未経験の方でも分かりやすいフローを作成しました。

Webサイト制作の流れやフローの中で重要なポイントについて詳しく解説していきます。

目次

企画・設計

1. 目標、目的を設定
2. ターゲット（ペルソナ）を設定
3. 競合他社を調査・分析・差別化
4. Webサイトのコンセプトを決定
5. ディレクトリマップ作成
6. デザインイメージの共有
7. ワイヤーフレーム作成
8. テキストコンテンツを検討

デザイン

1. デザインガイドラインの設定
2. 素材を準備
3. TOPページのデザイン作成
4. TOPページの修正
5. 下層ページのデザイン作成
6. 下層ページの修正
7. デザインカンプ調整
8. 実装指示

コーディング・プログラミング

1. 共通パーツの洗い出し・画像の書き出し
2. 環境構築
3. 共通パーツのコーディング
4. 各ページのコーディング
5. アニメーション等の動き
6. CMS導入
7. CMS化
8. コンテンツ登録
9. テスト
10. 公開

動画

スライド

上記の動画に使用しているスライドをこちらに添付しています。

PCの場合、画面の左側クリックで前のページへ、右側クリックで次ページ、画面下にカーソルをおくと操作バーが表示されます。

改善点のご指摘、誤字脱字、その他ご要望はこちらからご連絡ください。