allWeb制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】2020年2月21日ずっと使える、デザインの基本まとめました。改訂版3Homeウェブ制作ウェブ考察サイトやアプリの使い心地を改善!UIアニメーションを良くする実践テクニック、小技7個まとめ2018年3月13日ウェブ考察Advertisement実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。Manifestoのガイドラインを参考にしています。Studio(現在は限定ユーザーのみのアーリーアクセスで、メール登録で申請可能)で作成しており、すべてのソースはこちらのDropboxリンクよりダウンロードできます。タブ操作に横スライドを加えよう。左のサンプル例では、コンテンツはフェードイン/アウトで切り替わり、もうひとつはタブ操作によって右方向へのスライドが追加されています。「良い」アニメーションは、コンテンツが遷移するときにフェードインやフェードアウトします。「より良い」アニメーションは、コンテンツが移動するときに動かすことで、コンテンツの連続性を示します。Menu)のような動きをデザインするときは、コンテンツを開く方向を考えて移動させてみましょう。このテクニックによって、コンテンツが確認しやすくなるだけでなく、配置を移動させることもできます。コンテンツ移動が行いやすいように、スワイプ・ジェスチャーも一緒に追加すると良いでしょう。コンテンツの共有している部分なつなげてみよう。左のサンプル例では、コンテンツが上方向へのスライドで新しいコンテンツが表示され、右側のサンプル例ではカード型レイアウトがフルスクリーン表示されています。「良い」アニメーションでは、コンテンツの詳細情報を表示するときに、左に押したり、上方向にスワイプなどの遷移アニメーションを使用します。「より良い」アニメーションでは、共有している部分にアニメーションを加え、2つのコンテンツがつながっていることを表現します。異なる状態にアニメーションを追加するときは、それらのコンテンツの間に共有している要素があるか確認し、アニメーションを使ってうまくつなげてみましょう。2つの画面をリンク付すると自動的にアニメーションが追加されます。これによってウェブサイトやアプリのプロトタイプ作成におけるアニメーション追加がより手軽になります。コンテンツに「すだれ」f効果を利用しよう。左側のサンプル例では、スライドとフェードイン・アニメーションが利用されています。ひとつは、同じアニメーションですが、カードごとに遅延によりタイミングをずらしています。「良い」アニメーションでは、コンテンツが表示されるときに位置と不透明度を変更します。「より良い」アニメーションでは、素早くそれぞれの要素をずらして表示します。Effect)をうまく実装するには、各コンテンツのグループごとに遅延アニメーションを適用してみましょう。同じ動きや適用のタイミングによって、コンテンツの一貫性を表現できます。各コンテンツは重ねたりしないようにして、要素のグループごとにアニメーションさせ、素早く行うことが大切です。実践では20ms以内で各要素をアニメーションさせてみるとことをオススメします。原則を確認してみると良いでしょう。他の要素を押し出してコンテンツを表示しよう。左のサンプル例では、他のコンテンツの上にアニメーション表示され、右のサンプル例では他のコンテンツを押し出すようなプッシュ効果を利用しています。「良い」アニメーションでは、コンテンツを移動して表示させます。「より良い」アニメーションでは、コンテンツが変化したときに周囲の要素に影響するように表示されます。コンテンツを表示するときに周りのデザイン要素も考慮して移動させてみましょう。このテクニックは、コンテンツの周りの要素に注目を集めるか、反対に目立たせないようにしたいときに効果的です。Motionを参考にどうぞ。コンテンツにあったメニュー表示を考えよう。左のサンプル例では、下方向からメニューが飛び出して表示され、左側のサンプル例ではカスタマイズされたアニメーションによって一方向から拡張するように表示されます。「良い」アニメーションでは、ボタンを押した方向からコンテンツをポップアップ表示します。「より」良い」アニメーションでは、ボタンをクリックした場所から広がるようなアニメーションを使って、コンテンツを表示します。ボタンを使って異なる状態を表現しよう。左のサンプル例では、状態を示す文字テキストのみが表示されます。右のサンプル例では、プログレスバーを使って状態を示しています。「良い」アニメーションでは、ボタンの隣で状態を表示します。「より良い」アニメーションでは、ボタン自体を使ってさまざまな状態を表現します。ユーザーの状態を視覚的に把握できるフィードバックには、ボタン自体に工夫を加えてみましょう。Call-to-Actionボタンではローディング用スピナーや読み込みアニメーションを追加してみましょう。プログレスバーを加えて、進捗状況を確認することもできます。解決方法やテクニックはアイデア次第で、ユーザーが既に利用しているスペースを有効活用してみましょう。ひと工夫として、ボタンの色やテキストを変更して、成功や失敗状態などの表示に活用してみましょう。重要なモノに注目を集めよう。左のサンプル例では、要素を目立たせるために配色と配置を工夫しています。右のサンプル例では、ほんのわずかなアニメーションを加えることで、ユーザーの注目を集めています。「良い」アニメーションでは、ユーザーに気づいてほしい要素には、配色やサイズ、配置に工夫を凝らします。「より良い」アニメーションでは、アニメーションを加えることで、重要な要素に注目を集めています。ユーザーが重要なアクションが必要なときは、アニメーションを使ってその注目していほしい要素を強調しましょう。ほんのわずかなアニメーションにはじまり、アクションの重要度応じて、サイズや色、アニメーション速度の変化などを追加してみましょう。このテクニックは、重要な要素にのみ利用してください。使いすぎるほど効果がなくなり、ユーザーが迷惑してしまうでしょう。今回ここで紹介した7つのテクニックは、アニメーションを効果的に追加するのに役立ちます。Studioなどの新しいプロトタイプツールによって、これからさまざまなマイクロインタラクションが登場すると予測されるため、これらのテクニックの正しい使い方を知っておくことがこれから重要になってくるでしょう。これらの7つのアニメーションテクニックを使って、状態が変化したことを説明したり、ひとつの要素に注目を集めたり、コンテンツ間の関係性を表現したりしてみましょう。Designなどの基本原則、ガイドラインに従うことで、アニメーションをより素晴らしい魅力的なデザインに仕上げることができるでしょう。アニメーションを楽しんで!CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選コンテンツに注目を集めたいときに便利な、HTML/CSSを中心にデザインした最新ボタンエフェクト用スニペットをまとめてご紹介します。対応!マイクロインタラクションをクラス名だけで作ろう!ScrollReveal.js2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。2015年3月30日に公開された記事を再度編集、追加しています。Animation)とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。【ディズニー発】魅力的なアニメーションを実現する12の基本原則(動画あり)2015/04/14流行なんて関係ない!いつでも使える黄金ウェブレイアウトUIパターン12個まとめ2016/09/23ウェブサイトの配色を決めるときに覚えておきたい7つのポイントまとめ2017/02/01"ウェブ考察"の最新記事はこちらずっと使える、デザインの基本まとめました。