工程_ホームページ制作の流れ
ホームページ制作の流れをざっくりとでも調べて理解しておくことで、予算や今後のスケジュールの見通しが立つと思うのでザックリ整理した。
そして分かったのは、ひとまずできるだけこの流れに沿って、仮想のクライアントを想定して実際に作成してみることだ。
一回その流れを通して見るだけで必要な知識もそこそこに獲得できるだろうし、新たに疑問点も出てくるだろうし、必要な時間・労力、ツールや書類や作業などが明確になってくると思う。
まずは、将来起業予定のホームページ制作会社のサイトを作るのもアリかもしれない。
ヒアリング
クライアントの要望を把握できるような項目をリスト化したシートにして質問を行う。
必要な書類とそのテンプレートは以下。
フリーランスも社内も助かる！企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
伝えたい事を決める。
- 目的・コンセプトを決める。（決めてもらう）
- お店を選んでもらうための強みを決める。
- 一番伝えたい事を決める。
見積もり
これは以下のサイトの「２．見積もりの目安と計算方法」にリンクがあるので割愛。
フリーも社内も助かった！Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
契約
本項は保留。
デザインの事前準備
整理して簡単なサイトマップを作成する。
サイトマップとは 【 site map 】 【 sitemap 】 - 意味/解説/説明/定義 ： IT用語辞典
Webサイトの構成図を簡単に作れる便利ツール | Webクリエイターボックス
- 無料でサイトマップを作成できるサイト
Cacoo - Web上でフローチャートやUMLなど様々な図を作成
初見では、ひとまずは手書き＆無料で作成できるサイト「Cacoo」で、ゆくゆく予算やマンパワー的に余力があれば有料サービスで作成するのが望ましそう。
サイトマップの作り方
ひとまず、自分が作りたい参考になるサイトのサイトマップを色々見てみる。
また下記サイトも参考になりそう。
使えるコンテンツマップの書き方 | Webディレクターズマニュアル
（必要であれば）ディレクトリマップの作成
各ページタイトル、階層などについて整理する。
画像のフローが多いが、ただのアウトラインなり、Excelで表やリストにしたものでもよい。
無くてもよいと思われるが、事前に決めて整理しておくほうが後々困らないと思われる。
サイト更新者を決める。
- クライアントか、制作会社側か。
- 更新者を誰にするかによってサービスを階層化できる。更新内容と費用を決める必要がある。
デザイン
ページの設計図（ワイヤーフレーム）作成
対応端末が複数の場合、それらの対応も必要。
以下サイトから、ワイヤーフレームについてや、作成例を見ることができる。
無料でワークフレームを作成できるサイト
- 「Cacoo」
Cacoo - Web上でフローチャートやUMLなど様々な図を作成
- 「Moqups」
Online Vector Based Mockup & Wireframe Tool · Moqups
こちらもサイトマップ同様、ひとまずは手書き＆無料で作成できるサイト「Cacoo」または「Moqups」で作成してみる。
無料でも結構充実していること、”素人目には”そこまでワークフレームに注力しなくてよいだろうと思うことから、有料サービスは不要かもしれない。
- 手書きのみで作成する場合は方眼紙（またはテンプレートをネットから落としてプリントアウトしておいたもの）、定規、筆記用具（鉛筆、消しゴム、カラーペンなど）、色や模様の本かサイト例などが必要そう。
ただし、これらはネットが使用できる環境でしか使えないという欠点もあるため、「ネットが使えない時のことを想定して、手書きの準備は常時しておくこと」
使い心地（ユーザビリティ）の設計
素材のリストアップと準備
サイト作成に必要な原稿、写真、その他の画像（アイコンやボタン）
ページのデザイン
１．ソフトを使ってページ画像を作成・加工していく
ページデザインを行う。
トップページが完成したら一旦クライアントに確認してもらう。
間違っているかもだけど、下記サイトを見る限りではボタンとかはひとまず考慮せずホームページの完成像を一枚絵で書いてみるみたい。
実際そのようにした方が写真やボタンのデザインなどがページ全体とのバランスが取れそうだ。
- Photoshopを使う場合
PhotoshopでWebサイトのデザインをしよう | Webクリエイターボックス
- 無料ソフト
Photoshopの値段は１万円強。こういうソフトの割りには安いかもしれないが、１円でも安く済ませたいところ。
自分はPhotoshopは使ったことが無いが、上記サイトを見た感じだと「GIMP」で良さそうな気がする。（Macユーザに限る、と言いたいところだが、Windows版もある様子）
gimp道
※なお、作成の流れは上記「Photoshopを使う場合」を参考にすれば良さそう。
２．作成したページ画像の一部をスライス（分割）し、部品化
そもそもスライスとは何か、なぜスライスするのか。
繰り返すような画像（パターン画像など）は最小限の画像にしてコーディングで表示を反復させることによって、画像サイズを減らしたり、表示速度を上げたりできるからだ。
スライスをGIMPで、と言いたいところだが、GIMPまたはそれに代わる機能が無い！！
「切り抜き」で、１度に切り抜ける対象は１ヶ所のみ。
ガイドに沿って切り抜く「ギロチン」は”線”で切り抜く。
何ヶ所も１度に切り抜き(スライス)ができる。
”短形”で何ヶ所でも切り抜く事ができる。
スライスした画像を「Web用に保存」で、HTMLファイルと画像ファイルを分けて作成できる。（保存時にindex.htmlとimagesフォルダに分けて保存）
ホームページを作成する為にきちんとした表組みを確立させることができる。
このGIMPの欠点が問題。
下のサイトのプラグインが使えるかも、とのこと。（保証はしかねます。）
SeanHayes/psd2html-gimp-plug-in · GitHub
ひとまず、GIMPとPhotoshopの是非については、画像が少ない場合はそこまで手作業も苦にならないし、必要性が出てくるまでは手間があるかもだがGIMPでよさそう。
（以下サイトが参考になった。）
白竜の肋骨:gimpとwebデザイン
HTMLマークアップ（HTMLを書く）
- 自分はまだHTMLコーディングの経験が浅く、HTMLとCSSを組み合わせた使い方をよく分かっていない。
下記を読めばニュアンスが分かると思う。
文書構造を意識しながらHTMLマークアップしよう！ | Webクリエイターボックス
CSSでWebサイトのレイアウト組み＋装飾の基本プロセス | Webクリエイターボックス
- 対応デバイスやブラウザに合わせたコーディングが必要
（必要であれば）システムの組み込み
サイト管理やお問い合わせなどの入力フォーム（かと思われる）
CMS組み込み
有名なものにWordPressがある。WordPressはスマホサイト構築も容易。
商品や決済についてはEC-CUBEが有名。
意外と知らない？サイトの更新が便利なCMS15選 | 株式会社LIG
動作確認
納品・アップロード・サイト公開
サーバはどうするか？
FC2などに代理登録したり、製作者側サイト（例えばhttp://www.seisakusha.com）配下にクライアントのページを「http://www.seisakusha.com/client/index.html」などとするのは宜しくないと思われる（というか、自分がクライアントだったら嬉しくない。しかし、そのような制作会社もある・・・。）
自分でサーバを構築することも視野に入れて学習・事前体験したいところ。だが、自宅サーバは電気代や火事などのリスクもあるという・・・。
エンジニアならウェブサーバーのひとつでも自腹で立てて運用すべき理由と、サーバー環境の選び方 - akiyan.com
しかし、クライアント用にドメイン取得を代理で行うという形をとるのが現実的であろう。
実際下記リンクにもそういう記述があるのでそれでいこうと思う。ただし、様々な制作会社のとっている手法を確認することは必要。
ドメイン取得代行・サーバー取得代行について質問です。 - Yahoo!知恵袋
