01
事業は広がりましたが、物語は散らばっていました。
病院やセンター、福祉館、ソーシャルファーム、スポーツセンター、図書館まで、6機関と4つの事業分野がそれぞれの言語で紹介されていました。初めて来た人は、この財団が何をしているのかを一文で言うのが難しかったです。
一本から森につながる一話に結びつくBLUECANVAS SELECTED WORKPURME FOUNDATION · NON-PROFIT
PURME FOUNDATION · WEBSITE RENEWAL PROPOSAL
通常の一日が
成長する森
Purme FoundationのWebサイトリニューアル提案
ブランド解析・情報構造・UIデザイン・アクセシビリティ
01 / OVERVIEW プロジェクトの概要
寄付をお願いするホームページで、
一緒に育つ森へ。
Purme Foundationは、2005年から障害者のリハビリと自立を支援してきた非営利財団です。子どもリハビリ病院や発達リハビリセンター、福祉館、ソーシャルパームまで財団が整えるところが増えただけに、ホームページが伝えるべき話も多くなりました。
BlueCanvasは、Purme Foundationのホームページを作成して運営し、次のホームページはどんな姿であるべきかをリニューアル方向を一緒に悩んでいます。このページはその提案とプロセスをまとめた記録です。
運用中のPurme Foundationホームページ- #非営利財団
- #スポンサー体験
- #Webアクセシビリティ
- ＃情報構造
- #ブランド体験
- #簡単な投稿
- #キャンペーンテンプレート
- #デザインシステム
- #リアクション
財団が積み重ねてきた数字から出発しました。
2005
健康福祉省の許可を得て財団が始まった年
925万人
普通の人生を生きる力を得た障害者と家族
55,656
障害者と家族のために共有に参加したスポンサー
8年連続
韓国ガイドスター公益法人評価
最高評価
数字ソース：Purme Foundationホームページ公開資料
02 / THE QUESTION
人々はPurme Foundationのホームページに何をしますか？初めてスポンサーを決めた人、レシートを必要とする長年のスポンサー、子供に合ったサポートを探している家族がいます。同じ最初の画面で、 3人がそれぞれの道をすぐに見つけることができなければなりませんでした。
ANALYSIS 今のホームページで見つけた3つの
02
後援に入る扉がいろんなところにありました。
定期スポンサーと一時スポンサー、キャンペーンごとに異なるページ、企業社会貢献、少額寄付と記念日寄付まで入口が多かったです。初めて後援しようとする人はどこから始めるべきか躊躇します。
入り口は1つ、選択は3回03
同情より尊重の言語が必要でした。
財団のミッションは、障害者が普通の生活を楽しむように社会変化を導くことです。残念な事情を前に立てる画面は心を動かすことはできても、財団が言う普通の人生とは距離がありました。
貧しい主人公ではなく、一日を買う人として最初の画面に立っている
3人を最初に描画しました。
訪問者を年齢や性別に分けるのではなく、ホームページに来た理由で分けました。理由が違うと一番最初に見なければならないのも変わるからです。
この財団は信頼できますか？
- 財団がすることを一目で
- 透明経営と数字
- 負担のないスポンサースタート
提案では、私に合ったスポンサーを見つける
私のスポンサーはどこに届きましたか？
- 後援金が使われた場所
- マイスポンサー履歴とレシート
- 財団のニュース
提案では、私の後援の履歴と領収書
私たちの子供が受けることができるサポートがありますか？
- 今申請できるサポート
- 簡単な言葉で書いた申請方法
- 選定結果の確認
提案の中では、配分アラート、アプリケーションガイド
03 / BRAND THINKING
答えはすでに
答えはすでに
シンボルの中にありました。
「若い芽が心強い木に成長し、青い森を形成する様子をイメージしています。」Purme Foundation CIについて
- 01・芽・リハビリテーション最初のステップを離す時間
治療室で過ごす一日一日が芽を育てます。
- 02・木・自立自分で立つ力
職場と学び場で自分の分け前の一日を過ごします。
- 03・森・一緒に一緒に暮らす普通の人生
障害と非障害の壁が低くなった近所が森になります。
BRAND STATEMENT
助けてほしいという言葉の代わりに、
一緒に成長しようは言葉で。
ミッション「障害者が普通の人生を味わうように」から 提案文「普通の一日が育つ森」へ
人が最初です。
「障害児」より「子供」を先に呼びます。障害は、その人を説明するいくつかの事実のうちの1つです。
何が変わるのかを言います。
漠然とした希望の代わりに治療を続けていくこと、出勤する一日のようにスポンサーが変えるシーンを具体的に見せてくれます。
主語は「私たち」です。
援助者と助けを受ける人に分けられません。スポンサーも森を一緒につくる隣人と呼びます。
PHOTOGRAPHY DIRECTION
顔より手と歩き、
顔より手と歩き、
演出より日常を撮ります。
ホームページの写真は、財団の態度を最初に示しています。子供と家族の顔を前に立たず、手と歩き、日光の中の一日で話を伝える基準を立てました。
- DO手、足、後ろ姿、やること
- DO自然光と日常の場所
- DON'T涙、暗い照明、同情の構図
- DON'T同意しない子供の顔のクローズアップ
04 / COLOR SYSTEMCIのブルーはそのまま、
CIのブルーはそのまま、
芽のライムを加えました。
Purme Foundationのブルーは健康と希望を意味します。そのブルーを変えずに、成長する瞬間を表示する芽の色を一つ追加しました。
Purme Blue#0071BCRGB 0 113 188
健康と希望
シンボルとメインボタン、リンクに書くCIブルーです。変えずにそのまま引き継ぎました。
- 白い文字
- 5.1:1 AA
- ネイビー文字
- 3.0:1 大きな文字
Ink Navy#0A2540RGB 10 37 64
読書の背景
本文の文字と暗いシーンの背景。黒よりスムーズにブルーにつながります。
- 白い文字
- 15.5:1 AAA
- ネイビー文字
- 1.0:1 使用しない
Sprout Lime#B5E048RGB 181 224 72
芽の信号
参加をお勧めする場所にのみ書き込みます。文字は常にネイビーに上げます。
- 白い文字
- 1.5:1 使用しない
- ネイビー文字
- 10.2:1 AAA
Sky Mist#E6F2FBRGB 230 242 251
休む面
広い背景とカードに書き込んで、画面に息切れを作ります。
- 白い文字
- 1.1:1 使用しない
- ネイビー文字
- 13.7:1 AAA
Sun#FFD66BRGB 255 214 107
暖かい温度
キャンペーンや感謝挨拶のように、心を伝える席にとても少なく書いています。
- 白い文字
- 1.4:1 使用しない
- ネイビー文字
- 11.2:1 AAA
Paper#F7F9FARGB 247 249 250
基本
純白より目が楽な基本の基礎です。写真とカードがその上に置かれます。
- 白い文字
- 1.1:1 使用しない
- ネイビー文字
- 14.7:1 AAA
色はあまり使わず、
定められた桁にのみ書き込みます。
ある画面では、背景と文字が大部分を占め、ブルーはブランドを知らせる席に、ライムは行動を勧める場所にだけ置かれます。比率を決めておけばキャンペーンが増えてもホームページ全体の印象が揺れません。
COLOR VISION CHECK
誰の目で見ても同じ道が見えるように。
色付きの人に画面がどのように見えるかをシミュレートして確認しました。ブルーとライムは明るさの違いが大きく、どちらの条件でも区別され、アプリケーションの状態のように重要な情報は色付きの文字で書かれています。
TYPOGRAPHY 滑らかで滑らかな終わりの文字
通常の
一日
CIの紹介には「きちんとしながらも終わりが柔らかい書体が正直で透明な寄付文化を意味する」と書かれています。ウェブでは、同じ印象を持つPretendardの家族でタイトルから本文までまとめました。
- Display94 / 800
- Heading52 / 800
- Title27 / 800
- Body 18 / 400 · 行間1.7
- Caption15 / 500
TRY IT・文字サイズ
文字を育てても画面が崩れないように。
提案の上部には、文字サイズを3つのレベルに変更するボタンがあります。すべてのサイズを同じ基準で計算し、文字が大きくなると行間隔とボタンも一緒に大きくなります。
配分通知・申請中
リハビリ支援機構支援事業2次申請案内
必要な補助具を用意できるように購入費を支援します。申請資格を確認した後、書類をご用意ください。
申し込み方法を見る→GRAPHIC SYSTEM 円と1つの幹
シンボルから取り出した
2つの図形ですべてを。
円は人と心を、茎は育つ時間を意味します。 2つの図形だけで、写真の枠、数字、アイコン、パターンを作成し、どの画面でもPurme Foundationということを知ることができました。
05 / DESIGN DIRECTIONS 同じブリーフ、4つの森
1つの正解を描く前に、
4つの可能性を展開しました。
同じ事実と同じパレットから出発しても何を先に見せてくれるかによってホームページの性格は大きく変わります。シンボルの言語、人の一日、信頼の数、参加のエネルギーという4つの方向にメインページを最後まで描いてみました。
下の画面は実際に製作した提案です。スクロールすると、各提案のメインページが上から下に移動します。
最終提案
Growing Forest成長する森
シンボルの三つの木をホームページ全体の言語に広げました。円は写真と数字を入れる枠になり、茎は物語をつなぐ線になります。
- 訪問目的に応じて分かれる三股第一画面
- シンボルの3つの木で示す数字
- 芽から森につながる事業紹介
Pretendard ExtraBold・ホワイトバックグラウンド
ナビゲーション提案
Ordinary Days通常の日
雑誌一冊を読むように障害者や家族の一日を追う方向です。大きな名誉タイトルとドキュメンタリー写真が最初に物語を渡します。
- 表紙写真と「今号で」で開く初画面
- 朝の治療室から夕方の家まで、一日の時間で読む4つの事業
- 枚の同じ背景と脚注で読む数字
Noto Serif KR · Pretendard
ナビゲーション提案
Clear Numbers透明な数字
スポンサーを決める理由は信頼ということから出発しました。年次報告書のように、数字と時間の流れを最初の画面に置きます。
- 925万人をドットとして見せる最初の画面
- 2005年から続く時間の棒
- 暗い背景の上の青とライムのデータ
Pretendard · Mono ラベル
ナビゲーション提案
Run Together一緒に走る
Purme Runのエネルギーをホームページ全体に移しました。トラックの曲線と大きな文字を見る人を参加に導きます。
- トラック曲線が写真を包む青い最初の画面
- LANE 01～04につながるキャンペーンと事業
- フィニッシュラインのスコアボード番号
Pretendard Black · Anton
DECISION 何を基準に選びましたか？
きれいな提案より
迷子にならない提案を。
6つの基準で4つの提案を一緒に評価しました。最も重い基準は、支援が必要な家族が最初の画面で道を見つけることができるかどうかでした。財団ホームページに来る人の中で最も急な人だからです。
評価基準A・成長する森B・普通の日C・透明な数D・一緒に走る
CIとの一貫性
初めて来た人の理解
スポンサーへの道
支援が必要な家族の道を探す
操作と拡張
アクセシビリティ
B・普通の日
写真の基準と物語カード
C・透明数字
数字を前に置く透明管理領域
D・一緒に走る
キャンペーンページのエネルギー
A・育つ森最終提案
採用していない提案のメリットは捨てずにAに移して植えました。
- 01 リスニング 財団資料と運営中のホームページを見る
- 02 分割 訪問の理由で3人を定義する
- 03 設定 シンボルからブランド言語を取り出す
- 04 描画 メインページの提案4つの
- 05 均等 6つの基準で一緒に評価
- 06 トリミング スポンサーフローとアクセシビリティ基準の整理
06 / DONATION FLOW スポンサーは3回の選択で
入り口は一つで、
選択は3回へ。
散らばっていた後援の入り口をひとつに集め、方法と金額、気をつけたところだけ選べば申請書に進むようにまとめました。右画面で直接タップして見ることができます。
- 最初の画面で金額から尋ねません。
- 選んだ内容はいつでも元に戻すことができます。
- 申請前に選んだ内容をもう一度お見せします。
- キーボードだけでも最後まで行けます。
Purmeで成長する提案画面
選択内容 毎月30,000ウォン・リハビリテーション医療
申請書の作成→
07 / INFORMATION ARCHITECTURE メニューも1本の木のように
資料をリストするメニューから、
やるべきことを選ぶメニューへ。
メニュー名は、機関の組織図よりも訪問した人の目的に近づけて変更しました。 「資料センター」は人の話が集まった「物語」で、「参加する」は一緒にしようという意味の「一緒にする」と直しました。
Purme Foundation
既存の「参加する」 一緒に
- 定期スポンサー
- 一時スポンサー
- 進行中のキャンペーン
- 記念日の寄付
- 企業社会貢献
- マイスポンサー内訳・レシート
既存の「事業紹介」 すること
- リハビリテーション
- 障害家族支援
- 地域社会福祉
- 自立支援
- Purme 6 機関
既存の「資料センター」 ストーリー
- ストーリー
- プレスプレス
- ニュースレター・ニュース
- ギャラリー
- 出版
既存の「財団紹介」 財団の紹介
- ビジョンとミッション
- 沿革
- 透明経営
- 組織・広報大使
- 採用
- アクセス方法
すべての画面の上部に別々にサポートを探す
配分通知・申請案内・簡単文案
08 / ACCESSIBILITY 障害者財団のホームページなら
アクセシビリティは機能ではなく、
財団の態度です。
障害者の普通の人生を語る財団なら、ホームページから誰でも使えるはずです。設計を開始する前に、アクセシビリティ基準を最初に設定し、すべての提案をその基準として確認しました。
- 4.5:1人対比
本文の文字と背景は4.5：1以上を守ります。
- Tabキーボードの移動
マウスがなくてもスポンサーの申し込みまで行くことができ、今位置がはっきりと見えます。
- Alt代替テキスト
写真ごとにシーンを説明する文章をつけて、画面読み上げ機でも話を聞きます。
- 秋+文字サイズ
3つのレベルで成長しても、行があふれたりボタンが重なったりしません。
- Motion動きを減らす
デバイスの動きを減らすと、装飾アニメーションが停止します。
- 簡単な記事簡単な書き込みガイド
支援公告は発達障害者や家族が読みやすい文章でも提供します。
リハビリ支援機構支援事業2次申請案内
障害児・青少年のリハビリに必要な補助器具購入費を支援します。申請資格と提出書類をご確認の上、申請書と証明書類を整えて定められた期間内に提出してください。選択結果は配分通知に知られています。
補助器具を買うお金を助けます。
- あなたの体に合った補助具が必要ですか？
- 申請できることをまず確認してください。
- 申請書と書類を準備します。
- 決まった日までに送ってください。
- 結果は配分通知でお知らせします。
例文です。簡単な文章は、短い文章、1つの文章に1つの情報、画像番号を原則として書き込みます。
DESIGN SYSTEM同じ森で育った
同じ森で育った
部品
ボタンとタグ、カードと数字の木まで。キャンペーン担当者が変わっても同じ画面を作れるようにパーツ単位でまとめました。
CAMPAIGN TEMPLATEキャンペーンが変わっても、
キャンペーンが変わっても、
森は同じ森です。
キャンペーン名、サークル内の代表シーン、一文の約束、参加ボタン。 4つの席だけを守れば、色や絵が違っても、1つの財団のキャンペーンとして読まれます。
満員の
奇跡
子供たちがリハビリ治療を止めないように。
毎月1万ウォン一緒に今日も
出勤する一日が自立になります。
グッドジョブを応援するPurme
ドリーム
5千 元から
小さな貯金箱が子供の夢を育てます。
毎月5000ウォンを始めるミラクル
日
私の記念日が誰かの奇跡になる日。
記念日の分割2026
Purme Run
違って走っても、同じ決勝線で。
参加申請する09 / MOBILE 片手で、最後まで
手の中の画面でも
道は三股へ。
ホームページを初めて開くところが携帯電話の場合が多いです。小さな画面では、三股の道を最初の画面の下に直接立て、スポンサーボタンは親指の右下に置いた。
- 縦につながるキャンペーンカード
- 親指が届く席のスポンサーボタン
- 数字の木は一本ずつ縦に
- 文字のサイズ変更はメニュー内でも
10 / AND TODAY 提案は提案で、質問は残り
リニューアル提案は
最終的に採用されていません。
それでも質問は残りました。
Purme Foundationのホームページは今の構造で運営されており、BlueCanvasはキャンペーンとお知らせ、スポンサーページを引き続き一緒に管理しています。
提案過程で立てた質問は今でも運営の基準となります。この画面に誰が来るのか、何を最初に見せるべきか、誰も迷子にならないようにするには、何が必要かを尋ねます。
NOW OPERATING運営中のPurme Foundationホームページ
キャンペーンバナーと配分通知、透明管理数字まで。財団のニュースはここで着実に更新されます。
purme.orgにアクセスする
YOUR ORGANISATION, SEEN WITH CARE.
あなたの組織には
あなたの組織には
どの森が成長していますか？
財団と公共機関、非営利団体のホームページは、スポンサーと利用者、職員がすべて使うところです。 誰が来るのかから一緒にまとめます。
- Client
- Purme Foundation
- Scope
- リサーチ、情報構造、ブランド体験戦略、UIデザイン、アクセシビリティ基準、モーションプロトタイプ
- Brand
- CIとシンボル：Purme Foundation提供・解析とWeb適用：BlueCanvas
- Status
- リニューアル提案（最終未採用）・運営中のホームページ管理
