笹川平和財団様が運営する、高校生向けの海外留学奨学金制度のWEBページを、歯科ラボにて企画・設計・デザイン・実装まで一貫して担当いたしました。
本プロジェクトでは、若年層とその保護者世代に向けた「共感・理解・行動」を促す情報設計と、視覚的に明るく、信頼感のあるデザインを両立させることに注力しました。
単なる制度紹介にとどまらず、「高校生に留学という選択肢をポジティブに感じてもらう」ことを最も大切なコンセプトとし、構成・デザイン・文章表現すべてに工夫を凝らしています。
制作のポイント
キャッチコピー：若い世代に届く、希望あるメッセージを。
トップに配置されたキャッチコピー「海外留学奨学金を、未来のリーダーに。世界の舞台で活躍する新しいリーダーを日本から」は、高校生本人に語りかけるようなトーンで制作しました。制度の信頼性だけでなく、留学を目指す気持ちを後押しするような前向きなワード選定を意識しています。
デザイン面：明るさと透明感を演出するビジュアル表現
メインビジュアルには、留学先の国際的な風景と、希望を象徴する空や光をベースとした画像を使用。そこに淡いグラデーションを重ねることで、爽やかさと親しみやすさを演出しています。ページ全体を通して明るく、安心感のある雰囲気を維持しながらも、知的な印象を保つよう配慮しました。
ウェブアクセシビリティ対応：誰もが情報にアクセスできる設計へ
このページは、PC・スマートフォン問わず誰でも使いやすく、読みやすい設計を重視しました。コントラスト比や文字サイズ、見出し構造など、JIS X 8341-3に準拠したアクセシビリティの基本原則を押さえつつ、デザイン性も両立しています。特に若年層やその保護者世代にとってストレスなく情報収集できるUI設計を意識しました。
情報設計：利用者目線でわかりやすく
対象となる高校生とその保護者が、制度内容をすぐに理解できるように、FAQ形式での説明やステップに分けた応募手順の図解を採用しました。申請へのハードルを下げる工夫として、応募条件や必要書類もアイコンと組み合わせて視覚的に整理しています。
ターゲットユーザー
本サイトは、以下のようなユーザー層を明確に意識して構成・表現を設計しています。
高校1〜3年生の学生本人（特に海外に関心のある層）
留学への憧れや将来への期待を後押しするような表現を採用。難しい制度説明ではなく、「自分ごと」として受け取れる語りかけ型のコピーや構成としました。
その保護者（30〜50代）
奨学金制度の信頼性や安心感、申請の流れ、費用負担の軽減など、保護者が抱く疑問や不安に配慮したQ&Aやフロー型の構成を盛り込みました。
高等学校の進路指導教員・教育関係者
制度の概要を把握しやすく、かつ第三者に説明しやすいように、概要・応募条件・目的・ステップなどを整理した構成としています。
使用技術・CMS環境
CMS：WordPress（カスタムテーマ開発）
- カスタマイズ性が豊富なWordPressを採用。
- オリジナルテーマにて構築し、投稿・更新・修正作業が職員の方でも直感的に操作可能な設計としました。
主な技術要素・ツール
- HTML5 / CSS3 / JavaScript（Vanilla）
- SCSS（Sass）でスタイルを構造化
- レスポンシブ対応（スマートフォン・タブレット・PC）
- ウェブアクセシビリティ配慮（JIS X 8341-3を参考に設計）
- 画像圧縮・遅延読み込み（PageSpeed対策）
- アイコン・グラフ：SVG形式を活用し軽量化＋高解像度対応
パフォーマンス向上
- 高速表示を意識したLazy Loadの実装
- Google Lighthouse指標で90点以上を達成
アクセシビリティ実装例
- ARIAラベルによる読み上げ対応
- コントラスト比の調整
- キーボード操作でも快適なナビゲーション設計
制作を終えて
本プロジェクトでは、「制度の説明ページ」という堅くなりがちなテーマを、10代の若者にとって親しみやすく、かつ信頼感を損なわないよう設計するというバランスが求められました。 デザイン・コピー・導線設計を一体化させることで、「制度を知る」だけでなく「行動に移す（申請してみようと思える）」ページを実現しています。