自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

SNSボタンを簡単生成するツール

SNSボタンは、イメージカラーが美しくアイコンが洗練されているので、ホームページデザインの一部として配置するサイトが増えています。


今回はそのボタンデザインを見ていくとともに、以前のエントリー「レスポンシブでの画像やボタンについて」で「ボタンは画像ではなくテキストデータで」という内容を書いたところ、在り難いことによくお読みいただいている記事のひとつとなりました。そこで今回も内容は近いのですが、簡単にSNSボタンをテキストデータを生成できるサイトをご紹介します。

[広告]

始めに、本エントリーにおける「SNSボタン」という用語は↓こういうものをイメージしており、これについて書きます。


こちらはわたしがCSSスプライトで使用していた画像です。お分かりのように、通常時はサイトデザインにあったカラーにしておいて、hoverでそれぞれのイメージカラーに変わるようにすることが多いです。


これの他に「SNSビッグ3のボタンをブログに置こう」で書いたような↓このようなSNSボタン(一般に「ツイートボタン」「共有ボタン」と呼ばれる)があります。


このふたつのSNSボタンの役割の違いですが、前者のアイコンはフッターやサイドバーに設置された場合は「そのサイトのSNS公式アカウントへのリンクボタン」として機能させ、記事内に設置された場合は「閲覧者のSNSアカウントで共有するための投稿ボタン」として機能させるケースがあります。後者は明らかに分かる通り、「閲覧者のSNSアカウントで共有するための投稿ボタン」です。


個人的には、シンプルなデザインを好む、あるいはレスポンシブでスマホサイズになった時の省スペースを狙う、というような制作側の都合でユーザーに迷わせるよりは、共有にはちゃんと共有ボタンを置いて、役割を明確にするのは大事だと思っています。わたし自身、公式アカウントを見ようとSNSボタンをクリックしたら共有画面に飛んだりするとちょっとイラっとするんですよね!


では、2社をよく見るデザイン例に挙げたいと思います。


こちらがよく見るパターンで、フッターに自社アカウントのリンクを置くというもの。こちらはテキストではなく画像を使用しています。トヨタ自動車HP、いつの間にかレスポンシブ化していました♪とてもキレイです。

トヨタ自動車ウェブサイト http://toyota.jp/


非常にシンプルで色のきれいなサイトで素敵だと思うのですが、ツイート・共有ボタンとSNSボタンの区別がつきにくいのが玉にキズ。

JBpress http://jbpress.ismedia.jp/


さて今回は画像やCSSスプライトを使用せず、テキストデータでSNSボタンを設置します。ご紹介するのはこちらのサイトです。

Perfect Icons http://perfecticons.com/


簡単にSNSの横並びボタンが生成できるので、お勧めです!設定コマンドは以下の通り。


作成するSNSの選択やURL設定は次の通り。


右側にはプレビュー画面と、1.ZIPファイル、2.CSS、3.HTML が。とても簡単に生成できることに驚きます!!この辺はよく使う素材ですし、本当に助かるツールだと思います!


上記で示されたコードをちょこちょこと書き換えれば、望み通りのものが作れると思います!ちなみにわたしは次のようにフッターに置くことが多く、通常時は統一のサイトカラーで表示し、hover時に各SNSのイメージカラーに変わるようにcssを書き換えます。1秒かけてふんわりと色が変わるtransitionも、モバイルファーストと考えるとスマホではhoverはたいして効果的には働かないので、削ってもよいと思います。

[広告]

iframeバナーのサイズを変える ブログTOP IE10~でもfilterを効かせるには
Hotentry
Blog Post
クリックして上に戻る