$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

  1. Web エンジニアのための
    Webサービス
    デザイン
    @DeNA / Jul. 16 2014
    @ken_c_lo
    TAEKO AKATSUKA
    実践講座

    View Slide

  2. 2
    最近 Twitter アイコンが安定しない
    ちょいちょい変わるんですが、
    多分このうちのどれかなのではないかと思います。
    すみません…

    View Slide

  3. 3
    フリーランスで Web デザイン&グラフィックデザイン業してます
    赤塚 妙子 Taeko Akatsuka
    @ken_c_lo(ケンシロウと…読むけど正直後悔しています)
    twitter https://twitter.com/ken_c_lo/
    rss

    View Slide

  4. 4

    View Slide

  5. 5
    https://pplog.net/

    View Slide

  6. 6
    今回の経緯
    個人的に、今春から新しい仕事をはじめた。
    エンジニア向けデザインメンター業 # とは?
    → こっちにもまとまっています。
    https://gist.github.com/taea/9849802

    View Slide

  7. 7
    エンジニア向けデザインメンター業 # とは?
    何やるの?
    実際のプロジェクトに入って、
    エンジニアのデザイン業(広義)を
    側面支援する。
    小さなチームで、実質エンジニアさんがデザイン業もやっているケースが多い。

    View Slide

  8. 8
    エンジニア向けデザインメンター業 # とは?
    - HTML / CSS / Sass / Bootstrap カスタマイズ
    - ビジュアルデザイン
    - UI 設計 / IA
    - 仕様・ユーザーフローの設計
    - プロジェクトの価値の定義、コンセプトメイキング
    - コンサルティング / ヒアリング
    ↓全部デザイン

    View Slide

  9. 9
    エンジニア向けデザインメンター業 # とは?
    - 週 1: MTG 2 時間前後
    - 受託案件の場合、お客さんも含め MTG
    - 宿題で次週の話すテーマを用意してくる
    - MTG 以外は、GitHub Issue or チャットツール
    でやりとり
    - 基本、コーディングはがっつりはしない
    - けど、エンジニアが書いた Sass とかマークアップとか直してプルリクエストしたりとか、結局割と書いてる

    View Slide

  10. 10
    - 分業もいいけど、1 人の中でデザインとエンジニアリング両方の
    センスが融合することで、より面白い可能性が生まれそう
    - 開発の現場における、デザインに対する理解とデザインの地位向上
    - 見た目を綺麗にするだけがデザイン? → NO!
    - デザインオリエンテッドな開発フローを作りたい。
    - コードの中で生きるデザインを。コードとデザインは対立しない。
    エンジニアという人種が好き。GitHub が好き。チーム開発は楽しい。
    - 基本的にエンジニアさん優秀なので、理屈で教えればすぐにものにするので教えてて楽しい。
    なぜやるの?
    デザインができる・わかるエンジニアを増やしたいと思った。

    View Slide

  11. 11
    Web サービス / アプリとかの
    プロダクト作りが好きな
    エンジニアは
    デザインできたほうが
    よいものが作れて楽しい多分。
    そして世の中によいプロダクトが増えたら、回りまわって私が楽しい。
    ホクホク

    View Slide

  12. 12
    …で、今回の経緯。
    …という近況を、 @t_mitz に話したんです。
    あのデザインメンターの件、社内でも興味あるエンジニ
    アがいるから一度話しにこない?
    おーぜひ!(営業しに行かせてください!
    @t_mitz 氏のチーム内の方、数人くらいに営業トークしに行く感じのつもりでいた
    で、数週間くらい? 後。

    View Slide

  13. 13
    あの、弊社に来てデザインのセミナーやる件さ
    ごめん、ナンカいつの間にか話でかくなってたw
    え!セミナー!! Σ ( ΦωΦ )
    ちょwww ww
    しかし、せっかく頂いた機会なので、ナニカやらせていただきます。
    …という経緯でした

    View Slide

  14. 14
    ところで…
    デザインは、
    実際自分が作ったものに、
    具体的にアドバイスされるのが、
    一番身につきやすい。
    …と思う ( ΦωΦ )
    (コードレビューに近い感じか?)

    View Slide

  15. 15
    自分が普段、セミナーや講師という形を取らずに、
    実際の仕事の動いているプロジェクトに入って
    メンターという形でデザインを伝えているのもこれが理由です。
    なぜなら、デザインは、
    ある一定の問題を解決するための
    メソッドにすぎない。
    なので、実際に問題解決が必要な場所で、
    実践しながら学ぶのが一番よいと思ってる。

    View Slide

  16. 16
    …というわけで、
    今回、生贄になって
    いただいた Web サービス。
    http://denkinovel.com/
    by @katryo さん
    こちらの、主にトップページを
    デザインレビュー
    させてもらうことで、
    具体的な解決手法を
    見ていきます。
    ちなみに、Denkinovel、リリース当初、
    おおーすげーー !! と思って見てました。
    このたび、生贄になっていただいて、
    ありがとうございます & すみません… m(__)m
    WalletMona さんも候補としていただいたので
    すが、時間の関係上今回は Denkinovel さんだ
    けになってしまいました…。すみません。

    View Slide

  17. 17
    After
    最終的に、
    こんな感じの代替案を
    作ってみたのですが、
    この過程を今から解説します。

    View Slide

  18. 18
    18
    まず、情報のゾーニングをする。
    これは誰のためのコンテンツなのかを明らかにし、
    それにあわせたレイアウトにする。
    「ユーザー」
    、ひとくちに言っても、何種類かいる。
     初めてこのサイトを訪問した人
     繰り返しこのサイトを訪れている人
     ノベルを読みたい人
     ノベルを書きたい人

    View Slide

  19. 19
    19
    どのユーザーに積極的に呼びかける?
    そりゃどのユーザーも大事なんだけど、このページでは特にどのユーザーに
    呼びかけたいのか?明確な理由のある優先順位を決めておくと効果的なデザ
    インができる。
    Why ?
    繰り返しサイトに訪れてくれている人は、既にファンになってくれて、このサイトの魅力を既にわかってくれている。
    ないがしろにしてよいわけではないけど、適切に使いやすくなっていれば、特段アピールは必要ではない。
    一方で初めてこのサイトを訪れた人には、サービスの認知度が十分でない段階では、このサイトの魅力をまずわかってもらい
    たいので、トップページではより積極的にメッセージを送る必要がある。
     初めてこのサイトを訪問した人 > 繰り返しこのサイトを訪れている人
    よりこちらに
    積極的に

    View Slide

  20. 20
    20
    どのユーザーに積極的に呼びかける?
    そりゃどのユーザーも大事なんだけど、このページでは特にどのユーザーに
    呼びかけたいのか?明確な理由のある優先順位を決めておくと効果的なデザ
    インができる。
    Why ?
    ノベルを読みたい人の数 > ノベルを書きたい人の数
    読むほうが気楽で、障壁が少なく、まず読むことでサイトのファンになってもらって、そこからノベルを書きたい人に進化す
    る可能性があるので、トップページでは、よりノベルを読みたい人に気楽に読んでもらえるようにアピールhする必要がある。
    (一方で、ノベルを書きたいユーザーは、サービスにとってコンテンツを作ってくれる大事な存在。気持ちよくノベルを書ける
    ように、最大限配慮したい。

     ノベルを読みたい人 > ノベルを書きたい人
    よりこちらに
    積極的に

    View Slide

  21. 21
     初めてこのサイトを訪問した人
     繰り返しこのサイトを訪れている人
     ノベルを読みたい人
     ノベルを書きたい人
    現状のゾーニングは、
    どうなってる?
    Oh…バラバラだ!

    View Slide

  22. 22
     初めてこのサイトを訪問した人
     繰り返しこのサイトを訪れている人
     ノベルを読みたい人
     ノベルを書きたい人
    対象ユーザーが同じ
    コンテンツはなるべく
    まとめる。
    優先順位に合わせて、
    レイアウトする。
    ※ランキングは、ノベルを書きたい人へのインセ
    ンティブでもあるので、半分青に

    View Slide

  23. 23
    ヘッダメニュー
    Before
    After
    全体の雰囲気から浮いて
    しまっている。のでセリ
    フ体(明朝)に寄せた。
    ユーザーに関するナビは
    左に寄せる
    サービス全体の閲覧 / 投
    稿に関するナビは右寄せ
    黒背景だと重く、bootstrap
    ぽさでてしまうので、木目で
    合わせてみた。
    ヘッダ背景画像(木目)
    、ベースの木目に #594a42(茶色), アルファ 60%, 焼きこみカラー で色を乗せている(with photoshop or Illustrator)

    View Slide

  24. 24
    Hero-image
    Before
    《問題点》
    よく読めば、どんなサイトだか伝わるのだが、いまいち目に入って来づらい。
    サービスのもともと持っている魅力を、もう少しここのスペースで伝えられないだろうか?

    View Slide

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

    View Slide

  26. 26

    View Slide

  27. 27
    この、サウンドノベル風の画面が、
    ステキ!

    View Slide

  28. 28
    After
    Hero-image
    - 一番の魅力である、サウンドノベル風の画面を真似て、トップページで疑似体験してもらう。
    - 画像はそのまま素材画像でよいし、何秒かごとに画像を切り替えれば、
    「動く小説」感も出る。
    - もともとサービスが持ってる魅力を活かしたデザイン。
    《このサイトの一番の魅力を、トップページで疑似体験させたい。

    View Slide

  29. 29
    Hero-image
    わかりやすい特徴である、
    音楽 + 映像 を強調。目
    に入ってくるように。
    コンテンツと合わせて、ヒラギノ明朝で。
    タグラインっぽく、ロゴの上に配置
    コピーの内容は殆ど同じだけど、
    配置、フォント、大きさ、順序等で
    かなり印象を変えられる。
    → 読んでみたい!と思わせたい。
    《コピーライティングの見せ方》

    View Slide

  30. 30
    《ゾーニング》 何のためのスペース? → 初めてサイトに訪れた人にアプローチ
    最新ノベルへの導線は帯にして、
    上のスペースと少しわけて見せると
    すっきり。
    宙に浮いていた、
    新規登録導線を移動
    Hero-image

    View Slide

  31. 31
    背景色
    白の外枠は不要。
    囲みが多いとクドく野暮ったく見えてしまう。
    木目をもっと活かしたい!

    View Slide

  32. 32
    背景色
    木目ベースにレイアウトして、
    ポイントで白を使うことで、
    画面にメリハリも出て、
    木目が生きた、雰囲気のある画面になる。

    View Slide

  33. 33
    フッター
    Before
    背景画像はヘッダと同様 メニューの文字は小さく控えめに 右側に外部サイトへのリンクを集約
    After

    View Slide

  34. 34
    新着ノベル
    Before
    《問題点》
    - 背景に敷いた画像がそれぞれ同じものが多いため、識別子として機能していない。
    - (自由に画像登録できるっぽいけど、あまり使われてない?)
    - タイトルがセンター揃えで読みづらい
    - 本文のサウンドノベル風の画面と、もう少し雰囲気を共通させたい。

    View Slide

  35. 35
    新着ノベル
    After
    《問題点》
    - 文章モノは、ある程度横に長さがあっ
    たほうが読みやすい。
    - 画像は、中で使われている背景の中か
    ら最初のものを選ぶ、とかにしたほう
    が、かぶりにくいのかもしれない。
    - タイトルと本文は明朝にして、雰囲気
    を合わせる。
    - ユーザー名やタグ等はゴシックのま
    ま。小さい文字はゴシックを使用して
    メリハリを出すとカッコよくなる。

    View Slide

  36. 36
    チュートリアル系
    (ノベルを書きたい人に向けたコンテンツ)
    Before
    《問題点》
    - パラパラしていてまとまりがない
    - タグの下に配置、いきなり感がある。
    - これはボタンでいいの?
    - ノベルを書き始める導線が、ヘッダに
    しかない(覚えてしまえばよいのだけ
    ど、
    「ノベルを書けるサイトである」と
    いうことが初見のひとにわかりにくい。

    View Slide

  37. 37
    チュートリアル系
    (ノベルを書きたい人に向けたコンテンツ)
    After
    「新しくノベルを作る」ボタンを置くこ
    とで、ノベルを書きたい人への導線も
    よくなり、また「ノベルを書けるサイ
    トである」ということが明示できる。
    そばに、ノベルを作るボタンがあるこ
    とで、チュートリアル部分が誰に向け
    たコンテンツであるかを暗示できる。
    チュートリアルは、ボタンではなくリ
    ンクに。

    View Slide

  38. 38
    ボタン or テキストリンク どちらにするか?の考え方
    - 何かの状態を変化させるような、操作の場合はボタン
    - 単なるの移動の場合はテキストリンク
    - 単なる移動でも重要な場合、強調したい場合にのみボタン
    - ボタンを多数並べると操作性が落ちる。
    - 重要度に応じて、重要なものはボタン、そうでもないものは
    テキストリンクとかにして差別化するのもよい

    View Slide

  39. 39
    サービスからのお知らせ系は
    右側に集約

    View Slide

  40. 40
    総閲覧数ランキング
    現サイトの TOP にはないのですが、
    読者ユーザーに対し、評価の高いコン
    テンツを紹介したり、
    優良な書き手ユーザーのインセンティ
    ブにもなるため上の方に配置してみた。

    View Slide

  41. 41
    エンジニア、デザイン覚えられる?
    - ある程度のところまではいける
    - 割と法則性がある。
    - 引き出しを増やす
    - エンジニアがケースバイケースで最適なメソッドやライブラリを選べる能力に似ている
    - 情報の分類・整理を的確に
    - この情報の重要度は?
    - 一番見せたいものはなにか?
    - この場面でユーザーに期待する動作は何か
    - どのリンクを押してもらうことが一番、ユーザーにとっ
    て有益か?
    - ゾーニングを意識。どの要素を組み合わせて
    一かたまりとして見せるか?
    - よいデザインは、
     的確な IA、的確なマークアップと地続きである
    デザイナーが
    プログラミング
    やるよりよいかも

    View Slide

  42. エンジニア、デザイン覚えられる?
    全然いける
    ここ数ヶ月デザインメンター業
    やった実感

    View Slide

  43. 43
    43
    Enjoy Design :)

    View Slide

  44. おまけ
    サービスをいろいろ作っているので宣伝させてください

    View Slide

  45. View Slide

  46. 46

    View Slide

  47. 47

    View Slide

  48. 48

    View Slide

  49. 49

    View Slide