見た目が良いのに、なんとなく上手くいかない理由は、Web デザインにおける『核』を省いたまま、サイトを制作しているからです。その核とはコンテンツです。 コンテンツはあって当たり前。あとで流し込めば良いという先入観から制作を始めると、見た目はなんとなく良いけど中身がないという結果に陥ります。また、クライアントですら、自分たちが出していくべきコンテンツが何かを把握していない場合があります。私たちが考えているほど、コンテンツは訪問者のニーズを満たしていないわけです。 核があり、それを補助するサイトはプロフェッショナルの手を借りないと作ることができないはずです。セッションでは、Web サイトにおける『核』の重要性と、その見つけ方を紹介します。そして、見つけ出した核をどのようにコンテンツ設計やビジュアルに活かすのかを事例をみながら解説します。

1. Webサイトの核をデザインするための最初の一歩
長谷川恭久
CSS Nite in SENDAI, Vol.7
2013年10月19日

4. 制作者以外でもメイン画像が変更可能
写真ギャラリー
お問い合わせフォーム
自由に切り替え可能なカラーテーマ
ブログとの連携
レスポンシブWebデザイン

6. 不動産に特化したカスタマイズ済
権限を分けてコンテンツ管理が可能
高解像度スクリーン対策
Google マップ との連携
Sass & Bootstrap
レスポンシブWebデザイン

8. 個性のあるデザインは、あれば欲しいけど、
それより自分が出したい情報を
すぐに出せることのほうが重要。
あるヘアサロン店長

9. •
ただ制作するだけという立場の今後は不透明
•
凝ったビジュアルや最新技術は内輪向けの価値観
•
デザインは重要だが、その前にすることがある

10. Design
Trust
Brand
デザイン
信頼
ブランド

11. 表現・配信・対話
Design
デザイン
価値の具体化・実践
Trust
信頼
大事にしている価値観
Brand
ブランド

12. Design
デザイン
価値の具体化・実践
Trust
Brand
信頼
ブランド

14. VS
Customer Service Hell, Time (2011)

15. Meaningful Brand Index (2013)
by Luke Ma

16. Meaningful Brand Index (2013)
by Luke Ma

17. •
製品・サービスのアピールだけでは、顧客はついてこない
•
売り物だけでは『差別化』になり難い
•
安売り・クーポンでは、顧客ロイヤリティに繋がりにくい
•
イメージ以外で、価値を伝える必要がある
Meaningful Brand Index (2013)
by Luke Ma

18. コンテンツはあるから、変換するだけだよね？？

19. スマホサイトへの不満
見た目だけの『対応』
自己満足なコンテンツ
無駄なコンテンツ
不十分なコンテンツ

22. Android Fragmentation Visualized (July 2013)

23. Android Fragmentation Visualized (July 2013)

24. 5.7

25. 5.5

28. 価値あるコンテンツの設計
マルチデバイスを見据えた提案
持続可能な配信モデルの提案
上記が実現できるサイト設計

29. 価値あるコンテンツの設計
コアになる価値の共有
マルチデバイスを見据えた提案
コンテンツの整備・CMSの設計
持続可能な配信モデルの提案
ワークフローとガイドライン作成
上記が実現できるサイト設計
利用者導線を考慮した設計

32. サイモン・シネック
ＷＨＹから始めよ！
― インスパイア型リーダーはここが違う
ゴールデン・サークル

34. 何をするか。何を売るか。
どうやってするか。どう売るか。
なぜやっているか。なぜ存在しているか。

36. 核

40. 多機能で素晴らしい製品を販売しています
素敵なデザインでユーザーフレンドリーです
??????

41. そして素晴らしい製品ができあがりました
世界を変えるために美しいデザインが必要
我々がすることは世界を変えると信じている

43. ディズニーランドやメディアがあります
笑顔が生まれるコンテンツと場所が必要
人々を幸せにしたい

45. 服・ギア・トラベルグッズがあります
デザインと素材にこだわった製品が必要
社会変革のための道具であり、模範でありたい

46. 3M
Nike
Disney
Marriott
Merck
Mary Kay
Patagonia
Wal-Mart
Coca-Cola
IBM
未解決の問題を革新的な方法で解決
競技・勝利するときの感情を体験してもらう
人々を幸せにしたい
家を離れていても友と過ごす時のような気分を提供
人々の生活を改善し、守り続ける
女性に無限の可能性を提供する
社会変革のための道具であり模範でありたい
普通の人が裕福な人と同じ物が変える機会を提供
楽観的で幸せな時を提供する
企業にとって意味のある革新を

49. ビジョンを補助するコンテンツ
配信方法
最適な色や表現
写真の選び方

50. 社会変革のための道具であり、模範でありたい

52. 社会責任
環境助成金プログラム
デザインと素材
製品にまつわるストーリー

53. 楽観的で幸せな時を提供したい

54. 相性の良いレシピ紹介
ライフスタイル提案
シロクマ保護プログラム
製品にまつわるストーリー

55. 言語化・視覚化が必要

56. 個人のテイストでデザインが決まる
言葉の捉え方の違いによる誤解
コンテンツの軸が定まらない
流行に流され続ける

57. どうやってコンテンツの核を見つけ出すの？

58. クライアント、同僚、上司に尋ねる
キーワードを書き出す
短くて明確な言葉に落とし込む
価値を展開してコンテンツ案を練る

59. Good Core Principles
よい『核』はどういったものなの？

60. 報酬がなかったとしても、やれることか
個人的に共感できるか
10年後も通用するかどうか

63. コンテンツ
ビジョン・核
ニーズ・タスク
利用者

64. 今あるコンテンツの品質チェック
必要なコンテンツの洗い出し
利用者導線と画面遷移の設計
遷移とコンテンツのマッチング

65. ページ名
URL
制作日
更新日
担当者
ページビュー
離脱率
滞在時間
コンバージョン

66. 画面内のコンテンツの細分化
各要素の課題の洗い出し
進行状況

68. Webサイト『制作』以上のことを考え始める
核を明確にすることでデザインしやすくなる
コンテンツには、たくさんの課題がある
真のビジネスパートナーとして

69. 長谷川恭久
mail@yasuhisa.com
@yhassy
www.yasuhisa.com/could