ブランドロゴをアニメーション化する_html/css_WEB-ITnose

フォント、色、レイアウト、その他さまざまなものなど、ブランド アイデンティティの特定の側面と一貫性を持たせるために、デザインにアニメーションを追加する方法について話しましょう。

アニメーションはとても面白いです。デザインにアニメーションを追加すると、デザインに命が吹き込まれ、デザインが目立ちます。アニメーションを使用して、デザインがどのように結合されるかを示すことができます。これらは、誰もが当社の製品を理解するのに役立つコンテキストを提供します。

アニメーションは、多くの場合、私たちが最後に講じる戦略です。モーダル ウィンドウやスライド メニューにトランジションを配置しますが、通常、アニメーションが全体的なデザインに適合するかどうかについては考えません。

スタイルガイド

スタイルガイドは、誰もがコミュニケーションを改善しやすくするためのスタイルを提供する文書です。書式設定や準拠したスタイルの記述に関するさまざまなトピックだけでなく、その他のさまざまな広範なトピックもカバーしています。これは、以下に示す Codecademy.com のデザインのように、さまざまなスタイルの UI を示す静的なビジュアル ドキュメントである可能性があります。

@mslima による "Reimagining Codecademy.com" の UI キット

コード例の技術リファレンスとなる可能性があります。 Codepen の新しいデザイン パターンとスタイル ガイドは、すべてのコンポーネントを使用した Web サイト全体のコードを示す優れたリファレンスを提供します。

Codepen のデザイン パターンとスタイル ガイド

スタイル ガイドを使用すると、プロジェクトに幅広いビジョンを提供でき、新しいコンテンツを追加するときにスタイル ガイドを使用してアニメーションを表示することもできます。

リビングドキュメント

スタイルガイドは静的である必要はありません。動きをデモンストレーションするために使用できます。 CSS キーフレーム アニメーションやトランジション アニメーションを共有し、製品に組み込むことができます。なぜアニメーションが最初に来るのかも説明できます。

スタイル ガイドが特定のフォントやレイアウトを選択した理由を説明するのと同じように、スタイル ガイドを使用してアニメーションの背後にある意味を説明することができます。他の人が新しいコンポーネントを作成する必要がある場合、アニメーションが適用される理由がわかります。

スタイル ガイドをまだ設定していない場合は、パターン ラボを参照してください。これは、開始するための大量のデザイン パターンを含む、独自のスタイル ガイドを設定するための優れたツールです。

すばらしいオープンソースの Website Style Guide Resources には、スタイル ガイドの記事がたくさんあります。アンナ・デベナムもこのテーマに関する素晴らしい手帳を出版しています。

アニメーションを追加する

色々なアニメーションを付ける前に、伝えたい内容の本体を作成します。

Andrex Puppy (1994 年の英国のテレビ広告)

ターゲット視聴者の特徴を説明する単語をいくつか挙げてください。アンドレックス ブランドであれば、おそらく彼らの言葉は「面白い、遊び心がある、柔らかくて快適」ということでしょう。

おそらく、ターゲットとする視聴者は、より真剣で信頼できる権威のあるコンテンツかもしれません。興奮と緊張、またはリラックスとカジュアルさである場合もあります。これらの単語を表すアニメーションはシーンごとに異なります。

以下の例では、両方のアニメーションの継続時間は同じですが、異なる時間関数が使用されています。 1 つはイーズ、もう 1 つはバウンスです。特定のニーズに応じて、どちらも可能です。

時間関数 (CodePen)

例: KTIMAN LABS

Kitman Labs を使用して、説明したいオブジェクトを表す言葉に少し時間を費やしました:

• 科学的
• 正確 (正確)
• Fast（速い）
• Solid（実体）
• Dependable（信頼できる）
• Helpful（役立つ）
• Consistent（一貫性のある）
• Clear（明確）

このようなリストを使用して、後は適切なアニメーションを設計できます。トゥイーンを使用してオブジェクトを目的地まで素早く移動し、その後速度を落とすか、わずかにバウンスさせる場合があります。

このリストは、ユーザーが Web ページ上のデータのコンテキストを理解できるようにするなど、アニメーションの使用方法を示すために使用します。あるいは、メッセージの一貫性が損なわれる場合は、アニメーションを追加しないことも選択できます。

スタイルガイドを作成する

スタイルガイドがすでにある場合は、概要を作成することでアニメーションの追加を開始できます。

1 つの方法は、ローカル Web サイトを作成し、チーム間で共有することです。私たちは最近、この目的のためにローカル サイトを設立しました。

アニメーションをテーマにした最近のプロジェクトの紹介

このドキュメントは、コンポーネントにアニメーションを追加する際の参考になります。必要なアニメーション スタイルを示すのに役立つ、関連リソースまたはアニメーションの例へのリンクを含めます。

プロトタイピング

アニメーションの例を使用してアニメーション スタイル ガイドの意味を説明することができます。また、プロトタイプを通じてアニメーションをデモンストレーションすることもできます。

今ではプロトタイピングツールがたくさんあります。 Invision 、 Principle 、 Floid を使用したり、埋め込みコードペンとして HTML や CSS を使用したりすることもできます。

Principleで作成したログインプロセスのプロトタイプ

これらのツールは、さまざまな方法でアイデアを試すのに役立ちます。ビデオ、アニメーション GIF、またはオンライン デモを作成して、他の人と共有します。実験。最適なものを見つけて、頭の中にあるアイデアをできるだけ早く実現しましょう。そのため、本番に近づく前に常に修正され、完成度が高まります。

コレクションを構築する

アニメーションを一度に 1 つずつ、独自のガイドを作成します。

新しいアイデアを思いついたときに追加できるように、緩やかな構造でガイドを作成することを好む人もいますが、一度にページ全体を作成する人もいますが、それは問題ではありません。重要なことは、トレーディング カードを収集するのと同じ方法でアニメーションを収集することです。すばらしい結果を得るために、すぐにプレイできるようにしておいてください。

アニメーション GIF を含めたり、ビデオへのリンクを追加したり、アニメーション Web ページを表示したりすることもできます。アニメーションを使用するとユーザー エクスペリエンスが向上し、Val Head の「A List Apart に関する UI アニメーションと UX の記事」でも詳しく説明されています。

重要なことは、彼らのために組織化された場所を作ることです。以下にいくつかのアイデアを示します。

ロゴとブランディング

多くの Web サイトでは、ロゴに巧妙なアニメーションが使用されています。これにより、目を引いたり、特徴を追加したり、静的ページに少しの生命を吹き込むことができます。 Yahoo と Google は、ロゴにさまざまなアニメーションを追加する実験を行っています。 Hop.ie ロゴのような単純な跳ねるアニメーションでも、個性を加えることができます。

Hop.ie の CSS バウンス アニメーション

コンテンツ トランジション

コンテンツの追加、コンテンツの削除、情報の表示と非表示、これらはすべてアニメーションを追加する機会です。アニメーションを慎重に使用すると、画面上で起こっているアクションを伝えるのに役立ちます。

CSS アニメーションのリスト (CSSAnimation.rocks ) を追加しました

これについて詳しくは、Pasquale D’Silva の「Transitional Interfaces」をお勧めします。

ページ切り替え

コンテンツの変更よりも大きな変更により、Web サイトのページ切り替え間のスムーズな移行が実現します。 Medium の記事切り替えはその好例です。

ミディアムスタイルのページ切り替え (Tympanus.net)

コンテンツが到着する前にレイアウトを準備します

コンテンツの準備が整う前、たとえばページによってサーバーからデータが要求される前に、アニメーションを使用してページを描画できます到着したら、最初にアニメーションを表示します。

楽観的ローディング グリッド (codepen アドレス)

場合によっては、すべてが正常であることをユーザーに知らせるために何かを表示することが重要です。最初のコンテンツが読み込まれる前に短いアニメーションを使用して空白をカバーすると、読み込みプロセスがシームレスに感じられるようになります。

インタラクション

ホバー効果、ドロップダウン メニュー、スライドイン メニュー、アクティブな状態のボタンとフォームはすべてアニメーション化できます。変異した状態を削除する方法を見つけると、UI がよりスムーズになるのに役立ちます~

フォーム内のプレースホルダー コンテンツのアニメーション (Studio MDS)

アニメーションを表示したままにする

スタイル ガイドを維持し、常に最新の状態に保ちます。これは価値があります。アニメーションの導入や関連するデザイン上の決定をより迅速に完了するのに役立ちます。プロセスを楽しく続け、結果に誇りを感じることができれば、さらに良いでしょう。

スタイルガイドを更新するときは、アニメーションも同時に表示されるようにしてください。これには、アニメーション GIF、ビデオ、埋め込まれたアニメーションのサンプルが含まれる場合があります。

これにより、デザインプロセス全体にアニメーションを埋め込み、常に関連性を保つことができます。

インスピレーションとリソース

オンラインには役立つリソースがたくさんあります。私のお気に入りは IBM の Design Language Web サイトです。

IBM のデザイン言語: アニメーション デザイン リファレンス

IBM は、アニメーションの原則が UI とコンポーネントにどのように適用されるかを説明します。アニメーションを 5 つのカテゴリに分類し、それぞれの例にどのように適用するかを説明します。

この Web サイトには、アニメーション サンプルのビデオとソース コードへのリンクを含むアニメーション ライブラリも含まれています。

IBM コンポーネント ライブラリのサンプル コンポーネント

IBM は、既存の設計者や開発者だけでなく、新しい従業員も支援するためにこの Web サイトを設立しました。さらに、これは IBM が細部にまで気を配っていることを世界に示す方法でもあります。

もう 1 つの人気のあるアニメーション リソースは、Google のマテリアル デザインです。

Google のマテリアル デザイン ドキュメント

Google のガイドは、イージングの理解から優れた便利なモバイル UI の作成まで、あらゆる内容をカバーしています。

これは多くの Google アプリやソフトウェアで見られ、多くの Web ページのデザインに影響します。このウェブサイトは、アニメーションと例の表示方法を学ぶのに役立ちます。

フレームワーク

すべてを最初から作成したくない場合は、既存のリソースを使用してアニメーションの作成を開始し、UI デザインを完成させることができます。 1 つは Salesforce の Lightning 設計システムです。

このシステムは、ほとんどのガイドよりも一歩進んでいます。これには、プロジェクトにアニメーションを追加するために使用できる、ダウンロード可能なフレームワークが含まれています。彼は、Z 軸上の処理されたオブジェクトの位置を表す高度の設定など、いくつかの興味深い概念を持っています。

Salesforce の Lightning 設計システムの例: 高度の設定

Animate.css もご覧ください。

Animate.css には、クラスを直接使用してページ上の要素に適用できる、事前にデザインされたアニメーションのセットが用意されています。 JavaScript を使用してクラスを追加または削除すると、複雑なアニメーションがトリガーされます。また、スクロール トリガーや WOW.js などのツールともうまく連携します。

学び、吸収し、自分のものにしましょう

アニメーションをより深く理解するのに役立つオンライン情報やガイドが豊富にあります。それらは私たちのビジュアルスタイルやアニメーションスタイルにインスピレーションを与え、インスピレーションを与えることができます。したがって、フォント、色、レイアウトと同じように、アニメーションのデザインにも関与できます。スタイル ガイドの一部にするには、アニメーションを選択します。

この記事の校正と素晴らしい提案に時間を割いてくださった Val Head に感謝します。

この記事は @Donovan Hutchinson の「Animating Your Brand」に基づいて翻訳されており、翻訳全体に私たちの独自の理解と考えが含まれています。翻訳が良くない場合、または何か間違っている場合は、業界の友人にアドバイスを求めてください。この翻訳を転載したい場合は、英語の出典を明記してください: https://24ways.org/2015/animating-your-brand/。

Yanzi

現役の学生で、コンピューターサイエンスを専攻する学部生です。私は面白いです、フロントエンドが大好き、人生が大好き、CSS が好き、JavaScript が好き、SVG が好き、PS をプレイするのが大好き、AI をプレイするのが大好き、面白いソフトウェアが大好きです。一生懸命取り組み、積み重ねて進歩してください。