WEBサイト制作手順業務系エンジニアのための
はじめに・今回のお話はPCサイト限定・WEBサイトには目的がある・toC向けのサービス作って終わりじゃない改善の繰り返し2
サイトコンセプトを決定1.何のためにサイトをつくるのか2.サイトのゴールは何か(売る?人を集める?使ってもらう?)→ ビジネスモデルとも関連3.サイトで何をするか→ どんなコンテンツを乗せるか4.誰をターゲットとするか→ 誰をお客さんとするかで...
制作会社を決定1.制作(デザイン、HTMLコーディング)、開発ができるか2.デザイン引き出しが多いか → 実績を確認3.HTMLコーディング少なくともxHTML+CSS今ならHTML5+CSS3制作ができるかW3Cのバリデーションでエラーがない...
デザインコンセプトを決める1.サイトコンセプトを伝える2.デザインコンセプトを伝えるどういうトンマナ(トーン&マナー)かを伝える雰囲気かっこいい、かわいい。プロっぽい、アマっぽい。フォーマル、カジュアル。信頼、誠実さ、安心、データっぽく。。。色...
サイト設計1.サイトマップ:サイトの構成やコンテンツの種類2.ページの構成:ヘッダー、サイドバー、メインコンテンツ、フッター、広告欄、NotFoundワイヤーフレーム3.UI/UX設計4.コーディング設計:CSS設計5.導線設計まずはサイトトッ...
サイト設計SNS設計Twitter、Facbookのボタンをコンテンツ内設置ページごとにSNS側で表示、リンクさせるページを設定Facebookページ作成FacebookやTwitterアイコンとかSNS側の更新ルールアクセス解析用設計Goog...
その他作業1.サービス設計サービス名、キャッチコピー、サブタイトルドメインロゴ (参照資料)動作環境:対象OS、ブラウザ2.素材集めチームロゴやその他画像、テキスト3.問合せフォーム作成、メールアドレス設定、メールテキストの検討4.成果物HTM...
SEO実施策SEOに必要な要素は?9・メタタグとか、タイトルタグとか・コンテンツ内にキーワードをテキストでちりばめる・内部リンク・外部リンク・サイトマップXML・Googleウェブマスターツール・告知依頼(他サイトとの連携)SEO診断してくれる...
プロモーション実施策・こんなことをサイトオープン当初にやりました。10・今、組織的にやっていること・サイトオープン時の目標まずは認知拡大。→ KPIはPV数。1年後 ●●万PV/月・イベント前日までに → Twitter、Facebook・デー...
Google Analyticsをやる定期的に見る項目を決めて、定点観測11ユーザーテストをやる・1年間で1回やっただけ。本当はもっとやりたい・作り手の理屈を痛いほどわかるチャンス・誰に見てもらうかも大事ターゲットではない人に見てもらうことに意...
まとめ制作会社がやってくれるのは、我々が考えたことを形にすること。12みなさんの参考になれば作る前に何をしたいか作った後にどうしたいかを考えないといいサイトは作れません。
Upcoming SlideShare
Loading in …5
×

業務エンジニアのためのWebサイト制作手順

1,197 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,197
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

業務エンジニアのためのWebサイト制作手順

  1. 1. WEBサイト制作手順業務系エンジニアのための
  2. 2. はじめに・今回のお話はPCサイト限定・WEBサイトには目的がある・toC向けのサービス作って終わりじゃない改善の繰り返し2
  3. 3. サイトコンセプトを決定1.何のためにサイトをつくるのか2.サイトのゴールは何か(売る?人を集める?使ってもらう?)→ ビジネスモデルとも関連3.サイトで何をするか→ どんなコンテンツを乗せるか4.誰をターゲットとするか→ 誰をお客さんとするかで全てが変わる3
  4. 4. 制作会社を決定1.制作(デザイン、HTMLコーディング)、開発ができるか2.デザイン引き出しが多いか → 実績を確認3.HTMLコーディング少なくともxHTML+CSS今ならHTML5+CSS3制作ができるかW3Cのバリデーションでエラーがないか、少ないか4※その他、お金、おつきあいなどいろんな要素はあるhttp://validator.w3.org/
  5. 5. デザインコンセプトを決める1.サイトコンセプトを伝える2.デザインコンセプトを伝えるどういうトンマナ(トーン&マナー)かを伝える雰囲気かっこいい、かわいい。プロっぽい、アマっぽい。フォーマル、カジュアル。信頼、誠実さ、安心、データっぽく。。。色 背景、メインカラーいくつかデザインサンプルを出してもらう参考となる他のサイトをいくつか提示してもらうデザインの叩きをいくつか出してもらう5ここからは制作会社との協業、コミュニケーション
  6. 6. サイト設計1.サイトマップ:サイトの構成やコンテンツの種類2.ページの構成:ヘッダー、サイドバー、メインコンテンツ、フッター、広告欄、NotFoundワイヤーフレーム3.UI/UX設計4.コーディング設計:CSS設計5.導線設計まずはサイトトップ、いずれはクラブトップ6.SEO設計検索のメインキーワード設定 Googleキーワードツールの利用メタタグ設計、タイトルタグ設計サイトマップXML、Google WebMaster登録など6
  7. 7. サイト設計SNS設計Twitter、Facbookのボタンをコンテンツ内設置ページごとにSNS側で表示、リンクさせるページを設定Facebookページ作成FacebookやTwitterアイコンとかSNS側の更新ルールアクセス解析用設計Google Analyticsヒートマップ系(ClickHeatなど)開発の設計7
  8. 8. その他作業1.サービス設計サービス名、キャッチコピー、サブタイトルドメインロゴ (参照資料)動作環境:対象OS、ブラウザ2.素材集めチームロゴやその他画像、テキスト3.問合せフォーム作成、メールアドレス設定、メールテキストの検討4.成果物HTMLソース、画像系、素材ファイル(PSD、FLA)8
  9. 9. SEO実施策SEOに必要な要素は?9・メタタグとか、タイトルタグとか・コンテンツ内にキーワードをテキストでちりばめる・内部リンク・外部リンク・サイトマップXML・Googleウェブマスターツール・告知依頼(他サイトとの連携)SEO診断してくれる無料サービスがあり、これを使わない手はない。http://itomakihitode.jp/、http://dipper.septeni.co.jp/
  10. 10. プロモーション実施策・こんなことをサイトオープン当初にやりました。10・今、組織的にやっていること・サイトオープン時の目標まずは認知拡大。→ KPIはPV数。1年後 ●●万PV/月・イベント前日までに → Twitter、Facebook・データ集計後に → Twitter、Facebook、スポナビブログ・コラム:随時 → Twitter、Facebook・この1年間こんなこともやりました・コラム内リンクを増やす(関連記事的な)・クリックされやすいコラムタイトルの検討・取引先のWEBサイトで紹介してもらう・はてブなどソーシャルブックマーク系にアップ・プレスリリースを出すとか・・・
  11. 11. Google Analyticsをやる定期的に見る項目を決めて、定点観測11ユーザーテストをやる・1年間で1回やっただけ。本当はもっとやりたい・作り手の理屈を痛いほどわかるチャンス・誰に見てもらうかも大事ターゲットではない人に見てもらうことに意味はないPDCAを回すデータを元に分析Google Anlyticsを見ながら(参照元とか。。。)ユーザーテストで仮説が正しいか確認
  12. 12. まとめ制作会社がやってくれるのは、我々が考えたことを形にすること。12みなさんの参考になれば作る前に何をしたいか作った後にどうしたいかを考えないといいサイトは作れません。

×