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