friendliness-approachability

親しみやすさと近づきやすさのアニメーション

ユーザーを歓迎し、インターフェースを温かく親しみやすい雰囲気にするアニメーションを作成します。

感情面の目標

親しみやすさは、威圧感のない穏やかで歓迎するような動きから生まれます。近づきやすさとは、操作を促し、ユーザーが安心できるアニメーションのことです。

親しみやすさを生み出すディズニーの原則

スクワッシュ＆ストレッチ

適度で柔らかな変形（10～20％）です。漫画的にならず、生き生きと感じられる程度にします。温かみがありながら適切な、親しみを込めた握手のようなものです。

アンティシペーション

穏やかな予備動作（100～150ms）です。親しみやすい動きは、ユーザーを驚かせずに意図を伝えます。動作の前に小さく「こんにちは」と挨拶するようなものです。

ステージング

開放的で人を招き入れるような構成です。要素は対立するのではなく、ユーザーを迎え入れるように配置します。インターフェースへと続く道筋を明確にします。

ストレート・アヘッド・アクション

個性を生み出す、ささやかな自然さです。機械的ではなく、人間らしく親しみやすいと感じられる微妙な変化を加えます。

フォロースルーとオーバーラッピング・アクション

柔らかく自然に動きを収束させます。軽く1、2回弾むようにします。友人が隣に腰掛けるように、堅苦しくなく、リラックスした動きです。

スローイン＆スローアウト

滑らかで親しみやすいカーブを使います。急な加速は避けます。歓迎するように穏やかに現れる動きには、ease-out を使います。

アーク

自然でゆったりとしたカーブです。ロボットのような直線でも、大げさなバウンドでもなく、人間らしく感じられる動きにします。

セカンダリー・アクション

温かみのある補助的な動作です。さりげなく手を振ったり、軽くうなずいたりします。要素がユーザーの存在を認識していることを示します。

タイミング

適度で心地よい長さ（200～350ms）です。急がず、遅すぎず、自然な会話のテンポにします。

誇張

控えめにします（10～20％）。圧倒的にならず、温かみを感じられるだけの個性を加えます。芝居がかった表現ではなく、親しみの持てる表現にします。

ソリッド・ドローイング

柔らかく丸みのある形にします。親しみやすいプロポーションにします。尖った印象や威圧感のある形は避けます。

アピール

温かみのある色や丸みのある角を使います。適切な場合は、親しみやすい顔を取り入れます。人を招き入れる、利用しやすいデザインにします。

タイミングの推奨値

要素	長さ	イージング
ウェルカムフェード	250-350ms	ease-out
スライドイン	300-400ms	ease-out
ホバー時の反応	150-200ms	ease-out
展開／表示	250-350ms	ease-in-out

CSS イージング

--friendly-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--friendly-enter: cubic-bezier(0.0, 0, 0.2, 1);
--friendly-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);

歓迎するパターン

@keyframes friendly-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-4deg); }
}

@keyframes friendly-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

近づきやすさを示す手がかり

• ホバーに対して、穏やかな反応を返します
• ユーザーから遠ざかるのではなく、近づくようにアニメーションさせます
• 硬い輪郭ではなく、柔らかな影を使います
• 要素は手が届きそうに感じられるようにします
• 圧倒的、または対立的に感じられる動きは避けます

使用する場面

• カスタマーサポートのインターフェース
• オンボーディングのワークフロー
• コミュニティプラットフォーム
• 医療ポータル
• 教育アプリ
• 中小企業のウェブサイト
• 個人のポートフォリオ
• チャットボットとアシスタント