Webサイト開発の作成フローをご紹介！独学なので微妙かもしれませんが(^-^;

2016年1本目のWebサイト

昨日は新年の1本目のお仕事である「新Webサイト」をリリース致しました。

昨年まではスケジュール管理をしないで開発をしていたら、ダラダラと開発期間が伸びてしまったので、今年からはきちんとガントチャートを引いてスケジュール管理をしながら開発をしてみました。
そしたらば、あれほど遅延しまくっていた開発がスムーズに予定通り進める事が出来、予定通りの日付にリリースする事が出来ました(^-^)v

昨日の記事にブコメを頂きました。

id:tmura3さん
できれば作成フローを記事にしていただきたい。

との事で青コリ（id:tmura3）さんからリクエストを頂いたので、今日はその辺を書いてみたいと思います(^-^)v

photo by everyplace

前提

今回私が開発していたのは、自分で「企画・設計・開発・リリース」したWebサイトになります。
しかも作業する人間は私１人という１人プロジェクトになりますので、かなり特殊な条件になるとは思います(^-^;

一般的なWebサイトの開発では「顧客」がいて、営業が「要件定義」として顧客の要望を聞き出しシステムの絵を書いて見積もりを提出し承認されてから、システムエンジニアが「設計」に入り、設計完了後に開発メンバー（プログラマー等）が招集され「開発・実装」が進められます。
もちろん開発するだけではなくて、かなりの「テスト」をテスターが行い経てバグ修正が行われその上で顧客に納品され、顧客の了承を得てから「リリース」になるのかな、と思います。

ですが１人プロジェクトでしかも顧客は「自分自身」というかなり特殊な場合の作成フローを書いてみたいと思います(^-^;

１人プロジェクトの作成フロー

ざっくりと順番から書いてみましょう。

【１人プロジェクト作成フロー】

要件定義
ドメイン取得
設計
サイトデザイン
DB作成
開発・実装
動作チェック
リリース
周知活動

というのがザックリの手順になりますかね。
一応、細かく掘り下げてみましょう。

１．要件定義

これだけはかなり前に行います。
実際の開発する半年前位に行います。

「稼げるWebサイトは？」

「集客できるWebサイトは？」

という問いを自分自身に投げかけて、アンテナを色々と張り巡らせておいて色んな可能性を探ります。
また良さげなWebサイトを思いついたとしても、そのWebサイトを「自分自身のスキルで作りきれるのか？」を検討します。
どんなに素晴らしいWebサイトであっても作れないとお話にならないため、難し過ぎないWebサイトを考えます。
私は大してスキルがないため、簡単な物しか作りませんが(^o^;

２．ドメイン取得

要件定義で見えてきた朧げな「Webサイトの絵」を具体的に、名前から落とし込んでいきます。
簡潔で、覚えてもらいやすいWebサイト名と、そのWebサイト名に紐づくドメイン名を考えます。
色々なパターンを考えて、かつ既に取得されていないドメインを探します。

これも割と早いタイミングで行います。
Googleの検索エンジンからの評価が「取ったばかりの新しいドメイン」だとマイナス評価を受けるので、出来ればリリースをする半年前位には取得できた方が「取得後半年は経過したドメイン」として検索エンジンでも割と普通に評価してもらえて良いです。

ただ実際には要件定義を終えたWebサイトの全てを作る訳ではないので、あまりにも早く取り過ぎると使わないドメインも出てきてしまったりします(-_-;
なのでアイデアを考えて、その後練っていって「このWebサイトは良い。いける！」と判断した時点で取る様にしています。

３．設計

これはザックリやっています(^o^;
まずはノートに思いつくままに機能を書き出してみたり、テキストベースで機能や疑問点・不明点を書き出していきます。
欲しい機能と、それに対する実際の作りこみ方法を検討して決めていきます。

この時点ではまだ何もソースコードやDBは作っていません。
ついつい先行してプログラムを書きたくなりますが、甘い設計のまま作り始めると後から手戻りが発生すると面倒なので、ギリギリまで設計を詰めていきます。

設計は「何が出来るのか？どう作るのか？」を日本語や絵で書いて決めていく作業になります。
よく本には「基本設計書を書いて、そこから落とし込んだ詳細設計書を書いて・・・」と書かれていますが、全然そこまではやっていません(^o^;
まぁ１人プロジェクトの場合には、自分で分かれば良いので、きちんとしたWordやExcelで残す様なことはやっていません。

４．サイトデザイン

ここが以前は困っていました(-_-;
私はデザインセンスの欠片も持ち合わせていない人間なのでデザインて出来ないんですよね(>_<)
見つけた苦肉の策は

WordPressのテーマを流用する！

という物で、ここ最近作っているサイトはWordPressのテーマで作ったHTMLをもらって作っています(^o^;
下記の記事にまとめています。

上の記事を書いた時には「WordPressのカスタム投稿タイプやカスタムタクソノミーを使ってWebサイトを作る」と書いていますが、WordPressのDBのTABLE構成は色々なサイトにカスタマイズしても耐えられる様に作られているため、１記事でも複数のTABLE（テーブル）に情報が散らばっており、データ量が多くなると遅くてお話になりません(-o-;
私の設計するWebサイトはデータ量が多いものが多いので、WordPressのTABLE構成では耐えきれないので最近では自分で設計したTABLEにデータを格納して、それを呼び出して使って表示しています。

ですが、WordPressのテーマは無料でも相当良いものが多いので、大抵のWebサイトにあったテーマがすぐに見付かるので、デザインをもらうのに大変助かっています(^^)v

５．DB作成

DBのTABLE設計もここでします。
「３．設計」ではテーブル名くらいまでしか決めていないので、実際に必要になるカラムを抽出し型やサイズを決めていきます。
あまり大きなTABLEにしてしまうと遅くなりますので、マスタとテーブルを分けて考えて決めていきます。

TABLE設計が出来上がればそれを実際にレンタルサーバーのDBにCREATEして登録していきます。
TABLEに入れるデータもCSVで作ったりINSERT文を書いて準備したりします。
開発時に使う仮データもこの時点で入れておきます。

６．開発・実装

ここが一番楽しい作業♪
いよいよプログラムを書きます！
私はWeb開発言語であるPHPを使って書いています。
もうこの辺は好みの問題だと思います(^-^;
私は参考となるソースコードも多数公開されている「こなれた言語」でかつ「安定稼働」するPHPをしばらくは使っていく予定です。

設計で詰めた機能や決めた動作を実際のプログラムのソースコードに落とし込んでいく作業になります。
一から作ると大変なので、以前作ったWebサイトの流用できる部分は流用しながら作っていきます。
1ページずつ作りこんでいき、設計で考えていた対象の各ページを作り上げていきます。
また、DBからデータも取得しつつ作っていきます。

７．動作チェック

ある程度、作りこんだタイミングで動作チェックを行います。
初めてWebサイトを訪れた人を想定し、各種操作を行い期待した結果が得られるかをチェックしていきます。
ここは本来「単体テスト」とか「結合テスト」と呼ばれるフェーズになるのでしょうが、リリースしてすぐは人もほとんど来ないので軽く動作チェックする程度です(^o^;

８．リリース

全てのページを作りこみ、動作チェックが完了した後にリリースします。
リリースといっても、私の場合はレンタルサーバーに実際に作りかけのページをアップしてやっていますので、本番稼働時のデータにDBのテーブルデータを乗せ換えて「リリース」という事にしています。

また、GoogleのSerchConsoleにもsitemapを登録してGoogleの検索エンジンに覚えてもらえる様にします。

９．周知活動

作ったばかりのWebサイトは世の人々には「存在していないのと同義」ですので、自分自ら周知活動を行う必要があります(^^;
TwitterやGoogle+への通知、そのWebサイト向けの専用ブログを立ち上げて宣伝してみたりと、息の長い活動をしていきます。
これも一気にやり過ぎると、Googleに目を付けられてペナルティを受ける可能性がありますので、時間を掛けて徐々に徐々にやっていくしかありません(^o^;
Webサイトを作った後にはここが一番時間が掛かるし作業が発生するかもしれません。