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

Slide 1

Slide 1 text

《ズルいデザイン番外編》少ない装飾で素材の魅力を最大限に生かすズルいWeb サービスデザイン @WCAF Vol.11 Design in Fukui @ken_c_lo TAEKO AKATSUKA 実践編 with we love heroku

Slide 2

Slide 2 text

2 デザインは、実際自分が作ったものに、具体的にアドバイスされるのが、一番身につきやすい。 …と思う ( ΦωΦ )

Slide 3

Slide 3 text

3 we love heroku http://welove.herokuapp.com/ by @ppworks

Slide 4

Slide 4 text

4 we love heroku http://welove.herokuapp.com/ by @ppworks heroku を使って作られた Web サービスを投稿できるギャラリーサイト既に 100 を超えるサービスが投稿されており見応えがある。最近、Rails 4 に上げるついでに、デザインも bootstrap 3 を使ってリニューアルしたらしい。

Slide 5

Slide 5 text

1 という相談を一昨日受けたので、その場で口頭で 1 時間くらいダメ出しとアドバイスしたら、グッといい感じになった。（で、これ、今日のプレゼンで使えるのでは…と思いついて、今急遽スライドを今書いてます。。。）その実際の様子をご紹介します。デザインが楽しくなってきた。どうしたらもっと良くなるかなあ？

Slide 6

Slide 6 text

2 @ppworks さんも、会社ブログで we love heroku のデザインの過程を書いてました。こちらも合わせて御覧ください。 http://www.genuineblue.jp/posts/weloveheroku-design-renewal/

Slide 7

Slide 7 text

3 Bootstrap 3 でデザインリニューアルして以前よりは洗練されたが、やはりどこかそこはかとなく漂う Bootstrap 臭 Before After

Slide 8

Slide 8 text

4 ロゴ、寂しいのでなんとかしたいですね。フォントを変えてみよう Google Fontsで heroku っぽいフォント探してみよう http://www.google.com/fonts

Slide 9

Slide 9 text

5 Serif → 明朝 Sans Serif → ゴシック Display → 装飾の強いフォント Handwriting →手書き風 heroku っぽいフォントは、明朝でもないし手書き風でもないだろう。消去法で、 Sans Serif と Display にチェックを入れて探してみる。

Slide 10

Slide 10 text

6 なんかサイバーな感じで heroku っぽい雰囲気なのがすぐ見つかった。 Electlize 名前もなんかサイバー

Slide 11

Slide 11 text

7 @import url(http://fonts.googleapis.com/ css?family=Electrolize); .logo{ font-family: 'Electrolize', sans-serif; font-size: 20px; } Before After

Slide 12

Slide 12 text

8 要所要所で使うかもしれないので、 mixin にしておくと便利（例えば、URLや何かの数等、多くの場合英数しかないテキストの表示にワンポイント的にこのフォントを使うと画面のアクセントになる。） @mixin theme-font{ font-family: 'Electrolize', sans-serif; } .url{ @include theme-font; }

Slide 13

Slide 13 text

9 詳細ページ sites#show

Slide 14

Slide 14 text

10 枠、いらなくないすか？ - エンジニア、何かとすぐ枠をつけたがる傾向があるらしい（白だと怖い） - 枠があることで漂う Bootstrap 臭 - この部分は、このページの中の本文に当たるので、特に装飾が必要ない - 枠を取ることで、左のサムネイルと連動して一つの固まり感が出る - 本文の中にコラム的に別カテゴリの文章が出てきた時には枠を使うと効果的 Bootstrap の .well

Slide 15

Slide 15 text

11 Before After 枠とってもさびしくないし、スッキリしたでしょ？

Slide 16

Slide 16 text

12 行間の調整 Before After 最適な line-height は文字のつまり具合にもよる。 - Blog のように文字が詰まったものなら、line-height: 1.8 〜 1.9 くらい取った方が高級感がでる。 - この場合は、文字量があまり多くないページが多いので、1.7くらいがスカスカせずすっきりして、最適 line-height: 1.7

Slide 17

Slide 17 text

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 をつめる

Slide 18

Slide 18 text

14 データ部分 dl のデザインがひどい - この場合、dt と dd は 1 行で見せた方見やすい - dl のまま float させて table 的に見せてもいいけど、少し CSS めんどくさい - ここは「表」と言えなくもないので table 使っても妥当 - table 素直に使うのが一番ラクなのではこのへんひどい

Slide 19

Slide 19 text

15 Before After だいぶスッキリした table、妥当なところで使うのは別にいいんです。

Slide 20

Slide 20 text

16 マージンを適切に空けるブロック間のマージンは大きく 40px コンテンツを要素の固まり（ブロック）に分ける

Slide 21

Slide 21 text

17 ブロック内の要素間のマージン小さく 20px さらにその中の要素間のマージンはさらに小さく 10px マージンを適切に空ける

Slide 22

Slide 22 text

18 マージンを変数にしておくとよい。サイト全体でマージンサイズを統一できて気まぐれにならない（名付けがイマイチかも。。。いい名付けが思いつかない） $margin: 40px; $margin-inner: 20px; $margin-small: 10px; ブロック間の大きいマージンブロック内の小さいマージンさらに小さいマージン - 適切なマージンのサイズは、全体に使われているフォントの大きさとバランスして変わる - 最近の Web サービスのデザイン、大きいフォント使う傾向にあるので、マージンも大きめに取るのが良い（全体的にフォントが大きくなったというよりも、大きいフォントと小さいフォントの差が大きくメリハリが強いのが最近の傾向）

Slide 23

Slide 23 text

19 フォント使いに一工夫画面の中でのアクセントになり、きちんとデザインされている感じに見える Before After URL、いつも英数だから、さっき選んだ Heroku 感あるフォントにしてみよう

Slide 24

Slide 24 text

20 詳細ページ、全体の変化これだけやっただけなのに、結構変わる Before After

Slide 25

Slide 25 text

21 記事一覧表示 sites#index

Slide 26

Slide 26 text

22 文字情報が少ないコンテンツが多く、画像の右側がスカスカしているスカスカしてる

Slide 27

Slide 27 text

23 持っているデータで、一覧に出した方がよりユーザーが楽しめる情報はないのか再検討→要素追加 Before After URL も出てると heroku 感出ていいんじゃないの？やっぱり heroku-app.com 多いなあ。 or いや意外と独自ドメインも多いぞ。誰が作ったのか、一覧で知りたい友達が作ったやつなら詳細見に行きたい！

Slide 28

Slide 28 text

24 要素の置き方サブになる情報は、少しトーンを落としてメインの情報より目立たなくする - URL、作者をグレー（#999）に大きさも他の文字より小さくする - タイトルと URL はひと固まり扱いにし、マージンを小さく。その下は $margin-inner: 20px 開ける - URL はロゴと同じフォントに - 要素間に罫線を引くと締まる

Slide 29

Slide 29 text

25 一覧がスッキリしたなんか、雑誌っぽい感じになった Before After

Slide 30

Slide 30 text

26 デザインダメ出しハッカソンはここでタイムアップ。しかしもう少しやった方がいいことがあるので、サイトの方は直ってないんだけど、画像でサンプルを作ってきた。もう少しお付き合いください。

Slide 31

Slide 31 text

27 「ピックアップ」の扱いピックアップと新着一覧が似てしまっている。もっとガッツリ見せ方を差別化した方が、ピックアップ感が出るよ

Slide 32

Slide 32 text

Slide 33

Slide 33 text

29 - Heroimage （上の紫の部分）に思い切って置いてみると、コンテンツが主役のサイトになる - 左右に流すと、ギャラリーサイトっぽさが出る - よいコンテンツが、たくさん投稿されてそうな感じ出る「ピックアップ」の扱い

Slide 34

Slide 34 text

30 集まってきてたら、投稿件数出すのも効果的 - 5 件くらいならショボイので隠しておきたいけど、100 件超えてたら出していいのではないのかな？ - ある程度登録件数が集まっている場合、それを見せた方が、サービスの信頼感につながって、感心を持ってもらえる（あ、結構みんな使っているのね） - 自分で登録することによって、件数がカウントアップされる。参加している感も出る。 - フォントをロゴフォントと同様にしてサイズも大きくし、視覚的なアクセントにする。 - 数字はデザイン的なアクセントとしても結構使える！

Slide 35

Slide 35 text

31 「デザイン募集中」はオモシロイ切り口デザインテロ待ちちなみに、デザインテロとは？ we love に載せたことをきっかけに、デザイナーがこのサービスにデザインを入れたらオモシロイし、そういうきっかけになれたら嬉しいよね。レコメンド（オススメ）的な見せ方が向いている http://kuroigamen.com より

Slide 36

Slide 36 text

32 サイドバーで、レコメンド的に表示してあげてはどうか？ - サイドカラムに 3 件表示 - タイトル＆続きを見るで一覧に遷移 - ユーザーに期待するアクションを想定し、誘導する文言を加えるより感心を持ってもらえるチャンスを増やす

Slide 37

Slide 37 text

33 まあ、変えたいところはもっとあるんだが、とりあえずこのへんで… 今日のところは勘弁してやろう ( ΦωΦ )

Slide 38

Slide 38 text

34 デザイン = 装飾？特に装飾を加えなくても、情報の整理 + ちょっとした工夫フォント選び、大きさ、マージンの取り方等… で、グッと見違えるようによくなる。絵が描けなくても、いいんだよ

Slide 39

Slide 39 text

35 デザイン = 主役？そういう種類のデザインもあるけど、 Web サービスのデザインにおいては、主役はコンテンツ（写真やテキスト等）である。いかに、主役のコンテンツが一番活きる形で見せられるか？デザインをそのための手段の一つと位置づける。素材の味を活かしたデザインに引き立て役に、徹するのも楽しいよ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

37 自分の Web サービスが見せ方次第で別物のようにグッとよくなると楽しいし、作って終わりではなくどんどんサービス改善していくモチベーションにもなる ↓ だからデザイン、やろう。

Slide 42

Slide 42 text

38 Enjoy Design :)