個人でホームページを作るにあたって、後で困ったり迷ったりしたので、いろいろ調べてまとめてみました。

企業さんや人によって違いは出ると思いますが、私はこれで迷いがなくなりそうです。

要件定義

クライアントから要望を聞いて整理したり、個人サイトだったら「何を目的に何を作るのか」を定める。

個人的にサイトを作るだけなら、ブログを作りたい、アフィリエイトサイトを作りたい、レスポンシブにしたい、etcをまとめるといいでしょう。

ワイヤーの作成

ワイヤーフレームを作ります。

これは、完成のイメージを書き出すものです。

足りない項目がないか、グルーピングする項目は矛盾がないか、サイト全体の構成に違和感はないか、etcをまとめるとよいでしょう。

私はMicrosoft Officeを使うのが楽そうです。

カンプ作成

Webサイトのデザインの完成見本を作ります。

有料ソフトだとAdobeのPhotoshopIllustratorが使われるようです。

無料のソフトだとGIMP、Macユーザの人は有料のSketchを使う人もいるようですね。

Windows派の私はPhotoshopかGIMPを覚えなければというところでしょうか。

ページ制作

HTML/CSSなどを使ってコーディング。

場合によりますが、着手前にディレクトリの設定や素材集めをしておくとよいでしょう。

ちなみに、私はコーディングにはVSCodeDreamweaverを使用しております。

他にはAtomを使う人も多いそうです。

動作確認

ローカル開発環境を使っての動作確認をします。

Virtual Boxで仮想環境を構築したり、Windows7以降はIIS (Internet Information Services)を使う人やVMware Playerを使う人もいるみたいです。

私は環境構築にドットインストールを参考にしたこともあり、Virtual Boxを使用しています。

Chromeのデベロッパツールも使うようにしておくとなおよいでしょう。

本番環境準備

まずは本番環境にドメインやSSLの設定をしてください。

それらが終わったらHTMLやCSSファイルをアップロード。本番環境でも簡単に動作テストをしておくとよいでしょう。

まとめ

ちょっと大げさかもしれませんが、こんな感じで作成するといいと思います。

  • 何を目的としたサイトを作るか考える
  • 線画でサイトの枠組みを作ってみる
  • Webサイトデザインの見本を作る
  • コーディングする
  • 動作確認をする
  • 本番環境を準備して公開

さて、自分のこのサイトもこの手順で作り直したいな。