SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
とっさのデザイン
 ∼ボタン編∼
  20121227 Yumi Ishizaki
自己紹介
うにだよー
! Id:uniq

!   元デザイナーで今はエンジニア。

! Css/html中心で頑張ってるよ!

!   作るときのモットー
  !   ユーザーが使いやすくて、かつクライ
      アントが最終的に目指したいもの
  !   言葉のまま受け取らず、よく考えて受
      け取る
今回のお題
      偉い人に
「ここにいい感じにボタン置いてよ」
  って言われちゃったけど
    デザイン無いし、
 僕はエンジニアなんですけど
    どうしたら…?



     …という時の対処法?です
意味

    まわり



形         色
Step
  1     「意味」を把握する
        そのボタンの意味を考えよう!
           何をするボタン?


           区別しよう!
       「分かりやすければ良いボタン」と
        「とにかく目立ちたいボタン」
意味:ボタンで何する?
  ●●っぽくする。
  !   アプリのダウンロード導線は、アプリ
      のダウンロード導線っぽいの

  !   Twitterにはtwitterの鳥さん使って、
      twitterっぽいの。
意味:区別する
 分かりやすい優先           目立ちたい優先

!   色、スタイル、形を揃え   !   揃えるところは揃えるけ
    よう                ど、ワンポイントで主張
                      すると、いい感じ。
Step
  2     かたち

  すでにある他のボタンと揃えましょう


他のボタンが無いときはルールを作ろう


  大小2パターンのボタンを用意しよう
かたち:角丸を揃える
かたち:角丸を揃える
かたち:スタイル




同じページ内、同じサイト内では、スタイルを合わせよう
かたち:大小の2パターン




あらかじめ大小2パターンのボタンを作っておいて、用途によって使い分け
Step
  3         まわり

       ボタン以外の場所にも気を使おう!


          ほどよいスペースを。
          ほどよいアクセントを。
まわり:スペースあける




  周囲にスペースがあった方がボタンが
   分かりやすい、かつ目立ちますね
まわり:ワンポイント付ける




      目立ちたい系ボタン。
  ちょっとダサいけど、目立つには目立つ
まわり:何かで囲ってみる




   目立ちたい系ボタン。
    入会・登録など。
Step
  4              色
       基本的にはサイトやページで既に使わてるモノに

            合わせよう…なんですが…



           単色系
         同系色グラデ系
         白からグラデ系
             …のどれかで揃える感じ
同系色グラデ



スタイリッシュな感じ。
  個人的には好き。
色:白からグラデ系



    今風じゃない感じ。
      淡い感じ。

 コスメやエステ情報サイトでは
   よく見られる気がする。

  (個人的には好きじゃないけど、
 サイトに合ってれば良いと思いマス)
※「白からグラデ」とは?
まとめ
                   把握する



                          ほどよいスペース
                              &
                  意味      目立ちたい系はア
                            クセント
 形/スタイルを揃える
      &           まわ           塗り方
大小2パターン用意する        り         (グラデ/単色)
                               を揃える

              形        色
おわり
ありがとうございました

Weitere ähnliche Inhalte

Andere mochten auch

V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28robin Simamora
 
This is link lists for crafts supplies online store
This is link lists for crafts supplies online storeThis is link lists for crafts supplies online store
This is link lists for crafts supplies online storeIr. MD Nursyazwi Mohammad
 
Ba702 sum 2012 - hilyard second draft presentation 1
Ba702  sum 2012 - hilyard second draft presentation 1Ba702  sum 2012 - hilyard second draft presentation 1
Ba702 sum 2012 - hilyard second draft presentation 1ahilyard
 
Lv digital culture_rix_dc
Lv digital culture_rix_dcLv digital culture_rix_dc
Lv digital culture_rix_dcmadaravinberga
 
Lms mi prezi
Lms mi preziLms mi prezi
Lms mi preziNeli Jake
 
Mit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllenMit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllenBrandwatch GmbH
 
Business writing-skills
Business writing-skillsBusiness writing-skills
Business writing-skillsAftab Alam
 
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...Joe Hughes
 
Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116mtnorris814
 

Andere mochten auch (11)

V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28V1 no1-06-sutrisno-26-28
V1 no1-06-sutrisno-26-28
 
This is link lists for crafts supplies online store
This is link lists for crafts supplies online storeThis is link lists for crafts supplies online store
This is link lists for crafts supplies online store
 
M1 1
M1 1M1 1
M1 1
 
Ba702 sum 2012 - hilyard second draft presentation 1
Ba702  sum 2012 - hilyard second draft presentation 1Ba702  sum 2012 - hilyard second draft presentation 1
Ba702 sum 2012 - hilyard second draft presentation 1
 
Lv digital culture_rix_dc
Lv digital culture_rix_dcLv digital culture_rix_dc
Lv digital culture_rix_dc
 
Lms mi prezi
Lms mi preziLms mi prezi
Lms mi prezi
 
Mit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllenMit Social Media Monitoring Kundenerwartungen erfüllen
Mit Social Media Monitoring Kundenerwartungen erfüllen
 
Planeación
PlaneaciónPlaneación
Planeación
 
Business writing-skills
Business writing-skillsBusiness writing-skills
Business writing-skills
 
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
Technical Bulletin 1128A Mechanical Insulation In Typical Refrigeration Appli...
 
Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116Mike Todd Noris - Resume - 110116
Mike Todd Noris - Resume - 110116
 

Mehr von Yumi uniq Ishizaki

スクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいことスクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいことYumi uniq Ishizaki
 
デザイナーにGitは必要?
デザイナーにGitは必要?デザイナーにGitは必要?
デザイナーにGitは必要?Yumi uniq Ishizaki
 
connpass design at BPStudy #88
connpass design at BPStudy #88connpass design at BPStudy #88
connpass design at BPStudy #88Yumi uniq Ishizaki
 
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoYumi uniq Ishizaki
 
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もYumi uniq Ishizaki
 
絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3Yumi uniq Ishizaki
 
真のレシポンシブって何だろう
真のレシポンシブって何だろう真のレシポンシブって何だろう
真のレシポンシブって何だろうYumi uniq Ishizaki
 
アイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやることアイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやることYumi uniq Ishizaki
 
Semantic html が止まらない
Semantic html が止まらないSemantic html が止まらない
Semantic html が止まらないYumi uniq Ishizaki
 

Mehr von Yumi uniq Ishizaki (10)

スクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいことスクラムする前に知って欲しいアジャイルさんっぽいこと
スクラムする前に知って欲しいアジャイルさんっぽいこと
 
デザイナーにGitは必要?
デザイナーにGitは必要?デザイナーにGitは必要?
デザイナーにGitは必要?
 
connpass design at BPStudy #88
connpass design at BPStudy #88connpass design at BPStudy #88
connpass design at BPStudy #88
 
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
 
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話もOocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
 
絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3絵描きさんあるあるPhotoshop技 DIST3
絵描きさんあるあるPhotoshop技 DIST3
 
真のレシポンシブって何だろう
真のレシポンシブって何だろう真のレシポンシブって何だろう
真のレシポンシブって何だろう
 
アイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやることアイディア発想法とかモノ作りを初める前にやること
アイディア発想法とかモノ作りを初める前にやること
 
とある色の決め方
とある色の決め方とある色の決め方
とある色の決め方
 
Semantic html が止まらない
Semantic html が止まらないSemantic html が止まらない
Semantic html が止まらない
 

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