賢威7の初期デザインのソーシャルブックマーク用のボタンが、あんまり気に入らなかったので、カスタマイズしてみることにしました。

せっかくなので、最近流行しているフラットデザインを意識して、ごくごくシンプルなテキストリンクに、cssでボタン風にみせるカスタマイズを採用。

本当はササッと終わらせるはずだったのに、意外と時間がかかってしまって気がついたら外真っ暗。

cssやhtmlをカスタマイズするのって、意外と手間がかかるんだなーと、改めて思いました。

フラットデザインにした理由

フラットデザインというのは、飾り気を極力省いてシンプルイズベストな格好にすること。

伝いメッセージだけを、そのまんま表現するような見た目です。

最近だとgoogleの検索ページのデザインが注目をあびました。

ただシンプルにすればいいってもんじゃないらしい

シンプルにして、装飾を削ったデザインにするだけじゃ、フラットデザインの持ち味を発揮できません。

パッと見た人が、直感的に見やすい、わかりやすいデザインを心がける必要があります。

色使いだったり、レイアウトだったり、フォントだったり、シンプルなんだけど単調にならないような、そんな工夫をするのが重要。

色使い

今回カスタマイズしたソーシャルボタンは、それぞれのブックマークのページに飛んだときに、いちばん印象的な色が採用されています。

ツイッターならスカイブルー。フェイスブックだったら濃紺ブルー。

公式ページが配布している素材から、色を抜き出して、どんな色が使われているかを調べてみると、しっくりくる色が見つかると思います。

レイアウト

見やすいレイアウトが大事。

良くみるのは、アイコンどうし縦と横のラインをきちっとそろえるデザイン。
アイコン同士の間隔を均等にして、違和感なく配置するデザイン。

気をつけておきたいのが、スマートフォンユーザーからみたデザイン。
パソコンからみたページが綺麗に整っていても、スマホからみると字が小さくなってしまったり、レイアウトが崩れてごちゃごちゃっとなってしまわないよう、いろいろな画面サイズからチェックしておくと良いです。

フォント

シンプルなデザインに、フォントで個性をつけるのが、よそとは一味違うデザインに仕上げるポイント。

それぞれのイメージに合わせて、ポップだったりクールだったり、字体のデザインにこだわりたいです。

このブログは、フォントにはいっさい手をつけていないので、おいおい考えていけたら良いなーという感じ。


スポンサーリンク