目次
◾️経緯 – 100周年に向けて、学園が社会へ提供していく価値を定義するプロジェクト
まず、このプロジェクトはどういう経緯でお話が来たのでしょうか。
パーヤン：今回のお話は、以前SHIFTBRAINさんが主幹で制作した八文字学園の関連会社『College 8』のミッション・ロゴ・ウェブサイト制作を評価いただいたことがきっかけでした。ここでは私がコンセプトメイク、コピーとディレクション、中川さんがアートディレクションとデザインを担当しており、その流れから今回の「八文字学園70周年プロジェクト」をご依頼いただくことになりました。
プロジェクトの背景ですが、八文字学園は経営や学校の在り方などさまざまな面で「世代移行のタイミング」を迎えており、これまでの専門学校教育からより実学を重視し、社会や産業と連携した学びへと教育改革を進めている最中でした。そこで70周年という節目に、単なる周年サイトではなく「100周年に向けて、学園が社会へ提供していく価値」を改めて定義するところからプロジェクトが始まりました。
ここからどのようにプロジェクトを進めていったのでしょうか。
パーヤン：まず、八文字学園の未来を形にしていくために、こちらで用意した「理念作成シート」を元にした経営層へのヒアリングを実施しました。次に、改革を推進している各学校の校長先生や学科長との座談会を兼ねたヒアリングを実施。八文字学園が持つ強みや文化、これから実現したい未来について多角的に言語化していきました。
その中で見えてきたのは、八文字学園が「資格取得のための学校」ではなく「意志ある実学を通じて、人と地域・産業の未来をひらく存在」であること。また、卒業して終わりではなく、何度でも学び直しに戻ってこられる「学びの母港」という考え方も、八文字学園らしい特徴として浮かび上がってきました。
これを元に八文字学園の今と未来を整理していくことからはじめた
◾️MVV – クライアントが「自然に誇れる言葉」を掘り出すのがフィロソフィーライティング
ヒアリングで見えてきた八文字学園らしさ。そのらしさをどのように落とし込んでいきましたか？
パーヤン：ここからミッション・ビジョンの策定をしていきました。サイトのメインコピーについてはミッションをストレートに伝える案、学生に届きやすいキャッチーな案、遊び心を持たせた案などを幅広く提示し、クライアントと議論を重ねました。
そこから最終的に選ばれたのが「ヒト・ミト・シゴト。」です。人を育てること、水戸という地域とともに歩むこと、そして仕事や産業の未来につなげていくこと。八文字学園が大切にしている要素を短い言葉で表現できることに加え、語感が良く覚えやすい点も評価されました。
ビジョンにある「学びの母港」はクライアントから出てきた言葉だそうですね。パーヤンさんはXでも「事業体の当事者があくまで自然に誇れる言葉を掘り出すのがフィロソフィーライティング」とポストされていたのが印象的でした。
パーヤン：クライアントから自然に出てくる言葉こそ「彼ら自身が実際に使える言葉」だと思うんです。コピーは作って終わりではなく、実際に使われ続けることが大切ですよね。特に経営理念やMVVのような言葉は、キレイに整えることも大切ですが、それだけでは事業や組織の人格から離れすぎてしまう。そうなると結局誰も使わなくなってしまうんです。
MVVは、社長、経営層、重要なポジションの人たちが、自分の言葉として語り、それを組織全体へ浸透させていくもの。だからこそ、一つの正解を押し付けるのではなく「その組織が最も使いやすい言葉」をクライアントと一緒に選んでいく。そのためには、いかにクライアントからキーワードを引き出すか。何度も対話を重ね、様々な角度から深掘りをするなど……いつも試行錯誤しながらやっています。
◾️デザイン – 未来の八文字学園を表現する「イラストレーションの想像力」
中川さんは、メインコピーとして生まれた「ヒト・ミト・シゴト。」をビジュアルにどう落とし込んでいこうと考えましたか。
中川：このコピーが示す「人と人とのつながり」や「新しい価値が生まれていく様子」と、「学園」というテーマ性を考えたときに、イラストレーションを軸にしたポップで賑やかな雰囲気がしっくりくるんじゃないかと思いました。
また、未来へ向かっていく明るさも表現したい。一方で学園らしいアカデミックな印象も残したい。そのバランスをどう視覚的に表現するかを探っていきました。そこから目指す方向性を定め、先方と認識を合わせるためにイメージボードを制作しました。
この時点でイラストレーターの提案もしている
中川：こちらを元に、サイト全体のトーン＆マナーや温度感を共有した上で、デザインへ落とし込んでいきました。このタイミングでイラストレーターさんもご提案し、一番推していた仁太郎さんにお願いすることになりました。
ちなみに、この後に提案したデザインも、ほぼ今の形に近いですね。仁太郎さんにお願いすることが決まってからデザインを組み始めたんですが、仁太郎さんのイラストは「パース感のあるダイナミックな構図」が魅力で、その魅力を活かしたキービジュアルを表現したいと考えました。最終的なサイト構成も、この段階でほぼ固まっていました。スクロールの動きや、セカンドビューへのつながりなども、この時点で考えながら設計していきました。
パーヤン：このプロジェクトは周年回顧ではなく「未来の八文字学園」を見せていきたかったので、具体情報としての写真や文字よりも、イラストレーションによって見る人たちが学園の未来像を想像できるような、余白があると良いかな、と。
◾️サイトのポイント① – 「イラストの機能が変化する」スクロール体験
では、実際のサイトを見ながらお二人がこだわったポイントについて伺っていきます。今回サイトの中で一番印象的だったのが、ファーストビューからスクロールに合わせてイラストの役割が変化していく演出です。
中川：今回のような縦長サイトでは、情報を整理して世界観を作り込むだけではなく、スクロールする中で印象に残る体験をつくることも重要だと思っていました。当初は5つのイラストを一枚のKVとして見せる案もありましたが、それだけでは一度見て終わってしまう。なので、5つのイラストがサイト内を移動しながら「役割」や「意味」を変えていく演出にしてみてはどうか、と。
また、このイラストが連続して現れることでサイト全体に「ストーリー性」が生まれ、単なる装飾ではなく「コンセプトを伝えるためのビジュアル」として機能させることができるのではと考えました。
なるほど。「スクロール体験」と「ストーリー性」。
中川：スクロール体験によって、読み進める中で自然とサイトやコンテンツに注目してもらうことができると思うんです。各セクションの動きがつながって、一つのストーリーとして展開していくと、「次はどうなるんだろう」と感じながら読み進めてもらえると思うんですよね。
なお、ここで使われているイラストは、5つの専門学校それぞれに対応しており、そうすることで各学校のカラーが明確になっています。
中川：仁太郎さんのイラストは、一枚一枚のインパクトがすごく強い。だからこそ、一度に全部見せるより、一枚ずつ切り替わっていくほうが、それぞれの魅力をより感じてもらえるんじゃないかと思いました。
パーヤン：最終的にイラストが落ち着くAboutセクションの水戸の地図も、必ずしもコンテンツとして必要だったわけではないのですが、八文字学園らしい地域性を表現するためには「水戸」という場所を印象づけるべきだと思って地図を入れています。「水戸という地域性をしっかり伝えよう」という意図ですね。
◾️サイトのポイント② – 装飾パーツや各セクションの「読ませるリズム」
パーヤン：サイト全体に配置されている幾何学模様のパーツは、仁太郎さんのイラストに合わせて中川さんがデザインしています。こうした装飾パーツを組み合わせるところが中川さんらしい。
中川：仁太郎さんのイラストは少しざらっとした質感やノイズのようなテクスチャーが特徴です。そこから着想を得てカラフルなパーツを散りばめています。そうすることで、デザイン全体にリズムが生まれることを狙いました。
パーヤン：イントロダクションの本文も、実装まで進めて実際に見返したとき、「ちょっと文章が長いな」と感じたので、重要な部分だけ青字で強調するようにブラッシュアップしました。この4か所だけ読めば、大事なことは伝わるようにしよう、と。
続いてヒストリーのセクションですが、このコバルトブルー系のセクションが全体の中でいいリズムを出していますね。挿入でデザインがガラっと変わり、視点の流れが縦から横になり、スクロールの手が止まる。読ませるリズムが生まれているなと。
パーヤン：ここのコンテンツ演出も印象的ですね。スクロールに合わせてカードが現れてくる動きがいいアテンションになっています。こうした細かな表現の積み重ねによって、情報を見せるだけではなく、ブランドの空気感まで伝えられるサイトになったな、と。
中川：ここは初回だけカードが少し傾きながら登場する演出になっています。このデザインには、そういうアニメーションが合うなと思いました。
パーヤン：また、数字で見る八文字学園のコンテンツも重要です。こういうブランドサイトは世界観だけだと少し薄く見えてしまうことがあるんです。その点、数字で裏付ける情報があると信頼感を与えられる。全部をじっくり読んでもらうというより「ちゃんと実績があるんだな」と流し見でも伝わることを意識しています。
「教職員の声」にしても、全体的にセクションごとのリズムが心地いいですね。
パーヤン：リズムがありますよね。ここも中川さんのデザインアイデアです。このコンテンツは、内容をじっくり読んでもらうというより「先生たちがコメントしている」ということ自体に意味があると思っていました。5つの専門学校それぞれの先生が登場することで、教職員にも「自分たちのサイトだ」と感じてもらいやすくなる。どちらかというと、インナー向けの意味合いが強いコンテンツですね。でも蓋を開けてみると、みなさんとてもいいコメントをくださいました。
◾️サイトのポイント③ – デザインから演出を読み取る「デザイン読解力」
最後の「Vision Beyond 100」では、100周年に向けて目指す未来を伝える構成になっています。
中川：ここは開発担当の王生さん（シフトブレイン）が気持ちよく実装してくれました。僕は「左右から交互に出てくる感じがいいですね」くらいしか伝えていなかったんですが、すごく良い形に仕上げてくれました。
実装面でもアイデアが加わっているんですね。
中川：そうですね。ホバーまわりも基本的にはお任せでしたし、ヒストリーのカードが少し傾きながら登場する演出も、「そんな感じになったらいいな」と思っていたことをそのまま形にしてくれました。
パーヤン：「デザイン読解力」ですね。カードが重なっていくデザインも、中川さんらしくて格好いいし、王生さんのデザイン読解力が活きている。
デザイン読解力。いい言葉ですね。
中川：シフトブレインさん主幹でシフトブレインメンバーともお仕事するときは、同じチームではありながらも、同じ会社のメンバーとは少し距離感が違います。だからいつも「どこまでお願いしていいかな」と考えながらコミュニケーションを取っているのですが、その点、王生さんのような「デザイン読解力」があると進行がスムーズになりますね。
そして最後の、まさに走り出すようなイラストが印象的ですね。
中川：ここはパーヤンさんと「最後に締め感を出したいよね」と話しながら決めた部分です。ここの演出も王生さんです。イラストが上がってきたタイミングで「レイヤーを少しずらして動かしたら面白いかもしれない」と話していたんですが、そのアイデアを実装で形にしてくれました。
パーヤン：実はこのビジョンを締めくくるイラストが、ミッションのイラストを正面から見た構図になっているんです。「ここからまた未来へ進んでいく」という感じが出ていますよね。
◾️コピー、ビジュアル、インタラクションをひとつの「ストーリー」としてつなげる
制作プロセスにおいてのポイント、苦労したことなどはありましたか。
パーヤン：今回特に意識したのは、最後まで飽きずに読み進められるサイト構成です。70周年というテーマは情報量が多くなりがちですし、読み応えのあるコンテンツも多かったため、文章量やコンテンツの配置、見せ方のリズムにはかなり気を配りました。ブランディングサイトとして、伝えるべき情報はしっかり伝えながらも、体験として心地よく読み進められる構成を目指しています。
あと今回、全体の流れ的にもちょっとしたチャレンジをしてみました。最初に「ミッション」を伝えて、その後に各種取り組みを紹介して、最後は未来の「ビジョン」で締める。ミッションとビジョンを「並列に見せる」のではなく「ストーリー」として組み立てられたのが良かったと思っています。
パーヤン：ビジュアル面で印象に残っているのはやはりファーストビューですね。仁太郎さんのイラストと、コンセプトをビジュアルへ落とし込む中川さんのアートディレクション力が存分に発揮されています。コピー、ビジュアル、インタラクションがそれぞれ独立するのではなく、一つのストーリーとしてつながっているところが、このサイトの大きなポイントだと感じます。
中川：縦長サイトなので、多くの情報を整理しながら単調にならないよう世界観を維持することに特に気を配りました。読みやすさを維持しながら、ビジュアルとしての心地よさのバランスを探る作業は、最後まで試行錯誤を重ねた部分だったと思います。
やはり仁太郎さんに制作いただいたイラストと、それを活かしたキービジュアル〜Aboutセクションへ流れる演出ですね。パースを効かせたダイナミックな構図のイラストによって、サイト全体に独自の世界観と奥行きが生まれたなと。また、その魅力を最大限に引き出すために、モーションの細かな部分は王生さんが何度も検証と調整を繰り返してくれました。抽象的なオーダーになることも多かったのですが、意図を汲み取りながら丁寧に形にしていただいたので、視覚的な心地よさと楽しさが両立したサイトに仕上がってると思っています。
◾️クライアントが「考える余白」をつくり、一緒に選びながらつくっていくから、納得感のあるものになる
このプロジェクトを通して得られたことはありましたか？
パーヤン：今回改めて感じることができたのは、良いアウトプットをつくるためには、まずクライアントと視座を合わせることが重要だということです。
ブランディングやコンセプト設計においては、制作者側だけが正解を持っているわけではありません。クライアントが目指したい未来や抱えている課題を深く理解し、その上で一緒に答えを見つけていくことが大切だと思っています。その点、今回のプロジェクトでは、丁寧に対話を重ねながら進めることができたため、高い信頼関係のもとで制作を進行することができました。
中川：僕が今回のプロジェクトで改めて大切だと感じたのは「言葉とビジュアルの関係性」です。今回は「ヒト・ミト・シゴト。」というコピーがあったからこそ、表現の方向性をぶらさずに、ビジュアルやモーションに意味を持たせることができた。
というのも、「ヒト・ミト・シゴト。」というカタカナのコピーが、グラフィックとしてすごく扱いやすかったんですね。右下に縦組みで配置しているコピーも、イラストが決まる前の段階で最初に作っていたんです。まずこのタイポグラフィを作ってみることで、サイト全体の温度感や雰囲気がなんとなく見えてきた。
そこから「こういうイラストが入って、このように動いたら気持ちいいな」というイメージが自然に広がっていきました。また、このコピーからは、クライアントが何を求めているのかも分かりやすかった。そう考えると、今回のデザインの出発点は「ヒト・ミト・シゴト」という言葉自体にあったんだと思います。
おふたりがクライアントワークにおいて大事にしていることはなんでしょうか。
パーヤン：今回のプロジェクトでは、こちらから一つの正解を提示するのではなく、複数の方向性を提案し、クライアントと一緒に選びながらつくっていくプロセスを大切にしました。その結果、完成したアウトプットだけでなく、「どの言葉が自分たちらしいか」「どの未来を目指したいか」を考える時間そのものが、クライアント満足度の向上につながったように感じています。やはり「自分たちで選ぶ楽しさ」や「納得感」は大きいですね。
例えばコピーも、A案・B案・C案のように複数の方向性を提案します。それぞれに、「こちらはこういうことが伝わる」「こちらはこういうメリットがある」と背景まで含めて説明するんです。例えば、「ヒト・ミト・シゴト。」をメインコピーにすることもできるし、「学びの母港」を前面に出すこともできる。どちらにも良さがあります。だからこそ、それぞれのメリット・デメリットを伝えた上で、「今回のサイトで何を一番伝えたいのか」というポイントを、クライアントに考えていただくことが大事だと思っています。
クライアント自身が考え、選ぶ時間を持つことで、より納得感があり、愛情を持てる言葉になると。ある意味、ワークショップ的な手法といいますか。
パーヤン：そうですね。ただ一方的に提案するのではなく「クライアントも一緒に考える」。そのプロセスを経るからこそ、自分たちの言葉として受け入れられるんだと思います。
中川さんはいかがですか。
中川：僕はいつもデザイン以前に「なぜそれをつくるのか」を理解することを大切にしていて、クライアントからの要望に応えることはもちろんですが、できるだけ対話の中で解像度を高め、彼らが本当に目指している姿まで掘り下げて考えるからこそ、より本質的な提案ができると思っています。
クライアントワークは単に依頼を受けて制作する関係ではなく、一緒に課題を解決していく共同作業。だからこそ対話を重ねながら認識を揃え、同じ方向を向いて進めることが重要なんじゃないかと思います。理想的なのは、最終的なアウトプットだけでなくそのプロセス含めて良い体験になることですね。何年やってても毎回それが難しいところなのですが。
中川さんは以前Podcast「米の道端会議」で「コンセプトの先にある軸を定めることが大事」とおっしゃていましたね。
中川：そうですね。例えば、今回であれば「70年の歴史を振り返る」ことではなく「その先の未来へつなげていくこと」。その軸があるから、レイアウトやモーション、イラストの使い方まで、未来への広がりや前向きなエネルギーを感じられる方向へと積み上げていくことができるんです。
コンセプトはプロジェクトの方向性を示すものですが、軸は制作における「あらゆる判断基準」になるものだと思います。制作を進めていると表現や演出など、アイデアがどんどん広がっていくことがありますが、軸が定まっていないとそのアイデアが本当にプロジェクトに適しているのかが判断できなくなってしまう。
一方、軸が明確だと、迷ったときに立ち返ることができますし、その軸をぶらさずにアイデアを広げていけば大きく方向性を踏み外すこともありません。コピーや言葉との結びつきも自然と生まれるので、表現全体に一貫性が出てくると思います。
中川さんは昨年、CREATIVE CLASSでも講師をしていただきましたが、その際も「なぜそうするのかを言葉にできるかが大事」とおっしゃってましたね。「でも、その“なぜ”を探るのはすごく難しい」とも。
中川：「なぜ」を探ることは、コンセプトをつくるためというより、「なぜこのデザインなのか」をきちんと説明できる状態をつくることだと思っています。その「なぜ」が見えてくると、プロジェクトの軸が自然と定まって、表現全体に一貫性が出て説得力が生まれます。
そのためには、クライアントと対話を重ねながら課題を理解し「どう表現するか」を考えることが大切ですが、そのときに既存のロールモデルや流行に当てはめるのではなく、そのプロジェクトだからこそ自然で、一番伝わる表現を探し続ける。そうやって突き詰めた結果として、これまでにないアウトプットが生まれるのが理想ですね。
最後に、お二人の今後の展望について聞かせてください。
パーヤン：独立してからの3年で一番変わったのは、「機能するもの」「ビジネスに寄与するもの」をつくることへの意識が強くなったことですね。元々は「美しいもの」「格好いいもの」が好きで生業に選んだ仕事ですが、アウトプット自体ではなく企業活動にそれがどう寄与するかの比重が自分の判断軸で大きくなっています。
その意味でも、MVVの策定にはとてもやりがいを感じています。その先にある企業のブランド形成を継続的に支援する仕事にも挑戦してみたい。MVVをつくって終わりではなく、その言葉が組織に根付き、企業活動へ反映されていくところまで伴走していけたら面白いなと。
CHO-Pのあり方については、まだ答えを探している最中ですね。一人だからこそのフットワークや、案件ごとに最適なチームを組める面白さを感じる一方で、これまで多くの師・先輩方に育ててもらった立場として、自分の経験を次の世代へどう還元していくかが難しい。本当に高いレベルを安定して目指すには、いわゆる社長がいて社員がいて「同じ釜の飯を食う」「一蓮托生」の仲間と積み重ねていく「組織の強さ」も痛感するところです。これから数年かけて自分なりの答えを見つけていきたいですね。
中川：独立して9年になりますが、今でも「全然ダメだな…」と自分で感じることの連続で、その度に自分が嫌になることもあります（笑）。でも、そんなふうに悩んでばかりもいられないので、大きく何かを変えようとは思っていませんが、これまで以上にものづくりを純粋に楽しめる時間を大切にしたいなと思っています。
先日「Engineer Sessions」というイベントを開催するなど、活動も活発だ
あと、やっぱり僕はNautsという場をもっと面白い場に育てていきたいですね。デザインやものづくりが好きな人たちが気軽につながって、お互いに刺激を受けたり、新しい挑戦が生まれるようなコミュニティになると面白いと思っているんです。自分自身もそうした繋がりからフィードバックをもらいながら、引き続き楽しんでものづくりをしていけたらと思っています。
Client：Yatsumonji-Gakuen incorporated educational institution
Producer：Tamami Maekawa (SHIFTBRAIN Inc.)
Director, Planner, Copy Writer：Pahyan Kitagawa (CHO-P inc.）
Art Director, Designer：Hirofumi Nakagawa（ANDMADE Inc.）
Developer：Serika Ikurumi (SHIFTBRAIN Inc.)
Interview Writer：Sakura Sugawara（freelance）
Illustrator：jintaro（vision track）
Photographer：Kenichi Aikawa（freelance）
Agent：Yukari Murayama（vision track）
