top of page
TAPI台湾華語教室のWebサイトリデザイン。トップページ、講師プロフィール、コース情報、無料体験ページのデスクトップ・モバイルデザインを表示。

スキル

担当範囲

使用ツール

Wix Studio Webデザイン
CMS設計
Riveアニメーション
マイクロインタラクション実装

Webサイトリニューアル
CMS設計・動的ページ作成
Riveアニメーション

Wix Studio
Rive
Figma

ガラスのような光沢を持つ青い3D星型アイコン。滑らかなエッジで、透明な背景に配置されている。
青いグラデーションで表現された3Dのレンチアイコン。光沢のある質感で、透明な背景に浮かんでいる。
青いグラデーションで表現された3Dのユーザーアイコン。丸い頭と半円形の胴体が特徴的で、光沢感がある。

TAPI台湾華語教室

TAPI台湾華語教室 Webサイトリニューアル

TAPI台湾華語教室様のWix Webサイトリニューアルデザインをご依頼いただきました。

Wix Studioを使用して既存サイトページの一部（ホームページ、無料体験ページ、講師一覧）のデザインを刷新し、Riveのマイクロアニメーションを取り入れることで、より魅力的なユーザー体験を目指しました。


また、CMSと連携した講師の絞り込み検索機能を新たに導入。Veloによる開発は、N5-Creationの新堀氏が担当しました。

TAPI台湾華語教室のWebサイトリデザイン。トップページ、講師プロフィール、コース情報、無料体験ページのデスクトップ・モバイルデザインを表示。

ご依頼内容と目的

TAPIが持つ既存のビジュアルイメージを活かしながら、情報がより分かりやすく、親しみやすく伝わるWebサイトを目指してリデザインしました。

トップページ、無料体験ページ、講師一覧、各講師のプロフィールページをFigmaでデザイン。シンプルで直感的な導線を意識しながら、マスコットキャラクター「タピちゃん」をUIに取り入れ、より親しみやすく印象に残るブランド体験を提案しました。

Figma上でクライアントとデザインやユーザー体験を確認・調整した後、Wix Studioで各ページを実装しました。

デザインプロセスから引き継ぎまで

サイトが稼働中のため、リニューアルをするサイトページのデザインはまずFigmaで作成し、クライアントと確認・すり合わせしてからWixに実装しました。


リニューアルデザインの公開完了後には、CMSの管理方法やサイト内の主な変更点をまとめた引き継ぎガイドを作成。PDF形式の資料をWix リソースキットを通じて提供し、クライアントが納品後もサイトを管理・更新しやすいようにサポートしました。

"サイトリニューアルをお願いしました。雰囲気に合ったデザインに仕上げていただき、とても満足しています。  見た目だけでなく、利用する方の分かりやすさも一緒に考えてくださったのが印象的でした。こちらの細かな要望や途中の変更にも丁寧に対応していただき、仕様についても分かりやすく説明してくださったので、安心して進めることができました。  ぜひまたお願いしたいと思います。"

TAPI 台湾華語教室様より

"サイトリニューアルをお願いしました。雰囲気に合ったデザインに仕上げていただき、とても満足しています。  見た目だけでなく、利用する方の分かりやすさも一緒に考えてくださったのが印象的でした。こちらの細かな要望や途中の変更にも丁寧に対応していただき、仕様についても分かりやすく説明してくださったので、安心して進めることができました。  ぜひまたお願いしたいと思います。"

TAPI 台湾華語教室様より

CILENT REVIEW

Wix Web Design & Velo Development

TAPI台湾華語教室のレスポンシブWebデザインを表示したモバイルモックアップ。トップページと台湾華語レッスンのビジュアルコンテンツを紹介。
TAPI台湾華語教室のリデザインしたトップページを表示したノートパソコンのモックアップ。分かりやすいコンテンツ構成、レスポンシブWebデザイン、マスコットキャラクター「タピちゃん」を紹介。
TAPI台湾華語教室のWebサイトを表示したモバイルモックアップ。レスポンシブ対応のトップページ、無料体験ページ、講師の絞り込み検索画面を紹介。

Wix StudioとRiveのカスタムアニメーション連携

無料体験ページは、オンラインコースと通学コースそれぞれ異なる申し込み方法だったため、Riveのアニメーションで視覚的に分かりやすく表現しました。各ファイルは約100KB前後と軽量なデータサイズになっています。


Rive内には複数のアートボードでアニメーションを作成。Wix Studio上で場所ごとに表示するアートボードを制御し、一部はiframeでの埋め込みにすることで、Rive内のステートマシンを使ったインタラクション（ホバーアニメーション）と、サイト内のリンクを接続。WixとRiveを組み合わせた表現度の幅が広いデザインを実現しました。

TAPIのレッスン予約方法を紹介するアニメーション。空いている時間帯または講師からレッスンを選択できる2つの予約方法を表示。

Veloによるカスタム検索・絞り込み機能

サイト上にはWixブッキングアプリを使用した予約カレンダーがあり、今回は受講生が自分に合った講師をより簡単に見つけられるよう、レッスン形式・言語・学習目的などの条件から絞り込み検索ができるカスタムUIをデザインしました。複数の検索条件があっても分かりやすく、デスクトップとモバイルのどちらでも直感的に操作できる、シンプルなインターフェースを目指しました。


N5-CreationのVelo開発者・新堀氏と連携し、絞り込み機能部分をCMSとブッキングアプリを接続し、Veloで実装。既存のアプリの情報とCMSのデータセットを組み合わせることで、講師をより機能的に検索できる仕組みを実現しました。

TAPIのレッスン予約方法を紹介するアニメーション。空いている時間帯または講師からレッスンを選択できる2つの�予約方法を表示。

Wix StudioとRiveのカスタムアニメーション連携

無料体験ページは、オンラインコースと通学コースそれぞれ異なる申し込み方法だったため、Riveのアニメーションで視覚的に分かりやすく表現しました。各ファイルは約100KB前後と軽量なデータサイズになっています。


Rive内には複数のアートボードでアニメーションを作成。Wix Studio上で場所ごとに表示するアートボードを制御し、一部はiframeでの埋め込みにすることで、Rive内のステートマシンを使ったインタラクション（ホバーアニメーション）と、サイト内のリンクを接続。WixとRiveを組み合わせた表現度の幅が広いデザインを実現しました。

Veloによるカスタム検索・絞り込み機能

サイト上にはWixブッキングアプリを使用した予約カレンダーがあり、今回は受講生が自分に合った講師をより簡単に見つけられるよう、レッスン形式・言語・学習目的などの条件から絞り込み検索ができるカスタムUIをデザインしました。複数の検索条件があっても分かりやすく、デスクトップとモバイルのどちらでも直感的に操作できる、シンプルなインターフェースを目指しました。


N5-CreationのVelo開発者・新堀氏と連携し、絞り込み機能部分をCMSとブッキングアプリを接続し、Veloで実装。既存のアプリの情報とCMSのデータセットを組み合わせることで、講師をより機能的に検索できる仕組みを実現しました。

Wix CMSと動的ページでコンテンツ管理を効率化

これまで講師プロフィールや予約ページは、個別のページやライトボックスで作成されており、継続的な更新・管理に手間がかかることが課題でした。そこでリニューアルにあわせてCMSと動的ページを作成し、よりシンプルで拡張性のある構成へ再設計しました。


講師一覧ページは動的リストページで作成。各講師のプロフィールはCMSと連携した1つの動的アイテムページに集約することで、管理するページ数を大幅に減らし、より簡単に更新・管理できる仕組みにしました。

TAPIの講師一覧ページを表示したノートパソコンのモックアップ。台湾華語の講師を探すためのカスタム検索・絞り込み機能を表示。

Wix Web Design & Velo Development

bottom of page