信仰と世界、2つの言葉を1つのシーンに
GGSを説明する言葉は二股です。 1つはキリスト教の信仰と6つの価値であり、もう1つはアメリカのカリキュラムと世界の大学です。最初の画面で2つの物語が別々に置かれると、学校の性格がぼやけてしまうので、2つの単語を1つのシーンにまとめなければなりませんでした。
根と地平線を一文で結ぶ
GYEONGGI GLOBAL SCHOOL · WEBSITE RENEWAL PROPOSAL
小さな光から、 世界の地平線まで
Gyeonggi Global SchoolメインWebサイトリニューアル提案
LUMEN・HORIZON 2つの方向
01 / OVERVIEW プロジェクトの概要
信仰の上に根付いた学校が
世界に向かって育つ話
Gyeonggi Global School（GGS）は、京畿道高陽市イルサンにあるキリスト教の代替学校です。アメリカ共通核心教育課程（CCSS）をもとに、小学校から高等まで12年の学校で教え、卒業生はアメリカをはじめとする世界の大学に進学します。
BlueCanvasは、学校のメインホームページを新たに設計する2つの方向を提案しました。学生一人一人を光で描いたLUMENと、世界に向けた可能性を地球の地平線に広げたHORIZONです。このページは、2つの提案が出てくるまで悩んだ内容とプロセスをまとめた記録です。
- #キリスト教の代替学校
- #超・中・高統合過程
- #アメリカカリキュラム
- #入学相談
- #ブランド解釈
- #モーショングラフィック
- #スクロールインタラクション
- #国文・英文
- #リアクション
学校が歩いた数字から出発しました。
1997
教育共同体が始まった年
2015年一山キャンパス移転とともに今の名前で
12年
小・中・高が続く統合過程
G1からG12まである学校で
5個
国際認証と会員資格
MSA-CESS · AI · NCPSA · College Board · ACSI
50個
学生が選ぶクラブ活動
コーディングからオーケストラまで
数字ソース：Gyeonggi Global Schoolホームページ公開資料（2026年10月確認）
02 / THE QUESTION
12年を任せる学校を探している両親は、最初の画面で何を確認したいですか？この学校が何を信じているのか、そして子供がどこまで行くことができるのかです。
ANALYSIS
メイン画面が
メイン画面が
解放されるべき3つの
学校紹介とカリキュラム、入学案内を一つずつ読み直し、親がメイン画面で確認したい内容をまとめました。情報はすでに十分でした。必要なのは、その情報を一つの物語にまとめる順序でした。
小・中・高12年が一つの道に見える
カリキュラムは、小学校、中等、高等の3つのメニューに分かれています。しかし、初等入学を心配する親が気になったのは12年後の姿まで続く道です。 3つのコースを一行上に上げ、最初と最後が一緒に見えるようにしました。
G1からG12まで1行でつなぐ入学相談まで躊躇せずに
入学手続きは相談申請と1:1対面相談、テストとインタビューを経て入学登録につながります。この手順をメイン画面の最後にそのまま表示し、オンライン申請と電話相談を同じ場所に置きました。
4歩の入学手続きを最初のページにメイン画面を開く
4人を最初に描画しました。
学校のホームページには入学を悩む家族だけは来ません。在学生の家族や学生、英語で学校を探している家族や教師も同じ最初の画面を開きます。訪問者をホームページを開いた理由で分け、各々一番最初に見なければならない画面を決めました。
私たちの子供に合った学校なのか？
- 教育哲学と6つの価値
- 小・中・高教育課程
- 入学手続きと相談申請
提案では、価値と12年のコース、入学の4つのステップ
今週の学校ではどうしたのだろうか？
- 最近の投稿とギャラリー
- 学士スケジュール
- スクールバス案内
提案では、最新のニュースカードとショートカット
先輩たちはどの大学に進学したのだろうか？
- 合格大学
- AP科目とSAT
- クラブ活動
提案では、世界の大学につながる軌跡
Is this school
accredited?- 国際認証と会員資格
- 英語のメイン
- 採用案内
提案では、国際認証カードと英語のメイン
03 / BRAND THINKING
学校の歴史は
学校の歴史は
一点が広がる過程でした。
- 1997 · スタート小さな教育共同体
1997年に小さな教育共同体として始まり、2005年にアメリカのカリキュラムを導入しました。すべての物語はこの点から出発します。
- 2015・一山一山のキャンパス
2015年、一山キャンパスに移り、Gyeonggi Global Schoolという今の名前を持つようになりました。点は地図上の一桁になりました。
- 今日・世界世界の大学へ
卒業生はアメリカを含む世界の大学に進学しています。一山から始まった線が世界に伸びていくわけです。
BRAND STATEMENT
Rooted in Faith,
Ready for the World.
信仰の上に根ざして、世界に向かって成長します。
学校のミッションとビジョンで 両方の提案が一緒に書かれた提案文として
根を最初に示しています。
信仰と6つの価値は、両親が学校を選ぶ重要な基準です。成果を前にする前に、学校が何を信じているのかを言います。
十二年を一流で言います。
初等と中等、高等を別に紹介せずに、一人の生徒が育つ順に続いて見せてくれます。
世界に開かれた学校を示しています。
国際認証と合格大学、英文メインを備え、海外で学校を訪れる家族にも同じ話を伝えます。
TWO METAPHORS
同じ文章を
同じ文章を
2つのシーンで描画しました。
- LUMEN・ライト学生一人一人が光
小さな光の一つが集まって地球を成し遂げ、その光が世界の大学につながります。信仰と価値、一人の成長を暖かい光で表現しました。
- HORIZON・地平線可能性は地平線を超えて
宇宙から見た地球の地平線として学校の視界を示しています。見知らぬ世界に進む勇気と可能性を広い画面に広げました。
- LUMEN × HORIZON光が地平線の上に浮かぶ瞬間
2つの提案は、異なる答えよりも同じシーンの2つの瞬間です。地平線の上に光が浮かぶと、新しい一日が始まるように、子供の次のステップもそのように始まります。
PHOTOGRAPHY DIRECTION
飾られたシーンより
飾られたシーンより
明るい日を選びます。
親はホームページの写真で学校の一日に初めて会います。団体写真を並べるよりも、学びに没頭した手や窓の光、教室外の活動のように、実際の一日のシーンを選ぶ基準を立てました。最終画面には、学校が確認した写真のみを使用します。
- DO学びに没頭した手と後ろ姿
- DO自然光と実際の授業の瞬間
- DON'T同じ構図のグループ写真を一覧表示する
- DON'T補正が過剰な演出写真
04 / COLOR SYSTEM学校のネイビーとゴールドを
学校のネイビーとゴールドを
夜空と夜明けに。
今のホームページは深いネイビー(#00225C)とゴールド(#D4B972)を書きます。 2色を捨てず、LUMENでは夜空と光で、HORIZONでは地球の青色と夜明けのアプリコットに広がりました。
LUMEN 夜空と光
Night Navy#000A1FRGB 0 10 31
夜空
最初の画面と暗いシーンの背景。光が最も鮮明に見える色です。
- 白い文字
- 19.8:1 AAA
- 濃い文字
- 1.1:1 使用しない
School Navy#00225CRGB 0 34 92
学校のネイビー
今のホームページから続いてきた学校の代表色です。ヘッダーと大きな面に書き込みます。
- 白い文字
- 15.2:1 AAA
- 濃い文字
- 1.2:1 使用しない
Light Gold#D4B972RGB 212 185 114
光
学校の金を光の色で書きます。今、場所と重要なボタンにのみ配置します。
- 白い文字
- 1.9:1 使用しない
- 濃い文字
- 9.5:1 AAA
Gold Mist#ECDCAERGB 236 220 174
ぼやけた光
ゴールドが広く広がるときに使う明るい色です。暗い背景の補助文字に書き込みます。
- 白い文字
- 1.4:1 使用しない
- 濃い文字
- 13.3:1 AAA
Paper#F7F4ECRGB 247 244 236
紙
明るいシーンの背景。純白より暖かくて長く読んでも快適です。
- 白い文字
- 1.1:1 使用しない
- 濃い文字
- 16.5:1 AAA
HORIZON 地球の青と夜明け
Deep Space#121B32RGB 18 27 50
宇宙
レタリングと暗いシーンの背景。黒より青いオーラがあり、地球の写真につながります。
- 白い文字
- 17.1:1 AAA
- 濃い文字
- 1.0:1 使用しない
Ultramarine#244ADCRGB 36 74 220
地球の青い光
リンクと強調、入学相談シーンの広い面に書きます。
- 白い文字
- 6.8:1 AA
- 濃い文字
- 2.5:1 使用しない
Apricot#E9C6A9RGB 233 198 169
夜明け
初等コースカードのように暖かい面に書き込みます。
- 白い文字
- 1.6:1 使用しない
- 濃い文字
- 10.7:1 AAA
Sky#C2D0E7RGB 194 208 231
空
中等コースカードのように落ち着いた面に書きます。
- 白い文字
- 1.6:1 使用しない
- 濃い文字
- 11.0:1 AAA
Signal Red#E44B39RGB 228 75 57
小さな信号
アスタリスクとプログレスバーのように、非常に小さなマークにのみ書き込みます。
- 白い文字
- 3.9:1 大きな文字
- 濃い文字
- 4.4:1 大文字
Paper#F6F5EFRGB 246 245 239
紙
基本的な背景です。写真とカードがその上に置かれます。
- 白い文字
- 1.1:1 使用しない
- 濃い文字
- 15.6:1 AAA
TRY IT・同じ画面、2つのパレット
色を変えても
色を変えても
構造はそのままです。
両方の提案は同じデザイントークンの上に作成されました。背景や文字、強調色の位置をあらかじめ決めておいたので、パレットだけを変えると同じ部品が違う表情を持ちます。下のボタンで入学相談カードのパレットを変えてみてください。
surfaceデスクトップink文字accentハイライトsoftセカンダリー フェイス
Admissions✳
子供の次のステップを
GGSで始めましょう
入学相談はオンライン申請や電話で始めることができます。申込書をお送りください。入学先でご確認の上、ご連絡いたします。
- 1相談申請
- 2 1：1対面相談
- 3テスト・インタビュー
- 4入学登録
オンライン入学相談の申し込み→ 入学手続きを見る
TYPOGRAPHY 3つの声
Rooted in
Faith
英語のタイトルの声
どちらの提案も、英語の強調にセリフイタリックを書きます。長い歴史を持つ学校の落ち着いた印象を英文に追加します。
信仰の上に根を下ろす
韓国語の声
LUMENはタイトルから本文まで韓国語をPretendardした家族にまとめ、HORIZONは学校サイトの共通フォントであるNoto Sans KRを続けて書いた。タイトルは字間を狭くしっかり、本文はゆったりとした行間で快適に書きます。
A world of
possibilities.
HORIZONの声
幾何学的なサンセリフで大きな英語の文章を作り、最後の単語だけをセリフイタリックに変えて文章にリズムを作ります。
- Display88 / Pretendard 700 / -0.03em
- Heading58 / Pretendard 700
- Value48 / Cormorant 600 Italic
- Body 18 / 400 ·行間1.78
- ラベル 14 / 600 ·字間0.16em
05 / MOTION 明るい点が地球になるまで
スクロール一度に
十二年の旅を。
LUMENの最初の画面は、スクロールに従って再生されるモーショングラフィックです。光の一点が粒子に広がり、地球を成し遂げ、一山キャンパスから合格大学の14ヶ所に光の軌跡が続く。
リアルタイム3Dではなく、事前にレンダリングされたフレームをスクロール位置に合わせて描画します。携帯電話では、縦画面用のフレームを別に呼び出すなどのシーンを絶えず見せてくれます。
00光の点
01広がる粒子
02地区
03一山37.67°N
0414の軌跡
05世界へ
TRY IT・フィルムの動き
- ワシントン大学 シアトル
- UC Berkeley バークレー
- UC Davis デイビス
- USC ロサンゼルス
- UC Irvine アーバイン
- University of Illinois アバナキャンペイン
- Purdue University ウェストラファイエット
- ヴァンダービルト大学 ナッシュビル
- University of Notre Dame ノートタイム
- Case Western Reserve Universityクリーブランド
- Penn State ステートカレッジ
- コーネル大学 イタカ
- ニューヨーク大学 ニューヨーク
- ノーザステルン大学 ボストン
HORIZON · CAMERA
スクロールすると、カメラが地球に近づきます。
HORIZONの最初の画面は、一枚の地球の写真を拡大して傾け、カメラが動いているように見えます。重い画像の代わりに、画像の1枚とスクロール計算だけでシーンを作成しました。
06 / DESIGN DIRECTIONS 同じスケルトン、2つの表情
1つの正解を選ぶ前に、
2つの可能性を最後まで描きました。
同じ学校資料と同じ情報構造から出発しましたが、何を先に見せてくれるかによってホームページの性格は大きく異なります。世界に向けた視界を前にしたHORIZONと、信仰と価値を順番に伝えるLUMENをメインページの最後まで完成しました。
下の画面は実際に製作した提案を録画したものです。シーン名を押すとその区間に移動します。
STRUCTURE FIRST
色を塗る前に、灰色の箱でスケルトンを最初に合わせました。ハンドルを動かすと、同じ画面のスケルトンと完成した本を比較できます。
A案案
HORIZON私の可能性が、世界になるところ
宇宙から見た地球の地平線で学校の視界を示す方向です。スクロールによってカメラが地球に近づき、学校の態度と教育課程、学校生活と進学、入学相談が広い画面の上に順番に広がります。
- 地球の地平線で開く最初の画面とカメラの移動
- 横につながる小・中・高等教育課程
- 粒子で描いた地球とFaith・Character・Community
Manrope · DM Sans · Cormorant Garamond
B案
LUMEN学生一人一人が輝く存在
学生一人一人を光で描いた方向です。光一点が地球となるモーショングラフィックで始まり、ミッションと6つの価値、12年のカリキュラム、国際認証と合格大学、入学相談まで親が確認する内容を順番にご案内します。
- 光の点が地球になるスクロールモーショングラフィック
- 六角形に沿って1つずつ点灯する6つの値
- 水平に流れる教育課程と入学相談の四歩
Cormorant Garamond · Pretendard
COMPARE 2つの方向はどのように異なりますか
同じ学校を紹介する
2つの順序
両方の提案は同じ内容を含んでいますが、物語を取り出す順序と雰囲気が異なります。学校が最初の画面で一番最初に伝えたい言葉が何なのかによって選べるように違いをまとめました。
区分A・HORIZON B・LUMEN
最初の画面 地球の地平線の写真と英語の文章明るい点が地球になるモーショングラフィック
ストーリーの順序学校の態度→カリキュラム→価値→学校生活→進学ミッション→6価値→カリキュラム→進学・認証→学校生活
価値を見せる方法
トレーニングコース色の異なる3枚の水平カード 写真と一緒に流れる水平パネル
進学情報代表大学名を大文字に合格大学のロゴと光の軌跡
入学相談電話と相談申請をした画面に4歩の手続きと願書 ダウンロード
画面の雰囲気明るく軽快な昼間の画面深くて暖かい夜の画面
重い場所 グローバルビジョンと没入感 教育価値と情報の伝達
2つの提案が一緒に保つ
- 共通メニューとフッター既存の学校サイトのメニューとフッターをそのまま続けてサブページにリンクします。
- 既存入学相談相談申請ボタンは、現在運営中のオンライン入学相談画面をそのまま開きます。
- モーションを減らすデバイスでモーションを減らすことをオンにすると、固定シーンと自動動きが止まり、内容が順番に表示されます。
- 小さな画面携帯電話では、水平に流れる区間を縦に変えて表示します。
- 01 読む 学校の紹介・カリキュラム・入学ガイドをもう一度読む
- 02 分割 訪問の理由で4人を定義する
- 03 設定 「一点から世界へ」話をする
- 04 描画 2方向のメインページの提案
- 05 移動 ヒーローモーショングラフィックとスクロールシーン
- 06 トリム モバイル・モーションを減らす・英語メイン
07 / ACADEMICS 十二年の一行
小学校から高等まで、
ある学生が育つ順序へ。
どちらの提案も、カリキュラムを3つのメニューではなく1つの流れとして示しています。下のバーでグレードをタップしてみてください。その学年が属するコースと学ぶ内容が一緒に変わります。
Elementary School初等コース
学びを楽しむ力を育てる
学生一人一人の興味と強みに合わせて指導方法を違っています。英語・数学・科学・社会を中心にバランスの取れた基礎を築き、読書・書く・話すことと美術・音楽・中国語・体育授業で自信を育てます。
ミドルスクール 中等コース
自分で考えて学ぶ
様々なイベントやクラブ活動により、批判的思考や自己の洞察、世界を見る視野を広げます。放課後の支援プログラムと学生相談が、一人一人の成長をそばで助けます。
High School高等コース
大学と世界を準備します
4年間CCSSベースのクレジットを履修し、AP科目で専門性を広げ、大学入試に必要なレベルまで学習します。奉仕と比較と活動で責任感とリーダーシップも一緒に育てます。
G9English & Lab 9GeometryBiologyWorld History
G10English & Lab 10Algebra IIChemistryEconomics
G11English & Lab 11PrecalculusPhysicsUS History
G12English & Lab 12CalculusAP Env. ScienceUS Government
教科ソース：Gyeonggi Global Schoolホームページ教育課程案内（2026年10月確認）
08 / VALUES 6つの値を1つの図形に
価値はリストではなく、
につながったものです。
学校が志向する六つの価値を六角形の頂点に置き、スクロールするたびに一つずつ点灯するように設計しました。最後の値がオンになると、6つの頂点が1つの線につながります。図形の上の値を直接押してください。
01 / 06
Adaptability
適応力
学生個人に合わせた目標と自己管理習慣をもとに、見知らぬ環境でも柔軟に対処する力を養います。
Global Citizenship
世界市民意識
探求、共感、貢献する経験を築き、文化と視点の違いを尊重する世界市民に成長します。
Integrity
真実性
自分を振り返って悟る過程を経て、正直の価値を心深く刻みます。
Justice
公平性
すべての学生と教職員を公平に扱い、皆に有益な解決策を一緒に見つけます。
Respect
尊重
同じ考えと異なる考えをすべて尊重し、誰でも自由に意見を語れる文化を作ります。
Trust
信頼
教師と生徒の間に信頼が積み重なるとき、学ぶことも最も大きく成長します。
HORIZON · FAITH · CHARACTER · COMMUNITY
HORIZONは、学校の価値観を、信仰（Faith）と靭性（Character）、コミュニティ（Community）の3つに分けて示しています。 620点で描かれた地球がスクロールに沿ってゆっくりと戻ります。
09 / GLOBAL
行一つ一つが
行一つ一つが
卒業生の次のステップです。
LUMENのヒーローフィルムの光の軌跡は、学校の合格大学のリストに沿って描かれました。一山キャンパスから出発した線がシアトルとカリフォルニアを通ってニューヨークとボストンまで続く。
- 01 ワシントン大学 シアトル
- 02 UC Berkeley バークレー
- 03 UC Davis デビス
- 04 USC ロサンゼルス
- 05 UC Irvine アーバイン
- 06 University of Illinois アバナキャンペイン
- 07 Purdue University ウェストラファイエット
- 08 ヴァンダービルト大学 ナッシュビル
- 09 University of Notre Dame ノートタイム
- 10 Case Western Reserve University クリーブランド
- 11 Penn State ステートカレッジ
- 12 コーネル大学 イタカ
- 13 ニューヨーク大学 ニューヨーク
- 14 ノーザステルン大学 ボストン
大学一覧出典：Gyeonggi Global Schoolホームページ大学進学現況（2026年10月確認）
10 / ADMISSIONS 入学相談までの4ステップ
メインページの最後のシーンは
入学相談です。
どちらの提案も、メインページの最後のシーンを入学相談にしました。学校の入学手続きを４歩に減らして見せてくれ、オンライン申請は既存の入学相談画面とそのままつながりました。
国文と英文メインが同じ構造を書くように文章も一緒に用意しました。以下のカードで言語を変更してください。
- 1 相談申請 オンラインまたは電話で申し込みます。
- 2 1：1対面相談 ヘッド教師と直接会って相談します。
- 3 テストとインタビュー 入学適合性を一緒に確認します。
- 4 入学登録 書類を提出し、最終案内を受け取ります。
Admissions子供の次のステップを
子供の次のステップを
GGSで始めましょう
入学相談はオンライン申請や電話で始めることができます。申込書をお送りください。入学先でご確認の上、ご連絡いたします。
オンライン入学相談の申請→ 入学手続きの詳細
AdmissionsBegin Your Child’s
Begin Your Child’s
Journey at GGS
Start with an online inquiry or a phone call. Our admissions office will review your request and contact you.
Apply for Counseling →Admissions Procedure
同じ桁、同じ長さを基準に文章を合わせて、両方の言語で画面構造が揺れないようにしました。
11 / MOBILE 手元でも同じ話
小さな画面では、
水平を垂直に置き換えます。
親は携帯電話で学校のホームページを初めて開くことが多いです。水平に流れたカリキュラムと固定シーンは縦に変え、LUMENのヒーローは縦画面用のフレームを別々に用意しました。
- 縦画面用に別々にレンダリングしたヒーローフィルム
- 縦に積み重ねるカリキュラムと価値
- モーションを止めるボタン（HORIZON）
- 小さな画面幅までチェックしたレイアウト
DESIGN SYSTEM2つの提案が一緒に書かれた
2つの提案が一緒に書かれた
部品
ボタンとタグ、シーン番号と数字表記までパーツ単位でまとめました。選択した提案を実行しながら、担当者が変わっても同じ画面を作成できます。
EVERY STUDENT, A LIGHT.
あなたの学校は
あなたの学校は
どの光として覚えていますか？
学校のホームページは、親と学生、教師の志願者が学校に初めて会う場所です。
学校が信じる価値から一緒にまとめます。
- Client
- Gyeonggi Global School
- Scope
- リサーチ、ブランド解析、情報構造、UIデザイン、モーショングラフィック、インタラクションプロトタイプ
- Brand
- エンブレムと学校の色：Gyeonggi Global School · 解釈とウェブ適用：BlueCanvas
- Status
- メインWebサイトリニューアル提案・2026年10月
その他のプロジェクト
-
グローバル企業
Youngone Corporation
ラベルに名前が載らないグローバルOEM企業のWebサイトリニューアル提案です。「服の内側から、世界の外側まで」というブランド解釈、カラーシステム、雪山から始まるメインページ案、製造工程のスクロールインタラクション、グローバルネットワーク・素材・ESGの画面まで収めています。
-
メディア・出版
Munhakdongne Publishing Group
出版グループのWebサイトリニューアル提案です。社名にある「トンネ（町）」という言葉から出発し、紙と墨としおり紐のカラー、4つの案、書籍探しと連載を読む体験まで収めています。
-
財団・非営利
Purme Foundation
非営利財団のWebサイトリニューアル提案です。シンボルの3本の木から出発し、ブルーと新芽のライムのカラー、アクセシビリティの基準と4つの案まで収めています。