最初の画面が1つの文で話す
今のメイン画面では、ポップアップとスライドバナーが最初に見えます。初めて来た人が教育院が何をしているのかを一文で知ることができるように、最初の画面の役割を再定義しました。
教育院を紹介する文を最初の画面に
KOREAN EDUCATION CENTER IN MALAYSIA · WEBSITE RENEWAL PROPOSAL
4,600kmを、 一行で。
Korean Education Center in Malaysia Webサイトリニューアル提案
天地人・コーラルジャーニー、2つの方向
01 / OVERVIEW プロジェクトの概要
マレーシアで
韓国語に初めて会う場所
Korean Education Center in Malaysiaは、韓国教育省が2020年12月30日にクアラルンプールに建てた在外教育機関です。マレーシアに住む誰でも聞くことができる韓国語講座を開き、韓国語を教える中学校と週末ハングル学校を支援し、政府招請奨学生（GKS）をはじめとする韓国留学を案内します。
今のホームページを作成したBlueCanvasは、最初の画面から再設計する2つの方向を提案しました。ハングルを作った三画の原理で両国をつなぐ「天地人」と、人と人が近づく場面に沿って行く「コーラルジャーニー」です。このページは、2つの提案が出てくるまで悩んだ内容とプロセスをまとめた記録です。
- #在外教育機関
- #韓国語コース
- #ハングルの原理
- #天地
- #講座申請
- #国文・英文
- #モーショングラフィック
- #スクロールインタラクション
- #リアクション
教育員が届く範囲を数字で先にまとめました。
2020
教育院が開かれた
2020年12月30日教育機関登録
11 か所
正規韓国語クラスのある中学校
65のクラスで約1,500人が学びます
8 か所
教育院が支援するハングル学校ペナンからコタキナバルまで
4,600km
クアラルンプールからソウルまで
両都市間の直線距離
数字ソース：Korean Education Center in Malaysiaホームページ（2026年10月確認）。中学校の数値はホームページに案内された2021年4月基準です。
02 / THE QUESTION
韓国語を一文字も知らない人に、教育院のホームページはどんな初挨拶を渡さなければなりませんか？
答えは教育院が教える文字の中にありました。
03 / READING 今すぐホームページをもう一度読む
ANALYSIS
情報は十分でした。
情報は十分でした。
必要なものは順序でした。
公知と講座案内、採択学校とハングル学校、留学情報まで教育院が知らせるべき内容はすでにホームページにありました。初めて訪れた人の目でメイン画面を読み直し、最初の画面から講座申請まで続く順番を3つにまとめました。
講座申請まで一度に
韓国語を学ぶ訪問者にとって最も重要なコースの申請は、メニューの第2段階にあります。どちらの提案も、ヘッダーと最初の画面、コース紹介の終わりに同じ名前のボタンを置いた。
どの画面でも「講座申請」を一度教育員が届く範囲が見えます
中学校11ヶ所とハングル学校8ヶ所、韓国留学まで教育院の仕事はマレーシアのあちこちに届いています。メイン画面でカード3枚のみで紹介されていたこの範囲を数字や地図、旅程で見せることにしました。
数字・地図・4,600km旅程ホームページを開く
あなたの人を最初に描きました。
教育院ホームページには、韓国語を初めて学ぼうとする市民から韓国語教師、留学を準備する学生、在外同胞家族まで、さまざまな理由で人々が訪れます。訪問者を訪ねてきた理由で分け、各々一番最初に見なければならない画面を決めました。
Is the class free?
When does it start?- 講座段階と授業料
- 上半期・下半期開講
- 講座申請
提案では、ヘッダーの講座申請と1～6段階の階段
教材と研修のニュースはどこで見ることができますか？
- 採用学校支援内容
- 教員研修とイベント
- お知らせ
提案では、教育機関が行う仕事カードとお知らせリスト
GKS奨学金は
どのように準備しますか？
- GKSの手続きと特典
- 韓国留学博覧会
- 留学資料
提案では、クアラルンプールからソウルへの旅
私たちの近所にも韓国語学校がありますか？
- 地域別ハングル学校
- 在外同胞国内招待教育
- 韓国人学校
提案では、マレーシア地図上のハングル学校
04 / BRAND THINKING
教育者が教える文字で
教育者が教える文字で
答えを見つけました。
教育員がすることはすべてハングルで始まります。だからブランドの言語もハングルが作られた原理で見つけました。ハングルの母音は空を模した店（・）と地を模した水平画（ㅡ）、人を模した縦画（ㅣ）で作られました。
THREE STROKES
点1本と2本の線で
点1本と2本の線で
両国を結ぶ。
- ・ㅡㅣ天と地と人
フンミンジョンウムは天と地と人を模した母音の基本ストロークを作りました。ハングルを学ぶ人が初めて出会う母音もすべてこの3画から出てきます。
- ㅏㅓㅗㅜ3つのストロークが集まり、音になります
3つのストロークをどこに置くかによって、ㅏ、ㅓ、ㅗ、ㅜになり、子音と会って文字になります。一人の最初の授業が学校や地域に広がり、再び韓国留学につながる教育院の仕事に似ていました。
- KUALA LUMPUR ↔ SEOUL水平は2つの都市を結ぶ地平線になります
地面を模した風景を長く伸ばすと、クアラルンプールとソウルを結ぶ地平線になります。天地人提案はこのシーンを初画面のモーションフィルムにし、コーラルジャーニー提案は「ハングルで始まる新しい世界」という最初の文章で受け取りました。
BRAND STATEMENT
ハングルでつながり、
学びに近づきます。
Connected by Hangeul, closer through learning.
教育院のスローガン「韓国を学び、韓国語でコミュニケーションします」で 両方の提案が一緒に書く提案文で
最初の文は簡単に書きます。
韓国語を知らない訪問者も教育院が何をしているのかがわかるように、最初の画面の文章を短く減らして英語字幕を一緒に置きます。
講座申請は一度に届きます。
最も重要な行動である講座申請を、ヘッダーと最初の画面、講座紹介の最後に同じ名前で置きます。
両方の国を一緒に示しています。
クアラルンプールとソウル、ブナラヤとムグンファ、「Apa khabar」と「こんにちは」のように、2つの国が一緒に出てくるシーンで交流を言います。
05 / TWO DIRECTIONS
同じ文章を
同じ文章を
2つの温度で描画しました。
A・天地人夜のストローク、文字で話す
深い夜空の上に金色のストロークを描き、ハングルが作られた原理から見せてくれます。韓国語を教える機関というアイデンティティを最初に伝えます。
B・コーラルジャーニー日中の会話、人で話す
一緒に勉強する人々の場面から始まり、最初の挨拶と最初の文章を過ぎて韓国留学につながる旅に従います。
06 / COLOR SYSTEM夜空の金色と
夜空の金色と
両国の花の赤色
天地の提案は、クアラルンプールの夜空のようなネイビーの上にストロークを映すゴールドを使っています。コーラルジャーニーの提案は、漢紙の象牙の上に両国の菊からもたらされたコーラルと熱帯の葉に似た濃い緑色を置いた。
SHARED ROOT
ブナラヤとムグンファは
ブナラヤとムグンファは
のようなムグンファソクの花です。
マレーシアの菊のブナラヤ（Bunga Raya）と韓国の菊のムグンファはどちらもムグンカ属（Hibiscus）に属します。ボナラヤの赤い花びらとムグンファの真ん中の赤い単心のように、2つの花が一緒に赤い光をコーラルに移しました。
天地人提案はこの話を教育院紹介の隣に写真に収めました。両国をつなぐという文章を色や写真でももう一度言うためです。
A・天地人 夜空と光のストローク
Night#060B1CRGB 6 11 28
夜空
最初の画面とほとんどのシーンを支える背景です。金色のストロークが最も鮮明に見える深さに選びました。
- 白い文字
- 19.6:1 AAA
- ネイビー文字
- 1.0:1 同じ色
Deep Navy#101B3ARGB 16 27 58
深い綿
カードや地図のように、背景の上に一重上がる面に書き込みます。
- 白い文字
- 16.9:1 AAA
- ネイビー文字
- 1.2:1 使用しない
Stroke Gold#F2C45CRGB 242 196 92
光のストローク
フィルムのストロークと講座申請ボタン、今位置を知らせる表示のみに書き込みます。
- 白い文字
- 1.6:1 使用しない
- ネイビー文字
- 12.0:1 AAA
Amber#E5A23ERGB 229 162 62
夕焼け
ゴールドが広く広がるときに使う補助色です。地図のパスと数値単位に書き込みます。
- 白い文字
- 2.2:1 使用しない
- ネイビー文字
- 8.9:1 AAA
Hanji#F3EEE3RGB 243 238 227
ハンジ
暗い背景の上の文字色。純白より暖かいので、金色とよく合います。
- 白い文字
- 1.2:1 使用しない
- ネイビー文字
- 16.9:1 AAA
B ·コーラルジャーニー ハンジーと両国の花
Ivory#F5F2EARGB 245 242 234
ハンジ
基本的な背景です。写真とカードがその上に置かれます。
- 白い文字
- 1.1:1 使用しない
- ファイン文字
- 10.6:1 AAA
Pine#173E35RGB 23 62 53
葉と松の木
文字と水平に流れる物語区間の背景に書き込みます。黒より柔らかく読みます。
- 白い文字
- 11.8:1 AAA
- ファイン文字
- 1.0:1 同じ色
Coral#F14D34RGB 241 77 52
両国の花
ブナラヤとムグンファの赤い光。タイトルの最後の言葉と次の行動を呼ぶ場所に書き込みます。
- 白い文字
- 3.6:1 大きな文字
- ファイン文字
- 3.3:1 大きな文字
Sage#DFE7CFRGB 223 231 207
鳥の葉
グリーティングバンドと最初のストーリーカードのように落ち着いた面に書きます。
- 白い文字
- 1.3:1 使用しない
- ファイン文字
- 9.3:1 AAA
Peach#F1D4BCRGB 241 212 188
日差し
人々のシーンを盛り込んだカードのように暖かい面に書きます。
- 白い文字
- 1.4:1 使用しない
- ファイン文字
- 8.4:1 AAA
TRY IT・同じカード、2つのパレット
色を変えても
色を変えても
構造はそのままです。
両方の提案は同じデザイントークンから出発しました。背景と文字、強調色の席を先に決めておいたので、パレットだけを変えると同じカードが違う表情を持ちます。下のボタンでコース案内カードのパレットを変更してみてください。
surfaceデスクトップink文字accentハイライトsoftセカンダリー フェイス
Korean Class✳
ステップ1から6まで、授業料は無料です
マレーシアに住んでいる人なら誰でも申請できます。教材費と行政費用のみ本人が負担します。
- ステップごとに15週間
- 上半期・下半期開講
- 出席70％・評価70点修了
コースの申し込み→ コースガイド
07 / TYPOGRAPHY＆LANGUAGE 家族のフォント、3つの言語の挨拶
ある家族のフォントで
2つの声を出しました。
どちらの提案も、韓国語と英語が均等に読まれるPretendardの家族としてまとめられました。同じフォントでも太さと字間、強調する方法を違って決め、夜と昼の声を作りました。挨拶帯には韓国語とマレー語、英語を一緒に置きました。
韓国を学び、韓国語でコミュニケーションします。
天地人の声
教育院のスローガンを太字で立てました。金色のストロークが通り過ぎる画面の上でも揺れないように太さと大きさをたっぷりと握りました。
ハングルで
始まる
新しい世界。
コーラルジャーニーの声
字間を狭めた大きなタイトルで写真と対等に対抗し、最後の言葉だけをコーラルに変えて文の終わりを強調します。
丸い点（・）は
空を模した。The round dot represents heaven.
両方の言語で読む最初の画面
天地であるフィルムの字幕は韓国語の下に英語を一緒につけました。韓国語を学び始めたマレーシアの訪問者も同じシーンに従うことができます。
- Display92 / Pretendard 800 / -0.035em
- Heading64 / Pretendard 800
- ステートメント 50 / 700 ·単語単位で明るくなる
- Body 17〜19 / 400・行間1.75
- キャプション 14〜16 /英語の下の英語
08 / MOTION ポイント1つが2つの都市をつなぐまで
180枚のフレームで描画
18秒のフィルム
天地の提案の最初の画面は、スクロールに合わせて再生される18秒の長さのモーションフィルムです。一点が水平線を引いて、三線が集まって「ハングル」となり、その画がクアラルンプールのツインタワーとソウルの南山を描いた後、二つの都市を一つの線につなぎます。
リアルタイム3Dではなく、事前にレンダリングされたフレームをスクロール位置に合わせて描画します。携帯電話では縦画面用のフレームを別々に読み込み、同じシーンを映像にもして「映像で見る」ボタンで再生します。
01ドットワン・スカイ
02地平線・地
03縦断・人
04コレクション
05ハングル
06両方の都市
TRY IT・フィルムの動き
- 天ドットハナ・スカイ
- 地地平線・地
- 人縦断・人
- ㅏコレクションが作成されます
- ハンハングル
- KLクアラルンプール
- SELソウルに到着
FILM · 18 SECONDS
同じシーンを
同じシーンを
映像にもしました。
スクロールしなくても最初から最後まで見られるように18秒映像でレンダリングしました。横画面用と縦画面用を一緒に用意し、機器に合った映像を開きます。
- LENGTH
- 18秒
- SCROLL
- フレーム180枚
- VIDEO
- 1920×1080 · 1080×1920
09 / DESIGN PROPOSALS 2つのメインページ
1つを選ぶ前に、
両方向を最後まで作成しました。
同じ教育院資料と同じ情報から出発しましたが、何を先に見せてくれるかによってホームページの性格は大きく異なります。ハングルの原理を前面に出した天地人と、人と出会いを前面にしたコーラルジャーニーをメインページの最後まで完成しました。
下の画面は実際に製作した提案を録画したものです。シーン名をタップするとその区間に移動し、携帯電話の画面も同じシーンに従います。
A案案・天地人
CHEONJIIN韓国を学び、韓国語でコミュニケーションします。
ハングルを作った三線の原理で教育院を紹介する方向です。スクロールに合わせて再生されるモーションフィルムから始まり、教育院がすることとマレーシア各地のハングル学校、クアラルンプールからソウルまでの留学旅程、1段階から6段階までの講座を順に見せてくれます。
- 点一つが2都市を結ぶ18秒モーションフィルム
- 積み重ねる5枚の名刺
- マレーシアの地図と4,600kmの留学旅行
Pretendard 800・国文と英字字幕
公開録画では、教育院のイベントの写真を同様のシーンのイメージに置き換えて連絡先を隠しました。
B案案・コーラルジャーニー
CORAL JOURNEYハングルで始まる新しい世界
一緒に学ぶ人の場面で教育員を紹介する方向です。アーチ状の写真がスクロールに応じて画面いっぱいに広がり、「学びで、もっと近い」という文章を見せ、初挨拶と初の韓国語、横につながる交流と留学の話、最近のお知らせにつながります。
- アーチから画面全体に広がる最初の画面
- 「こんにちは！」を立体文字で立てた初の韓国語カード
- 横に流れる三つの物語：接続・経験・韓国留学
Pretendard 650・ジャガン-0.07em
公開録画では、教育院のイベントの写真を同様のシーンのイメージに置き換えて連絡先を隠しました。
COMPARE 2つの方向はどのように異なりますか
同じ教育者を紹介する
2つの順序
両方の提案は同じ内容を含んでいますが、物語を取り出す順序と雰囲気が異なります。教育員が最初の画面で一番最初に伝えたい言葉が何なのかによって選べるように違いをまとめました。
区分A・天地人B・コーラルジャーニー
最初の画面スクロールで再生される天地のモーションフィルムアーチで画面いっぱいに広がる写真と動画
話の順序ハングルの原理 → 教育院紹介 → すること → 指導 → 留学 → 講座 → お知らせ初挨拶 → つながり → 最初の韓国語 → 交流と留学 → お知らせ → 一緒にした場面
メニュー今の6つのメニューとサブメニューをそのまま 4つのアクションで減らしたメニュー
留学情報4,600kmのルートとGKSの4つのステップ「次の章は、韓国で」 GKSカード
講座情報1段階から6段階までの階段とTOPIK等級講座案内・講座申請・学習資料3行
写真 ビジネスごとに一枚ずつ選んだ雰囲気の写真 一緒に勉強している人の写真を最後まで
画面の雰囲気 深く静かな夜 明るく暖かい昼
重い場所 機関のアイデンティティと情報の深さ最初の訪問者の共感と次の行動
2つの提案が一緒に保つ
- 今のサブページお知らせ、ギャラリー掲示板、コース案内など、運用中のサブページをそのままリンクします。
- 既存のコースの申請コースの申請ボタンは、現在実行中の申請画面をそのまま開きます。
- 動作を減らすデバイスでモーションを減らすことをオンにすると、固定シーンとフィルムがフリーズし、内容が順番に表示されます。コーラルジャーニーは画面の下にモーションを減らすボタンも置いた。
- 国文・英文ヘッダーから英文ホームページに直接進み、天地人フィルムの字幕には英語を一緒につけました。
- 01 読む 今のホームページと教育機関の資料をもう一度読む
- 02 分割 見つけた理由で4人を定義する
- 03 建設 「3つのストロークで2つの国を結ぶ」ストーリーを決める
- 04 描画 2方向のメインページの提案
- 05 移動 天地の映画とスクロールシーン
- 06 トリミング モバイル・モーションを減らす・国文と英語
10 / SIGNATURE SCENES 提案の中のシーンを直接動かしてください
表にまとめられていたことを
シーンに変更しました。
教育院の仕事は今のホームページで表とリストでまとめられていました。提案ではその内容を地図や旅程、階段のような場面に変えました。以下のシーンは、提案の構成をこのページに合わせて再作成したものです。
MAP・ハングルが届くところクアラルンプールから
クアラルンプールから
マレーシア各地
教育院が支援するハングル学校の八つはペナンとセレムバン、ジョホールバルを通り、ボルネオ島のクチンとコタキナバルまで続いています。スクロールすると、教育院から各都市に線が続きます。
- クアラルンプール 教育院
- ペナン 韓国語学校1ヶ所
- セレムバン 韓国語学校1ヶ所
- ジョホールバル 韓国語学校2ヶ所
- クチン 韓国語学校1ヶ所
- コタキナバル 韓国語学校2ヶ所
- クアラルンプール 教育院・マレーシア韓国人学校
- ペナン ペナントヨハングル学校
- セレムバン セレムバントヨハングル学校
- ジョホールバル ジョホールバルハングル学校・ジョホールバルミルハングル学校
- クチン クチンハングルスクール
- コタキナバル コタキナバルハングル学校・コタキナバル韓国人学校
- 正規韓国語クラスのある中学校
- 11 か所
- 中学校正規韓国語クラス
- 65 個
- 中学校の韓国語学習者
- 約 1,500 人
- 教育院が支援するハングル学校
- 8 か所
マレーシア政府が韓国語を第2外国語として導入しました。
中学校の2カ所で初めての韓国語授業が行われました。
教員養成大学に現地の韓国語教員養成課程ができました。
Korean Education Center in Malaysiaが教育機関の登録を完了しました。
中学校の11ヶ所で韓国語の授業が続いています。
出典：Korean Education Center in Malaysiaホームページの主要業務・中等韓国語採択学校・週末韓国語学校案内（2026年10月確認）。中学校の数値は2021年4月基準です。
JOURNEY · GKS
クアラルンプールからソウルまで、
クアラルンプールからソウルまで、
約4,600km
政府招請奨学生（GKS）は大韓民国教育部国立国際教育院が主管する奨学プログラムです。奨学生は韓国で1年間韓国語研修を終えた後、学位課程を開始します。
- 01情報を取得
教育院が開くGKS説明会と韓国留学博覧会で大学と専攻情報を取得します。
- 02支援と選抜
教育院は、政府招待奨学生プログラムの広報と選抜過程を支援します。
- 03韓国語研修1年
学位コースを開始する前に、韓国の大学で1年間韓国語を学びます。
- 04学位コース
学士は4年、修士は2年、博士は3年間勉強します。
奨学生は往復航空券と月生活費（学部90万ウォン、大学院100万ウォン）、医療保険料と定着支援金を受け取ります。
出典：Korean Education Center in Malaysiaホームページ政府招待奨学生（GKS）案内（2026年10月確認）
COURSES · 1 → 6ステップ1から6まで、
ステップ1から6まで、
授業料は無料です。
教育院の韓国語講座はマレーシアに住む誰でも申請できます。天地人提案は講座段階を階段に積み上げ、今段階で次の段階とTOPIK等級が一緒に見えるようにしました。階段を押してみてください。
ステップ1
TOPIKⅠ・1級
正規課程の第一歩です。 15週間TOPIKⅠ1級レベルを目指して学びます。
ステップ2
TOPIKⅠ・1級
2段階修了証は法務部査証発行に使う韓国語能力証明書類の基準段階です。
ステップ3
TOPIKⅠ・2級
TOPIKⅠ2級レベルを目指す段階です。
ステップ4
TOPIKⅠ・2級
3段階に続き、TOPIKⅠ2級レベルを固める段階です。
ステップ5
TOPIKⅡ・3級
TOPIKⅡ3級レベルに上がる段階です。
ステップ6
TOPIKⅡ・3級
正規課程の最終段階です。以下は、絵画と留学を準備する深化プロセスにつながります。
深化・特別過程
TOPIKⅡ・4～6級
深化会話と留学コントラストコースを学習者レベルに合わせて編成します。
- 15週間段階ごとに運営する期間
- 年2回上半期と下半期開講
- 70％出席率70％以上、2水平評価70ポイント以上の場合、修了
- 無料教材費と行政費用のみ本人負担
出典：Korean Education Center in Malaysiaホームページ韓国語講座案内（2026年10月確認）
11 / MOBILE 手元でも同じ話
小さな画面では、
水平を垂直に置き換えます。
教育院ホームページを携帯で初めて開く訪問者も多いです。天地のフィルムは縦画面用のフレームを別々にレンダリングし、水平に流れる物語や地図は縦に積み重ねられるように変えました。
- 縦画面用に別々にレンダリングした天地人フィルム
- 縦に積む名刺と話
- ヘッダーに残るコースの申請ボタン
- モーション低減設定とモーション低減ボタン
DESIGN SYSTEM2つの提案が一緒に書かれた
2つの提案が一緒に書かれた
部品
ボタンやタグ、公知の行や数字表記まで部品単位でまとめました。どの提案を選んでも、オペレーターは同じ部品で新しい画面を作成できます。
ONE STROKE, TWO COUNTRIES.
あなたの機関は
あなたの機関は
どのような最初の挨拶を渡していますか？
機関のホームページは初めて訪れた人が受ける初挨拶です。 何をする所なのか一文で伝える日からまとめてまとめます。
- Client
- Korean Education Center in Malaysia
- Scope
- リサーチ、ブランド解析、情報構造、UIデザイン、モーショングラフィック、インタラクションプロトタイプ
- Brand
- エンブレムと教育院資料：Korean Education Center in Malaysia · 解釈とウェブ適用：BlueCanvas
- Status
- メインWebサイトリニューアル提案・2026年10月
その他のプロジェクト
-
教育・学校
Gyeonggi Global School
キリスト教系オルタナティブスクールのメインページのリニューアル提案です。信仰と世界を「一つの点から世界へ」という物語で結び、ネイビー・ゴールドとウルトラマリンのカラー、光（LUMEN）と地平線（HORIZON）の2案、スクロールモーショングラフィックスまで収めています。
-
公共機関
Korea Drug Development Fund
利用者分析とCIの解釈、9つのメイン案、パイプラインの可視化までを収めた、公共機関Webサイトの構築・リニューアルのプロセスです。
-
財団・非営利
Purme Foundation
非営利財団のWebサイトリニューアル提案です。シンボルの3本の木から出発し、ブルーと新芽のライムのカラー、アクセシビリティの基準と4つの案まで収めています。