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

更新日:2020年9月3日

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

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

CSSアニメーションって?

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

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

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

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

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

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

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. 【制作実績】「建設コンサルタントとは」イラスト

    2023年7月1日に大日本コンサルタント株式会社様と株式会社ダイヤコンサル…

  2. 移転のご案内

    インクデザインは来月より移転します。企業として進化しつづけるため…

  3. 株式会社への変更のお知らせ

    インクデザイン合同会社は、2022年9月1日から株式会社へ組織変更し、イン…

  4. 現金化

    起業115日目なり。頭のなかお花畑です。やりたいこと満載。でもお…

  5. 2025年新春 デザイン業界はどうなるか?

    新年あけましておめでとうございます!インクデザイン 代表の鈴木です…

  6. 引っ越し

    無事に引っ越し完了しました。思い起こせば、創業前のシェアードオフィスか…

  7. 画一化

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

  8. 思っているより伝わっていない?

    起業前、自分の事業は、新規性はないけど、普遍的で結構わかりやすい業種だ…

PAGE TOP