Snow Monkeyで作る!アニメーションを多用したTarCoon☆CarToon -official web site-のヒーローヘッダーでやっていること

TarCoon☆CarToon -official web site-の上部に掲げられているヒーローヘッダーのアニメーションはどのように作られているかを解説したいと思います。
このサイトは、Snow Monkeyのアップデートで新機能が追加される度に、実装しているので、Snow Monkeyを活用するための見本になるかと思いますのでご参考にしてください。

この記事は Snow Monkey / unitone Advent Calendar 2024 13日目の記事です。まだまだ空きがたくさんあるので、ぜひお気軽にご参加ください!

「TarCoon☆CarToon」の -official web site- は、ワードプレスのテーマ「Snow Monkey」を使用して構築しています。このテーマは、ユーザーフレンドリなデザインと高いカスタマイズ性が大きな特徴です。今回は、このテーマを使って構築された「ヒーローヘッダー」について、具体的なメソッドや方法の解説を交えながら紹介します。

ヒーローヘッダーの演出内容

まず、「TarCoon☆CarToon」の -official web site- のヒーローヘッダーの要素をご紹介します。ヒーローヘッダーはサイトのファーストビューに位置し、訪問者にブランドの詣を気識させる重要な要素です。以下は、ヒーローヘッダーで行なっている演出です。

背景画像のアニメーション

サイト全体の集中力を高めるため、ビジュアルから想象を促す画像を選びました。
流れる模様と、爆発とレンズフラッシュ、フレア、金田光りと言われる「丸」と「十字」の光を組み合わせてレンズゴーストを再現した人工的な輝きで、賑やかな世界観を表現しています。

実はこのアニメーションですが、背景はアフターエフェクトで作ったのでそんなに大変ではなかったのですが、爆発とレンズフラッシュは1コマ1コマ描いているのでなんだかんだで作業時間がかかっていたりします。

金田光りがやりたいだけで作ったアニメーションでした。今後修正を重ねる予定ではあります。

正にヒーローらしく登場!バウンス・ダウンするTarCoon☆CarToon

真上から登場して、バウンスして着地します。主役のキャラクターが画面の外から登場することで、このサイトの主役である、TarCoon☆CarToonの存在を引き立たせる狙いがあります。

キャラクターが登場した後にLOGOの「TARCOON CARTOON」が左右から入ってきます。
また、クリックすると、オーバーレイ表示でピックアップ記事のスライダーが表示されます。

このサイトを簡単に説明したメッセージをフェードで表示させ
ユーザーにサイトの目的を簡単に伝える文章を配置。

上から順に流れ落ちてくるSNSのボタンリンク
各サイトへの流入を効率的に促すための動的な演出をしています。次々と見覚えのあるロゴが落ちてくるので、押してみたくなりませんか?

これらの内容は、PCサイズ、タブレットサイズ、スマホサイズでも、一画面で最低限の情報が伝わるようにまとめています。

笑い男 メインビジュアル
笑い男がメインビジュアルだった時もあります。アニメーションPNGも対応されてたので表現の幅が広がりとても助かる。

Snow Monkeyの機能を使ったヒーローヘッダーの構築

「Snow Monkey」のテーマは、WordPressのブロックエディターを使ってビジュアルを構築することが可能です。ここでは、ヒーローヘッダーの構築手順を解説します。

使用したブロック

複数のブロックを組み合わせて作成しています。一番効果を発揮している大きな特徴として、セクション(ブロークングリッド)ですね。一番目立たせたいキャラクターを存在感を出すことと、リンクボタンや、伝えたいテキストなどをなんかちょっといい感じに重ねて表示することで、全体を馴染ませる効果があります。

あとはSnow Monkeyの複数のブロックを組み合わせることで、内容をコンパクトにまとめています。続きを読むボックスはそこまで必要はないけれども、必要としている人には詳しくみてもらう効果があって、丁度いいです。

Snow Monkeyのブロック

  • ヒーローヘッダー
  • コンテナー
  • セクション(ブロークングリッド)
  • 続きを読むボックス

デフォルトのブロック

  • 段落
  • スペーサー
  • 画像
  • グループ
  • ソーシャルアイコン

ヒーローヘッダーで画面ギリギリまで

ヒーローヘッダーブロックは背景画像と、その上にコンテンツを重ねることができます。重ね具合はグリッドに沿ってどれくらいずらすか、どのグリッド線に沿わせてレイアウトするかを設定できます。

TarCoon☆CarToonのイラストの背景にアニメーション(動画ファイル)を再生させたかったので、使用しました。
斜めに動く背景に、金田光と言われる「丸」と「十字」の光を組み合わせてレンズゴーストの模様を重ねた背景動画を再生することで、登場するTarCoon☆CarToonのイラストの存在を引き立てます。

賑やかな動きにすることで、動画でこのサイトが何のサイトなのかを伝える効果を生みました。

最も特徴的な効果を出しているセクション(ブロークングリッド)

Snow Monkeyが提供する「セクションブロック(ブロークングリッド)」を使用して、写真の上にテキストがちょっと乗っかるような崩しレイアウトを行いました。これによって、TarCoon☆CarToonのイラストの上に少し重なる形でLOGOやテキスト、SNSアイコンを重ねることができます。と、同時に少し大きめにTarCoon☆CarToonのイラストを配置できてよりTarCoon☆CarToonを強調できます。

「セクションブロック(ブロークングリッド)」の魅力は、ある程度「崩し」ができないと成立しないのだけど、自由なレイアウトが制限されて代わりに崩しのルールだけ設定できる様になっているので、オイラのようなデザインセンスがない人でもいい感じに崩しをした様に見える点です。

ビフォーアフター

セクションブロック(ブロークングリッド)を使う前は、カラムブロックでレイアウトしてたのでその違いを比較してみると一目瞭然です!今まで目立たなかったキャラクターをグリッドを超えて大きく表示されることで強調することができました。

Snow Monkey Editorのプラグインを使って動きを追加

Snow Monkey Editorのアニメーションの項目は、各ブロックごとに、ブロックが画面に入ってきたときに動作するアニメーションを設定することができます。
当サイトのヒーローヘッダーでは、このアニメーション機能を多用することで、TarCoon☆CarToonのヒーロー性を演出しています。

まず、TarCoon☆CarToonが上部から下部に向かってバウンス・ダウンする事で着地した効果を出しています。
また、サイトのタイトルである「TARCOON CARTOON」のロゴをTarCoon☆CarToonとは別の方角、左右から登場させることで、タイトルの存在感も引き立たせています。

新機能「左右フェードイン」アニメーションの実装
Snow Monkey Blocksのアニメーション設定機能を使い、左右から滑らかに表示される動きを追加しました。この力強い動作により、ビジュアルの印象は一気に高まります。

まとめ

「TarCoon☆CarToon」の -official web site- のヒーローヘッダーは、Snow Monkeyの力強い機能を駆使して作成されました。作成過程で導入した「左右フェードイン」アニメーションは、ユーザーに効果的な視覚的インパクトを与えることに成功しています。Snow Monkeyのカスタマイズ性とブロックエディターの便利さを最大限に活用したこの構築手順は、少しでも皆さんのウェブサイト作成の参考になれば嬉しいです。

この記事が気に入ったら、サポートをしてみませんか?
PayPalで気軽に支援できます。

TarCoon☆CarToonに寄付してサポートする。
*キャンセルするまで毎月お支払い頂くサブスクの場合、
サポート料金¥960と、登録時初回限りの設定料 ¥960の、合計¥1,920が掛かります。

TarCoon☆CarToonの活動を支援できるサービスです。
ブログやイベント、オンライン上での活動を応援したい方はサポートしていただければ幸いです。

この記事を書いた人

TarCoon☆CarToon

ソーシャルアイドル/偶像家/プロパガンティスト やりたいこと、いっぱい!やりかけのもの、いっぱい!怒られること、いっぱい!楽しいこと、いっぱい!いっぱいがいっぱい、たーくんかーとぅーん!

お問い合わせ窓口

ConTact

展示・購入、講演会

TarCoon☆CarToonにご関心をお持ちいただきありがとうございます。展示・購入、講演など、お仕事のご依頼をお待ちしております。誤字脱字のご連絡や、ネタのタレコミ、その他のお問い合わせ、優待利用のご連絡、オンラインコミュニティへの参加申請等は、詳細ページのからご連絡ください。
コンタクト
問い合わせる所