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

 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
  4. 4

  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 あの、弊社に来てデザインのセミナーやる件さ ごめん、ナンカいつの間にか話でかくなってたw え!セミナー!! Σ ( ΦωΦ ) ちょwww 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 ? ノベルを読みたい人の数 >

    ノベルを書きたい人の数 読むほうが気楽で、障壁が少なく、まず読むことでサイトのファンになってもらって、そこからノベルを書きたい人に進化す る可能性があるので、トップページでは、よりノベルを読みたい人に気楽に読んでもらえるようにアピールhする必要がある。 (一方で、ノベルを書きたいユーザーは、サービスにとってコンテンツを作ってくれる大事な存在。気持ちよくノベルを書ける ように、最大限配慮したい。 )  ノベルを読みたい人 > ノベルを書きたい人 よりこちらに 積極的に
  21. 21  初めてこのサイトを訪問した人  繰り返しこのサイトを訪れている人  ノベルを読みたい人  ノベルを書きたい人 現状のゾーニングは、

    どうなってる? Oh…バラバラだ!
  22. 22  初めてこのサイトを訪問した人  繰り返しこのサイトを訪れている人  ノベルを読みたい人  ノベルを書きたい人 対象ユーザーが同じ

    コンテンツはなるべく まとめる。 優先順位に合わせて、 レイアウトする。 ※ランキングは、ノベルを書きたい人へのインセ ンティブでもあるので、半分青に
  23. 23 ヘッダメニュー Before After 全体の雰囲気から浮いて しまっている。のでセリ フ体(明朝)に寄せた。 ユーザーに関するナビは 左に寄せる サービス全体の閲覧

    / 投 稿に関するナビは右寄せ 黒背景だと重く、bootstrap ぽさでてしまうので、木目で 合わせてみた。 ヘッダ背景画像(木目) 、ベースの木目に #594a42(茶色), アルファ 60%, 焼きこみカラー で色を乗せている(with photoshop or Illustrator)
  24. 24 Hero-image Before 《問題点》 よく読めば、どんなサイトだか伝わるのだが、いまいち目に入って来づらい。 サービスのもともと持っている魅力を、もう少しここのスペースで伝えられないだろうか?

  25. 25 このサービスの一番の魅力って、 何だろう?

  26. 26

  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. おまけ サービスをいろいろ作っているので宣伝させてください

  45. None
  46. 46

  47. 47

  48. 48

  49. 49