少ない装飾で素材の魅力を生かす、ズルいWebサービスデザイン実践編

WCAF Vol.11 「Design」 in 福井 で発表させていただきました。
http://wcaf.doorkeeper.jp/events/7028

協力： we love heroku by @ppworks
http://welove.herokuapp.com/
（参考）ppworks 氏によるエントリー
http://www.genuineblue.jp/posts/weloveheroku-design-renewal/

ズルいデザインテクニック2013 + セミフラット version - in 福井
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version-in-fu-jing

Transcript

1. 《ズルいデザイン 番外編》 少ない装飾で素材の魅力を最大限に生かす ズルいWeb サービスデザイン @WCAF Vol.11 Design in Fukui @ken_c_lo TAEKO AKATSUKA 実践編 with we love heroku
2. 2 デザインは、 実際自分が作ったものに、 具体的にアドバイスされるのが、 一番身につきやすい。 …と思う ( ΦωΦ )
3. 3 we love heroku http://welove.herokuapp.com/ by @ppworks
4. 4 we love heroku http://welove.herokuapp.com/ by @ppworks heroku を使って作られた Web サービスを投稿できるギャラリーサイト 既に 100 を超えるサービスが投稿されており見応えがある。 最近、Rails 4 に上げるついでに、デザインも bootstrap 3 を使って リニューアルしたらしい。
5. 1 という相談を一昨日受けたので、 その場で口頭で 1 時間くらいダメ出しとアドバイスしたら、 グッといい感じになった。 （で、これ、今日のプレゼンで使えるのでは…と思いついて、今急遽スライドを今書いてます。 。 。 ） その実際の様子をご紹介します。 デザインが楽しくなってきた。 どうしたらもっと良くなるかなあ？
6. 2 @ppworks さんも、会社ブログで we love heroku のデザインの 過程を書いてました。こちらも合わせて御覧ください。 http://www.genuineblue.jp/posts/weloveheroku-design-renewal/
7. 3 Bootstrap 3 でデザインリニューアルして以前よりは洗練されたが、 やはりどこかそこはかとなく漂う Bootstrap 臭 Before After
8. 4 ロゴ、寂しいのでなんとかしたいですね。 フォントを変えてみよう Google Fontsで heroku っぽいフォント探してみよう http://www.google.com/fonts
9. 5 Serif → 明朝 Sans Serif → ゴシック Display → 装飾の強いフォント Handwriting →手書き風 heroku っぽいフォントは、 明朝でもないし手書き風でもないだろう。 消去法で、 Sans Serif と Display にチェックを入れて 探してみる。
10. 6 なんかサイバーな感じで heroku っぽい雰囲気なのがすぐ見つかった。 Electlize 名前もなんかサイバー
11. 7 @import url(http://fonts.googleapis.com/ css?family=Electrolize); .logo{ font-family: 'Electrolize', sans-serif; font-size: 20px; } Before After
12. 8 要所要所で使うかもしれないので、 mixin にしておくと便利 （例えば、URLや何かの数等、多くの場合英数しかないテキストの表示に ワンポイント的にこのフォントを使うと画面のアクセントになる。 ） @mixin theme-font{ font-family: 'Electrolize', sans-serif; } .url{ @include theme-font; }
13. 9 詳細ページ sites#show
14. 10 枠、いらなくないすか？ - エンジニア 、何かとすぐ枠をつけたがる傾向があるらしい （白だと怖い） - 枠があることで漂う Bootstrap 臭 - この部分は、このページの中の本文に当たるので、特に装飾が必要ない - 枠を取ることで、左のサムネイルと連動して一つの固まり感が出る - 本文の中にコラム的に別カテゴリの文章が出てきた時には枠を使うと効果的 Bootstrap の .well
15. 11 Before After 枠とってもさびしくな いし、スッキリした でしょ？
16. 12 行間の調整 Before After 最適な line-height は文字のつまり具合にもよる。 - Blog のように文字が詰まったものなら、line-height: 1.8 〜 1.9 く らい取った方が高級感がでる。 - この場合は、文字量があまり多くないページが多いので、1.7く らいがスカスカせずすっきりして、最適 line-height: 1.7
17. 13 ちなみに 最適な line-height は文字 のつまり具合にもよる。 Blog のように文字が詰まったものなら、 line-height: 1.8 〜 1.9 く らい取った方が 高級感がでる。この場合は、文字量があまり 多くないページが多いので、1.7く らいがスカ スカせずすっきりして、最適 最適な line-height は文字 のつまり具合にもよる。 Blog のように文字が詰まったものなら、 line-height: 1.8 〜 1.9 く らい取った方が 高級感がでる。この場合は、文字量があまり 多くないページが多いので、1.7く らいがスカ スカせずすっきりして、最適 Before After - h1, h2, h3 などの見出しやタイトルに当たる要素は、行間を詰めた方がブロックの 固まり感が出て美しく見える。 - line-height: 1.4 く らいが目安。 見出しは line-height を つめる
18. 14 データ部分 dl のデザインがひどい - この場合、dt と dd は 1 行で見せた方見やすい - dl のまま float させて table 的に見せてもいいけど、少し CSS めんどくさい - ここは 「表」と言えなくもないので table 使っても妥当 - table 素直に使うのが一番ラクなのでは このへん ひどい
19. 15 Before After だいぶスッキリした table、妥当なところで使うのは別にいいんです。
20. 16 マージンを適切に空ける ブロック間の マージンは大きく 40px コンテンツを要素の固まり（ブロック）に分ける
21. 17 ブロック内の 要素間のマージン小さく 20px さらにその中の要素間の マージンはさらに小さく 10px マージンを適切に空ける
22. 18 マージンを変数にしておくとよい。 サイト全体でマージンサイズを統一できて気まぐれにならない （名付けがイマイチかも。 。 。いい名付けが思いつかない） $margin: 40px; $margin-inner: 20px; $margin-small: 10px; ブロック間の大きいマージン ブロック内の小さいマージン さらに小さいマージン - 適切なマージンのサイズは、全体に使われているフォントの大きさとバランスして変わる - 最近の Web サービスのデザイン、大きいフォント使う傾向にあるので、マージンも大きめに取るのが良い （全体的にフォントが大きくなったというよりも、大きいフォントと小さいフォントの差が大きくメリハリが強いのが最近の傾向）
23. 19 フォント使いに一工夫 画面の中でのアクセントになり、きちんとデザインされている感じに見える Before After URL、いつも英数だから、 さっき選んだ Heroku 感ある フォントにしてみよう
24. 20 詳細ページ、全体の変化 これだけやっただけなのに、結構変わる Before After
25. 21 記事一覧表示 sites#index
26. 22 文字情報が少ないコンテンツが多く、 画像の右側がスカスカしている スカスカしてる
27. 23 持っているデータで、一覧に出した方がより ユーザーが楽しめる情報はないのか再検討→要素追加 Before After URL も出てると heroku 感出て いいんじゃないの？ やっぱり heroku-app.com 多いなあ。 or いや意外と独自ドメインも多いぞ。 誰が作ったのか、一覧で知りたい 友達が作ったやつなら詳細見に行きたい ！
28. 24 要素の置き方 サブになる情報は、少しトーンを落としてメインの情報より目立たなくする - URL、作者を グレー （#999） に 大きさも他の文字より小さくする - タイトルと URL はひと固まり扱いにし、マージンを小さく。その下は $margin-inner: 20px 開ける - URL はロゴと同じフォントに - 要素間に罫線を引くと締まる
29. 25 一覧がスッキリした なんか、雑誌っぽい感じになった Before After
30. 26 デザインダメ出しハッカソンはここでタイムアップ。 しかしもう少しやった方がいいことがあるので、 サイトの方は直ってないんだけど、 画像でサンプルを作ってきた。 もう少しお付き合いください。
31. 27 「ピックアップ」の扱い ピックアップと新着一覧が似てしまっている。 もっとガッツリ見せ方を差別化した 方が、ピックアップ感が出るよ
33. 29 - Heroimage （上の紫の部分）に思い切って置いてみると、コンテンツが主役のサイトになる - 左右に流すと、ギャラリーサイトっぽさが出る - よいコンテンツが、たくさん投稿されてそうな感じ出る 「ピックアップ」の扱い
34. 30 集まってきてたら、投稿件数出すのも効果的 - 5 件く らいならショボイので隠しておきたいけど、100 件超えてたら出していいのではないのかな？ - ある程度登録件数が集まっている場合、それを見せた方が、サービスの信頼感につながって、 感心を持ってもらえる （あ、結構みんな使っているのね） - 自分で登録することによって、件数がカウントアップされる。参加している感も出る。 - フォントをロゴフォントと同様にしてサイズも大きくし、視覚的なアクセントにする。 - 数字はデザイン的なアクセントとしても結構使える ！
35. 31 「デザイン募集中」はオモシロイ切り口 デザインテロ待ち ちなみに、デザインテロとは？ we love に載せたことをきっかけに、デザ イナーがこのサービスにデザインを入れたら オモシロイし、そういうきっかけになれたら 嬉しいよね。 レコメンド （オススメ）的な見せ方 が向いている http://kuroigamen.com より
36. 32 サイドバーで、レコメンド的に表示してあげてはどうか？ - サイドカラムに 3 件表示 - タイトル＆続きを見るで 一覧に遷移 - ユーザーに期待するアク ションを想定し、誘導する 文言を加える より感心を持ってもらえる チャンスを増やす
37. 33 まあ、変えたいところはもっとあるんだが、 とりあえずこのへんで… 今日のところは勘弁してやろう ( ΦωΦ )
38. 34 デザイン = 装飾？ 特に装飾を加えなくても、 情報の整理 + ちょっとした工夫 フォ ント選び、大きさ、マージンの取り方 等… で、グッと見違えるようによくなる。 絵が描けなくても、 いいんだよ
39. 35 デザイン = 主役？ そういう種類のデザインもあるけど、 Web サービスのデザインにおいては、主役はコンテンツ （写真やテキスト等）である。 いかに、主役のコンテンツが一番活きる形で見せられるか？ デザインをそのための手段の一つと位置づける。 素材の味を活かしたデザインに 引き立て役に、 徹するのも楽しいよ
40. 36 エンジニア、デザイン覚えられる？ - ある程度のところまではいける - 割と法則性がある。 - 引き出しを増やす - エンジニアがケースバイケースで最適なメソッドやライブラリを選べる能力に似ている - 情報の分類・整理を的確に - この情報の重要度は？ - 一番見せたいものはなにか？ - この場面でユーザーに期待する動作は何か - どのリンクを押してもらうことが一番、ユーザーにとっ て有益か？ - ゾーニングを意識。どの要素を組み合わせて 一かたまりとして見せるか？ - よいデザインは、 　的確な IA、的確なマークアップと地続きである デザイナーが プログラミング やるよりよいかも
41. 37 自分の Web サービスが見せ方次第で 別物のようにグッとよくなると楽しいし、 作って終わりではなく どんどんサービス改善していく モチベーションにもなる ↓ だからデザイン、やろう。
42. 38 Enjoy Design :)