• Save
コンテンツで改善する UI デザインの極意
Upcoming SlideShare
Loading in...5
×
 

コンテンツで改善する UI デザインの極意

on

  • 128,667 views



デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。 コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。

UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。

Statistics

Views

Total Views
128,667
Views on SlideShare
14,727
Embed Views
113,940

Actions

Likes
181
Downloads
0
Comments
0

50 Embeds 113,940

http://www.find-job.net 46716
http://creive.me 33124
http://plus.find-job.net 18010
http://www.yasuhisa.com 12096
http://bikkuri.me 1670
http://www.advertimes.com 1331
http://cloud.feedly.com 237
https://twitter.com 163
http://tqs.jp 110
http://satohmsys.info 74
https://www.google.co.jp 48
http://s.deeeki.com 35
http://www59.jimdo.com 28
http://malawi 28
http://be-de.tumblr.com 26
http://s_planing.fs06.net 24
http://www.freerss.net 22
http://www.google.co.jp 22
http://rss.ameba.jp 21
http://www.feedspot.com 16
http://reader.freerss.net 13
http://www.komaztz.com 13
http://kwu.tumblr.com 13
http://tweetedtimes.com 13
http://reader.aol.com 10
http://digg.com 9
http://244notes.tumblr.com 7
http://webcache.googleusercontent.com 7
http://fan.imagenavi.jp 7
http://freerss.net 6
http://leggo-lego.jimdo.com 5
http://www.adceed.com 5
http://hatebutv.com 4
http://fs06.net 4
http://www.google.com 3
http://moodle.axis.co.jp 3
http://www.educeed.net 3
https://www.chatwork.com 2
http://feedly.com 1
http://xianguo.com 1
http://www.tumblr.com 1
https://www.google.com 1
http://www.newsblur.com 1
http://fudosan-100.fs06.net 1
https://www.google.nl 1
http://bazqux.com 1
http://dev-wp-fan-inavi.datacraft.jp 1
http://www.inoreader.com 1
http://www.rakuraku-kakko.com 1
http://192.168.33.10 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

コンテンツで改善する UI デザインの極意 コンテンツで改善する UI デザインの極意 Presentation Transcript

  • Content & User Interface   コンテンツで改善するUIデザインの極意 長谷川恭久2013年3月16日 Android Bazaar and Conference 2013 Spring
  • ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  • 48,700,000 Reuters and ComScore (Feb. 2013)
  • Men Women Pew Internet Research 2013
  • 1ページに 素早い多数結果 検索表示
  • エンゲージメントの 検索数の 低下 低下
  • 無限スクロールを実装する前に、私たちは利用者への理解をもっと深めるべきだった。 Dan McKinley, Principal Engineer at Etsy
  • Add Pin Board Follow SavePost
  • Blog TagPin Board Follow Category
  • AddPin Board Follow Apply Friend
  • What is UI ?
  • What is GUI ?
  • UI = Text 文字はインターフェイスである
  • コピーライティングはインターフェイスデザインである。ピクセルに拘るのと同様、1文字にも大きな意味がある。Jason Fried, Founder of 37Signals
  • 言葉がサイト・アプリの印象を変える言葉で人の行動を変えることができる
  • コンテンツがないデザインは、ただの装飾。 Jeffrey Zeldman, Happy Cog, A List Apart
  • ちょっとした言葉がアプリを定義するシステムの吐き出しではなく人間との対話 コンテンツファースト
  • 1Know your audience 利用者のことを知る
  • 現存新規 有料 すべて 無料 復帰
  • カジュアルなメッセージ少し自信アリのアーティストタイプ
  • 利用者のペルソナを設計なぜアプリ・サービスを使うのか利用者が対話しやすい形状を考える
  • 2Short and Clear 簡潔・明確に表現する
  • 利用者のタスクを素早く的確に補助
  • 検索? ズーム?
  • 閉じる? 削除?
  • フロッピーディスク???機能的表現からメタファに変化
  • 絵より言葉のほうが明確な場合がある利用者の期待を保証する言葉は?明確さを優先。捻るのは慎重に。
  • ラベル ボタン メニュー告知メッセージ
  • 3Voice and Tone 自分たちの声をみつける
  • ビジネス or カジュアルフォーマル or フレンドリー 面白く or 可愛く
  • 人格化するとしたらどんな性格? 誰をターゲットにしている?利用者にどう感じてもらいたいか
  • 1 Know your audience2 Short and Clear3 Voice and Tone
  • Empathy 利用者への共感をもつ
  • 利用者の特定の課題に応える すべての画面を再調査コンテンツの管理と維持を始める
  • Content = Design コンテンツから始めればデザインもみえてくる
  • Thank you!長谷川恭久mail@yasuhisa.com@yhassyyasuhisa.com/could