ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。
余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。
詳細は以下から。
最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ
筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。
Birds of Paradise Encyclopedia
さまざまな鳥の種類を、インタラクティブなアニメーションと一緒に表現する、次世代のイメージスライダー機能。
コンテンツのページ遷移に合わせて、ブランドロゴに利用されている、黄色のボーダー枠をアニメーション付きで加えています。
ストレスを感じない滑らかさが特長で、ブランドイメージともマッチした高級感のあるインターフェース。
ヘッダーに立体感たっぷりに描かれたチューリップが印象的で、スクロールに応じて奥行き感を演出したアニメーションの仕掛けも。
季節やシーズンに合わせて落ち葉がヒラヒラと、商品の上にリアルに重なるエフェクトが素敵です。
雑誌では表現のむずかしい、アニメーションを利用したコンテンツは、よりユーザーにも刺激的に見えるレイアウトが可能となります。
Naturale Brewing Co. Web Animation
各プロダクト商品を紹介するスライダーに、なめらかなアニメーションが加えられています。
Old Liquors – Picking An Item Transition
タイムラインに合わせ、スクリーン画面を二分割することで、各コンテンツの詳細と画像イメージを一緒に楽しむことができます。
文字テキストと画像イメージの表示に、すこしだけラグを設けることで、洗練されたアニメーションに仕上げます。
余白スペースをたっぷり確保したレイアウトは、各コンテンツをクリックすることで、フルスクリーン表示されます。
スライダーにズームやスライドアップ・エフェクトを加えることで、よりインタラクティブな魅せ方を提案しています。
ナビメニューやスライダーなどをクリックするたびに、じっくり検討されたアニメーションを各要素に適用しています。
カタログ形式で商品を閲覧でき、背景にはロゴデザインをパララックスエフェクトで適用しています。
Hide – Ecommerce Project Menu Interaction
ショッピングサイト向けのメガメニュー用レイアウトで、各コンテンツにわずかなアニメーションを加えることで、より高級感のあるブランディングに成功しています。
各コンテンツの切り替えに、下から上へのスライド・エフェクトを加えています。
画面をスクロールしたときに、ほんの少しだけスライドアップ・アニメーションを加えることで、より繊細なイメージを与えることができます。
真っ黒の背景からぼんやりと人物モデルが浮かび上がる、ユニークなコンテンツスライダー。
ふわりと浮かんだ浮遊感が絶妙で、スタイリッシュにコンテンツを切り替えます。
画面を２分割したスプリット・エフェクトを採用したスライダーで、見出しタイトルと画像イメージがアニメーション付きで切り替わります。
ハンバーガーアイコンをクリックすると、画面上からナビメニューが登場し、各コンテンツへもアニメーション付きで遷移します。
ミックステープを選択し、再生するまでの遷移フローを描いたアニメーションで、思わず使いたくなるインターフェースが特長。
リビングルームの壁一面に映し出された、グラデーションが美しく、滑るようなぬるりとした動きがインパクト大。
ナビゲーションメニューを下方向にドラッグすると、ユニークなイラストアニメーションが表示されます。
線ラインを効果的に利用することで、視線を誘導するテクニック。
カード型レイアウトのコンテンツを、水平方向のスワイプで選択することができます。
ボタンをクリックすることで、ページ遷移することなく料理レシピが表示される、モバイル・アプリ向けUIアニメーション。
タブをクリックすることで、入力した支払い用クレジットカードの詳細を確認できます。
左右にスワイプすることで、イラスト付きで解説されたコンテンツがポップアップ表示されます。
Dualshock4 – Sketch & Principle Freebie
Sketch と Principles 用ファイルで無料配布されているアイテムのひとつで、商品販売などに利用したいUIデザイン。
The UX of Fully Autonomous Cars
目的地を入力することで、インタラクティブに道を誘導してくれるマップ向けインターフェース。
画像イメージに画像が乱れるようなグリッチ・エフェクトが利用された、ポートフォリオのヘッダーデザイン。
ヘッダーにデザインされたイラストもかわいく、アイコンにアニメーションを加えたユニークなギミック。
ロゴデザインにアニメーションを加えることで、より印象的なファーストインプレッションにつながります。
