WEBディレクターがいない技術部、業務システムしか経験がないエンジニアが、WEBサイトの制作を依頼されたら。。。最低限おさえておきたいところをまとめました。

1. WEBサイト制作手順
業務系エンジニアのための

2. はじめに
・今回のお話はPCサイト限定
・WEBサイトには目的がある
・toC向けのサービス
作って終わりじゃない
改善の繰り返し
2

3. サイトコンセプトを決定
1.何のためにサイトをつくるのか
2.サイトのゴールは何か
(売る？人を集める？使ってもらう？)
→ ビジネスモデルとも関連
3.サイトで何をするか
→ どんなコンテンツを乗せるか
4.誰をターゲットとするか
→ 誰をお客さんとするかで全てが変わる
3

4. 制作会社を決定
1.制作(デザイン、HTMLコーディング)、開発ができるか
2.デザイン
引き出しが多いか → 実績を確認
3.HTMLコーディング
少なくともxHTML+CSS
今ならHTML5+CSS3制作ができるか
W3Cのバリデーションでエラーがないか、少ないか
4
※その他、お金、おつきあいなどいろんな要素はある
http://validator.w3.org/

5. デザインコンセプトを決める
1.サイトコンセプトを伝える
2.デザインコンセプトを伝える
どういうトンマナ(トーン＆マナー)かを伝える
雰囲気
かっこいい、かわいい。プロっぽい、アマっぽい。
フォーマル、カジュアル。信頼、誠実さ、安心、
データっぽく。。。
色 背景、メインカラー
いくつかデザインサンプルを出してもらう
参考となる他のサイトをいくつか提示してもらう
デザインの叩きをいくつか出してもらう
5
ここからは制作会社との協業、コミュニケーション

6. サイト設計
1.サイトマップ：
サイトの構成やコンテンツの種類
2.ページの構成：
ヘッダー、サイドバー、メインコンテンツ、フッター、広告欄、NotFound
ワイヤーフレーム
3.UI/UX設計
4.コーディング設計：CSS設計
5.導線設計
まずはサイトトップ、いずれはクラブトップ
6.SEO設計
検索のメインキーワード設定 Googleキーワードツールの利用
メタタグ設計、タイトルタグ設計
サイトマップXML、Google WebMaster登録など
6

7. サイト設計
SNS設計
Twitter、Facbookのボタンをコンテンツ内設置
ページごとにSNS側で表示、リンクさせるページを設定
Facebookページ作成
FacebookやTwitterアイコンとか
SNS側の更新ルール
アクセス解析用設計
Google Analytics
ヒートマップ系(ClickHeatなど)
開発の設計
7

8. その他作業
1.サービス設計
サービス名、キャッチコピー、サブタイトル
ドメイン
ロゴ (参照資料)
動作環境：対象OS、ブラウザ
2.素材集め
チームロゴやその他画像、テキスト
3.問合せ
フォーム作成、メールアドレス設定、メールテキストの検討
4.成果物
HTMLソース、画像系、素材ファイル(PSD、FLA)
8

9. SEO実施策
SEOに必要な要素は？
9
・メタタグとか、タイトルタグとか
・コンテンツ内にキーワードをテキストでちりばめる
・内部リンク
・外部リンク
・サイトマップXML
・Googleウェブマスターツール
・告知依頼(他サイトとの連携)
SEO診断してくれる無料サービスがあり、これを使わない手はない。
http://itomakihitode.jp/、http://dipper.septeni.co.jp/

10. プロモーション実施策
・こんなことをサイトオープン当初にやりました。
10
・今、組織的にやっていること
・サイトオープン時の目標
まずは認知拡大。→ KPIはPV数。1年後 ●●万PV/月
・イベント前日までに → Twitter、Facebook
・データ集計後に → Twitter、Facebook、スポナビブログ
・コラム：随時 → Twitter、Facebook
・この１年間こんなこともやりました
・コラム内リンクを増やす(関連記事的な)
・クリックされやすいコラムタイトルの検討
・取引先のWEBサイトで紹介してもらう
・はてブなどソーシャルブックマーク系にアップ
・プレスリリースを出すとか・・・

11. Google Analyticsをやる
定期的に見る項目を決めて、定点観測
11
ユーザーテストをやる
・１年間で１回やっただけ。本当はもっとやりたい
・作り手の理屈を痛いほどわかるチャンス
・誰に見てもらうかも大事
ターゲットではない人に見てもらうことに意味はない
PDCAを回す
データを元に分析
Google Anlyticsを見ながら（参照元とか。。。)
ユーザーテストで仮説が正しいか確認

12. まとめ
制作会社がやってくれるのは、
我々が考えたことを形にすること。
12
みなさんの参考になれば
作る前に何をしたいか
作った後にどうしたいか
を考えないといいサイトは作れません。