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

更新日:2020年9月3日

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

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

CSSアニメーションって?

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

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

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

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

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

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

(たなか)

Incdesign第8期目に際して

【SDGs】情報格差とコロナ

関連記事

  1. 新人インターンが挑戦!初めてのサステナ用語 vo…

    こんにちは、入社したての新人です。非常に親切で素敵なインクの方々のおかげで…

  2. いまいちど「デザイン経営」について話そう。202…

    ※この記事はあくまでも代表鈴木の私感による考えです。まずは…

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

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

  4. 【制作実績】カネタ建設さま イラストビジュアル作…

    新潟県糸魚川市に本社を構える「カネタ建設」さまの、事業内容のイラストビジュ…

  5. 【インクブログ】くらしフェスタSUMIDAのチラ…

    くらしフェスタSUMIDAのチラシ・ポスターを作成させていただきました。1…

  6. 【インクブログ】みかげさんの結婚式

    8月25日、晴天に恵まれる中、神戸にてスタッフのみかげさんの結婚式が執り行わ…

  7. クリエイティブとは何だ?おしえてくれよブラザー

    皆さん調子どうですか?インクデザイン代表の鈴木です。2023年GW初日、暇…

  8. いよいよ産休

    【インクブログ】いよいよ産休

    今日は最終出勤日でした。現在妊娠8ヶ月の半ば…日に日にお腹が大きくなって…

PAGE TOP