Studioでアニメーションを活用したWebデザイン事例8サイト

ノーコードでWebサイトを制作できる「Studio」のアニメーション機能を活用したWebデザインの参考となるサイト事例をご紹介。

※サイト事例は、独自審査やカリキュラムを通過したWeb制作会社・フリーランスだけが加盟できるプログラム「Studio Experts」の制作実績の中からご紹介しています。イベントサイト制作をエキスパートに依頼することをご検討されている方は、コンサルタントにご相談ください。

Studioでアニメーションを実装する方法

Studioでアニメーションを実装する方法には、次の3つがあります。

1. Studioの基本機能

2. LottieFiles連携機能

3. カスタムコード

それぞれ詳しくご紹介します。

1. Studioのアニメーション基本機能

ノーコードでWebサイトを制作できるStudioでは「条件付きスタイル」を使って、特定の条件下でデザインの見た目や形を変えることができます。この機能を利用して、通常時と条件付きスタイル時の変化を設定し、アニメーションを作り出します。

条件付きスタイルはいくつかのグループに分けられますが、ここでは2パターンをご紹介します。

ホバー・（in）ホバー

サイト訪問者がカーソルを載せたときのスタイルを設定できます。一般的には、どの要素がクリックできるのかをサイト訪問者に伝えるために用います。

「（in）ホバー」は、ホバーを設定した要素の中にある別の要素に追加のスタイルを適用するときに使います。例えば、「ボタン内の矢印の色だけを変える」などの表現が可能です。

出現時

画面の読み込みやスクロールによってブラウザ画面内に登場する直前のスタイルを設定できます。例えば、ページを読み込んだ際に背景や画像が出現するようなアニメーション表現が可能です。

Studioでは上記のアニメーション設定と、その他の項目を組み合わせることで多様なアニメーション表現が可能になります。

設定できる項目としては、アニメーションの緩急や時間、スタートするタイミングなどを調整できる「トランジション」や、要素の移動や拡大・縮小ができる「トランスフォーム」などがあります。

＞Studioアニメーションの基本をマスターしよう！3つの実装例で学ぶ、Studioアニメーションの作り方

2. LottieFiles連携機能

2つ目は、StudioとLottieFilesの連携機能を使用する方法です。Lottieとは、Webサイトにリッチなアニメーションを実装できるJSONベースのファイル形式のこと。

LottieFilesのリンクをStudioのデザインエディタに貼り付けるだけで、動画制作ソフトで自作したアニメーションや、Lottieのコミュニティで公開されているアニメーションをWebサイトに表示できます。

また、アニメーションの再生条件をカスタマイズすることも可能です。ホバーや出現時に再生する設定はもちろん、カーソルの動きやスクロールに連動した設定もできるため、表現豊かなアニメーションが実装できます。

＞Lottieアニメーションでもっと自由な表現を！LottieFiles連携機能をリリース

3. Embedボックス機能

3つ目は、StudioのEmbedボックス機能を使用する方法です。Studioでは、HTML、CSS、そしてJavaScriptを用いたコードをページに埋め込むことができます。

埋め込むには、Embedボックスという専用のボックスをページに配置します。このボックスを使えば、Googleマップや外部サービスのフォームなどを表示することができます。

Studioコミュニティにはembed機能を活用したビジュアル表現に使えるカスタムコードをシェアするスペースがあり、具体的な実装例から実装手順が紹介されています。

＞カスタムコードライブラリ | Studio Community Japan

＞Embedボックスを追加する | Studio U

Studioでアニメーションを活用したWebデザイン事例8サイト

AZABU DEI｜麻布大学 DEI推進センター

▲AZABU DEI｜麻布大学 DEI推進センター

麻布大学のDEI推進センターによる「AZABU DEI」の公式サイトです。「NEWTOWN」が制作を担当し、「STUDIO DESIGN AWARD 2023」で「SHIFTBRAIN賞」を受賞しました。

ファーストビューの歩くアニメーションには、前に進むポジティブなメッセージが込められています。また、カラフルな配色のキャラクターによって「AZABU DEI」が目指す多様性も表現されています。

＞NEWTOWNが作ったStudioのWebサイト制作実績一覧

株式会社Awarefy

▲株式会社Awarefy

AIメンタルパートナー「アウェアファイ」を開発・提供し、心の問題の解決に取り組む「株式会社Awarefy」のコーポレートサイトです。企業の根っことなるデザイン資産をつくる「株式会社necco」が制作を担当しています。

出現時のアニメーションによって、柔らかくもスピード感のある雰囲気を演出。図解や背景の動きは、Lottieアニメーションを使用したリッチな表現となっています。AIメンタルパートナー「ファイさん」の可愛らしい動きにも注目です。

＞株式会社neccoが作ったStudioのWebサイト制作実績一覧

YELLOW

▲YELLOW

就労継続支援B型・就労移行支援・就労定着支援の3つの障がい福祉サービスを提供する「YELLOW」の公式サイトです。「株式会社スピッカート」が制作を担当し、「STUDIO DESIGN AWARD 2023」でグランプリを獲得しました。

切り絵で彩られた個性豊かな「人」がカタカタと自由に動き回るアニメーションが印象的です。一目見ただけで「YELLOW」の魅力が「人」であるという強いメッセージが伝わります。

＞株式会社スピッカートが作ったStudioのWebサイト制作実績一覧

株式会社Eat, Play, Sleep

▲株式会社Eat, Play, Sleep

地域やコミュニティに根ざしたカルチャーをつくり、育むためのクリエイティブチーム「株式会社Eat, Play, Sleep」が制作した自社のコーポレートサイトです。「STUDIO DESIGN AWARD 2023」では「優秀賞」を受賞しています。

ファーストビューには「BUY A CULTURE」の文字に取り消し線を引くアニメーションを実装。「カルチャーをつくり、育む」というブランドメッセージを強く印象づけるデザインと、細部まで作り込まれた世界観が魅力的なサイトです。

＞株式会社Eat, Play, Sleepが作ったStudioのWebサイト制作実績一覧

バイオリン工房 Studio Mora Mora

▲バイオリン工房 Studio Mora Mora

「バイオリン工房 Studio Mora Mora」の店舗サイトです。名古屋のフリーランスデザイナー「クックドゥードゥードゥー」が制作を担当しています。

「ゆっくり、ゆっくり、丁寧に」という工房のコンセプトに合わせて、優しく心地よいアニメーションを実装。「オーダーメイド」「修理・調整」「販売」のメニューごとに、種類の異なるバイオリンのアニメーションが楽しめます。

＞クックドゥードゥードゥーが作ったStudioのWebサイト制作実績一覧

軒先花屋のクリスマス

▲軒先花屋のクリスマス

愛知県の電気工事店で開催された小さなお花のマーケット「軒先花屋のクリスマス」のイベントサイトです。制作は、東京・名古屋を拠点とするウェブプロダクション「AYAME Inc.」が担当しています。

Lottieアニメーションを活用し、賑やかでハッピーなクリスマスの情景を演出。複数の写真が自動で切り替わる部分には、Studioの基本機能であるカルーセルが使用されています。

＞AYAME Inc.が作ったStudioのWebサイト制作実績一覧

みんなでつくる キャリアの地図2023

▲みんなでつくる キャリアの地図2023

「みんなでつくる キャリアの地図2023」は「ONE CAREER PLUS」の転職事例や体験談をまとめた年末恒例の企画サイトです。「caroa inc.」が制作を担当し、「STUDIO DESIGN AWARD 2023」で3部門を受賞しました。

キャリアの地図が作られていく様子がアニメーションで表現されています。また、大企業編・スタートアップ編・職種編をあえて同じページに並べ、サイトをスクロールする中で偶然の出会いが生まれるよう工夫されています。

＞caroa inc.が作ったStudioのWebサイト制作実績一覧

社会福祉法人さつき会

▲社会福祉法人さつき会

山口県周防大島町で障害福祉施設・高齢者福祉施設を運営する「社会福祉法人さつき会」のコーポレートサイトです。WEBの力で地域社会やビジネスの課題解決に取り組む「飛企画（株）」が制作を担当しています。

障害や福祉についてより多くの方に興味を持ってもらえるよう、明るく親しみやすいアニメーションをファーストビューに配置。それぞれが個性を活かし、支え合いながら楽しく過ごす様子が表現されています。

＞飛企画（株）が作ったStudioのWebサイト制作実績一覧

Dive｜株式会社ダイブ

▲Dive｜株式会社ダイブ

成長を続ける観光業の課題解決に取り組む「株式会社ダイブ」のコーポレートサイトです。「Studio Experts」の「ワヴデザイン株式会社」と「株式会社アールイーデザイン」が合同で制作しました。

会社名に因んで、まるで水の中に飛び込むかのような大胆なアニメーションを実装。動画や数字のカウントアップには、Studioのカスタムコードが使用されています。

＞ワヴデザイン株式会社が作ったStudioのWebサイト制作実績一覧

＞株式会社アールイーデザインが作ったStudioのWebサイト制作実績一覧

デザミス株式会社

▲デザミス株式会社

畜産業界向けのITツールを開発・提供している「デザミス株式会社」のコーポレートサイトです。制作は、売り方と見せ方の両面から中小企業の成長を支える「株式会社アイティプラス」が担当。

流体シェイプが揺れ動くアニメーションを実装することで、自由で柔らかいデザインに仕上がっています。サイトをスクロールすると要素がふわっと出現する表現も印象的です。

＞株式会社アイティプラスが作ったStudioのWebサイト制作実績一覧

Loaders｜Graphic & Sound Make Exhibitions

▲Loaders｜Graphic & Sound Make Exhibitions

データの読み込み中に表示される「ローダー」を新たな表現の領域として探求した展示会「Loaders」のイベントサイトです。展示会の企画・制作を手がけた「PLANT」が、当サイトの制作も担当しています。

様々なグラフィックを組み合わせたアニメーションを実装することで「ローダー」のさらなる可能性を感じさせます。「Archive」のページでは、展示会の作品を実際に閲覧できるのも特徴です。

＞PLANTが作ったStudioのWebサイト制作実績一覧

アニメーションを取り入れたWebサイト制作をプロにお願いするなら「Studio Experts」

この記事では、アニメーションを取り入れたWebサイトの事例を厳選してご紹介しました。

「Studio Experts」には今回紹介したプロフェッショナルを含め、ご予算や納期、「実装だけお願いしたい」など様々なニーズに沿ったエキスパートが在籍しています。

どの制作会社に依頼すればいいのか分からない場合は、Studioコンサルタントにご相談ください。