【Webサイト制作】トップページデザイン制作からサイト公開まで！龍弥デザインが実際に行っているWebサイト制作の流れをご紹介！その2
2015.3.6
壊れたMacbookを修理に出したんですが、なんと次の日に帰ってきました！
担当していただいたスタッフさんに「仕事で使ってるので困ってるんです〜」と伝えていたので、ご配慮いただいて早急にご対応いただいたんでしょうね。大感謝です！
さて前回に引き続き今回も、龍弥デザインがお問い合わせを頂いてから納品を行うまでの実際の流れを2回に分けてご紹介します。
前回は「お問い合わせ」から「お見積もりの提出」までをご紹介いたしましたが、今回はいよいよ後半戦、「トップページデザイン制作の着手」から「サイト公開」までをご紹介させていただきます。
トップページデザインからサイト公開まで。龍弥デザインが実際に行っているWebサイト制作の流れをご紹介。
お見積もりが無事に通ると、ここからは実際の制作作業に取り掛かっていきます。
トップページデザインの制作
見本サイトを探す
まずは見本となるようなWebサイトを探しましょう。最初の打ち合わせで方向性が決まっているので、その仕様に沿ったものを探してください。
しかし、様々なWebサイトを見ることで「あ、こういう表現や方法があるんだ！」と思ってもみなかったアイディアが生まれることがあり、想定外の仕様が発生することがありますが、そこはご予算面で要相談です。
この工程はクライアント様と制作側の意識のすり合わせを行う重要な工程でもありますので、できる限り丁寧に進めましょう。
ちなみに、見本サイトを探すといっても探し方がわからない！という方のために、Webサイトのデザインを収集しているアーカイブサイトをご紹介します。一覧で見ることができるので、とても探しやすいと思いますよ。
僕はアーカイブサイトにWebサイトデザインの投稿があったら通知してもらえるように「feedly」を使っています。気に入ったものがあったらスナップショットをとって「Evernote」にノートを作って1件ずつまとめています。こうすればネットがつながっている環境がなくても見本デザインを手元の「Evernote」で確認できて便利です。
構成を組む
見本サイトをいくつかピックアップし、制作サイトのために構成を作り直してください。前の行程で追加した仕様、削除した仕様、様々なものを盛り込んで手書きのデザインラフを描いてみましょう。手書きの利点は何度でも修正可能なところ。
いきなりPhotoshopやIllustratorを使ってしまうと修正が面倒なので手書きで構成を作ってクライアント様にお見せしましょう。
この作業がデザインラフの制作にそのまま流用できますので、ここでしっかり作りこんでおくことが後々の作業をスムーズにしてくれます。
ラフを清書してワイヤーフレームを作る
先ほど作っておいたデザインラフをPhotoshopやIllustratorで清書しましょう。手書きだと実際のサイズ感などがわかりにくいんですが、実際のサイズでデータを作ることにより各要素を調整した全体のバランスを作りやすいはずです。
クライアント様からも「ここは大きすぎる」とか「ここはもっと大きくしてほしい」などとご要望が発生すると思いますが、これがワイヤーフレームを作る最大の狙いです。デザイン作業に入る前にご要望を伺うことで、デザイン確認で発生する修正を最小限に抑えることができます。
いよいよトップページのデザイン
ワイヤーフレームを実寸で作ると、そのままトップページのデザインの物差しがわりに使えることがあります。そのデータを使っていよいよデザインを制作しましょう。
制作の流れの中でトップページのデザインを提出してデザインが確定するまでが最も時間がかかるといっても過言ではありません。
ただ、ここまでの流れでクライアント様との共同作業の構成やデザインラフ、ワイヤーフレームを作り込んでいて意識のすり合わせができていれば、かなり短時間で済む工程でもあります。
ここまでが完了してしまえばあとは一気に進められると思います。
トップページのコーディング（HTML化）
トップページのコーディング
トップページのデザインが確定すると、下層ページと呼ばれるその他のページのデザインと並行してトップページのコーディングを行うことになります。
ひとまずはローカルで制作することになりますが、クライアント様が使われているレンタルサーバーなどでBASIC認証などをかけたテストディレクトリを生成し、確認環境を作りましょう。
一通りコーディングが終わったらデータをアップして動作確認などを行い、問題がなければクライアント様に確認してもらいます。
独自ドメインの取得をまだ行っていない場合
独自ドメインの取得を行われていない場合、以下の「エックスドメイン
」や「お名前.com
」や「ムームードメイン
」などで早急にドメインを取得しておかなければいけません。
ここの時点で取得するのはちょっと遅い気もするんですが、最近は独自ドメインを設定すると、DNSの切り替えや移管作業がなければすぐに反映されることが多いように思います。
レンタルサーバーの契約をまだ行っていない場合
レンタルサーバーもまだ契約を行っていない場合は、以下の「ロリポップ！
」などのレンタルサーバーですぐに契約を行いましょう。
下層ページのデザイン制作・コーディング
トップページのコーディングと並行して、下層ページ（その他のページ）のデザインを行います。並行して作業を行うのはスムーズに下層ページのコーディングに移行するためです。
たとえば、「トップページではメインコンテンツは横幅100％だけど、下層ページはメインコンテンツを70％の幅で左寄せにして右側に30％の幅のサイドナビを表示したい」など、トップページと下層ページのレイアウトが少し変わる構成だと、下層ページをコーディングするときに、class名やid名の干渉、レイアウト変更による影響も少なからずあると思います。
それを避けるために下層ページのデザイン時に、実際に発生するであろうコーディング作業の予測を立てながらトップページをコーディングすることが大事です。
下層ページのデザインは1ページずつ確認をしてもらい、OKがでたページからどんどんコーディングをしていきましょう。
WordPressの導入
WordPressを導入する場合はトップページと下層ページのベースを組み上げた段階から行います。納期に余裕がない場合を除いて、コーディングとWordPressのテーマ構築を同時進行するのは途中から修正が入った時にスッチャカメッチャカになっちゃうのでオススメしません（笑）
なお組み込みの際に最も注意しなければいけないのは、忘れがちな「ブログならでは」のページを忘れずに調整しなければいけない点です。
WordPressを導入していない静的ページ構築の段階では「検索結果」や「404」、場合によっては「投稿者」や「画像」ページも作りこまなければいけません。当然「アーカイブ」や「カテゴリ」「タグ」などのページも存在するので、必ず組み込むようにしましょう。
なおWordPressのテーマの作り方などは後日記事にしようと思います。
自分の目とクライアント様の目による最終校正
さぁようやくWebサイトが出来上がりました。長かったですね・・・。
出来上がってからまずすることは、制作したWebサイトがちゃんと提出したデザイン通りになっているか、フォームやブログなどのシステム周りは仕様どおりに動いているのか、対応予定のブラウザで問題なく表示されるか・・・などを自分の目でチェックしましょう。
そして問題点が確認されなければクライアント様にも同じように、Webサイトの隅から隅まで確認してもらいましょう。自分だけの確認だとどうしても「ここは昨日見て問題なかったから大丈夫」などと甘えが出てくるので、必ずクライアント様のチェックが必要です。
当たり前でしょ？？と思われるかもしれませんが、意外とできていない人が多いんです。
お疲れ様でした！Webサイトを公開！
さて、クライアント様からもOKがもらえたらいよいよ公開です。
公開予定日にWebサイトを公開してください。
テストディレクトリで作っている人は本番ディレクトリに移設、WordPressで「/wp/」などとしている場合は「/」にURLを置き換える設定を行います。
当然のことですが、テスト環境で確認したところをもう一度自分とクライアント様で確認するようにしてください。特にフォームなどはメールアドレスを変えながら最低5件は送信テストを行ってください。
終わりに
本当に長い道のりでしたね。一つのWebサイトが出来上がるまではこんなに多くの工程があります。いえ、だいぶ端折っていますので、細かい点を含めたらこんなものじゃありません。
この現実とは裏腹に、きっと多くのクライアント様から、
「すぐできるんでしょ？」と言われることでしょう。
そりゃそうですよ。
Webサイトを修正してブラウザの画面更新を行ったらすぐ反映されてるんだから、結果しか見えない人にはそう見えても仕方ありません。
でも実際はそうじゃないですよね。
一つ修正を行うとしたら、構成を考えデザインを作り、コーディングを行いサーバーにアップする・・・。クライアント様にはどうご説明してもご理解いただけないかなと思います。
Webデザイナーはみなさんがもってらっしゃる華やかなイメージなんてとんでもなく、プロジェクトの最初から最後までとっても泥臭い仕事だというのが現実です。
定時に帰れず終電で帰宅して日付が変わってることなんて当たり前、それどころか家に帰れないこともある。
運良く帰れたとしても仕事をお持ち帰りして作業続行・・・ということももしかしたらまだあるのかもしれませんね。
けど苦労して作り上げたぶん、やりがいはとても大きいですよね。そのWebサイトでなんらかのカタチで結果が数字で表れたらなおさらです。
クライアント様の先にいらっしゃるエンドユーザーの皆様に感動を与えられるWebサイトを作リ続けましょう。
何かの参考になれば幸いです。
それではまた。