【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
最近のWebデザインではアニメーションは「インタラクション」として考えられており、CSSだけで気持ちのいいアニメーションを実装できるようにもなりました。
Webデザインにおけるアニメーションは、装飾としてではなく、機能に対してフィードバックを返す働きをもったアニメーションに変わりつつもあります。
人は動くものを捉える性質をもっています。この性質を利用して、注意を引きつける機能として設計されています。直感的で応答性があるUIは、ユーザーに寄り添うために適した手段です。
実際の生活においてボタンは、行動に対してわかりやい変化を提供します。これは、Webにおいても同じことです。慣れ親しんだ動作を提供すれば、ユーザーは「ボタン」の役割を認識できます。
出典:Jaron Pulver
ユーザーの行動を視覚情報にすることで、間違いに対してのフィードバックを強調して伝えられます。
iPhoneのロック画面では、ユーザーが間違ったパスワードを入力した場合、画面を左右に振って「やり直し」を求めます。これは、人が頭を左右に振るような動作に似ていますね。ユーザーはアニメーションからメッセージに気づき、現在の状況を把握します。
下の画像では、実行中のアニメーションが存在感を放っています。ユーザーが送信ボタンを押すと、送信状況を示すアニメーションが表示されるのです。
スピンナーが時間の経過を表現し、チェックマークのアニメーションが無事に送信が完了したことをユーザーに伝えています。
出典:Colin Garven
トランジションを使用した、インタラクティブなアニメーションはUI上の状態を切り替える間に何が起こっているのかを変化を表現できます。
ユーザーは画面が切り替わったことと、どんな機能が表示されているのかを認識しやすくなります。
サムネイルの切り替えや、詳細の表示を関連つけるアニメーションも有効です。
次の画像の例では、カードから詳細を表示するために変化します。アニメーションをうまく使用し、前の画面から移動していないように感じさせたまま詳細情報を表示します。
新しいオブジェクトを出現させるときにも有効です。どこから出現して、どこへ消えていくのかを伝えられます。ハンバーガーメニューのほか、サイドコンテンツの切り替えやドロワメニューを開くときにも使用できます。
下の例では、アイコンをクリックするとナビゲーションがスライドします。メニューは「消えた」のではなく「格納」されたのです。
出典:Tamas Kojo
データのアップロードやダウンロードの際は、インジケーターを表示しやすいです。ローディングバーは、アクションが処理される間表示され、処理が失敗した時にも役立ちます。快適なアニメーションである必要はありませんが、最適な方法で表示してください。
出典:xjw
アクションを開始した後から、ユーザーは画面に処理の結果が反映されるのを待ちます。この時、システムが処理を受け取ったことが確認できないと、ユーザー再度読み込みを行います。
読み込みに対するアニメーションを与えることで、ユーザーは処理が正常に行われているかどうかを確認できます。
出典:Tony Babel
ユーザーにフローを伝えるなど、特定のアクションに対してどのようにUIを操作するかという情報を提供します。
未知のアクションや、見慣れないUIの操作に対して説明を行います。
オンボードでは、高度なUXが要求されます。
興味のないユーザーの心を掴むような魅力的なアニメーションを提示し、操作や使い方のフローを説明します。
コンテンツのサイズがヘビーで読み込みに時間がかかる場合は、ローディング画面を使いましょう。上記の例では、ローディング画面がかまぼこのアニメーションになっています。ローディング画面はWebサイトの世界観を伝えるのにもぴったりです。
ミュージックプレイリストのボタンをクリックすると、円が画面いっぱいに広がりプレイリストが表示されます。2つの画面の関係性をうまく表せています。
https://music.airfrance.com/en
トップページにはスクロールを促すアイコンが。楕円のアイコンが上下に動くさまは、人が指でスクロールする動作を連想させます。
左右に移動するFABをクリックすると、アニメーションと共にページごと左右に流れます。
トップページからログイン画面を開くと、ページが繊維せず、背景が少しフェードアウトしログイン画面が浮かび上がります。
iOSのUIの至るところに使われているのが緑色のボタンです。白い円がスライドする様子は、まさに本物のボタンのようです。
https://www.apple.com/jp/ios/ios-11/
ロード時間が数値でわかりやすく表示されています。
https://www.felissimo.co.jp/500/index2.cfm
おなじみTwitterの更新表示は、更新している時と更新し終わった時が明確にわかるようデザインされています。
飛行機の形をしたインジケーターが、検索中であることを示しています。検索に長時間がかかる場合、アニメーションを使ってユーザーを離脱させない工夫が必要です。
実例とともに、アニメーションを使うテクニックをご紹介しました。Webデザインにおいて、アニメーションは次のような役割を果たします。
デザイナーはデザインを作る段階で、インタラクティブなアニメーションも想定しながら作る必要があります。
機能を作る上での有効的な表現方法として、選択肢に入れてみてください。
(翻訳:Yuri Tanaka)