Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

  2. 8 エンジニア向けデザインメンター業 # とは? - HTML / CSS / Sass

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

    - 受託案件の場合、お客さんも含め MTG - 宿題で次週の話すテーマを用意してくる - MTG 以外は、GitHub Issue or チャットツール でやりとり - 基本、コーディングはがっつりはしない - けど、エンジニアが書いた Sass とかマークアップとか直してプルリクエストしたりとか、結局割と書いてる
  4. 10 - 分業もいいけど、1 人の中でデザインとエンジニアリング両方の センスが融合することで、より面白い可能性が生まれそう - 開発の現場における、デザインに対する理解とデザインの地位向上 - 見た目を綺麗にするだけがデザイン? →

    NO! - デザインオリエンテッドな開発フローを作りたい。 - コードの中で生きるデザインを。コードとデザインは対立しない。 エンジニアという人種が好き。GitHub が好き。チーム開発は楽しい。 - 基本的にエンジニアさん優秀なので、理屈で教えればすぐにものにするので教えてて楽しい。 なぜやるの? デザインができる・わかるエンジニアを増やしたいと思った。
  5. 16 …というわけで、 今回、生贄になって いただいた Web サービス。 http://denkinovel.com/ by @katryo さん

    こちらの、主にトップページを デザインレビュー させてもらうことで、 具体的な解決手法を 見ていきます。 ちなみに、Denkinovel、リリース当初、 おおーすげーー !! と思って見てました。 このたび、生贄になっていただいて、 ありがとうございます & すみません… m(__)m WalletMona さんも候補としていただいたので すが、時間の関係上今回は Denkinovel さんだ けになってしまいました…。すみません。 。
  6. 19 19 どのユーザーに積極的に呼びかける? そりゃどのユーザーも大事なんだけど、このページでは特にどのユーザーに 呼びかけたいのか?明確な理由のある優先順位を決めておくと効果的なデザ インができる。 Why ? 繰り返しサイトに訪れてくれている人は、既にファンになってくれて、このサイトの魅力を既にわかってくれている。 ないがしろにしてよいわけではないけど、適切に使いやすくなっていれば、特段アピールは必要ではない。

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

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

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

    / 投 稿に関するナビは右寄せ 黒背景だと重く、bootstrap ぽさでてしまうので、木目で 合わせてみた。 ヘッダ背景画像(木目) 、ベースの木目に #594a42(茶色), アルファ 60%, 焼きこみカラー で色を乗せている(with photoshop or Illustrator)
  10. 26

  11. 29 Hero-image わかりやすい特徴である、 音楽 + 映像 を強調。目 に入ってくるように。 コンテンツと合わせて、ヒラギノ明朝で。 タグラインっぽく、ロゴの上に配置

    コピーの内容は殆ど同じだけど、 配置、フォント、大きさ、順序等で かなり印象を変えられる。 → 読んでみたい!と思わせたい。 《コピーライティングの見せ方》
  12. 35 新着ノベル After 《問題点》 - 文章モノは、ある程度横に長さがあっ たほうが読みやすい。 - 画像は、中で使われている背景の中か ら最初のものを選ぶ、とかにしたほう

    が、かぶりにくいのかもしれない。 - タイトルと本文は明朝にして、雰囲気 を合わせる。 - ユーザー名やタグ等はゴシックのま ま。小さい文字はゴシックを使用して メリハリを出すとカッコよくなる。
  13. 36 チュートリアル系 (ノベルを書きたい人に向けたコンテンツ) Before 《問題点》 - パラパラしていてまとまりがない - タグの下に配置、いきなり感がある。 -

    これはボタンでいいの? - ノベルを書き始める導線が、ヘッダに しかない(覚えてしまえばよいのだけ ど、 「ノベルを書けるサイトである」と いうことが初見のひとにわかりにくい。
  14. 38 ボタン or テキストリンク どちらにするか?の考え方 - 何かの状態を変化させるような、操作の場合はボタン - 単なるの移動の場合はテキストリンク -

    単なる移動でも重要な場合、強調したい場合にのみボタン - ボタンを多数並べると操作性が落ちる。 - 重要度に応じて、重要なものはボタン、そうでもないものは テキストリンクとかにして差別化するのもよい
  15. 41 エンジニア、デザイン覚えられる? - ある程度のところまではいける - 割と法則性がある。 - 引き出しを増やす - エンジニアがケースバイケースで最適なメソッドやライブラリを選べる能力に似ている

    - 情報の分類・整理を的確に - この情報の重要度は? - 一番見せたいものはなにか? - この場面でユーザーに期待する動作は何か - どのリンクを押してもらうことが一番、ユーザーにとっ て有益か? - ゾーニングを意識。どの要素を組み合わせて 一かたまりとして見せるか? - よいデザインは、  的確な IA、的確なマークアップと地続きである デザイナーが プログラミング やるよりよいかも
  16. 46

  17. 47

  18. 48

  19. 49