夏のWebデザイン変更祭2016

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

スポンサーリンク

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

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

以前はただopacityプロパティを変更していただけなのですが、大幅に変更しエフェクトを付けました。
アイキャッチ画像ホバーエフェクト
今まで何の画像かはっきりしませんでしたが、これで記事に繋がるリンクだとはっきりと分かるようになりました。

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

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

SNS共有ボタン

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

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

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

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

タブUIのデザイン

ナビゲーションメニュー

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

ウィジェット

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

画像枠デザイン

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

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

WP Likesのボタンは当初は味気ないデザインでしたが、もっと押してもらおうと大きくしてみました。
ベースのデザインは「続きを読む」ボタンやSNS共有ボタンと同じですが、アニメーションを駆使したデザインになっています。
いいねボタン Tumblr風エフェクト
知る人ぞ知るtumblrの「スキ!」ボタンと同じような感じです。

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

ページネーション

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

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

今まで16×16のPNGアイコンを使用していましたが、小さくて存在感がないので倍程度に大きくしてみました。
SVGではなくアイコンフォントを使っています。
ただInstagramはGenericonsになく、FlickrはFontAwesomeになかったので合わせて使用しています。
ソーシャルアイコン
本当はインスタグラムのアイコンをホバーしたときの色でアイコンの色を表現したかったのですが、CSSでradial-gradient関数などを使うとtransitionが使えないみたいなのでやめました。
Instagramの新しいアイコン
background-clipプロパティもベンダープレフィックスがまだ必要っぽいですしね。

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

その他

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


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

スポンサーリンク

Leave a Comment