Overview
概要
| クライアント | I-School株式会社 |
| 業界 | 日本語教育・人材育成・留学支援 |
| 制作期間 | 約2ヶ月 |
| 提供範囲 | 企画・設計・デザイン・開発・公開 |
| 技術スタック | Next.js / TypeScript / Tailwind CSS / Vercel |
| サイトURL | i-school-jp.com |
Background
背景・課題
I-School株式会社は「日本とアジアをつなぐ教育の力」をミッションに掲げ、日本語教育・特定技能ビザ支援・留学サポートを一気通貫で提供する教育機関です。ベトナムをはじめとするアジア諸国からの来日希望者に向けて、学習から就職・定着まで幅広く支援しています。
既存のWebサイトでは、サービス内容の多さが逆にわかりにくさにつながっており、問い合わせの入口が不明確という課題がありました。また、外国人ユーザーが多いにもかかわらず、情報が整理されておらず安心して申し込みへ進めない状態でした。
- 日本語教育・人材支援・留学の3サービスが混在し、導線がわかりにくい
- 外国人ユーザーへの配慮が不足しており、問い合わせへの心理的ハードルが高い
- 教育機関としての信頼感をデザインで表現できていない
Solution
提案内容
1. サービスを目的別に整理した情報設計
「日本語を学びたい」「日本で働きたい」「日本の学校に進学したい」という3つのユーザー目的を起点にサイトマップを再設計。どのサービスが自分に必要かが一目でわかる導線を実現しました。
2. 安心感を醸成するデザイン
教育機関としての誠実さと信頼感を伝えるため、落ち着いたカラーパレットと整ったタイポグラフィを採用。実際の授業風景・スタッフ写真を積極的に使い、「人」が見えるブランドイメージを構築しました。
3. 問い合わせまでの導線最適化
各ページに明確なCTAを配置し、無料相談・資料請求への動線をシンプルに設計。外国人ユーザーが不安なくアクションを起こせるよう、わかりやすい言葉と視覚的なガイドを意識しました。
Implementation
実装の工夫
レスポンシブ・モバイルファースト設計
ターゲットユーザーのアジア圏ではスマートフォンでのWeb閲覧が主流のため、モバイルでの閲覧体験を最優先に設計。タップしやすいUI・読みやすいフォントサイズ・縦スクロールに最適化したレイアウトを徹底しました。
パフォーマンス最適化
Next.js Image Optimizationによる自動WebP変換・遅延読み込み・適切なサイズ指定を実装。写真を多用しながらも高速な表示速度を維持し、離脱率の低減につなげています。
SEO基盤の整備
「日本語学校」「特定技能 支援」「留学 サポート」など、検索意図に沿ったキーワードを意識したページ構成と構造化データの実装を行い、オーガニック流入の増加を支援しました。
Results
成果
サイトリニューアル後、各サービスへの問い合わせ数が増加。サービスの整理とCTA強化により、訪問者がスムーズに相談・申し込みへ進めるようになりました。
「サイトを見て内容がわかりやすかった」「安心して問い合わせできた」という声も届いており、教育機関としての信頼感の向上に貢献しています。
Summary
まとめ・今後の展望
教育・支援機関のWebサイトでは、サービス内容の整理と「安心感の設計」が成果に直結します。HLTでは、ターゲットユーザーの視点に立った情報設計と、ブランドの想いを伝えるデザインを強みとしています。
日本語学校・留学エージェント・人材支援事業者の方は、ぜひHLTにご相談ください。