ウェブデザインハック

flow
date

Webサイト制作の流れ

Webサイト制作の流れ

実際にサイトを作る時の手順を紹介します。

1. 企画・設計

目的とターゲットを決める

やること

  • サイトの目的を明確にする
  • ターゲットユーザーを決める
  • 必要なページを洗い出す

  • 目的: 自分のスキルを紹介する
  • ターゲット: 採用担当者
  • ページ: トップ、プロフィール、作品紹介、お問い合わせ

2. ワイヤーフレーム

レイアウトを決める

やること

  • 各ページの構成を考える
  • どこに何を配置するか決める
  • 紙やツールで簡単に描く

ポイント

  • 最初は細かいデザインは考えない
  • 配置だけを決める

3. 実装

Tips を見ながらパーツを作る

必要なパーツ

基本的なサイトに必要なパーツ:

進め方

  1. ヘッダーから作る
  2. メインコンテンツを作る
  3. フッターを作る

4. 装飾

見た目を整える

やること

  • 色を決める
  • フォントを決める
  • 余白を調整する
  • ホバーエフェクトを追加

参考 Tips

5. 公開

デプロイする

やること

  • GitHub にコードをアップロード
  • Cloudflare Pages や Vercel でデプロイ
  • ドメインを設定(任意)

確認すること

  • すべてのページが表示される
  • リンクが正しく動く
  • レスポンシブ対応ができている

📚 まとめ

制作の流れは:

  1. 企画・設計
  2. ワイヤーフレーム
  3. 実装(Tips を活用)
  4. 装飾
  5. 公開

一つずつ進めていけば、必ずサイトは完成します。 まずは小さなサイトから作ってみましょう!

Share