「Studio Experts」とは、ノーコードWeb制作プラットフォーム「Studio」の独自審査やカリキュラムを通過したWeb制作会社・フリーランスだけが加盟できるプログラムのこと。今回は「Studio Experts」の制作実績の中から、アニメーションを活用したWebデザインの参考となるサイト事例をご紹介します。今すぐおすすめの制作会社の紹介をご希望の場合は、コンサルタントにご相談ください。Studioでアニメーションを実装する方法Studioでアニメーションを実装する方法には、次の3つがあります。Studioの基本機能LottieFiles連携機能カスタムコードそれぞれ詳しくご紹介します。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 UStudioでアニメーションを活用したWebデザイン事例8サイトAZABU DEI｜麻布大学 DEI推進センター▲AZABU DEI｜麻布大学 DEI推進センター麻布大学のDEI推進センターによる「AZABU DEI」の公式サイトです。「NEWTOWN」が制作を担当し、「STUDIO DESIGN AWARD 2023」で「SHIFTBRAIN賞」を受賞しました。ファーストビューの歩くアニメーションには、前に進むポジティブなメッセージが込められています。また、カラフルな配色のキャラクターによって「AZABU DEI」が目指す多様性も表現されています。＞NEWTOWNが作ったStudioのWebサイト制作実績一覧NEWTOWNについて事務所所在地東京都杉並区高井戸西2-10-9 ノースメインビル207公式サイトhttps://newtown.tokyo/対応予算目安：LP・1ページのコーポレートサイトで50万円〜※詳細は制作会社にお問い合わせください納期目安3ヶ月〜株式会社Awarefy▲株式会社AwarefyAIメンタルパートナー「アウェアファイ」を開発・提供し、心の問題の解決に取り組む「株式会社Awarefy」のコーポレートサイトです。企業の根っことなるデザイン資産をつくる「株式会社necco」が制作を担当しています。出現時のアニメーションによって、柔らかくもスピード感のある雰囲気を演出。図解や背景の動きは、Lottieアニメーションを使用したリッチな表現となっています。AIメンタルパートナー「ファイさん」の可愛らしい動きにも注目です。＞株式会社neccoが作ったStudioのWebサイト制作実績一覧株式会社neccoについて本社所在地秋田県秋田市山王1-6-20 アドレス山王ビル3F公式サイトhttps://necco.inc/対応予算目安：1ページ 50万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜YELLOW▲YELLOW就労継続支援B型・就労移行支援・就労定着支援の3つの障がい福祉サービスを提供する「YELLOW」の公式サイトです。「株式会社スピッカート」が制作を担当し、「STUDIO DESIGN AWARD 2023」でグランプリを獲得しました。切り絵で彩られた個性豊かな「人」がカタカタと自由に動き回るアニメーションが印象的です。一目見ただけで「YELLOW」の魅力が「人」であるという強いメッセージが伝わります。＞株式会社スピッカートが作ったStudioのWebサイト制作実績一覧株式会社スピッカートについて本社所在地大阪府泉南郡熊取町小垣内3-3-2公式サイトhttps://spicato.com/対応予算目安：5ページのコーポレートサイトで120万円〜※詳細は制作会社にお問い合わせください納期目安2ヶ月〜株式会社Eat, Play, Sleep▲株式会社Eat, Play, Sleep地域やコミュニティに根ざしたカルチャーをつくり、育むためのクリエイティブチーム「株式会社Eat, Play, Sleep」が制作した自社のコーポレートサイトです。「STUDIO DESIGN AWARD 2023」では「優秀賞」を受賞しています。ファーストビューには「BUY A CULTURE」の文字に取り消し線を引くアニメーションを実装。「カルチャーをつくり、育む」というブランドメッセージを強く印象づけるデザインと、細部まで作り込まれた世界観が魅力的なサイトです。＞株式会社Eat, Play, Sleepが作ったStudioのWebサイト制作実績一覧株式会社Eat, Play, Sleepについて公式サイトhttps://eat-play-sleep.org/対応予算目安：10ページ未満のサイトで120万円前後～※詳細は制作会社にお問い合わせください納期目安1ヶ月〜バイオリン工房 Studio Mora Mora▲バイオリン工房 Studio Mora Mora「バイオリン工房 Studio Mora Mora」の店舗サイトです。名古屋のフリーランスデザイナー「クックドゥードゥードゥー」が制作を担当しています。「ゆっくり、ゆっくり、丁寧に」という工房のコンセプトに合わせて、優しく心地よいアニメーションを実装。「オーダーメイド」「修理・調整」「販売」のメニューごとに、種類の異なるバイオリンのアニメーションが楽しめます。＞クックドゥードゥードゥーが作ったStudioのWebサイト制作実績一覧クックドゥードゥードゥーについて公式サイトhttps://cockdoodoodoo.studio.site/対応予算目安：1ページのLPで20万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜軒先花屋のクリスマス▲軒先花屋のクリスマス愛知県の電気工事店で開催された小さなお花のマーケット「軒先花屋のクリスマス」のイベントサイトです。制作は、東京・名古屋を拠点とするウェブプロダクション「AYAME Inc.」が担当しています。Lottieアニメーションを活用し、賑やかでハッピーなクリスマスの情景を演出。複数の写真が自動で切り替わる部分には、Studioの基本機能であるカルーセルが使用されています。＞AYAME Inc.が作ったStudioのWebサイト制作実績一覧AYAME Inc.について会社所在地東京都豊島区南大塚1-51-9公式サイトhttps://ayame-inc.jp/対応予算目安：1ページのLPで20万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜みんなでつくる キャリアの地図2023▲みんなでつくる キャリアの地図2023「みんなでつくる キャリアの地図2023」は「ONE CAREER PLUS」の転職事例や体験談をまとめた年末恒例の企画サイトです。「caroa inc.」が制作を担当し、「STUDIO DESIGN AWARD 2023」で3部門を受賞しました。キャリアの地図が作られていく様子がアニメーションで表現されています。また、大企業編・スタートアップ編・職種編をあえて同じページに並べ、サイトをスクロールする中で偶然の出会いが生まれるよう工夫されています。＞caroa inc.が作ったStudioのWebサイト制作実績一覧caroa inc.について会社所在地東京都港区南青山2丁目2番地15-942公式サイトhttps://caroa.jp/design対応予算目安：1ページ 50万円〜※詳細は制作会社にお問い合わせください納期目安1週間〜社会福祉法人さつき会▲社会福祉法人さつき会山口県周防大島町で障害福祉施設・高齢者福祉施設を運営する「社会福祉法人さつき会」のコーポレートサイトです。WEBの力で地域社会やビジネスの課題解決に取り組む「飛企画（株）」が制作を担当しています。障害や福祉についてより多くの方に興味を持ってもらえるよう、明るく親しみやすいアニメーションをファーストビューに配置。それぞれが個性を活かし、支え合いながら楽しく過ごす様子が表現されています。＞飛企画（株）が作ったStudioのWebサイト制作実績一覧飛企画（株）について会社所在地広島県広島市東区福田1-672-1 原野ビル203公式サイトhttps://www.tobi-kikaku.jp/対応予算目安：1ページのLPで50万円〜※詳細は制作会社にお問い合わせください納期目安3ヶ月〜Dive｜株式会社ダイブ▲Dive｜株式会社ダイブ成長を続ける観光業の課題解決に取り組む「株式会社ダイブ」のコーポレートサイトです。「Studio Experts」の「ワヴデザイン株式会社」と「株式会社アールイーデザイン」が合同で制作しました。会社名に因んで、まるで水の中に飛び込むかのような大胆なアニメーションを実装。動画や数字のカウントアップには、Studioのカスタムコードが使用されています。＞ワヴデザイン株式会社が作ったStudioのWebサイト制作実績一覧ワヴデザイン株式会社について会社所在地東京都港区南青山1‐12‐3京都府京都市上京区宮垣町91公式サイトhttps://wab.cc/対応予算目安：1ページのLPで20万円〜※詳細は制作会社にお問い合わせください納期目安2ヶ月〜＞株式会社アールイーデザインが作ったStudioのWebサイト制作実績一覧株式会社アールイーデザインについて本社所在地栃木県那須塩原市沓掛1-11-6公式サイトhttps://studio.re-d.jp/対応予算目安：1ページのLPで50万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜デザミス株式会社▲デザミス株式会社畜産業界向けのITツールを開発・提供している「デザミス株式会社」のコーポレートサイトです。制作は、売り方と見せ方の両面から中小企業の成長を支える「株式会社アイティプラス」が担当。流体シェイプが揺れ動くアニメーションを実装することで、自由で柔らかいデザインに仕上がっています。サイトをスクロールすると要素がふわっと出現する表現も印象的です。＞株式会社アイティプラスが作ったStudioのWebサイト制作実績一覧株式会社アイティプラスについて会社所在地東京都渋谷区神宮前3-25-18 THE SHARE 2F公式サイトhttps://www.itplus.co.jp/対応予算目安：1ページのLPで35万円〜※詳細は制作会社にお問い合わせください納期目安1ヶ月〜Loaders｜Graphic & Sound Make Exhibitions▲Loaders｜Graphic & Sound Make Exhibitionsデータの読み込み中に表示される「ローダー」を新たな表現の領域として探求した展示会「Loaders」のイベントサイトです。展示会の企画・制作を手がけた「PLANT」が、当サイトの制作も担当しています。様々なグラフィックを組み合わせたアニメーションを実装することで「ローダー」のさらなる可能性を感じさせます。「Archive」のページでは、展示会の作品を実際に閲覧できるのも特徴です。＞PLANTが作ったStudioのWebサイト制作実績一覧PLANTについて公式サイトhttps://uekishun.com/対応予算目安：1ページのLPで30万円〜※詳細は制作会社にお問い合わせください納期目安2ヶ月〜アニメーションを取り入れたWebサイト制作をプロにお願いするなら「Studio Experts」この記事では、アニメーションを取り入れたWebサイトの事例を厳選してご紹介しました。「Studio Experts」には今回紹介したプロフェッショナルを含め、ご予算や納期、「実装だけお願いしたい」など様々なニーズに沿ったエキスパートが在籍しています。どの制作会社に依頼すればいいのか分からない場合は、Studioコンサルタントにご相談ください。