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

by ken_c_lo / TAEKO AKATSUKA

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 https://pplog.net/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43 43 Enjoy Design :)

Slide 44

Slide 44 text

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