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

更新日:2020年9月3日

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

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

CSSアニメーションって?

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

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

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

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

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

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

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. 【インクブログ】モリサワパスポート模造品事件

    【実録:事件は現場で起きている!】モリサワパスポート模造品事件毎年恒例の…

  2. 20人の会社が1年で10人増えたらどうなった?(…

    こんにちは。代表の鈴木です。ありがたいことに、インクデザインはこの…

  3. 【制作実績】株式会社コマースOneホールディング…

    株式会社コマースOneホールディングス様(4496)の決算説明資料をデザイ…

  4. 仕組み化へ向けて「カンパニーブック」のススメ

    成長企業にこそ「ガバナンス」と「ブランディング」が必要「ガ…

  5. 2年経ちました。

    2年前の今日、会社員を辞めて翌日からインクデザインの営業を始めたので、ち…

  6. 【制作実績】株式会社ファイントゥデイ様会社案内

    2021年に事業を開始された、パーソナルケア製品のマーケティング・販売を行…

  7. ★新たなる挑戦!

    インクデザインでは、新たな試みを模索しております。現在のサービスをより良…

  8. コーポレートサイトを開設してみた。

    昨日ポストしたように、incdesign.co.jpのドメインを取得した…

PAGE TOP