デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。 コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。 UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。

1. Content
&
User Interface
コンテンツで改善するUIデザインの極意
長谷川恭久
2013年3月16日 Android Bazaar and Conference 2013 Spring

2. ハ セ ガ ワ ヤ ス ヒ サ
長谷川恭久
@yhassy

4. 48,700,000
Reuters and ComScore (Feb. 2013)

5. Men Women
Pew Internet Research 2013

12. 1ページに 素早い
多数結果 検索表示

13. エンゲージメントの 検索数の
低下 低下

14. 無限スクロールを実装する前に、私たちは利用者への
理解をもっと深めるべきだった。
Dan McKinley, Principal Engineer at Etsy

17. Add
Pin Board Follow
Save
Post

18. Blog Tag
Pin Board Follow
Category

19. Add
Pin Board Follow
Apply
Friend

25. What is UI ?

26. What is GUI ?

28. UI = Text
文字はインターフェイスである

30. コピーライティングはインターフェイスデザイン
である。ピクセルに拘るのと同様、１文字にも
大きな意味がある。
Jason Fried, Founder of 37Signals

41. 言葉がサイト・アプリの印象を変える
言葉で人の行動を変えることができる

43. コンテンツがないデザインは、ただの装飾。
Jeffrey Zeldman, Happy Cog, A List Apart

44. ちょっとした言葉がアプリを定義する
システムの吐き出しではなく人間との対話
コンテンツファースト

46. 1
Know your audience
利用者のことを知る

47. 現存
新規
有料
すべて
無料 復帰

50. カジュアルなメッセージ
少し自信アリのアーティストタイプ

51. 利用者のペルソナを設計
なぜアプリ・サービスを使うのか
利用者が対話しやすい形状を考える

52. 2
Short and Clear
簡潔・明確に表現する

55. 利用者のタスクを素早く的確に補助

59. 検索？ ズーム？

60. 閉じる？ 削除？

61. フロッピーディスク？？？
機能的表現からメタファに変化

64. 絵より言葉のほうが明確な場合がある
利用者の期待を保証する言葉は？
明確さを優先。捻るのは慎重に。

65. ラベル
ボタン
メニュー
告知メッセージ

66. 3
Voice and Tone
自分たちの声をみつける

67. ビジネス or カジュアル
フォーマル or フレンドリー
面白く or 可愛く

70. 人格化するとしたらどんな性格？
誰をターゲットにしている？
利用者にどう感じてもらいたいか

72. 1 Know your audience
2 Short and Clear
3 Voice and Tone

73. Empathy
利用者への共感をもつ

74. 利用者の特定の課題に応える
すべての画面を再調査
コンテンツの管理と維持を始める

75. Content = Design
コンテンツから始めればデザインもみえてくる

76. Thank you!
長谷川恭久
mail@yasuhisa.com
@yhassy
yasuhisa.com/could