夏のWebデザイン変更祭2016

時々やってくるWebサイトのデザインを変えたい衝動に駆られて、デザインを少し多めに変更しました。
というより現在進行形でお見苦しいものを見せているかもしれません。
もともとそういうスタンスでやっていますので、本人はそんなに気にしてなかったりします（ｵｲ
個人的にいっぱい変更したので「祭」です。

今回変更したところの大部分がCSSになっています。
CSSで色んなエフェクトが付けられるのでjQueryはそんなに必要ではないですね。

アイキャッチ画像のホバーエフェクト

以前はただopacityプロパティを変更していただけなのですが、大幅に変更しエフェクトを付けました。

今まで何の画像かはっきりしませんでしたが、これで記事に繋がるリンクだとはっきりと分かるようになりました。

「続きを読む」ボタンのホバーエフェクト

今までは少し明るい色に変化させていたのですが、よく見ないとわからない変化だと思ったので思い切って白に反転させてみました。
後述のタブUIでは反対に濃くしたので統一感が無いですが、これはこれで気に入っているので使いたくなってしまいました。

SNS共有ボタン

記事の共有ボタンは続きを読むボタンのさらに進化系といった感じです。
ちなみにGoogle+のアイコンが今まで古かったのに気付いたのが今回の変更時でしたorz

また、少しボタンも大きくしてより分かりやすくしています。
tumblrとかいうマニアックなのがずっと入っていますが私がやっているからというだけで入れています。

SVG画像を導入したので色を変えられるようになりました。
pathの記述を短くするのにとても苦労しました。

本当はアイコンフォントを使いたかったのですが、はてブのアイコンがどこにもないのでSVGで統一する形となりました。

タブUIのデザイン

ナビゲーションメニュー

ナビゲーションメニューはマウスオーバーの時の色を濃くしただけです。
ちなみにこのエフェクトの配色は右カラムの検索ボタンと同じになっています。
またこの濃い色はリンクの色と同じになっています。

ウィジェット

よりタブっぽく（？）を考えてデザインしたつもりです。
今まで枠線がなかったので曖昧な感じでしたので、そこを変えてみました。

画像枠デザイン

画像の枠はただ細くして余白をつけただけです。
変更点はほんとにそれだけですが、なぜか洗練されたように感じます。

「いいね！」ボタンのアニメーションとレスポンス速度向上

WP Likesのボタンは当初は味気ないデザインでしたが、もっと押してもらおうと大きくしてみました。
ベースのデザインは「続きを読む」ボタンやSNS共有ボタンと同じですが、アニメーションを駆使したデザインになっています。

知る人ぞ知るtumblrの「スキ！」ボタンと同じような感じです。

また、プラグインが非同期通信をして実行完了を待ってからデザインを変更するようになっていました。
それをアニメーションをクリックと同時に進行することでストレスのないレスポンスになっています。
テキストは通信で取得しているので以前と同じで若干遅延があります。
欠点としてはうまく通信できなかった時にエフェクトが出たのに反映されないという現象が起こることですかね。
そんなことは滅多にないと思いますが。

ページネーション

CSSはあまり変えていませねんが、PHPを変えたので動作が少し変わりました。
また、レスポンシブデザインになりました。

ヘッダー・フッターのソーシャルアイコンおよび検索ボタン

今まで16x16のPNGアイコンを使用していましたが、小さくて存在感がないので倍程度に大きくしてみました。
SVGではなくアイコンフォントを使っています。
ただInstagramはGenericonsになく、FlickrはFontAwesomeになかったので合わせて使用しています。

本当はインスタグラムのアイコンをホバーしたときの色でアイコンの色を表現したかったのですが、CSSでradial-gradient関数などを使うとtransitionが使えないみたいなのでやめました。

background-clipプロパティもベンダープレフィックスがまだ必要っぽいですしね。

検索ボタンはニョキッと伸びるタイプから下に出てくるタイプにしました。

伸びるとソーシャルアイコンが移動するのでロゴとぶつかってデザインがしづらいのが解消されました。
また今まではスマホ等ではデザイン的な問題で検索バーを消していたのですが、こうすることで表示することができました。

その他

その他にも色んな所にtransitionプロパティを入れてみたりだとか、アイキャッチ画像を変えてみたりだとか色々しています。
アイコンのちょっとした調整だったり、文章が変わっているところもあります。
デザインの変化に気付いてくれたら幸いです。

---

ちなみにこれをやっている最中にFeedlyの件に気づきました。
こういうのはまとめてやるのではなくてこまめに確認していったほうがいいかもしれませんね。
トレンドを取り入れつつ洗練したデザインにしていきたいのでこれからも進化し続けていきますよ。