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

更新日:2020年9月3日

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

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

CSSアニメーションって?

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

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

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

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

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

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

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. デル。

    起業69日目。デルの27インチモニタ(U2713HM)が1万値引きだ…

  2. 「インパクトって何?」をわかりやすく!『インパク…

    メイは自宅のリビングのソファで深いため息をついた。就職活動の季節が…

  3. 画一化

    起業49日目この近年いままでの常識が凄いスピードで変化しているような…

  4. 【インクブログ】2018年用年賀状の入稿をいたし…

    2018年用年賀状の入稿をいたしました!今回は特色(シルバー&蛍…

  5. 経理作業

    起業59日目。世間的には冬休みになったので、ずいぶん落ち着いて仕事、…

  6. 冬季休業のお知らせ

    インクデザイン合同会社は誠に勝手ながら、12/28〜1/5までを冬季休暇…

  7. 良き出会い。

    週末は連日して経営者の方々と飲む機会がありました。そして素晴らしい出会いもあ…

  8. 【お仕事紹介】パンフレット

    3月末でリアルからオンラインに活動の場を移されたTIP*Sさまの、…

PAGE TOP