Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

とっさのデザイン〜ボタン編〜

7,855 views

Published on

いわゆるwebサイトのボタンをどのようにデザイン設計するか。社内5分LTの。

Published in: Design
  • Be the first to comment

とっさのデザイン〜ボタン編〜

  1. 1. とっさのデザイン ∼ボタン編∼ 20121227 Yumi Ishizaki
  2. 2. 自己紹介うにだよー! Id:uniq!   元デザイナーで今はエンジニア。! Css/html中心で頑張ってるよ!!   作るときのモットー !   ユーザーが使いやすくて、かつクライ アントが最終的に目指したいもの !   言葉のまま受け取らず、よく考えて受 け取る
  3. 3. 今回のお題 偉い人に「ここにいい感じにボタン置いてよ」 って言われちゃったけど デザイン無いし、 僕はエンジニアなんですけど どうしたら…? …という時の対処法?です
  4. 4. 意味 まわり形 色
  5. 5. Step 1 「意味」を把握する そのボタンの意味を考えよう! 何をするボタン? 区別しよう! 「分かりやすければ良いボタン」と 「とにかく目立ちたいボタン」
  6. 6. 意味:ボタンで何する? ●●っぽくする。 !   アプリのダウンロード導線は、アプリ のダウンロード導線っぽいの !   Twitterにはtwitterの鳥さん使って、 twitterっぽいの。
  7. 7. 意味:区別する 分かりやすい優先 目立ちたい優先!   色、スタイル、形を揃え !   揃えるところは揃えるけ よう ど、ワンポイントで主張 すると、いい感じ。
  8. 8. Step 2 かたち すでにある他のボタンと揃えましょう他のボタンが無いときはルールを作ろう 大小2パターンのボタンを用意しよう
  9. 9. かたち:角丸を揃える
  10. 10. かたち:角丸を揃える
  11. 11. かたち:スタイル同じページ内、同じサイト内では、スタイルを合わせよう
  12. 12. かたち:大小の2パターンあらかじめ大小2パターンのボタンを作っておいて、用途によって使い分け
  13. 13. Step 3 まわり ボタン以外の場所にも気を使おう! ほどよいスペースを。 ほどよいアクセントを。
  14. 14. まわり:スペースあける 周囲にスペースがあった方がボタンが 分かりやすい、かつ目立ちますね
  15. 15. まわり:ワンポイント付ける 目立ちたい系ボタン。 ちょっとダサいけど、目立つには目立つ
  16. 16. まわり:何かで囲ってみる 目立ちたい系ボタン。 入会・登録など。
  17. 17. Step 4 色 基本的にはサイトやページで既に使わてるモノに 合わせよう…なんですが… 単色系 同系色グラデ系 白からグラデ系 …のどれかで揃える感じ
  18. 18. 同系色グラデスタイリッシュな感じ。 個人的には好き。
  19. 19. 色:白からグラデ系 今風じゃない感じ。 淡い感じ。 コスメやエステ情報サイトでは よく見られる気がする。 (個人的には好きじゃないけど、 サイトに合ってれば良いと思いマス)
  20. 20. ※「白からグラデ」とは?
  21. 21. まとめ 把握する ほどよいスペース & 意味 目立ちたい系はア クセント 形/スタイルを揃える & まわ 塗り方大小2パターン用意する り (グラデ/単色) を揃える 形 色
  22. 22. おわりありがとうございました

×