お仕事紹介と制作のおはなし :オフィシャルショップのWEBページの制作 〜CSSアニメーション〜

先日公開された、某アウトドアブランドのオフィシャルショップのWebページの制作を弊社で担当いたしました。

今回制作したページでは、CSSアニメーションを用いた動きを各所に組み込んでおり、特にロード時からの画面切り替えでは、ページの世界観を演出するために複数の動きを同時にさせたりしています。

CSSアニメーションって?

CSS3で要素をアニメーションさせる機能です。
実装の種類としては transition と animation の2つがあります。

動きはシンプル、仕様は繊細

(今回の件に限らず)WEBページで使用されるアニメーションは、それ自体の動きというのは比較的シンプルなものが多かったりするのですが、各アニメーションを発火させるタイミングや秒数、動きの中でのキーフレームの設定によって、良くも悪くも見た時の印象に差が出やすかったりします。

ページの演出にとても有能なツール

上記の点だけで見ると、導入が難しそう、実装に時間がかかりそう等のマイナスな面が気になりますが、今回のように”ページの演出”としての効果はCSSアニメーションはとても有能なツールですので実装する価値はある十分にあると考えます。

なにより、動きのあるのものというのは見る側も扱う側も楽しいものです。
今後の制作でもCSSアニメーションを積極的に採用し、WEBページにプラスαの価値を付けていきたいと思います。

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. Neumorphism(ニューモーフィズム)っぽ…

    Neumorphism(ニューモーフィズム)というデザイン手法がUI業界で…

  2. バックアップ

    今日は、バックアップマシンのセッティングをちまちまやっておりました。…

  3. 採用情報。

    起業70日目。明日から3連休ですね。世間的には。僕的にはじっくり…

  4. お仕事紹介: TIP*S POST Client…

    【お仕事紹介】TIP*S POSTClient / 中小機構さま中…

  5. パラレルワーク(副業)

    昨夜のニュースゼロでパラレルワーク(副業)の特集が放送されました。日本では…

  6. 【制作実績】茨城県北ガストロノミーwebサイト

    茨城県北ガストロノミーwebサイトのリニューアルを担当させていただ…

  7. 【制作実績】シンポジウムレポート冊子

    2022年に新しく発足した、地経学研究所(IOG)様が開催したシンポジウム…

  8. キャッシュアウト

    起業21日目。インクデザイン 代表社員・デザイナーの鈴木です。何…

PAGE TOP