• Like
  • Save
コンテンツから始まる新しいWebワークフロー
Upcoming SlideShare
Loading in...5
×

コンテンツから始まる新しいWebワークフロー

  • 3,427 views
Uploaded on

CSS Nite in AOMORI 基調講演資料。 …

CSS Nite in AOMORI 基調講演資料。

マルチデバイス化がますます進む 2013 年。これは対応するスクリーンが増えただけではなく、新たな考え方を身につけなければいけないことを意味しています。今までのやり方が通用しないのは Web サイト制作だけのことではなく、マーケティングやブランディングなど他の分野にも共通していえることです。「コンテンツが大事」と昔から言われていますが、今までと同じやり方では大事なコンテンツが人へ届かないということになります。

コンテンツの設計から始めることで、より柔軟で拡張性のある Web サイトを作るためのワークフローのヒントを紹介します。

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,427
On Slideshare
0
From Embeds
0
Number of Embeds
18

Actions

Shares
Downloads
0
Comments
0
Likes
27

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 長谷川恭久CSS Nite in AOMORI, Vol.7 2013年4月27日コンテンツから始まる新しいWebワークフロー
  • 2. ハ セ ガ ワ ヤ ス ヒ サyhassy
  • 3. CSS Nite in TAKAMATSU(2012)‣ 進むマルチデバイス化‣ 多種多様なWebとの関わり‣ 従来の作り方の限界
  • 4. レイアウトタイポグラフィ色コピー写真・動画テキスト情報の優先度操作感導線
  • 5. 5.5インチのディスプレイ27インチのタブレット?
  • 6. https://twitter.com/dkdsgn/status/3223425089128529922.83.143.23.43.53.6 3.654.04.24.274.34.54.524.654.85.05.35.55.86.37.07.77.010 10.1
  • 7. ビジュアルコンテンツ画面遷移・インタラクション(プロトタイプ)
  • 8. コンテンツ プロトタイプ
  • 9. コンテンツ‣ 後回しにしないコンテンツ開発‣ マルチデバイス化への構造化‣ 人のためになるコンテンツ配信
  • 10. ‣ カンプはリスクになる‣ 模索ができる『何か』‣ 使い勝手や画面遷移 プロトタイプ
  • 11. プロトタイプコンテンツ
  • 12. コンテンツデータ収集 分析・解析 ゴール設定
  • 13. プロトタイプ‣ プロトタイプの目的が明確になる‣ ツールの選定がしやすくなる‣ 仮説を基にしたプロトタイプの設計
  • 14. スタイルガイド UIライブラリ スタイルタイルビジュアル
  • 15. プロトタイプビジュアルデータ収集 解析・分析 ゴール設定
  • 16. データ収集ORGANIZE DATA
  • 17. 自動化ツールでページを収集必要最低限のデータを収集・管理棚卸しは必ずする
  • 18. 分析・解析ANALYZE DATA
  • 19. ページビュー・訪問者数直帰率・離脱率滞在時間ゴール達成数売り上げ
  • 20. ‣ なぜアクセスされているのか?‣ なぜお問い合わせボタンを押さない?‣ ソーシャル経由は直帰率がなぜ高い?分析・解析
  • 21. ダッシュボードカスタムレポートアドバンス セグメント
  • 22. ‣ サイトパフォーマンス ダッシュボード  http://bit.ly/11vzaQS‣ 直帰しなかったソーシャルトラフィック  http://bit.ly/11vzKht‣ Not Provided 以外のオルガニック検索  http://bit.ly/11vAbbv‣ タブレット以外のモバイルトラフィック  http://bit.ly/11vAmn2‣ 時間ごとにトラフィックを解析  http://bit.ly/hrdreport
  • 23. ゴール設定SET YOUR GOAL
  • 24. ゴールなしのサイト制作は意味なし測定可能なデータからゴールを設定可能な限り明確なゴールを立てる測定のためのテンプレートを制作ゴール設定
  • 25. Design is how it worksデザインはどのように機能するかである。
  • 26. データ収集 分析・解析 ゴール設定ユーザビリティ利用者像 CMS設計
  • 27. データ収集 分析・解析 ゴール設定‣ ターゲット利用者が本当に必要なコンテンツの開発‣ 実現可能なコンテンツ配信の計画ができる‣ フォーカスされることによりコスト削減‣ 様々なチャンネルで一貫したメッセージ配信
  • 28. コンテンツ
  • 29. プロトタイプ
  • 30. プロトタイプブログ記事からお問い合わせへ誘導したい導線を複数提案スケッチ / HTML / 画像ツール検証・調整
  • 31. コンテンツ
  • 32. ビジュアル
  • 33. ビジュアルターゲットに合ったビジュアルは何?スタイルブック・見本帳色 / 形 / 雰囲気の擦り合わせ検証・調整
  • 34. ‣ ボタン‣ ヘッダー‣ ボックス‣ リスト‣ ボタン‣ 本文‣ 画像・写真‣ テーブル
  • 35. データ収集 分析・解析 ゴール設定プロトタイプビジュアル
  • 36. コンテンツから始めると変わるコンテンツの棚卸しに挑戦データによって伸びるクリエイティブ小さく始めて、着実な検証コンテンツ
  • 37. 基礎講座コンテンツ戦略UI設計
  • 38. 基礎講座コンテンツ戦略UI設計マルチデバイス化のためのコンテンツ戦略コンテンツを活かすための UI 設計
  • 39. mail@yasuhisa.com@yhassy長谷川恭久yasuhisa.com/couldTHANK YOU!