CEO MESSAGEワンサイトの代表挨拶には
「皆様のNext Keyになります」という約束があります
Y · N · Kの前にYourを付けると、
頭文字が会社名と同じになります
#F16022ワンサイトのボタンと強調表示されたオレンジ、
2つの提案はこの色で出発しました
TWO DIRECTIONSステートメントを開くと、
2行目があります
YNK ASSOCIATES · WEBSITE RENEWAL PROPOSAL
YNK AssociatesWebサイトリニューアル提案
THE RIGHT CONNECTION · YOUR NEXT KEY 2つの方向
YNK Associatesはソウルのエグゼクティブサーチファームです。企業が求める中核人材を探して推薦するヘッドハンティングを中心に、採用前に志願者の業務成果と態度を確認する評判調査と組織の力量を育てるHRコンサルティングを共にします。
BlueCanvasは、同社のホームページを新たに設計する2つの方向を提案しました。人と可能性をつなぐオレンジ色のリボンでつながりを見せるTHE RIGHT CONNECTION、扉を開く鍵で会社の物語を解放したYOUR NEXT KEYです。このページでは、2つの提案が出るまでの過程を、YNKが人材を探す7つの段階に合わせてまとめました。
SEVEN STEPS
ヘッドハンターが人材を探す順序とホームページリニューアルの順序は思ったより似ていました。依頼を受け、人材賞を定め、探し、推薦し、検証した上で提案します。
タイトルの見え
JOB DESCRIPTION
ヘッドハンターが人材を探す前に職務技術書を書くように、デザインを始める前に新しいホームページがしなければならないことを先に書きました。どちらの提案もこの技術文書に基づいています。
主な仕事
最初の画面から、2人の訪問者がそれぞれの相談に直接入ることができます。
紹介とサービス、案内文をすべてテキストに移して検索され、携帯電話でも読めるようにします。
次のキー、ドア、成功パートナーなどのワンサイトの馬とオレンジをデザインの材料として書き込みます。
採用公告とコラム「お茶一杯の会話」をメイン画面ですぐに会わせます。
優遇事項
固定シーンや映像を消し、同じ内容を上から下に読めるようにします。
リニューアルは、新しいものを加える前に会社がすでに持っているものを探すことから始めました。ワンサイトの代表挨拶と紹介図、ボタンの色、クイックメニューの横にある小さなアイコンまで再度読み、その中で5つの手がかりを見つけました。
代表挨拶は最後の挨拶の直前で「YNK Associatesが皆さんのNext Keyになります」と約束します。会社が自分を何にかけるかを示す最も明白な手がかりでした。
紹介図表の真ん中には金色の鍵の写真が、採用情報欄にはSUCCESSと書かれた鍵の写真が、クイックメニューの横には小さな鍵のアイコンがありました。鍵はすでにこの会社の象徴のように使われていました。
紹介表には「最高の人材と最高の企業が出会う扉を開きます。 YNKはその扉に向かう正確で早い道を知っています」という文があります。鍵があれば、その鍵で開く扉もあるという意味です。
同じ図表の左右には「人材は企業の資産です」と「企業は人材の踏み石」です。 YNKは、企業と候補者の両方の方向の話を一緒に聞く会社です。
次のキーの前にYourを付けると、ヘッダーは会社名YNKと同じになります。ワンサイトのボタンとハイライト文字にはオレンジ＃F16022が書かれています。この5つの手がかりが2つの提案の材料になりました。
TWO READINGS
ドアとドア、人と席の間を結ぶ線を描きます。手がかりの中で「二方向」とオレンジ色を前に立てました。
扉を開く鍵とその向こうの舞台を描きます。手がかりの中で「Next Key」と「ドア」を前に立てました。
5つの手がかりで、つながり、鍵、ドア、会話などの単語を選び、単語ごとに似合うシーンをイメージにしました。実際の人物写真なしで人と企業をつなぐ会社の雰囲気を伝えるためです。 2つの提案に使用されたシーンとナビゲーションフェーズで作成されたシーンを一緒に配置しました。
ワンサイトのボタンと強調文字に書かれたオレンジ＃F16022を目安にしました。赤い方に移して彩度を上げるとAの中のバミリアンになり、明度と彩度を下げるとBの中のエンバーになります。 A案はこの色をブルーアワーのチャコールの上に、B案は真鍮とエスプレッソブラックの間に置きました。
#FF5A36 H 11° · S 100% · L 61% A 中#F16022 H 18° · S 88% · L 54%ワンサイトのボタンとハイライト#C8501A H 19°・S 77％・L 44％ B忙しい・44%ブルーアワーの建築のような深いチャコールです。最初の画面とつながるシーン、最後の相談案内の上の闇を引き受けます。
紙・38％紹介とサービス、採用情報の土台です。白より一トン下げて紙のように見せさせました。
接続・9％ワンサイトのオレンジを赤い方に移した色です。リボンとボタン、タイトルのピリオドにのみ書き込みます。
第2面・6％サービスカードの第2面。背景とカードを区別するために、紙より1トン下げました。
補助文章・3％明るい背景上の補助文章とキャプションの色です。
闇・46％鍵と扉が置かれた闇です。最初のシーンとサービス、サーチコース、コラムシーンの背景。
紙・30％会社紹介と原則、約束カードの元です。
鍵・10％鍵の真鍮色です。数字とラベル、線画に書き込みます。
火種・8％ワンサイトのオレンジを火種のように下げた色です。ボタンと強調した単語にのみ書き込みます。
補助文章・6％明るい背景の上の補助文章の色です。
色見本を押すと、HEX値がコピーされます。スウォッチ内の数字は、その上に上げる文字色との明度対比です。
A案はPretendard一つで英文タイトルとハングル本文の両方を書きました。太字500の英文タイトルを字間-6.5%まで絞り、建築誌の見出しのようにしっかりと立てました。 Bアンは英語のタイトルにInstrument Serifイタリックを書き、ハングルはPretendardに合わせました。ペンで書いたようなイタリックが鍵とドアの古典的な雰囲気を作り出します。
字間0％THE RIGHT
CONNECTION.
Y · N · KYour Next Key
3つの単語の頭文字は真鍮色で塗られ、会社名YNKが最初に読まれるようにしました。
500 ·字間-6.5%私たちは履歴書を超えた可能性を見ます。
A案はハングルのタイトルにも同じ太さと字間を使って英文のタイトルと一塊で読むようにしました。
700最高の人材と最高の企業が
会うドアがあります。
B案は1単語だけエンバーで塗り、文章の中で鍵の言葉をつかみます。
tabular0ワン 7 Steps 5 Steps
候補者サービス費用、サーチ段階、評判照会段階をセリフ数でまとめました。
二つの提案を比較する際、メニューや受付方式の違いが判断をぼかさないように、GNBとフッター、相談受付窓を共通ファイル一つにして二つの提案を一緒に書くようにしました。メニューや受付窓が開いたらページスクロールがロックされ、B案はスムーズなスクロール演出も一緒に止まります。共通ファイルのクラスと変数にynk-接頭辞を付けて提案のスタイルと混ざらないようにしました。
header.php共通GNBロゴとメニュー4本、受付ボタンです。下にあるシーンが暗いか明るいかによって、文字の色が変わります。
A · THE RIGHT CONNECTIONメイン画面両方の提案で唯一の異なる層です。同じメニューと同じ受付窓の間で最初の画面とシーンだけが変わります。
footer.php · apply.php共通フッタ・受付窓フッターとフローティング相談ボタン、キャリア相談と企業採用相談の2種類の受付窓です。
ONE FORM, TWO VISITORS
受付窓口はキャリア相談と企業採用相談の2種類に分かれています。提案の受付はサーバーに保存せず、名前とメール、相談内容を確認した後、メールアプリで下書きを渡します。右側に名前を入れると、メールの件名がどのように作成されるかがわかります。
A NEW POSSIBILITY
次の話を聞いてください。
5つの手がかりを連結で読んだ提案と鍵で読んだ提案です。下の録画は、2つの提案のメインページを上から下にスクロールした画面です。シーン名を押すと、PC画面と携帯電話画面が一緒にそのシーンに移動します。
人と企業の間の接続をオレンジ色のリボンの1つとして示す方向。ブルーアワーのソウルの上にリボンが通る最初の画面から始まり、スクロールに沿って戻る3Dリボンが理解し、つなぎ、前進する3つのステップを示しています。サービスは、横向きのカードを3枚にまとめました。
提案Ａのシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。
ブルーアワーのソウルの上にオレンジ色のリボンが通り過ぎ、大きな英語のタイトルが画面の左側を埋めます。
会社の考えを込めた最初の文章は、スクロールに沿って文字色が順番に埋められます。
3Dリボンがスクロールに沿って回り、接続の最初のステップである理解を示しています。
リボンが互いを交互にして人と機会が続く瞬間を描きます。
最後の段階では、リボンは前方に伸びる形に変わります。
垂直スクロールが水平移動に変わり、サービスカードの3枚が順番に進みます。
会話写真とともに「答えを探す前に、あなたを聞きます」という態度を紹介します。
画面いっぱいのオレンジ色の上からキャリア相談と企業採用相談を並べてご案内します。
ワンサイトの紹介文「最高の人材と最高の企業が出会う扉を開きます」をシーンに移した方向です。最初の画面で真鍮の鍵がドアに差し込まれ、ドアが開き、画面が明るくなります。鍵穴の形で開かれるしきい値の写真、ダイヤルのように戻る4つの原則、企業と候補者の2つの長さのインタビューで会うサーチプロセスが次々と続きます。
B案のシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。
最初の画面の真鍮の鍵は180枚のフレームで描かれ、スクロールを下げるとドアに向かって動きます。
鍵が門に近づいている間、「最高の人材と最高の企業が出会う門」という文章が置かれます。
鍵が鍵穴に差し込まれ、門の隙間に光が漏れます。
鍵穴状の窓の両側に企業に言う言葉と候補者に言う言葉が置かれます。
鍵穴が画面いっぱいになると、青銅のドアの前に立った人の後ろ姿が現れます。
Executive Search、Reference Check、HR Consulting カードが重なり、線画が描かれます。
4つの原則がダイヤルのように1マスずつ戻って合わせられます。
企業と候補者の2つの長さのインタビューで1つにまとめられます。
動きは会社の言葉を伝える時だけ書くことにしました。 2つの提案の中で重要なシーンを選び、そのシーンがなぜそんなに動くのか尋ね、答えをまとめました。カード内のシーンは、このページでもスクロールまたは押すことで直接移動できます。
01 UNDERSTANDA.接続には始まりと終わりが別にないという考えを込めました。リボンはトーラスの結び目曲線に沿って途切れることなく戻り、スクロール位置に合わせて8秒のシーンの1フレームを表示します。すべてのフレームをキーフレームにエンコードしてスクロールを逆に上げてもすぐに反応します。
F 001 / 180A.ワンサイトの紹介図表の真ん中には金色の鍵があり、その隣に「最高の人材と最高の企業が出会う扉を開きます」という文章があります。この2つを最初のシーンにまとめました。鍵と青銅の扉、光が漏れる扉をThree.jsで直接作り、180枚のフレームでレンダリングし、スクロールを下げると鍵が戻って上がれば戻ります。
A. 3つのサービスを同じサイズのカードに並べて置き、どちらもそれほど重要ではないようにしました。 PCでは縦スクロールが水平移動に変わり、カードが一枚ずつ通過し、携帯電話では指でめくるか、矢印ボタンで移動します。
A.最初のシーンで開かれたドアの内側を示すシーンだからです。鍵穴の形の窓が画面いっぱいになると青銅門の前に立った人の後ろ姿が現れ、窓の両側には企業にする言葉と候補者に言う言葉が一つずつ置かれます。
A.「私たちは履歴書を超えた可能性を見ます」という文章を読む速度に合わせるためです。スクロールを下しただけに文字が濃くなり、訪問者が会社の考えを一言ずつ読みます。
ポジションの役割と組織の方向をまず理解し、それに合ったサーチ戦略を立てます。
A.Bの原則シーンのタイトルは、「4つの原則が1つの結果を作成する」です。ダイヤルの真ん中に鍵穴を置き、Thoughtful PlanningからOur Guaranteeまで4つのマスを1つずつ回して揃えました。左ダイヤルはボタンを押して直接回すことができます。
FOR EMPLOYERS
FOR CANDIDATES
A.企業と候補者は異なる場所から出発するためです。元サイトのFor EmployersとFor Candidatesガイドに分かれていた段階を2本の線に、そして2本の線がインタビューで会って契約と事後管理につながりました。このページが付いてきた7段階も上線、企業の過程からもたらされました。
採用公告を確認して履歴書を送ることは、携帯電話で始まる場合が多いです。どちらの提案も、携帯電話の画面を別々に設計しました。 B内のキーフィルムは縦画面用のフレームを別々にレンダリングし、A内のサービスカードとB内のコラムリストは指でめくります。
どちらの提案も同じ会社を紹介しますが、最初の画面で何を言うのかが異なります。会社が訪問者に一番最初に伝えたい言葉が何であるかによって選べるように違いをまとめました。
REFERENCE CHECK
YNKは採用を決定する前に候補者の評判を確認します。どちらの提案も、顧客に送信する前に同じ項目で確認しました。
PC、タブレット、携帯電話の画面でページが水平にあふれていないことを確認しました。
モーション削減設定では、固定シーンとビデオをオフにして、すべての内容を順番に表示します。
メニューと受付ウィンドウはESCで閉じ、閉じた後は最初のボタンでフォーカスが戻ります。
受付窓口は、名前とメール、相談内容を確認した後にのみメールアプリを開きます。
共通GNBとフッター、受付窓の補助フレーズを全て14px以上に合わせました。
募集可否は採用掲示板で確認するよう案内し、B内のポジションカードには登録日を一緒に記入しました。
ホームページは一緒に働く人が会社に初めて会うところです。
会社がすでに書いてきた言葉と色から出発し、その言葉が一番よく聞こえる画面を一緒に探します。
メディア・制作会社
DOREMI ENTERTAINMENT
ドラマ・OST制作会社のWebサイトリニューアル提案です。ロゴの中の青緑の台形を映写機の光として、社名をド・レ・ミの三つの音として読みました。一つの青緑から分かれた2つのパレット、シーンリストとして書いた情報構成、SCENE & SCOREとSTORIES THAT STAYの2案、ブランドフィルム2本まで収めています。
公共・教育
Korean Education Center in Malaysia
韓国教育部の在外教育機関のWebサイトリニューアル提案です。ハングルを生んだ三つの画「天・地・人」から出発しました。夜空のゴールドと両国の花のコーラルで決めたカラー、18秒のモーションフィルム、天地人とコーラルジャーニーの2案、ハングル学校の地図と4,600kmの留学の旅まで収めています。
教育・学校
Gyeonggi Global School
キリスト教系オルタナティブスクールのメインページのリニューアル提案です。信仰と世界を「一つの点から世界へ」という物語で結び、ネイビー・ゴールドとウルトラマリンのカラー、光（LUMEN）と地平線（HORIZON）の2案、スクロールモーショングラフィックスまで収めています。
Contact
現在の状況と目標をお聞かせください。 実現可能な範囲、進め方、概算費用をご案内します。
DIRECT
お問い合わせを受け付けました。営業日1日以内に作業範囲とお見積りをまとめてご返信します。