Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 少ない装飾で素材の魅力を生かす、ズルい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

ken_c_lo / TAEKO AKATSUKA

December 07, 2013
Tweet

More Decks by ken_c_lo / TAEKO AKATSUKA

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 1
    という相談を一昨日受けたので、
    その場で口頭で 1 時間くらいダメ出しとアドバイスしたら、
    グッといい感じになった。
    (で、これ、今日のプレゼンで使えるのでは…と思いついて、今急遽スライドを今書いてます。



    その実際の様子をご紹介します。
    デザインが楽しくなってきた。
    どうしたらもっと良くなるかなあ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 8
    要所要所で使うかもしれないので、
    mixin にしておくと便利
    (例えば、URLや何かの数等、多くの場合英数しかないテキストの表示に
    ワンポイント的にこのフォントを使うと画面のアクセントになる。

    @mixin theme-font{
    font-family: 'Electrolize', sans-serif;
    }
    .url{
    @include theme-font;
    }

    View full-size slide

  13. 9
    詳細ページ sites#show

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 18
    マージンを変数にしておくとよい。
    サイト全体でマージンサイズを統一できて気まぐれにならない
    (名付けがイマイチかも。

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 21
    記事一覧表示 sites#index

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    だからデザイン、やろう。

    View full-size slide

  41. 38
    Enjoy Design :)

    View full-size slide