webサイトの作り方:作成して公開するまでの仕事の流れ

はてなブックマーク 長いので後で読む

コムコーポレーションでは、webプログラマーやwebデザイナーを随時募集していますが、入社したらどんな風にweb制作していくのかイメージしにくいと思います。
そこで、webサイトを作成して公開するまで、
どんなことに気をつけるのか、どんな風に仕事をしていくのかなどの全体の流れをご紹介します。

基本的な仕事の流れは、

企画 デザイン コーディング テスト 公開

となっています。今回は「キズフォト!」サイトができるまでの仕事の流れをご紹介します。

サイト名:キズフォト!
サイトURL:http://www.comshop.co.jp/kizuphoto/

コムショップでゲームソフトやアニメDVDを売るとき、買うときに、言葉では分かりづらい「商品の傷」がどんなものがあるのか写真で見れちゃうサイト

 

企画

webサイトやwebページを作るのはあくまで手法の一つです。
何かしら目的があって、それを達成するのに「webサイトを作る」という方法が最適であると考えたからwebサイトを作るのです。
・じゃあ、どんなお客さんにどんな風にサイトを使ってもらえれば目的を達成できるのか。
・それにはサイトにどんな機能が必要でどんなデザイン・UIにすればいいのか。
など、目的を達成できるサイトを作るための仮説をたてていく作業から始めます。

1.まずはサイトを作る目的を明確にする

コムショップでは以前より、
お客様の疑問

といったように、
「通販に載ってる「外箱小傷」ってどんな傷の商品なのか分からないので買うのが不安」

「買取してもらう時の傷減額の基準がよく分からないから売るときに不安」
というお客様の意見がよくありました。なので、
商品傷などを写真でご紹介して、お客さんの不安(コムショップの不透明な部分)を取除きたい!
と思ったのが「キズフォト!」を作ったキッカケです。

もっと具体的に目的を言うと・・・
「商品の傷の状態を写真などでご紹介して、「小傷」など言葉で分かりにくいものをお客様が分かるようにして、コムショップで行なっている作業を開示し公正・透明にすることで、疑問・不安などを和らげる」

2.大目的が決まったら「小目的/目標/数値目標」を決める

サイトを作る時に一番陥りやすいことは、「何のために作っているサイトか途中で分からなくなる」ことです。

今回の提案で達成したい目的を細かく出して、優先順位ををつけます。

●小目的

  1. コムショップで行なっている作業を開示し公正・透明にすることで、疑問・不安などを和らげる
  2. comshop.co.jpのコンテンツを増やしてアクセス数をアップさせる
  3. comshop.co.jpの被リンクを増やしてSEOに強いサイトを作る
  4. SEO目的のため、ブックマークされるようなコンテンツを作る
  5. 傷の状態などを買取時の社内マニュアルとして活用し、知識の共有をする

小目的を出し終わったら、それを達成するための目標/数値目標(KPI)を決めましょう。

大目的 小傷などを写真で見せて、お客さんの不安(コムショップの不透明な部分)を取除く。
コンテンツ・被リンクを増やしてアクセス数アップ。
目標 はてなブックマークされる!
数値目標 はてなブックマーク数 公開初日で3user

3.仮説を立てて、具体的なサイトの構想を詰める

目的・目標が決まったら、どんなユーザーに向けてどんなサイトにすれば目標を達成できるか仮説を立てて、具体的なサイトの構想を詰めていきます。

ターゲットをイメージする

目的を5W1Hまで落とし込んで、ターゲットとコンテンツの内容をイメージします。
仮説をたてることで、より目標を達成できるサイトができます。
お客さんのシチュエーション(状況)とサイトのシチュエーション(使われたい使われ方)を合わせることが大切です。

What Webサイトの目的は何か? 上記記載
Who 誰のための(誰が利用する)Webサイトか? コムショップ通販・買取を利用しようとしてくれているお客様
When いつWebサイトを利用するのか? 買取を送るとき・商品を買うとき
Where どんな環境でWebサイトを利用するのか? 自宅PCにて。
Why なぜWebサイトを利用するのか? 商品の傷がどんなものなのか、どのくらいの減額か知りたいから
How どのようにWebサイトを利用するのか? どんな傷かな・どのくらいの減額かな→なるほど→なら買ってみよう・売ってみよう

イメージしたコンテンツの内容からサイトに必要そうな機能を書き出す

次はサイトの機能を決めて、どんなプログラムやページが必要になりそうかを明確にしていきます。

  • 傷の写真が閲覧できる
  • 一覧になっていてザクザク閲覧できる。タグ。
  • 簡単に写真を追加できるようにする
  • 検索はいらない(どんなキーワードを入れたらいいのか分からないから)

サイトのデザイン・UIなどの方向性を決める

写真が一番目立つように。ザクザク感。あっさり見やすいと良い。

4.作業の簡単な目安(スケジュール)を作る

サイトの全体像が見えてきたら、おおよその作業スケジュールを作ります。

●作業スケジュール表 原寸大を別ウィンドウで表示

デザイン

ここから実作業に入ります。

5.ワイヤーフレームを作ってサイトのレイアウトを作成する

ワイヤーフレームを作ってサイトのレイアウトを作成していきます。
「キズフォト!」は、基本「TOPページ」「傷写真一覧ページ」「傷写真詳細ページ」の、3つのページで構成されているので、3つを作成しました。
ワイヤーフレームの作り方のコツは、表現したい情報を整理することです。
まず、ページでユーザーに見せたい情報を書き出して優先順位をつけていきます。

●傷写真詳細ページ

  1. コムショップでいうとなんという傷か(外箱小傷)
  2. メインの傷写真
  3. 他の角度からの写真(後ろからとか、空けてみるとか、全体写真とか)
  4. 写真に対しての詳細コメント(30文字くらい)
  5. その傷の詳細(箱がつぶれて、ベロの部分が破れています。とか、日焼けです。)
  6. タグ
  7. 商品情報(PS2ソフト)
  8. 傷の状態(小傷)
  9. 傷の場所(外箱、ディスク)
  10. 傷の大きさ(商品サイズに対して)(100x100x100)
  11. 商品のサイズ(10センチくらい)
  12. この傷にならないよう気をつけること(こうすると、こんな傷にはなりません)
  13. 同じ傷の写真一覧
  14. 投稿日
  15. 欠品の場合の減額表
  16. 参考になったボタン(使いどころがないかも)
  17. 増やしてほしい写真ボタン
  18. あくまで目安です参考です。みたいな注意文。(いらないかも)

それが終わったら、優先順位順に情報を並べて、ワイヤーフレームを作っていきます。
今回は、画像処理ソフト(Fireworks)を使って作成しました。
(※一部、Yahoo! Design Stencil Kit の画像を利用させてもらいました。 )

●実際に作った傷写真詳細ページのワイヤーフレーム 原寸大を別ウィンドウで表示

ワイヤーフレーム

6.デザインを作る

ワイヤーフレームを参考にページデザインを作っていきます。
こちらも画像処理ソフト(Fireworks)を使って作成しました。

●実際に作った傷写真詳細ページのデザイン案 原寸大を別ウィンドウで表示

デザイン

制作(htmlコーディング/プログラム)

7.デザインをhtmlに起こしてページを作る

出来たデザインをhtmlに起こして、ページを作っていきます。いわゆるコーディングです。

実際に表現したいサイトのhtmlを先に作ることで、

  • どんなデータが必要なのか(DB設計)
  • プログラムをどう組み立てればいいのか
  • どんなサイト構造にするか(SEO)

が明確になります。

(※すみませんここは少し省略します)

8.DB(データベース)設計をして、プログラムを作る

htmlのページが出来たら、DB(データベース)設計をします。
それができたら、サイトを動かすプログラムを作っていきます。

(※すみませんここも少し省略します)

テスト(動作確認)

9.動作確認テスト・運用確認テストをする

社内の方に協力してもらい動作確認テストを行ないます。

  • プログラムが正しく動作しているか
  • 傷の写真を撮影してからアップするまでを実際に行い、今後運用していくのに不足している部分はないか
  • 見やすい、使いやすいか

などを見てもらいました。

スムーズに写真撮影・画像アップができるように必要なデータをメモしておくシートが必要だと分かったので、撮影用シートも作成しました。
実際の作業とのすり合わせなども重要です。

●実際にエクセルで作った撮影用シート 原寸大を別ウィンドウで表示

撮影用シート

公開

10.サイトを公開!

テストが終わったらいよいよ公開・・・なんですが、
その前に、目標を達成するためにやることをしっかり決めておいてから公開します。
サイト公開後から数値目標(はてぶ数 公開初日で3user)を達成するまでをイメージすることが大切です。

●「キズフォト!」サイト公開後から目標達成するまでにやること

やることを決め終わったら公開です。

おつかれさまでした!・・・といいたいところですが、

webサイトは公開した時点では、まだ未完成なんです。仕事は終わりじゃないんです。

自分が何週間もかけて作ったサイトを未完成と言われると切ないかもしれませんが、
公開したwebサイトはあなたが立てた仮説通りにユーザーに使ってもらえたのでしょうか?

  • 数値目標は達成されましたか?
  • それが達成されることによって、目的は達成されていますか?

そうじゃないと、せっかく作ったページも「目的をより達成してもらえるサイト」にならず、もったいないからです。

キズフォト!も 今回は数値目標を達成することができませんでした。

  • 目標がそもそも目的とずれていた
  • 目的を達成するためのターゲットが間違っていた
  • そもそもサイトにアクセスしてもらえていない

など、仮説の間違いを見つけて仮説を立て直して目標を再設定しPDCAを繰り返し行なって、目的をより達成できるwebサイトやwebページを作っていくことまでが仕事なのです。
そうして 自分の仮説の精度を上げて、より目標を達成できるWebサイトが作れるようになっていくことも大切です。

最後までおつきあいいただきありがとうございました。
以上、Webサイトができるまでの仕事の流れでした。
コムコーポレーションで一緒にwebサイトを作ってくれる方を募集しています!
webプログラマー・webデザイナーの応募はこちらから