WebエンジニアのためのWebサービスデザイン実践講座

DeNA 社内勉強会に呼んでいただいて、お話させていただきました。
Reviewに登場していただいてるサービスはこちらです。

動く小説投稿サイト Denkinovel by @katryo さん
http://denkinovel.com/

ご協力ありがとうございました( ˘ω˘)

Transcript

1. Web エンジニアのための Webサービス デザイン @DeNA / Jul. 16 2014 @ken_c_lo TAEKO AKATSUKA 実践講座
2. 2 最近 Twitter アイコンが安定しない ちょいちょい変わるんですが、 多分このうちのどれかなのではないかと思います。 すみません…
3. 3 フリーランスで Web デザイン＆グラフィックデザイン業してます 赤塚 妙子 Taeko Akatsuka @ken_c_lo（ケンシロウと…読むけど正直後悔しています） twitter https://twitter.com/ken_c_lo/ rss
5. 5 https://pplog.net/
6. 6 今回の経緯 個人的に、今春から新しい仕事をはじめた。 エンジニア向けデザインメンター業 # とは？ → こっちにもまとまっています。 https://gist.github.com/taea/9849802
7. 7 エンジニア向けデザインメンター業 # とは？ 何やるの？ 実際のプロジェクトに入って、 エンジニアのデザイン業（広義）を 側面支援する。 小さなチームで、実質エンジニアさんがデザイン業もやっているケースが多い。
8. 8 エンジニア向けデザインメンター業 # とは？ - HTML / CSS / Sass / Bootstrap カスタマイズ - ビジュアルデザイン - UI 設計 / IA - 仕様・ユーザーフローの設計 - プロジェクトの価値の定義、コンセプトメイキング - コンサルティング / ヒアリング ↓全部デザイン
9. 9 エンジニア向けデザインメンター業 # とは？ - 週 1: MTG 2 時間前後 - 受託案件の場合、お客さんも含め MTG - 宿題で次週の話すテーマを用意してくる - MTG 以外は、GitHub Issue or チャットツール でやりとり - 基本、コーディングはがっつりはしない - けど、エンジニアが書いた Sass とかマークアップとか直してプルリクエストしたりとか、結局割と書いてる
10. 10 - 分業もいいけど、1 人の中でデザインとエンジニアリング両方の センスが融合することで、より面白い可能性が生まれそう - 開発の現場における、デザインに対する理解とデザインの地位向上 - 見た目を綺麗にするだけがデザイン？ → NO! - デザインオリエンテッドな開発フローを作りたい。 - コードの中で生きるデザインを。コードとデザインは対立しない。 エンジニアという人種が好き。GitHub が好き。チーム開発は楽しい。 - 基本的にエンジニアさん優秀なので、理屈で教えればすぐにものにするので教えてて楽しい。 なぜやるの？ デザインができる・わかるエンジニアを増やしたいと思った。
11. 11 Web サービス / アプリとかの プロダクト作りが好きな エンジニアは デザインできたほうが よいものが作れて楽しい多分。 そして世の中によいプロダクトが増えたら、回りまわって私が楽しい。 ホクホク
12. 12 …で、今回の経緯。 …という近況を、 @t_mitz に話したんです。 あのデザインメンターの件、社内でも興味あるエンジニ アがいるから一度話しにこない？ おーぜひ！（営業しに行かせてください！ @t_mitz 氏のチーム内の方、数人くらいに営業トークしに行く感じのつもりでいた で、数週間くらい？ 後。
13. 13 あの、弊社に来てデザインのセミナーやる件さ ごめん、ナンカいつの間にか話でかくなってたｗ え！セミナー！！ Σ ( ΦωΦ ) ちょｗｗｗ ww しかし、せっかく頂いた機会なので、ナニカやらせていただきます。 …という経緯でした
14. 14 ところで… デザインは、 実際自分が作ったものに、 具体的にアドバイスされるのが、 一番身につきやすい。 …と思う ( ΦωΦ ) （コードレビューに近い感じか？）
15. 15 自分が普段、セミナーや講師という形を取らずに、 実際の仕事の動いているプロジェクトに入って メンターという形でデザインを伝えているのもこれが理由です。 なぜなら、デザインは、 ある一定の問題を解決するための メソッドにすぎない。 なので、実際に問題解決が必要な場所で、 実践しながら学ぶのが一番よいと思ってる。
16. 16 …というわけで、 今回、生贄になって いただいた Web サービス。 http://denkinovel.com/ by @katryo さん こちらの、主にトップページを デザインレビュー させてもらうことで、 具体的な解決手法を 見ていきます。 ちなみに、Denkinovel、リリース当初、 おおーすげーー !! と思って見てました。 このたび、生贄になっていただいて、 ありがとうございます & すみません… m(__)m WalletMona さんも候補としていただいたので すが、時間の関係上今回は Denkinovel さんだ けになってしまいました…。すみません。 。
17. 17 After 最終的に、 こんな感じの代替案を 作ってみたのですが、 この過程を今から解説します。
18. 18 18 まず、情報のゾーニングをする。 これは誰のためのコンテンツなのかを明らかにし、 それにあわせたレイアウトにする。 「ユーザー」 、ひとくちに言っても、何種類かいる。  初めてこのサイトを訪問した人  繰り返しこのサイトを訪れている人  ノベルを読みたい人  ノベルを書きたい人
19. 19 19 どのユーザーに積極的に呼びかける？ そりゃどのユーザーも大事なんだけど、このページでは特にどのユーザーに 呼びかけたいのか？明確な理由のある優先順位を決めておくと効果的なデザ インができる。 Why ? 繰り返しサイトに訪れてくれている人は、既にファンになってくれて、このサイトの魅力を既にわかってくれている。 ないがしろにしてよいわけではないけど、適切に使いやすくなっていれば、特段アピールは必要ではない。 一方で初めてこのサイトを訪れた人には、サービスの認知度が十分でない段階では、このサイトの魅力をまずわかってもらい たいので、トップページではより積極的にメッセージを送る必要がある。  初めてこのサイトを訪問した人 > 繰り返しこのサイトを訪れている人 よりこちらに 積極的に
20. 20 20 どのユーザーに積極的に呼びかける？ そりゃどのユーザーも大事なんだけど、このページでは特にどのユーザーに 呼びかけたいのか？明確な理由のある優先順位を決めておくと効果的なデザ インができる。 Why ? ノベルを読みたい人の数 > ノベルを書きたい人の数 読むほうが気楽で、障壁が少なく、まず読むことでサイトのファンになってもらって、そこからノベルを書きたい人に進化す る可能性があるので、トップページでは、よりノベルを読みたい人に気楽に読んでもらえるようにアピールｈする必要がある。 （一方で、ノベルを書きたいユーザーは、サービスにとってコンテンツを作ってくれる大事な存在。気持ちよくノベルを書ける ように、最大限配慮したい。 ）  ノベルを読みたい人 > ノベルを書きたい人 よりこちらに 積極的に
21. 21  初めてこのサイトを訪問した人  繰り返しこのサイトを訪れている人  ノベルを読みたい人  ノベルを書きたい人 現状のゾーニングは、 どうなってる？ Oh…バラバラだ！
22. 22  初めてこのサイトを訪問した人  繰り返しこのサイトを訪れている人  ノベルを読みたい人  ノベルを書きたい人 対象ユーザーが同じ コンテンツはなるべく まとめる。 優先順位に合わせて、 レイアウトする。 ※ランキングは、ノベルを書きたい人へのインセ ンティブでもあるので、半分青に
23. 23 ヘッダメニュー Before After 全体の雰囲気から浮いて しまっている。のでセリ フ体（明朝）に寄せた。 ユーザーに関するナビは 左に寄せる サービス全体の閲覧 / 投 稿に関するナビは右寄せ 黒背景だと重く、bootstrap ぽさでてしまうので、木目で 合わせてみた。 ヘッダ背景画像（木目） 、ベースの木目に #594a42（茶色）, アルファ 60%, 焼きこみカラー で色を乗せている（with photoshop or Illustrator)
24. 24 Hero-image Before 《問題点》 よく読めば、どんなサイトだか伝わるのだが、いまいち目に入って来づらい。 サービスのもともと持っている魅力を、もう少しここのスペースで伝えられないだろうか？
25. 25 このサービスの一番の魅力って、 何だろう？
27. 27 この、サウンドノベル風の画面が、 ステキ！
28. 28 After Hero-image - 一番の魅力である、サウンドノベル風の画面を真似て、トップページで疑似体験してもらう。 - 画像はそのまま素材画像でよいし、何秒かごとに画像を切り替えれば、 「動く小説」感も出る。 - もともとサービスが持ってる魅力を活かしたデザイン。 《このサイトの一番の魅力を、トップページで疑似体験させたい。 》
29. 29 Hero-image わかりやすい特徴である、 音楽 + 映像 を強調。目 に入ってくるように。 コンテンツと合わせて、ヒラギノ明朝で。 タグラインっぽく、ロゴの上に配置 コピーの内容は殆ど同じだけど、 配置、フォント、大きさ、順序等で かなり印象を変えられる。 → 読んでみたい！と思わせたい。 《コピーライティングの見せ方》
30. 30 《ゾーニング》 何のためのスペース？ → 初めてサイトに訪れた人にアプローチ 最新ノベルへの導線は帯にして、 上のスペースと少しわけて見せると すっきり。 宙に浮いていた、 新規登録導線を移動 Hero-image
31. 31 背景色 白の外枠は不要。 囲みが多いとクドく野暮ったく見えてしまう。 木目をもっと活かしたい！
32. 32 背景色 木目ベースにレイアウトして、 ポイントで白を使うことで、 画面にメリハリも出て、 木目が生きた、雰囲気のある画面になる。
33. 33 フッター Before 背景画像はヘッダと同様 メニューの文字は小さく控えめに 右側に外部サイトへのリンクを集約 After
34. 34 新着ノベル Before 《問題点》 - 背景に敷いた画像がそれぞれ同じものが多いため、識別子として機能していない。 - （自由に画像登録できるっぽいけど、あまり使われてない？） - タイトルがセンター揃えで読みづらい - 本文のサウンドノベル風の画面と、もう少し雰囲気を共通させたい。
35. 35 新着ノベル After 《問題点》 - 文章モノは、ある程度横に長さがあっ たほうが読みやすい。 - 画像は、中で使われている背景の中か ら最初のものを選ぶ、とかにしたほう が、かぶりにくいのかもしれない。 - タイトルと本文は明朝にして、雰囲気 を合わせる。 - ユーザー名やタグ等はゴシックのま ま。小さい文字はゴシックを使用して メリハリを出すとカッコよくなる。
36. 36 チュートリアル系 （ノベルを書きたい人に向けたコンテンツ） Before 《問題点》 - パラパラしていてまとまりがない - タグの下に配置、いきなり感がある。 - これはボタンでいいの？ - ノベルを書き始める導線が、ヘッダに しかない（覚えてしまえばよいのだけ ど、 「ノベルを書けるサイトである」と いうことが初見のひとにわかりにくい。
37. 37 チュートリアル系 （ノベルを書きたい人に向けたコンテンツ） After 「新しくノベルを作る」ボタンを置くこ とで、ノベルを書きたい人への導線も よくなり、また「ノベルを書けるサイ トである」ということが明示できる。 そばに、ノベルを作るボタンがあるこ とで、チュートリアル部分が誰に向け たコンテンツであるかを暗示できる。 チュートリアルは、ボタンではなくリ ンクに。
38. 38 ボタン or テキストリンク どちらにするか？の考え方 - 何かの状態を変化させるような、操作の場合はボタン - 単なるの移動の場合はテキストリンク - 単なる移動でも重要な場合、強調したい場合にのみボタン - ボタンを多数並べると操作性が落ちる。 - 重要度に応じて、重要なものはボタン、そうでもないものは テキストリンクとかにして差別化するのもよい
39. 39 サービスからのお知らせ系は 右側に集約
40. 40 総閲覧数ランキング 現サイトの TOP にはないのですが、 読者ユーザーに対し、評価の高いコン テンツを紹介したり、 優良な書き手ユーザーのインセンティ ブにもなるため上の方に配置してみた。
41. 41 エンジニア、デザイン覚えられる？ - ある程度のところまではいける - 割と法則性がある。 - 引き出しを増やす - エンジニアがケースバイケースで最適なメソッドやライブラリを選べる能力に似ている - 情報の分類・整理を的確に - この情報の重要度は？ - 一番見せたいものはなにか？ - この場面でユーザーに期待する動作は何か - どのリンクを押してもらうことが一番、ユーザーにとっ て有益か？ - ゾーニングを意識。どの要素を組み合わせて 一かたまりとして見せるか？ - よいデザインは、 　的確な IA、的確なマークアップと地続きである デザイナーが プログラミング やるよりよいかも
42. エンジニア、デザイン覚えられる？ 全然いける ここ数ヶ月デザインメンター業 やった実感
43. 43 43 Enjoy Design :)
44. おまけ サービスをいろいろ作っているので宣伝させてください