見た目以上に大事なこれからのデザイン

第40回 HTML5とか勉強会2013.7.25 @LINE株式会社

秋葉秀樹

「美しいもの、カッコいいもの、おしゃれ、はやりのもの」

これらをデザインと認識されている特に日本のかたよった解釈によって

「行動のデザイン」に対するデザイナーへの期待は薄い

デザインを「時間」で考える今日話したいこと…

検索

検索結果をデザイン

「検索結果が見つかりません」その先のユーザー行動にデザインが必要

ゼロ

0反省点：デザイナーは「都合のいい状況」しかデザインをしないことが多い

検索結果がなかったら？通信が途切れたら？

今週のオススメお菓子

最新の材料

TEXT TEXT TEXT TEXT TEXT テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキスト

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りまテキストが入りますテキストが入りますテキストが入りますテキスト

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りまテキストが入りますテキストが入りますテキストが入りますテキスト

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りまテキストが入りますテキストが入りますテキストが入りますテキスト

もっと読む

TEXT TEXT TEXT TEXT TEXT テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキスト

もっと読む

TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT

一瞬きれいに見える、しかし…

今週のオススメお菓子

最新の材料

特製ブラウニースペイン生まれのドーナツシナモンシュガーをたっぷりまぶして揚げたてをいただきます。

ココアパウダーカカオマスから脂肪分であるココアバターを搾った残りである「ココアケーキ」を粉砕して粉末状にしたものです。ココアパウダーにも脂肪分が約 11%-23%程度残っています。製法にはブロマプロセスとダッチプロセスの 2種類があります。

ベーキングパウダーベーキングパウダーは、パンや焼き菓子に使われる膨張剤の一種です。人気のブラウニーにはこのベーキングパウダーを使うとよいでしょう。

ココアパウダー製造の際に食塩を加えないバター。ケーキなど菓子の材料に多く用いられるフレッシュバター。調理や製菓で必要とされ、また腎臓病患者の食事設計に使われることがあります。

もっと読む

バニラエッセンスのかわりにバニラビーンズを半分加えてもおいしい。粉を入れてから混ぜすぎるとふっくらとしたマフィンはできません。また、よく混ざってないとボソボソとした生地になってしまうので、気をつけましょう。焼きたてもいいけど、翌日はよりしっとりしておいしい。粗熱が取れたらラップなどして乾燥を防ぎましょう。

もっと読む

カラメルクリームからつくるカフェ・キャラメルクッキー

さつまいもと鶏ひき肉煮込み鶏ひき肉の和風ロールキャベツ里芋と鶏ひき肉のごま煮里いものころ煮たっぷり野菜のコンソメスープ冷やしだしそうめんつけそうめん（しょうゆ味）

鶏ともやしのそうめんサラダ

実は都合のよいデザイン

反省点：ダミーテキストばかりに頼るからこういう結果になり、結局、

クライアントに「なんかイメージ違う…」「高さそろえて」

結果コンテンツとユーザー行動に大きな悪影響が…

HTML5 Videoを使った動画サイトデザイン

足りない、何かが…

01:25

再生時のボタン 音量のアイコン

音量アイコンマウスオーバーで

音量スライダーがフェードインします

01:25

再生時のボタン 音量のアイコン

音量アイコンマウスオーバーで

音量スライダーがフェードインします

再生が終わった後は？（昇順型？ランダム型？ユーザー選択型？）

デザインを時間で考えると…

反省点：ユーザーが何故このコンテンツにいるのか？

その先どうしてほしい、どう動いてほしいか？

ストーリーを最後まで描いてみよう

あなたのグループ

社内プロジェクト

プレゼン資料

稟議

サークル

プロジェクトA

プロジェクト X

C社案件企画書

B社案件企画書

社内プロジェクト

＋

ユーザーによる編集が不可欠なUI

あなたのグループ

社内プロジェクト

プレゼン資料

稟議

サークル

プロジェクトA

プロジェクト X

C社案件企画書

B社案件企画書

社内プロジェクト

×

グループを削除

稟議

サークル

プロジェクト X

C社案件企画書

B社案件企画書グループを削除

手がかりが乏しい「ロングタップ」並び替えができることをどうユーザーに伝えるか？

何秒で並び替えを可能とするか？

ロングタップを気づかせるしくみはないか？

一つの提案：ロングタップはヒントが少ない、気がつきにくい。

ここは、誤動作や何気ないミス操作を味方につけ、「気がついていたらドラッグできていた」

という予想外も想定した「ロングタップの許容秒数：0.4秒前後」を各自考えてみよう。

私からの提案：デザインカンプも必要、でもインブラウザデザインも必要。

両方、色んな角度から使い心地をシミュレートしてみるべき。

これは弊社がチャレンジしているネイティブアプリの挙動を

HTMLベースでつくるWebプロトタイプ

http://tuqulore.com/demo/201307_todo_longtap/todo_longtap_proto.m4v

慣習にしたがうのもひとつの手段チェックボックス、左右のちがいは？

慣習かもしれないが…：左のチェックは編集・削除につかわれることが多く、

右のチェックはトグルスイッチのON/OFF替わりに使われることが多い。

困ったときは慣習に一度従ってみよう。

まとめデザインは人の行動に寄り添うよって時間とともに変化する意識を持とう

ダミーテキストは撲滅するべし

手段を限定せず、あらゆる問題解決にチャレンジしよう（「カンプの時代は終わった」とか言わない、手段を切り捨てない）

ただし、一瞬でしか表現しづらいデザインカンプという弱点は把握し、

クライアントと共有することが好ましい。

秋葉 秀樹株式会社 ツクロア 代表取締役 / デザイナー

Visual design、UI/UX design、 HTML5、Flash、CSS、JavaScript、3DCG、映像、音楽、銭湯

ありがとうございました