【制作実績】TAPI台湾華語教室様｜Wix Studioウェブサイトリニューアル
制作実績に、Wix Studioウェブサイトリニューアルの事例を追加しました！
TAPI台湾華語教室 Webサイトリニューアル
今回ご紹介するのは、東京・飯田橋とオンラインの2つのコースで台湾華語・台湾語のレッスンを提供する「TAPI台湾華語教室」様のWebサイトリニューアルです。
既存サイトの雰囲気やブランドイメージを活かしながら、より情報が分かりやすく、初めてサイトを訪れる方にも親しみやすいWebサイトを目指して、Wix Studioを使用したリデザインを担当しました。
より分かりやすく、親しみやすいサイトに。Wix Studioウェブサイトリニューアルデザイン
今回のリニューアルデザインでは、ホームページ・無料体験ページ・講師一覧・講師プロフィールページのデザイン刷新を担当いたしました。
まずFigmaでUIやページ構成を設計し、クライアントと確認・調整を行ったうえで、Wix Studioへ実装。
Wixは直感的にサイト制作ができるノーコードツールではありますが、今回はサイトが公開済で稼働中だったこともあり、デザインや仕様をある程度固めてからWixで編集という形で進行しました。
TAPI台湾華語教室のマスコットキャラクター「タピちゃん」もサイトのさまざまな場所に取り入れ、スクールらしい親しみやすさを残しながら、必要な情報を過不足なく伝えられるデザインを目指しました。
RiveアニメーションをWixと組み合わせ、限られたスペースでも伝えられる情報を拡大
無料体験ページでは、オンラインと通学コースで異なる申し込み方法を分かりやすく伝えるため、Riveを使ったオリジナルのマイクロアニメーションを制作しました。
Webアニメーションを活用するメリットは、なんといっても「視覚的に伝えられる情報量の多さ」にあります。文字で全てを説明すると長くなってしまう説明も、グラフィックに動きを加え、情報を順番に見せることで、ページを圧迫することなく直感的に伝えることができます。
今回は無料体験ページの「申し込みの流れ」セクションにて、Wix StudioとRiveを組み合わせたマイクロアニメーションを実装。
● TAPI様のWixウェブページに実装したRiveカスタムアニメーションの一例
Wixのサイト会員登録に必要な、アカウント作成までの流れをアニメーション化。
一部にはマウスホバーなどのインタラクションも追加し、よりリッチなユーザー体験を実現しました。
こちらのRiveアニメーションは、実サイトではWixサイト内ページのリンクとも連携しており、単なる装飾（見た目）としてのアニメーションではなく、ユーザーがサービスの流れや選択肢を理解するためのUIの一部として、機能的に取り入れています。
Wix CMSと動的ページを活用して、更新しやすいサイトへ
デザインだけでなく、サイト運用のしやすさも今回のリニューアルデザインで重視したポイントです。
講師情報はWix CMSと動的ページを活用した構成へ変更し、これまで個別に管理されていた講師プロフィールを、より効率的に更新・管理できる仕組みに整理しました。
Wixだからこそ、公開後も自分たちで管理できるサイトに
Webサイトは公開して終わりではなく、その後も情報を更新しながら長く運用していくものです。
今回のプロジェクトでは、リニューアル後もTAPI台湾華語教室様側でサイトを管理しやすいよう、CMSを活用したサイト構成に加えて、管理方法や主な変更点をまとめた引き継ぎガイドも制作しました。
「見た目をブラッシュアップする」だけでなく、サイトを訪問するユーザーにとっての分かりやすさと、サイトを運営する管理者側にとっての更新しやすさという、両方の立場にやさしい設計のWebサイトを目指して編集させていただきました。
LITTLE FUJI Design Studioでは、Wix StudioでのWebデザイン、Riveを使ったマイクロアニメーションやWebアニメーションのほか、WixのCMS・動的ページ設定などのご相談を承っております。
※ココナラは手数料がかかるため、サイトからのお問い合わせの方がお得です
なお、今回のプロジェクトの詳細は制作実績ページでご紹介しています。
改めてTAPI台湾華語教室様、ご依頼誠にありがとうございました。
台湾華語、台湾語を学びたい！という方は、ぜひTAPI台湾華語教室のWebサイトをご覧ください。オンラインでの予約が可能で、ネイティブの台湾人講師の方々が目標やニーズに合わせた丁寧な指導が評判の語学学校です。
