Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webサイトの核をデザインするための最初の一歩

8,582 views

Published on

見た目が良いのに、なんとなく上手くいかない理由は、Web デザインにおける『核』を省いたまま、サイトを制作しているからです。その核とはコンテンツです。
コンテンツはあって当たり前。あとで流し込めば良いという先入観から制作を始めると、見た目はなんとなく良いけど中身がないという結果に陥ります。また、クライアントですら、自分たちが出していくべきコンテンツが何かを把握していない場合があります。私たちが考えているほど、コンテンツは訪問者のニーズを満たしていないわけです。

核があり、それを補助するサイトはプロフェッショナルの手を借りないと作ることができないはずです。セッションでは、Web サイトにおける『核』の重要性と、その見つけ方を紹介します。そして、見つけ出した核をどのようにコンテンツ設計やビジュアルに活かすのかを事例をみながら解説します。

Published in: Design

Webサイトの核をデザインするための最初の一歩

  1. 1. Webサイトの核をデザインするための最初の一歩 長谷川恭久 CSS Nite in SENDAI, Vol.7 2013年10月19日
  2. 2. 制作者以外でもメイン画像が変更可能 写真ギャラリー お問い合わせフォーム 自由に切り替え可能なカラーテーマ ブログとの連携 レスポンシブWebデザイン
  3. 3. 不動産に特化したカスタマイズ済 権限を分けてコンテンツ管理が可能 高解像度スクリーン対策 Google マップ との連携 Sass & Bootstrap レスポンシブWebデザイン
  4. 4. 個性のあるデザインは、あれば欲しいけど、 それより自分が出したい情報を すぐに出せることのほうが重要。 あるヘアサロン店長
  5. 5. • ただ制作するだけという立場の今後は不透明 • 凝ったビジュアルや最新技術は内輪向けの価値観 • デザインは重要だが、その前にすることがある
  6. 6. Design Trust Brand デザイン 信頼 ブランド
  7. 7. 表現・配信・対話 Design デザイン 価値の具体化・実践 Trust 信頼 大事にしている価値観 Brand ブランド
  8. 8. Design デザイン 価値の具体化・実践 Trust Brand 信頼 ブランド
  9. 9. VS Customer Service Hell, Time (2011)
  10. 10. Meaningful Brand Index (2013) by Luke Ma
  11. 11. Meaningful Brand Index (2013) by Luke Ma
  12. 12. • 製品・サービスのアピールだけでは、顧客はついてこない • 売り物だけでは『差別化』になり難い • 安売り・クーポンでは、顧客ロイヤリティに繋がりにくい • イメージ以外で、価値を伝える必要がある Meaningful Brand Index (2013) by Luke Ma
  13. 13. コンテンツはあるから、変換するだけだよね??
  14. 14. スマホサイトへの不満 見た目だけの『対応』 自己満足なコンテンツ 無駄なコンテンツ 不十分なコンテンツ
  15. 15. Android Fragmentation Visualized (July 2013)
  16. 16. Android Fragmentation Visualized (July 2013)
  17. 17. 5.7
  18. 18. 5.5
  19. 19. 価値あるコンテンツの設計 マルチデバイスを見据えた提案 持続可能な配信モデルの提案 上記が実現できるサイト設計
  20. 20. 価値あるコンテンツの設計 コアになる価値の共有 マルチデバイスを見据えた提案 コンテンツの整備・CMSの設計 持続可能な配信モデルの提案 ワークフローとガイドライン作成 上記が実現できるサイト設計 利用者導線を考慮した設計
  21. 21. サイモン・シネック WHYから始めよ! ― インスパイア型リーダーはここが違う ゴールデン・サークル
  22. 22. 何をするか。何を売るか。 どうやってするか。どう売るか。 なぜやっているか。なぜ存在しているか。
  23. 23.
  24. 24. 多機能で素晴らしい製品を販売しています 素敵なデザインでユーザーフレンドリーです ??????
  25. 25. そして素晴らしい製品ができあがりました 世界を変えるために美しいデザインが必要 我々がすることは世界を変えると信じている
  26. 26. ディズニーランドやメディアがあります 笑顔が生まれるコンテンツと場所が必要 人々を幸せにしたい
  27. 27. 服・ギア・トラベルグッズがあります デザインと素材にこだわった製品が必要 社会変革のための道具であり、模範でありたい
  28. 28. 3M Nike Disney Marriott Merck Mary Kay Patagonia Wal-Mart Coca-Cola IBM 未解決の問題を革新的な方法で解決 競技・勝利するときの感情を体験してもらう 人々を幸せにしたい 家を離れていても友と過ごす時のような気分を提供 人々の生活を改善し、守り続ける 女性に無限の可能性を提供する 社会変革のための道具であり模範でありたい 普通の人が裕福な人と同じ物が変える機会を提供 楽観的で幸せな時を提供する 企業にとって意味のある革新を
  29. 29. ビジョンを補助するコンテンツ 配信方法 最適な色や表現 写真の選び方
  30. 30. 社会変革のための道具であり、模範でありたい
  31. 31. 社会責任 環境助成金プログラム デザインと素材 製品にまつわるストーリー
  32. 32. 楽観的で幸せな時を提供したい
  33. 33. 相性の良いレシピ紹介 ライフスタイル提案 シロクマ保護プログラム 製品にまつわるストーリー
  34. 34. 言語化・視覚化が必要
  35. 35. 個人のテイストでデザインが決まる 言葉の捉え方の違いによる誤解 コンテンツの軸が定まらない 流行に流され続ける
  36. 36. どうやってコンテンツの核を見つけ出すの?
  37. 37. クライアント、同僚、上司に尋ねる キーワードを書き出す 短くて明確な言葉に落とし込む 価値を展開してコンテンツ案を練る
  38. 38. Good Core Principles よい『核』はどういったものなの?
  39. 39. 報酬がなかったとしても、やれることか 個人的に共感できるか 10年後も通用するかどうか
  40. 40. コンテンツ ビジョン・核 ニーズ・タスク 利用者
  41. 41. 今あるコンテンツの品質チェック 必要なコンテンツの洗い出し 利用者導線と画面遷移の設計 遷移とコンテンツのマッチング
  42. 42. ページ名 URL 制作日 更新日 担当者 ページビュー 離脱率 滞在時間 コンバージョン
  43. 43. 画面内のコンテンツの細分化 各要素の課題の洗い出し 進行状況
  44. 44. Webサイト『制作』以上のことを考え始める 核を明確にすることでデザインしやすくなる コンテンツには、たくさんの課題がある 真のビジネスパートナーとして
  45. 45. 長谷川恭久 mail@yasuhisa.com @yhassy www.yasuhisa.com/could

×