コーディングの代行・外注は
品質と実積のコーディングベースへ

簡易
お見積りはこちら

ジャーナル

Journal

アニメーション

2023.10.30

アニメーション

ハンバーガーメニューのアニメーション

スマホのデザインでは定番のハンバーガーメニューですがこのハンバーガメニューをよく見るとアニメーションが使われています。Webサイトの動きにこだわりたいならここも押さえておきたいポイントです！ちなみにコーディングベースのハンバーガメニューアイコンはよくある３本線が並んでいるものではありません。点が3つ並んでいるミートボールメニューと呼ばれるアイコンをサイトの雰囲気に合わせてデザインしています。アイコンが違うだけで意味は同じです。１.アイコンの動き画面右上のハンバーガーアイコンは、メニューを開くとバツマークなど「閉じる」を意味したアイコンに変わります。コーディングベースでは両サイドの括弧が移動してバツに変形します。ハンバーガーメニューですと、３本の線の内１本は消えて残り２本がバツマークに変形巣るというのがよくある動きです。下のサイトではハンバーガーメニューの動きサンプルが紹介されています。同じ３本線のメニューでもいろいろな動きのアニメーションをつけられることが分かると思います。 https://jonsuh.com/hamburgers/ ２.グローバルナビゲーションの出現の仕方ハンバーガーアイコンを押すとグローバルナビゲーションが出てきます。コーディングベースでは右からスライドで出てきています。グローバルナビゲーションが出てくる際のアニメーションには、上から、下から、右から、左から、中央からなど位置の指定とフェードイン、スライドイン、ズームインなど動きの指定が必要です。アニメーションにかかる時間や、速度の変化でもかなり印象が変わってきます。３.ナビゲーション内の要素の出現の仕方これは必須ではないのですが、グローバルナビゲーションの中にある要素の出現にもアニメーションをつけるとリッチな動きになります。コーディングベースでは、右からスライドするグローバルナビゲーション出現の動きが完全に終わってから中の要素が出現します。さらに1つ1つの要素を時間差で出現させているため、一番上のHomeが最初に表示され、一番下のContactが最後に表示されます。よく見ないと分かりにくいかもですが、このアニメーションを指定しているかしていないかでは動きのリッチさが全然違います。ここまでハンバーガーメニューのアニメーションを説明してきましたが、色々な動きをつけられることは分かったけど自分で考えるのは難しいと感じる方も多いと思います。ご安心ください！コーディングベースでは、特に動きのご指定がなければ１.アイコンの動き、および２.グローバルナビゲーションの出現の仕方は、サイトの雰囲気に合わせて無料で実装させていただきます。エンジニアは様々なサイトのコーディング経験があり、社内にデザイナーもおりますので、ご依頼いただくデザインにピッタリな動きを選ばせていただきます。もちろん、動きにこだわりたいという要望も大歓迎です。お気軽にご相談ください！
2023.10.26

アニメーション

デザイン

Webサイト制作とアニメーション：ユーザーの興味を引きつける魅力的なウェブデザイン

アニメーションのウェブデザインへの重要性ウェブ制作におけるアニメーションは、静的なデザインに動きとエネルギーを加え、ユーザーの興味を引きつける力を持っています。アニメーションはユーザーエクスペリエンス（UX）を向上させ、ブランドの個性を際立たせる効果的な手法です。留意すべきアニメーションの種類 1. マイクロアニメーション短いアニメーション効果を要素に追加することで、ユーザーの注意を引きつけ、操作のフィードバックを提供します。ボタンのホバーエフェクトやスクロール時の要素のフェードインなどが代表的です。 2. ストーリーテリングアニメーション物語性を持ったアニメーションを使って、ブランドのストーリーを伝えることができます。ウェブサイト上でキャラクターアニメーションやナレーションを組み合わせ、ユーザーに魅力的な体験を提供します。 3. トランジションとエフェクトページ遷移や要素の表示・非表示、スクロール効果など、滑らかなトランジションとエフェクトを使って、ユーザーがサイト上を自然に移動できるようにします。これにより、ユーザーの興味を途切れさせず、一体感のあるデザインを構築できます。アニメーションの適切な使用法 1. ユーザー体験の向上適切に配置されたアニメーションは、ユーザーがウェブサイト上で求める情報を見つけやすくし、サイト内での滞在時間を増加させます。 2. 情報伝達の効果的な手段アニメーションは、複雑な情報や機能をわかりやすく伝える手段として活用できます。例えば、商品の動作説明やサービスの特長を視覚的に示すことができます。 3. ブランドの個性を表現独自のアニメーションスタイルやモーションデザインを採用することで、ブランドの独自性やクリエイティブ性を強調し、ユーザーに印象を残します。アニメーションの実装と最適化 1. パフォーマンスへの影響の最適化過度なアニメーションや大容量のファイルは、ページ読み込み速度を低下させる可能性があるため、最適なパフォーマンスを保つためには適切な最適化が必要です。 2. ユーザー環境への適応異なるデバイスやブラウザでのアニメーションの見え方に違いが生じることを考慮し、クロスブラウザ対応とレスポンシブデザインを実施します。結論ウェブ制作におけるアニメーションは、ユーザーエクスペリエンスの向上、情報伝達の効果的な手段、ブランドの個性の表現として、非常に重要な役割を果たします。デザイナーは、適切なアニメーションの種類と使用法を把握し、ユーザーに魅力的で洗練されたウェブサイト体験を提供するために積極的に活用することが求められます。
2023.10.11

アニメーション

サイトに実装できるアニメーションの種類

リッチなアニメーションを指定して、オリジナリティ溢れるサイトにしたい時ってありますよね。でもどんなアニメーションがあるか分からなかったり、なんとなくイメージはあるけど伝えるのが難しくて挫折してしまう方もいると思います。そんな方向けにアニメーションのサンプルを定期的に紹介していきます！！アニメーションの実装に関してお問い合わせいただく際にご活用ください。今回はそもそもアニメーションにどんな種類があるか、コーディングベースサイト内のアニメーションを参考にご説明いたします。それぞれのアニメーションにどんなメリットがあるかもご紹介いたします。ローディングアニメーショントップページをローディングしている際に動くアニメーションです。【メリット】・動きで興味を惹きつけることができる。・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。コーディングベースでは、タイピング風のアニメーションをつけています。画面表示後に動くアニメーションローディング後や画面遷移後など、ページが表示された際に動くアニメーションです。【メリット】・インパクトを与えることができる。・世界観をアピールできる。コーディングベースでは、トップページのメインビジュアルをアニメーションで表現しています。また、下層ページではページタイトルが表示されるアニメーションをつけています。スクロールアニメーションスクロールして、要素が見える際に動くアニメーションです。【メリット】・視線誘導ができる。・動きがあると飽きさせない。コーディングベースでは、テキストや画像など様々な箇所にスクロールアニメーションがついています。弊社のコーディングでは、デザインがスクロールアニメーションに適している場合シンプルなスクロールアニメーションを無料で実装いたします。（動きは弊社にお任せください）ホバーアニメーションボタンなどリンクの上にカーソルを合わせた際に動くアニメーションです。【メリット】・リンクのクリックに繋がる。コーディングベースでは、ボタンやテキストリンクなどについています。弊社のコーディングでは、リンクにはホバーアニメーションを基本的にお付けいたします。シンプルなホバーアニメーションは無料で実装いたします。（動きは弊社にお任せください）ページ遷移アニメーション別のページに遷移する際の、切り替わりアニメーションです。【メリット】・ページが変わったことを明示できる。・画像やWebフォントの読み込みが遅い場合に、一瞬表示崩れが発生するのを隠せる。コーディングベースではふわっと切り替わるアニメーションをつけています。クリックで動くアニメーションハンバーガーメニュー、タブ、アコーディオンパネルなどクリックで動きが発生する要素はクリックした際のアニメーションをつけることができます。【メリット】・クリックするとどうなるか伝えることができる。（開くを意味するデザインから閉じるを意味するデザインに変わるなど）コーディングベースではハンバーガーメニュー、タブ、アコーディオンパネルにアニメーションがついています。