【見た目がバラバラ・重い】フラットデザインでソーシャルボタンの問題を同時に解決! - フリーBGM&自主映画ブログ|"もみじば"のMOMIZizm

カスタマイズ ブログ

【見た目がバラバラ・重い】フラットデザインでソーシャルボタンの問題を同時に解決!

2015年9月15日

social-networks-628331_640
ソーシャルボタンは重要だ!!!

 

ソーシャルボタンというものは重要である。

 

ソーシャルなボタンは重要でござる。

 

ソーシャルにおけるボタンの重要さが存在だ。

 

…というわけで、ソーシャルボタンというのはブログにおいてかなり重要です!
ソーシャルボタンというのは、フェイスブックの「いいね!」ボタンや、ツイッターのツイートするボタンのことなどでございます。

ブログというのは、グーグルやヤフーからの検索はもちろん重要ですが、SNSでの拡散も非常に重要なのです。この二本の柱からのアクセスをおろそかにすると、ブログは音もたてずにネットの海に沈没していき、そして誰も見ることもできない幻の島として消えゆく運命となります。必ずそうなります。

このブログは一応徐々に浮上中です。その内、空を飛ぶ予定です。

 

ソーシャルボタンがないとどうなる? ソーシャルボタンの重要さ。

ソーシャルボタンがないと、「この記事いいでござるなあ」とか、「こちらの記事も、いいでござるなあ」などと思った読者がいても周りの人に知らせることができません! クチコミでブログを広めるなんてのはそうそうできないので、たとえどんなに面白い記事でも実質、誰にも広められずに終わってしまいます。これはもったいない!

ソーシャルボタンなしに良い記事・面白い記事を書くことは、最強に面白い漫才をベッドで布団をかぶってやるのと同じであり、素晴らしい自主制作映画を松屋の食券機の裏側に投影するのと同じであり、素晴らしく趣向を凝らした生け花を樹海の奥に飾るのと同じであり、非常に優れた天才的小説を山奥に一人暮らししている無口で友達が一人もいない老人に読ませて終わることと同じなのです。たとえその老人がいくら気に入ってくれてもその小説は誰にも広まりません。

そんなソーシャルボタンですが、ただただ適当に配置しているのではそれもまたもったいないのです!

このブログではWordpressでスティンガー(stinger)というテーマを使用しています。このテーマは素晴らしいので最初からソーシャルボタンが付いているのですが、「これをより良いものに変えよう~(^^♪」というのが、今回のテーマです。

 


デフォルトのソーシャルボタンが持つ問題点!

さてさて、「ソーシャルボタンは重要だ!」ということはそろそろ伝わったかと思います。次はデフォルトのソーシャルボタンの問題点について書きます。
デフォルトのソーシャルボタンというのはこういうやつのことです。ソーシャルボタンの画像これでも別に機能としてはなんら問題ないのですが、問題点が二つあります。

1. 見た目がバラバラ

いずれも長方形というところは一致していますが、サイズがバラバラで、デザインも微妙に立体的だったり平面的だったりバラバラで、細かく言えば吹き出しの線の太さも違っています。

これでも見慣れているのでそんなに変ではないと言えばそうなのですが、デザイン性を重視しているサイトなどでは特に気になると思います。デザイン重視じゃなくても、なんとなく統一感は薄めです。

2.読み込みが遅い

これはどんなブログにおいても結構問題です。ソーシャルボタンというのは小さいのに意外と読み込みの時間がかかるのです!

「いいね!」の数や、ツイート数などのシェア数等を表示しないのであればまだ我慢できるレベルですが、それらを表示する場合は読み込み時間にかなりの影響が出ます。読み込みの時間に一番時間がかかってる要素ってなんだろう?と思って調べたら、このソーシャルボタンの数値の読み込みだったということは結構あります。

上記のように「いいね!」が1で、「ツイート」が2程度なら表示しなくてもいい気もしますが、「いいね!」が100とかいったら記事のアピールにもなるので表示したくなると思います。しかし、読み込み時間が遅いとページの離脱率が格段に上がるという話もあるくらいなので、読み込み時間も削減したくなり、ジレンマに陥ることと思います。

 

二つの問題点を解決する方法

「見た目がバラバラ」なことと、「読み込みが遅い」こと。これら二つの問題点を解決したソーシャルボタンをブログに設置しようではありませんか。なんと、これらの問題点を一挙に解決する方法があります。

「フラットデザイン」なら両方同時に解決してみせます。

フラットデザインってご存知ですか? 名前の通りフラットなデザインで、シンプルかつ機能的なデザインで、ウェブのデザインには最適です!
下記に、フリー写真素材サイト「Pixabay」からフラットデザインを引っ張ってきました。

fire-633302_640

一見ダサいようにも見えなくはないのですが、実はあのアップルグーグルもロゴに最近取り入れたという、最先端のデザインです! ロゴを勝手に貼ると問題になるかも知れないので、それぞれのロゴは詳しくは各ホームページでご覧ください。

apple

 

シンプルすぎてどうなの? と思う方もいるとは思いますが、これはウェブデザイン的にはかなり理に適ったデザインに思えます。シンプルなので当然、読み込み速度はめちゃくちゃ早いです。

なおかつ、単純なデザインなのでパソコン・スマホ・タブレットなど多様化する様々なデバイスで見ても崩れないようにするのが、技術的に簡単だという話もあります(シャドーなどを使っていると色々と面倒なケースがあるようです)。

フラットデザインをソーシャルボタンに取り入れる

さて、このフラットデザイン。ソーシャルボタンに取り入れるにはどうしたらいいのか……?
もしあなたがWordpressでブログを書いているのなら、それはこちらのブログにわかりやすーく書いてあります! というか、私はこちらを参考にさせて頂いてます!

http://shufulife.com/8type-snsbutton/

カスタマイズになるのでちょっとした知識は必要ですが、基本的にはコードを指定位置にコピペするだけでいけます。このカスタマイズを成功させると、ソーシャルボタンはこのようなデザインになります!

ソーシャルボタンの画像 フラット

 

非常にすっきりまとまりましたね。統一感の塊です。

かっこいい! と思う人はそんなにいないかも知れませんが、トレンド的には徐々にこういったシンプルデザインがかっこいい扱いされていくものと思われます。スマホが普及しまくりな現代では、読み込み時間短縮は重要命題ですからね。アップルとグーグルがフラットデザインを取り入れたということはトレンドをかなり加速させていると思います(とっくのとうかも知れませんが)。

トレンドなことを信じてもらうためにも、いくつかの大手ブログでの使用事例をスクショで紹介しておきます。

 

ソーシャルボタンにフラットデザインを使っている大手ブログ

Marketing Bank (マーケティングバンク)

ソーシャルボタン フラットデザインhttps://www.marketingbank.jp/

 

 

CuRAZY [クレイジー] | より良い暇つぶしを届けるメディア

ソーシャルボタン フラットデザイン2http://curazy.com/

 

BuzzFeed

ソーシャルボタン フラットデザイン3http://www.buzzfeed.com/

 

シェア数の読み込みを早くする

ちなみに、上記の記事でしっかり説明はされていますが、シェア数の読み込み速度にも対策が取られています。
デフォルトのソーシャルボタンを使用しない場合はシェア数の獲得がけっこう面倒になるのですが、あるプラグインを使うことでそれを簡単に実現&読み込み速度アップをすることができます。素晴らしいプラグンインです。まるで素晴らしい自主制作映画のようです。

プラグイン「SNS Count Cache」をインストールするだけです。そうすればシェア数が表示できるようになっています。更に、このプラグインを使用するとシェア数の読み込み速度も改善される仕組みになっています。私がかつて趣味で撮影した90分の大作アクション映画『抜本-BAPPON-』並みに素晴らしいですね。

 

 

まとめ

いかがでしょうか!

こんな感じでソーシャルボタンをフラットボタンにすると、読み込みも早くなるしデザインも統一されるしで一石二鳥です。ぜひ皆さんも試してみてください。そして一緒に深海から浮上し大空へと羽ばたきましょう!

では、皆さんがパソコンの前でパタパタとしているところで今回は終わりとしましょう。

それではまた!

 

…ちなみに、まだまだパタパタと羽ばたきたい方は、こんな本を読むとより自分流のカスタマイズができると思うのでお勧めです。