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

更新日:2020年9月3日

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

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

CSSアニメーションって?

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

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

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

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

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

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

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. 【制作実績】事業紹介パワーポイントスライド

    茨城県水戸市の教育旅行を手がけられるアーストラベル水戸様の事業パワーポイン…

  2. インキュベーションデザイン

    起業129日目インキュベーションデザインが結構動きがでてきました。…

  3. デザイン業務でのAIと著作権の考え方

    近年、デザイン業務におけるAIの活用が急速に進む中で、AIが生成するコンテ…

  4. 北千住より愛をこめて

    なんと、本日で、インクデザイン開業から1年が経ちました!そして本日、第一期…

  5. 3.5周年記念パーティー

    昨日はインクデザインの3.5周年記念パーティーをスタッフとご家族を中心に内輪…

  6. 【制作実績】TASKプロジェクトパンフレット

    昨年に引き続き台東、荒川、足立、墨田、葛飾区で事業を営む企業8社を紹介するT…

  7. Wimax2+

    こういうの書くとアクセス数的には結構よかったりするんですよね(笑)Wim…

  8. 生活のいろ|8月号

    弊社スタッフが撮影した何気な〜い日常を切り取った写真から、季節や生活のうつ…

PAGE TOP