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. 4 we love heroku http://welove.herokuapp.com/ by @ppworks heroku を使って作られた Web

    サービスを投稿できるギャラリーサイト 既に 100 を超えるサービスが投稿されており見応えがある。 最近、Rails 4 に上げるついでに、デザインも bootstrap 3 を使って リニューアルしたらしい。
  2. 5 Serif → 明朝 Sans Serif → ゴシック Display →

    装飾の強いフォント Handwriting →手書き風 heroku っぽいフォントは、 明朝でもないし手書き風でもないだろう。 消去法で、 Sans Serif と Display にチェックを入れて 探してみる。
  3. 10 枠、いらなくないすか? - エンジニア 、何かとすぐ枠をつけたがる傾向があるらしい (白だと怖い) - 枠があることで漂う Bootstrap 臭

    - この部分は、このページの中の本文に当たるので、特に装飾が必要ない - 枠を取ることで、左のサムネイルと連動して一つの固まり感が出る - 本文の中にコラム的に別カテゴリの文章が出てきた時には枠を使うと効果的 Bootstrap の .well
  4. 12 行間の調整 Before After 最適な line-height は文字のつまり具合にもよる。 - Blog のように文字が詰まったものなら、line-height:

    1.8 〜 1.9 く らい取った方が高級感がでる。 - この場合は、文字量があまり多くないページが多いので、1.7く らいがスカスカせずすっきりして、最適 line-height: 1.7
  5. 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 を つめる
  6. 14 データ部分 dl のデザインがひどい - この場合、dt と dd は 1

    行で見せた方見やすい - dl のまま float させて table 的に見せてもいいけど、少し CSS めんどくさい - ここは 「表」と言えなくもないので table 使っても妥当 - table 素直に使うのが一番ラクなのでは このへん ひどい
  7. 18 マージンを変数にしておくとよい。 サイト全体でマージンサイズを統一できて気まぐれにならない (名付けがイマイチかも。 。 。いい名付けが思いつかない) $margin: 40px; $margin-inner: 20px;

    $margin-small: 10px; ブロック間の大きいマージン ブロック内の小さいマージン さらに小さいマージン - 適切なマージンのサイズは、全体に使われているフォントの大きさとバランスして変わる - 最近の Web サービスのデザイン、大きいフォント使う傾向にあるので、マージンも大きめに取るのが良い (全体的にフォントが大きくなったというよりも、大きいフォントと小さいフォントの差が大きくメリハリが強いのが最近の傾向)
  8. 23 持っているデータで、一覧に出した方がより ユーザーが楽しめる情報はないのか再検討→要素追加 Before After URL も出てると heroku 感出て いいんじゃないの?

    やっぱり heroku-app.com 多いなあ。 or いや意外と独自ドメインも多いぞ。 誰が作ったのか、一覧で知りたい 友達が作ったやつなら詳細見に行きたい !
  9. 24 要素の置き方 サブになる情報は、少しトーンを落としてメインの情報より目立たなくする - URL、作者を グレー (#999) に 大きさも他の文字より小さくする -

    タイトルと URL はひと固まり扱いにし、マージンを小さく。その下は $margin-inner: 20px 開ける - URL はロゴと同じフォントに - 要素間に罫線を引くと締まる
  10. 28

  11. 30 集まってきてたら、投稿件数出すのも効果的 - 5 件く らいならショボイので隠しておきたいけど、100 件超えてたら出していいのではないのかな? - ある程度登録件数が集まっている場合、それを見せた方が、サービスの信頼感につながって、 感心を持ってもらえる

    (あ、結構みんな使っているのね) - 自分で登録することによって、件数がカウントアップされる。参加している感も出る。 - フォントをロゴフォントと同様にしてサイズも大きくし、視覚的なアクセントにする。 - 数字はデザイン的なアクセントとしても結構使える !
  12. 32 サイドバーで、レコメンド的に表示してあげてはどうか? - サイドカラムに 3 件表示 - タイトル&続きを見るで 一覧に遷移 -

    ユーザーに期待するアク ションを想定し、誘導する 文言を加える より感心を持ってもらえる チャンスを増やす
  13. 36 エンジニア、デザイン覚えられる? - ある程度のところまではいける - 割と法則性がある。 - 引き出しを増やす - エンジニアがケースバイケースで最適なメソッドやライブラリを選べる能力に似ている

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