ツイートいいねブックマーク+1チェックボタン、各種デザインカンプ用画像をまとめて置いておく
サイトのデザイン作成のとき、近頃は必須の配置物として、ソーシャル系のボタンがリクエストされます。
コーディングの時にボタンを入れ込むわけですが、デザインカンプにももちろん必要。でもほとんどがカウントとともにJavascriptで用意されているので、画像ベースの素材がありません。その都度、縦型、横型、数字入り、数字なしなどキャプチャしてバックグラウンドと四隅を1ピクセルづつ切って…とやってるわけですが、面倒なので、誠に勝手ながら、ここに置いておくことにしました。もちろん、実物大です。
つまり、ドラッグ、または右クリックでコピーしてFireworksに貼り付ける用のボタンサンプルです。だれが必要？私が必要♪
Twitter ツイートボタン サンプル
カウント数ありの、縦、横、カウントなしボタン、そして英語ver.。
サイズ(px)：左より、「80*62」「横可変*縦20」「80*20」「横可変*縦20」
- コーディングの時は、こちらのオフィシャルのボタンの作成で。
- http://twitter.com/about/resources/tweetbutton
data-lang=”ja” を入れないと、英語になります。
Facebook いいね！＆シェア＆送信ボタン サンプル
Facebookソーシャルボタンの、縦、横、シェアのカウント入り、送信ボタン。
Facebookボタンはサイズがやっかいですが、デザインベースでは気にしないことに…。一応、
サイズ(px)：左より「71*60」、他は横サイズ可変で縦が18〜20ぐらい…
コード発行の際に「Layout Style」をstandardにすると、親指マークの「いいね」に変わり、クリックを促すメッセージがつきます（XFBMLで実装するとき）。
123人が「いいね！」と言っています。「いいね！」をクリックして、友達に知らせましょう。
このページには123人もいいねと言ってませんが。テキストもコピペ用。コード発行の際に横サイズを指定するので、テキストの部分は折り返しても大丈夫。フォントはデバイスフォントで10ピクセルぐらい。
- コーディングの時は、こちらでソースコードを発行しましょう。
- Core Concepts Social Plugins
はてなブックマーク ボタン サンプル
はてなも、縦、横のカウント入りと、カウントなし
サイズ（px）：左より「50*50」「50*20」「20*20」
- コーディングの時は、こちらでソースコードを発行しましょう。
- はてなブックマークボタン
Google +1 ボタン サンプル
新参者のGoogle +1ボタン。縦と、横の大中小。
サイズ(px)：左より、「50*60」「横可変*縦24」「横可変*縦20」「横可変*縦15」
Google +1ボタンは、カウント数字なしの大中小も用意されていますが、基本のサイズは一緒なので、上記の画像から数字を切る感じで。
- コーディングの時は、こちらでソースコードを発行しましょう。
- Google +1 ボタン発行
mixiチェックとイイネ！ サンプル
mixiチェックの各種ボタン。こちらはmixiの技術者向けサイトに画像で用意されています。
サイズ(px)：左より「58*18」「77*18」「55*18」「76*18」「84*25」
そして、mixiイイネ！のカウント付きボタン。
ということで、それぞれのカウント数字が入ったイメージでデザインサンプルを作るんですが、見てお分かりのとおり、カウント数付きボタンは、カウント数の桁によって横幅がかなり変わってきます。人気サイト（じゃなくても…）のデザインサンプルを起こすときは、コーディングを見越して、これらのアイコンの配置の幅には余裕を持たせておいたほうがいいですね。
ちなみに自作のボタンにカスタマイズするときは、前の記事（Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです）をどうぞ。
さて…そろそろ行き詰まったデザイン作業に戻ります。