キネティックタイポグラフィを使用してWebサイトをインタラクティブにする方法は？

公開: 2022-07-18

キネティックタイポグラフィとは、アニメーションの一形態を指します。ここでは、言葉を生かします。

私は言葉を言いますが、それは一文字から段落全体まで、何でもかまいません。その動きを通して何を達成したいかによります。それを念頭に置いて、あなたの移動タイプは思慮深く意図的でなければなりません。あなたはただあなたの言葉をジャンプさせて、それの全くの一体のためにブームにすることはできません。

ええ、できます–しかし、この表面的な使用は同じ影響を与えません。

ウェブデザインでモーションランゲージを使用する場合、ロゴデザインアニメーションを作成する場合でも、キネティックタイポグラフィを使用する場合でも、デザインをユーザーに公開することになります。

言い換えれば、ユーザーが画面をタップしていることを忘れて、代わりに応答できる生きたものとしてWebサイトを提示するのを支援しているのです。それは微笑んで、次に何をすべきかを教えてくれ、右ボタンをクリックすると踊り、成功すると星を爆破することができます。

ユーザーがデザインを操作できるようになると、ユーザーはデザインにより多くの時間を費やし、デザインに喜びを感じ、デザインをより完全に理解し、最終的にはデザインへの親和性を感じるようになる可能性があります。

https://dribbble.com/shots/14187210-Behance

インタラクティブな要素がウェブサイトのエクスペリエンスを向上させる5つの方法

美学を高める

あなたのサイトが第一印象を与えることになると、美学がすべてです。あなたのサイトが単調でまとまりが悪いように見える場合、その印象はあなたのブランドにも引き継がれ、あなたの収益を損なうことになります。

一方、サイトが美しく見え、ほとんどのサイトでこれまでに見たことのない機能（たとえば、キネティックタイプ）を提供している場合、それは大きなメリットです。

キネティックタイプも美学をより生き生きとさせるので、インパクトが増します。これで、人々が触れたり、話したり、応答したり、フィードバックを受け取ったりできる美しいWebサイトができました。

これは、古き良き静的Webサイトでは不可能なことです。

目立たせる

デジタルの世界であなたの消えないマークを作るために、あなたは他の人が持っていないものを持っている必要があります。

理解できない理由が何であれ、キネティックタイプができることから恩恵を受けている主要なブランドはありません。大きなブランドを忘れて、スタートアップもこの美しい驚異の素晴らしさを知らない。

これはあなたが打ちのめすことができる場所です。

あなたのウェブサイトに微妙で魅力的でブランド上のキネティックタイプの効果を含めて、あなただけの体験を主張してください。あなたができることを人々に示しましょう。

人々はあなたのイノベーションを見て、あなたがそれをどれほど完璧に処理したか、そしてそれがあなたのビジネスがそのメッセージを伝えるのにどのように役立つかを見て、彼らはあなたを信頼し始めます。彼らはあなたを彼らが何をしているのかを知っている誰かとして見ます。その信頼が確立されると、すぐに金銭的な取引が続きます。

ユーザーの関心を維持する

インターネットとソーシャルメディアの前提全体は、エンゲージメントに基づいています。あなたのコンテンツは、人々がコンテンツ、クリエーター、プラットフォームと関わり続けることができる何かを人々に与える必要があります。

あなたのウェブサイトでキネティックタイポグラフィ機能を利用することは、あなたが夢見ることしかできないエンゲージメント評価を達成します。

静的コピーを強制的に読み通すのではなく、モーフィング、変更、適応、実行する実写の単語を提供して、ユーザージャーニーをより理解しやすく楽しいものにします。

視覚的な階層を改善する

視覚的階層とは、物事がユーザーに提示される組織的な順序を指します。フォントが最大のテキストが最も重要で、次にそれよりも小さいテキストというように続きます。同様に、明るい色のフォントは、たとえば灰色や水色のフォントよりも早く注意を引くことができます。

これらの視覚的な手がかりを使用して、ページのさまざまな部分に整理された順序で注意を向けるのに役立ちます。

移動タイプは、ここで非常に役立ちます。静的な手がかりの代わりに、流動的なタイポグラフィを使用して、文字や単語をユーザーの注意を引くのに役立つアイコンや形に変形させることができます。

ユーザーを教育する

あなたが新しいウェブサイトを立ち上げるとき、人々がそれのこつをつかむのは難しいかもしれません。しかし、インタラクティブな機能が役立ちます。

コンテンツマーケティングの調査によると、マーケターの93％は、インタラクティブコンテンツが「見込み客の教育に非常に効果的」であると考えています。

さて、このインタラクティブなコンテンツは、ブログ投稿、ビデオ、インフォグラフィックなど、何でもかまいませんが、ナビゲーション、メニュー、検索バーなどの移動タイプを使用してWebサイトのさまざまな領域に移動を導入すると、教育が向上します。そして新しいレイアウトの理解は10倍になります。

キネティックタイプでウェブサイトをインタラクティブにする方法は次のとおりです

1.ページの読み込み待機時間をもっと楽しくする

https://dribbble.com/shots/6189182-Counter-01

私たちの誰も、ロードするのに永遠にかかるWebページのファンではありません。実際、Googleによると、ページの読み込みが遅いことが、一部のサイトのバウンス率が他のサイトよりも高い最大の理由の1つです。

しかし、フォントアクティビティはここで役立ちます。

テキストサイズの変更により、残りの待機時間が通知されるページを考えてみてください。

タイプが小さいサイズから大きいサイズに移動すると、ユーザーがどれだけ長く待たなければならないかをユーザーに警告できます。人々はページの読み込み時間に積極的に反応しないかもしれませんが、待機がどれだけ早く終了するかを彼らに伝えると、彼らはより長く立ち往生する可能性があります。

コピーをより面白くし、アニメーションをより魅力的にし、効果をより自然にすることで、待ち時間をさらに楽しくすることができます。

2.ユーザーの注意を喚起し、次のステップを示唆します

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

あなたのウェブサイトにあまり精通していないかもしれない人にとって、ユーザージャーニーの次のステップを見つけることは少し混乱するかもしれません。

移動タイプは、適切なタイミングでWebサイトの適切な領域にユーザーの注意を引くのに役立ちます。たとえば、レストランのデジタルメニューでタイプを移動すると、料理を完成させるときに1食分量に注意を向けるのに役立ちます。または、旅行を予約するときに、組み込みのカレンダーのキネティックタイポグラフィを使用すると、正しい日付を選択したことを確認できます。

ユーザージャーニーをわかりやすく予測しやすくすることは、ほとんどの人が簡単に理解できる直感的なインターフェイスを作成したことを示しています。

https://dribbble.com/shots/17559699-Move-On-Up

3.何に焦点を合わせるかを人々に伝える

https://dribbble.com/shots/9287077-hop

活字がウェブサイトを改善することができるもう一つの重要な分野は、あなたが人々に何に焦点を合わせるべきかを伝えなければならないときです。

マイサービスページについて考えてみてください。従来の静的ページはその役割を果たしますが、キネティックタイプを使用すると、どのサービスがプライマリ製品で、どのサービスが2番目であるかなどをユーザーに伝えることができます。このように、キネティックタイプは、ニッチを確立して促進するのに役立ちます。

動きに加えて、タイプをサービスに関連するさまざまな形状に変換して、メッセージをより視覚的にすることもできます。たとえば、あなたが作家の場合、羽ペンのアイコンは編集者としてのスキルを参照でき、電球の記号は創造的なコンサルタントを意味します。

コピー内のさまざまな文字がこれらの新しいアイコンに変形するので、それは信じられないほど遊び心があり魅力的に見えるだけでなく、あなたの個性も少し見せてくれます。マーケティングでは、それは（ほとんど）常にプラスです。

https://dribbble.com/shots/13945869-My-Services

4.状態の変化または移行に備えてユーザーを準備します

https://dribbble.com/shots/11258557-Creative-Coding-5

EコマースやWebブラウジング体験には、移行が殺到しています。常にポイントAからB、Cなどに移動します。ハードカットのトランジションは、厄介なユーザーエクスペリエンスを生み出します。ある場所から次の場所へと揺れるのを好む人は誰もいません。液体の液体のようなタイポグラフィは、すべてをスムーズに保つのに役立ちます。

それは、来ようとしている変化のために人々を準備します。準備をするように伝えます。ショッピング、ダウンロード、または単にブラウジングの次の段階に備えるための考え方を身に付けるのに役立ちます。

スムーズな移行は、ユーザーの注意を引くのにも効果的です。待機信号を表示する静的なページの代わりに、象徴的な動きのある素敵なコピーがすべての人に受け入れられ、ブランドの雰囲気を高めます。

5. Webサイトのキーワード、フレーズ、または領域を強調します

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

ウェブサイトの多くはテキストで構成されています。 Webコピー、説明、およびCTAはいくつかの例です。キネティックタイプを使用する場合は、これらのテキスト要素をアニメーション化することができます。コアメッセージの強調表示が簡単になります。

オンライン注文を完了すると、ショッピングカートのアイコンに変わるCTAについて考えてみてください。または、自分自身を悲しい眉をひそめることによって失望を示すエラーメッセージ。または、名前にカーソルを合わせると各タイトルが大きくなるポッドキャストエピソードリスト。

モーションデザインの一部として、キネティックタイプはあなたが言いたいことを強調するのに役立ちます。あなたの言葉の力を2倍にします。だから、意図と考えを持ってそれを使用してください。

6.タスクが正常に完了したときに、視覚的なフィードバックを提供します

https://dribbble.com/shots/16174668-KEEP-IT-UP

ユーザーがUIを操作するとき、それが正しく行われていることをユーザーが知っているときに役立ちます。エラーメッセージ、確認、およびその他の形式の視覚的フィードバックは、ユーザーが何をする必要があるかを理解するのに役立ちます。ユーザーの行動を強化することで、ユーザーのエンゲージメントを維持し、やらなければならないことを実行する可能性を高めることができます。

アニメーションのタイポグラフィは、視覚的なフィードバックの効果的な形式です。迅速で、エクスペリエンスの興奮を損なわずに維持し、ユーザーにさらなるアクションを実行するように促します。

エラーメッセージに使用する場合は特に重要な役割を果たします。あなたは人々にもう一度やり直してもらい、欲求不満を感じず、何が悪かったのかを正確に伝えてほしいと思っています。そのため、たとえば、ユーザーがパスワードを2回間違って入力し、3回目はアプリからロックアウトされる場合、その事実を警告するアニメーションのエラーメッセージを含めることができるので、ユーザーは今より注意を払うことができます。

ご覧のとおり、移動タイプでWebサイトを氾濫させる必要はありません。全体が、率直に言って、奇妙で、圧倒的に見えます。私が言い続けているように、どんな種類のアニメーションでも作業するときは、より繊細で思慮深くしてください。それが経験を改善するときにそれをしてください、そしてそれでも、効果を軽くて滑らかに保ってください。

7.ブランドトーンの設定を支援する

https://dribbble.com/shots/17070314-SIMPLE

アニメーションテキストはあらゆる業界に役立ちますが、一部の業界では他の業界よりも効率的です。銀行や保険を例にとってみましょう。そこでタイポグラフィをアニメーション化することはできますが、非常に控えめにする必要があります。少しでも上を行くと、ブランドキャラクターがヒットする可能性があるからです。

しかし、ファッション、ライフスタイル、小売、不動産、子供服/洋服/おもちゃなど、さまざまなことを考えてみてください。UIをより面白くするために、健康的な量の動的タイプを使用する方がはるかに理にかなっているようです。

単独では、ブランディング全体を確立することはできませんが、他のツールと一緒に優れた資産として機能することは確かです。

テイクアウェイ

3つあります：

目的を持ってください。見た目がきれいだからというだけではいけません。それが目的を果たすのでそれをして、それからそれを美しくしてください。
あなたの動くタイプに倹約してください。取るのは大変なことです。したがって、スペースがあり、最も多くの結果が得られるUI領域にのみ追加してください。
明確にしてください。アニメーションを追加するときに読みやすさを失わないフォントスタイルを使用してください。また、完全に読みやすいタイプのスタイルを台無しにするアニメーションスタイルには近づかないでください。