最新トレンドたっぷりなフラットUI！レスポンシブ対応のポートフォリオWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

この爽快な動きは、観ているだけで気持よくなりますね！フラットだけど効果的なアニメーションをしっかり取り入れています。レスポンシブWebデザインのポートフォリオサイトのご紹介。

この特徴的なイメージはフラットWebデザインと呼んでいいのでしょうか。良いと思うので呼んでしまいます。菱型と色合いをうまく利用しているので、ビビットな印象をつけながらも落ち着きを出しています。

単調な段区切りも、シンプルながらこのビビットな色合いととてもマッチしていますねー。こんなフラットUIもあるんだなと認識。

ホバーをはじめ、アニメーションがカッコ良すぎです！例えば上図としては、ホバーでその要素だけが横に拡大。

上図では、マウスの動きに色が合わせてついてきます。コレ凄い。

ちょっとどうやるのか凄く気になったのですが、ちょっとだけ見てみたら、jQuery-colorなるものと、CSSのclipプロパティをうまく利用して実現している…のでしょうか？もしかしたらこれを実現できるプラグインがあるのかしら。

いずれにしても綺麗な動き。知っている方がいたら是非ご一報下さるとコレ幸い！

ポートフォリオ一覧ページも多くの工夫がされていますよ。こんな開き方もありですねー！

要素などが軽いものを多用しているので、レスポンシブWebデザインが光ります。配置を少しずつ変えることで、スマホ画面でもとてもわかりやすいUIを実現しています。考えられてるなー。

綺麗だけど最新トレンドが沢山詰め込まれてるポートフォリオサイトを作りたい方、とっても参考になりますよ！勉強になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！