平成最後の年の2018年が間もなく終わろうとしています。そんな中、今年の春以降にリリースされた公のWebサイトの中から、
デザインやアニメーションなどを参考にしたいサイトを集めてみました。サイトを選ぶにあたって下記のポイントに注目しています。

・アニメーションがある
・細部のデザインの質が高い
・参考にしたいポイントがある

こちらを基準にしてサイトを集めてみました。

+graph Cloud & Agent

モノトーンのトンマナとテキストだけで構成されているのに、デザインの完成度が非常に高いサイト。
トップページ内の「クリエイターを会計処理から解放する」のブロックなどは、moreボタンを縦に1列で配置するのが通常よくあるレイアウトですが、テキストとボタンを2列で配置しているところに心惹かれました。
https://plusgraph-ca.jp/

日本ガイシグループ – GLOBAL

フォントのアニメーションが見事です。動きの使い方など参考にしたいサイト。
見出しにアニメーションしているので、目が止まりブロックを認識しやすいです。
https://www.ngk-global.com/jp/

株式会社 清永宇蔵商店

メインビジュアルのカルーセルのナビゲーションが、ダイヤルのようなデザインになっていて視覚的に楽しいサイト。
About us部分など斜線をうまく活用しています。小さい円の使い方も素晴らしいです。
https://kiyonaga.co.jp/

All Toyota Green Wave Project

メインビジュアルのアニメーションとイラストがキュートなサイト。
イラストと動きのバランスが良いです。
https://www.all-toyota-gwp.jp/

outrider

まさに宇宙という感じのサイト。
Climate Change部分のサムネイル画像の大きさなど参考にしていきたいです。
https://outrider.org/

笹塚ボウル

ポップな色使いと、スクロールしたらボーリングの玉が流れてくるアクションが印象に残るサイト。
http://sasazukabowl.com/

POGG

ゆったりとしたアニメーションと、menuバーのデザインがインパクトのあるサイト。
https://pogg-sweetpotatopie.com/

まとめ

このように上質なサイトを見ていると楽しいですね。
サイトのトレンドを上手くインプットし、サービスに反映していきたいです。

アニメーションに関してはただ動かすのではなく、効果的にうまく使うことで操作する楽しみをユーザーに与えること。つまりUXを向上させることがトレンドであり、スタンダードになっている傾向です。

• 併せてこちらの記事もどうぞ

• ロゴをひもとく！デザインのトレンドを知ろう！

• WebデザインのUIとUX！その違いとUIデザインのポイント解説

• デザインする上でもよく耳にする「黄金比」とは