Knock! Knock! サイトができるまで

790 views

Published on

2012年4月13日開催、Knock! Knock! 勉強会発表資料

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Knock! Knock! サイトができるまで

  1. 1. Knock Knock サイ ができ まで ! ! ト る 2012年1月14日 Knock! Knock! 勉強会
  2. 2. 本日のお題1)設計フェーズ(目的・サイトマップ・ワイヤーフレーム)2)デザイン・実装フェーズ(デザイン・コーディング)3)運用フェーズ(現状のサイト評価)
  3. 3. W eb 51/20
  4. 4. W eb W eb /DTP W eb W eb S1/20
  5. 5. 1/20
  6. 6. 1)設計フェーズ(目的・サイトマップ・ワイヤーフレーム)
  7. 7. 設計フェーズ サイトの目的① Knock! Knock!の告知 / 集客 / 実績紹介 発表者のブランディング → 勉強会の発展 → Web業界㏌静岡の発展 → 自分のブランディング パーマリンクなどを考え とサイ る ト制作一択 (ATNDなどと比較して)4/20
  8. 8. 設計フェーズ サイトの目的②と③ ほかの勉強会の紹介 → 静岡のWeb業界の発展、集客サポート サイト運営 / 実装技術の実験場 レスポンシブWebデザイン+JS コンテンツの増減をJSで制御(データ量の最適化)4/20
  9. 9. 設計フェーズ ビジュアルコンセプト なるべく手間をかけない = 本業を圧迫せず構築・運用 「シンプル」気楽さ 「 ・親しみ」活気」 「5/20
  10. 10. 設計フェーズ  コンテンツを スト リ アップ Knock! Knock!の告知 / 集客 / 実績紹介 直近の勉強会情報 よく る質問 あ 終了した勉強会情報 メルマガ 当勉強会の説明 ソーシャ ル関連 勉強会の紹介 そのほか 県内の勉強会開催情報 お問い合わせ 県外の勉強会開催情報 個人情報保護方針 勉強会リンク集 協賛バナー お知らせ8/20
  11. 11. 設計フェーズ サイ マップ / コンテンツマップ ト Knock! Knock! トップページ 直近の勉強会情報 勉強会について 勉強会リンク よくある質問 メルマガ お問い合わせ サブナビゲーション 終了した勉強会 勉強会情報 新着情報 趣旨・目的 県内開催の勉強会リスト 登録フォーム 個人情報の取扱いについて 勉強会バックナンバー 直近の勉強会 概要 運営者情報 最新のバックナンバー サイトマップ 新着情報 終了した勉強会 スピーカー / セッション情報 バックナンバーリスト 概要 静岡県内の勉強会情報 タイムテーブル バックナンバー タイムテーブル サイドバー そのほか注意事項など バックナンバー スピーカー / セッション情報 県外の勉強会情報 そのほか注意事項など スポンサーバナー セッションの個別エントリー 新着情報 勉強会バックナンバー Twitterウィジェット 新着情報 Facebookウィジェット 概要 タイムテーブル スピーカー / セッション情報 そのほか注意事項など セッションの個別エントリー ※ マインドマップで作る 変更が容易で便利です と、8/20
  12. 12. 設計フェーズ ワイヤーフレーム サブナビゲーション logo サイト内検索 ナビゲーション 新着情報 直近の勉強会情報 県内の勉強会情報 スポンサーバナー 終了した勉強会 県外の勉強会情報 Twitter Facebook フッター13/20
  13. 13. 設計フェーズ ワイヤーフレームの目的 コンテンツの配置と大小(=重要性) を整理 メインコンテンツ : Knock! Knock! 勉強会の紹介 サブコンテンツ : 県内の勉強会情報、 スポンサーバナー おまけコンテンツ : 県外の勉強会情報、 ソーシャル関連13/20
  14. 14. 設計フェーズ グリ ドシステム ッ サブナビゲーション logo 70px 20px サイト内検索 ナビゲーション 600px 340px 新着情報 直近の勉強会情報 160px 県内の勉強会情報 スポンサーバナー 終了した勉強会 県外の勉強会情報13/20
  15. 15. 設計フェーズ グリ ドの意味 ッ ・基本グリ ド : 70px + 余白20px ッ ・メインコンテンツエリ アを600pxに設定 iPhone対応 (Retineディスプレイ)を想定 device-width:320px = 左右の余白各10px + コンテンツエリ ア300px (Retina対応で2倍の解像度) ・ ドバーエリ サイ アを340pxに設定 160px幅のバナーエリ ア2段+余白13/20
  16. 16. 2)デザイン・実装フェーズ(デザイン・コーディング)
  17. 17. 設計フェーズ 詳細ワイヤーフレーム 静岡の Web 制作者のための勉強会 個人情報の取扱いについて ¦ サイトマップ Knock! Knock! サイト内検索 Knockin on the next web,design 開催情報 Knock! Knock! とは 勉強会リンク よくある質問 メルマガ お問い合わせ 新着情報 2011.1.10 1st Knock! 勉強会情報 「静岡 web デベロッパーフォーラム飲み会(第 16 回)」 を掲載しました バナー 2011.1.10 勉強会「1st Knock!」開催のお知らせ 2011.1.10 サイトを公開しました スピーカー jQuery : 植木 真さん (インフォアクシア) 県外の勉強会情報 協賛 アクセシビリティ : 益子 貴寛さん (サイバーガーデン) 2012.01.21 開催(名古屋) 日時 2011年11月12日 (金) 13:00∼18:00 (予定) CSS Nite in NAGOYA, Vol.7 会場 e-とぴあ かがわ BBスクエア ・ 著作権だがや。 事例から学 ∼ ぶ権利のはなし 参加費 6,000円(10月28日までのお申込みは早期割引4,000円) 2012.02.04 開催(東京) CSS Nite LP, Disk 21「タイ お申し込みはこちら ポグラフィ、 組版、 Web Fonts」 2012.3.24(東京) CSS Nite LP, Disk 22 「Web デザインで使う 県内の勉強会情報 もっと見る 2012.3.24(東京) CSS Nite LP, Disk 22 2012.01.28 静岡市 第 3 回 HTML5 読書会 「Web デザインで使う もっと見る 2012.01.21 三島市 デジタルアシスト Web 勉強会 2012.01.17 静岡市 静岡 web デベロッパーフォーラム飲み会(第 16 回) 2012.01.14 静岡市 第6回静岡 ITPro 勉強会 インフラ部 2012.01.14 浜松市 Flex User Group 勉強会 161 回 @ 浜松 終了した勉強会 6th Knock! 5th Knock! 4th Knock! 開催 2012.2.10 開催 2012.2.10 開催 2012.2.10 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真 3rd Knock! 2nd Knock! 1st Knock! 開催 2012.2.10 開催 2012.2.10 開催 2012.2.10 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真 Copyright c 2012 Knock! Knock!. All Rights Reserved.14/20
  18. 18. 設計フェーズ 詳細ワイヤーフレーの意味 ・ワイヤーフ レームに実際を想定した テキスト / 写真枠などを流し込んだもの ・装飾デザインを施さずに、情報の伝達性を確認14/20
  19. 19. デザイン・実装フェーズ ock!ck! 個人情報の取扱いについて ¦ サイトマップ KnKno Knock! Knock!は静岡のWeb制作者のための勉強会です。 「コンコンッ」 とドアをノック、 新しいWebの扉を開いていきませんか? サイト内検索 ノッ ノッ ク! ク! knockin’ on the door of future web  開催情報 Knock! Knock! とは 勉強会リンク よくある質問 メルマガ お問い合わせ 新着情報 2011.1.10 1st Knock! ノッ ノッ 勉強会 第1回 ク! ク! L5 /C SS3 vaScr ipt 勉強会情報 を掲載しました 「静岡 web デベロッパー 2011.1.10 フォーラム飲み会(第 16 回)」 HTM uery / Ja 勉強会「1st Knock!」開催のお知らせ jQ ck! 2 12年2月10日 0 (金) 19:30∼21:30 B-nest ビネスト)静岡市産学交流センター 7F 演習室2 ( Knonock! K ノッ ノッ ク! ク! 2011.1.10 サイトを公開しました knockin’ on the door of future web セッション/スピーカー : jQuery : 植木 真さん (インフォアクシア) 県外の勉強会情報 協賛 アクセシビリティ : 益子 貴寛さん (サイバーガーデン) 2012.01.21 開催(名古屋) 日時 : 2012年2月10日 (金)  19:30∼21:00 (予定) CSS Nite in NAGOYA, Vol.7 会場 : B-nest (ビネスト)静岡市産学交流センター 7F 演習室2 著作権だがや。 事例から学 ∼ ぶ権利のはなし 参加費 : 500円 2012.02.04 開催(東京) CSS Nite LP, Disk 21「タイ 参加お申し込みはこちら ポグラフィ、 組版、 Web Fonts」 2012.3.24(東京) CSS Nite LP, Disk 22 「Web デザインで使う 静岡県内の勉強会情報 一覧表示 2012.3.24(東京) CSS Nite LP, Disk 22 2012.01.28 静岡市 第 3 回 HTML5 読書会 「Web デザインで使う 一覧表示 2012.01.21 三島市 デジタルアシスト Web 勉強会 2012.01.17 静岡市 静岡 web デベロッパーフォーラム飲み会(第 16 回) 2012.01.14 静岡市 第6回静岡 ITPro 勉強会 インフラ部 2012.01.14 浜松市 Flex User Group 勉強会 161 回 @ 浜松 終了した勉強会 6th Knock! 5th Knock! 4th Knock! 開催 2012.2.10 開催 2012.2.10 開催 2012.2.10 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・基調講演:長谷川恭久 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・マークアップ:益子貴寛 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真 ・アクセシビリティ:植木 真17/20
  20. 20. デザイン・実装フェーズ 装飾としてのデザイン 詳細ワイヤーに装飾デザインを付加 ・今回は一貫製作でやっ ているからいいけど ・設計とデザインが分かれる場合には、 単なる色塗りだとまずいよね17/20
  21. 21. デザイン・実装フェーズ カラーについて メインカラー : オレンジ 重要なボタ : ライ ブルー ン ト なぜオ レンジ? → ビジュアルコンセプト = 気楽さ 親しみ 元気 ・ ・ それを表現でき るカラーは? →イ メージスケールを参考にピック アップ ※ブルーは、 メインカラーの補色を元にバランス調整17/20
  22. 22. デザイン・実装フェーズ イメージスケール17/20
  23. 23. デザイン・実装フェーズ 言語イメージスケール17/20
  24. 24. デザイン・実装フェーズ イメージスケールとは 色に対して抱く メージは人によ て微妙に異な ますが、 イ っ り 共通する部分も多く認められます。 そのイメージの共通感覚を心理学的研究の蓄積で 明らかにしたものが、 メージスケールです イ 。 (株)日本カラーデザイン研究所 http://www.ncd-ri.co.jp/image_system.html17/20
  25. 25. デザイン・実装フェーズ イメージスケールによるカラー選定17/20
  26. 26. デザイン・実装フェーズ 実装(コーディング) ・ a-blog cms サブドメイン拡張ライセンス ・ HTML5 Boilerplate ・ レスポンシブWebデザイン + JavaScript ・ LESS (CSS拡張メタ言語) ・ Type Square モ ( リサワ謹製Webフ ト) ォン18/20
  27. 27. 3)運用フェーズ(現状のサイト評価)
  28. 28. 運用フェーズ 制作的にやりたい事はやった ただしブラッシュアップが必要 ・レスポンシブWebデザインのIE8対応 ・TypeSquareのWindows対応の改善 ・Retine / 非Retineの画像の出し分け etc...19/20
  29. 29. 運用フェーズ 現状のサイト評価 目標は今のところ達成できていない 集客に苦労 ・リーチ拡大のため、 ルマガを一般開放 メ ・CSS Nite in SHIZUOKAなどでの露出 発表者の確保 ・私が発表し続けても仕方がない ・誰もが発表でき / したく る なる環境づくり ・ブランディ ングに寄与す るためのアクション19/20
  30. 30. 20/20
  31. 31. 次回は5/12 (土) です
  32. 32. E -m a il : in fo @ h a m n aly .com Tel:055-994-9062

×