企画がデザインになるまで ─ CREATIVE CLASS『ロジックとセンスのデザインブート』コース編

参考になりそうなサービスを探し、レイアウトを考え、色や書体を選ぶ。
UIを整えながら、少しずつ完成形へ近づけていく。
それらはもちろん、デザインに欠かせない仕事です。

けれど、ひとつのデザインが形になるまでには、その前にもっと長い時間があります。

何に違和感を持ったのか。その違和感は、なぜ生まれているのか。誰にとっての課題なのか。既存のサービスでは何が解決されていないのか。そして、どんな体験へ変われば、その問題を違う角度から捉え直せるのか。

そうした問いを積み重ねた先で、ようやく「どんな形、色、言葉、動きとして人へ届けるのか」というデザインの話につながっていきます。

CREATIVE CLASSで開講した田渕将吾のコース『企画からビジュアルまで突き通す─ロジックとセンスのデザインブート』では、9名の受講生がWebやアプリなどのデジタルサービスを題材に、企画背景からUIまでを約3か月かけて一貫して設計しました。

扱ったテーマは、SNS、金融、動画、観光などさまざまです。
ただ、最初から「新しいアプリを考えてください」とはしませんでした。

まず日常の中にある違和感を観察し、その背景を調べる。そこから問いを立て、できるだけ多くの方向へ発想を広げ、一つの企画へ収束させる。さらに、その企画を実際に使ったときの体験へ変え、情報構造やワイヤーフレームをつくる。

そこまで進んで、ようやくムードボードやビジュアルデザインを考えました。

一度決めた企画を大きく変えた人もいれば、途中で最初の違和感へ戻ってきた人もいます。
画面をつくったことで、それまで気づかなかった企画の矛盾が見えたこともありました。

デザインは、一直線に完成へ向かうものではありません。

考え、つくり、違和感を覚え、また考え直す。その往復を繰り返しながら、少しずつ「なぜこのデザインなのか」が強くなっていく。

この記事では、9つの企画を通して、そのプロセスを振り返ります。

Step1 違和感から始める

「何をつくるか」の前に、「何が気になるか」を探す

企画を始めるとき、つい「こういうサービスがあったら便利そう」「こんな機能があれば面白そう」と、解決策から考えたくなります。
けれど、最初から答えを探してしまうと、自分がすでに知っているサービスの延長線上へ発想が寄りやすくなります。

そこで最初のSessionでは、何をつくるかを決める前に、普段使っているサービスやプロダクトを振り返り、自分自身がどんな瞬間に感情を動かされているのかを観察しました。

便利だった、使いにくかった、という評価だけではありません。いつ使ったのか、その前に何をしていたのか、どの瞬間に少し気持ちが変わったのか。そして、なぜその出来事だけが自分の中に残っているのか。

この段階で重視していたのは、企画として面白そうかどうかよりも、本人自身が本当にそこへ違和感を持っているかでした。

それぞれの出発点

熊藤さんが気になったのは、キャッシュレス決済によって「お金を使った日」と「実際に口座からお金が減る日」がずれていることでした。

口座残高は見えているのに、「今、本当にどれくらい使っていいのか」は分からない。家計簿は過去のお金を整理してくれますが、未来を含めて現在の判断を助けてくれるとは限りません。

山中さんの出発点は、現在暮らしている網走で耳にする「何もない」という言葉でした。

観光PRであれば、「実はこんな魅力があります」と否定したくなる言葉です。でも、なぜ地元の人まで「何もない」と言うのか。そもそも、その言葉は本当にネガティブなものなのか。

この段階では、どちらもまだサービスのアイデアではありません。
「では、未来残高を出すアプリをつくろう」「何もないことを売りにした観光サイトにしよう」と、すぐに答えへ進まない。
まずは、自分の中に引っかかっていることを、そのまま残しておきます。

小さな違和感は、解決策を思いつくとすぐに消えてしまいます。
でも、そこで少し踏みとどまり、「なぜ自分はこれが気になったのか」を考え続けると、その奥に別の問題が見えてくることがあります。

デザインの企画は、最初から良いアイデアを出すことから始まるとは限りません。

まだうまく説明できない違和感を、簡単な答えで消さずに持っておく。
今回の講座では、そこを最初のデザイン行為として扱いました。

Step2 違和感を、問いへ変える

リサーチと、その目的

違和感が見つかったら、次にリサーチを行います。

市場や競合を調べ、ユーザーがどんな行動をしているのかを知り、社会の変化と照らし合わせる。

ただし、目的は情報をたくさん集めることではありません。
調べたことによって、最初に持っていた問いそのものを更新することです。

この段階では、対象となる領域の「王道」をかなり細かく見ました。どんな価値が一般的に提供されているのか。どんな機能や画面構造が当たり前なのか。ユーザーは何を期待してそのサービスを使い、事業者は何を成果としているのか。

まず普通を知る。
その上で、自分たちはどこを違うものとして提案するのかを考えます。

「普通」を知ると、ずらす場所が見えてくる

岡本さんが企業SNSの運用を調べたとき、最初に見えていたのは、投稿ネタを継続して考える負担や、フォロワー数・エンゲージメントといった運用上の課題でした。

そのまま進めば、AIで投稿づくりを効率化するサービスになっていたかもしれません。

ところが既存ツールを調べると、その領域にはすでに多くの解決策があります。そこで、「本当に支援したいのは投稿をつくることなのか。それとも、その先にいるファンとの関係なのか」と問いが変わっていきました。

最終的には、「何を投稿するか」ではなく、「今日は誰と、何を話すか」を中心に据えたSALADA LOOPへつながっています。

上村さんも、「動画を見すぎてしまう」という問題からスタートしました。

利用時間を制限したり、アプリを強制的に閉じたりする方法はすでにあります。でも、その問いのままでは、動画を見ること自体を悪い行動として扱ってしまう。

そこで、「どうすれば動画を見なくなるか」ではなく、「映像の世界から、どうすれば心地よく日常へ戻れるか」へ問いを置き直しました。

長井さんも同じです。

最初は、お金への不安を「金融知識の不足」と捉えていました。しかし調べるほどに、知識が増えることと「私は大丈夫」と感じられることは別なのではないか、と考え始めます。

そこから、正しい金融行動を教えるのではなく、自分なりに納得できる状態をどうつくるかがROOTEDの中心になりました。

答えより先に、問いを更新する

リサーチをした結果、最初の仮説が崩れることがあります。

それまで考えていたアイデアが使えなくなることもある。
でも、それは失敗ではありません。

むしろ「問題だと思っていたことの奥に、別の問題があった」と分かったこと自体が、この段階での大きな前進です。

デザインでは、良い答えを早く見つけること以上に、何に答えるべきなのかを更新し続けることが重要なのだと思います。

Step3 一度、答えから遠ざかる

最初に思いついた答えを、正解にしない

問いが明確になると、次は「では、どんな機能が必要か」と考えたくなります。

ただ、ここですぐサービスの形へ進むと、せっかく問いを更新しても、また既存サービスの延長へ戻ってしまうことがあります。
そこで一度、答えから意識的に距離を取りました。

一つの問いから、数案ではなく、できるだけ多くの方向を考える。別の業界の仕組みを借りたり、自分自身の原体験を思い出したり、ネガティブなものを反転させたり、時間や人間関係のあり方を変えてみたりする。

すべての案を採用するためではありません。
最初に思いついた答えだけを、無意識に正解にしないための発散です。

別の場所から、構造を借りてくる

熊藤さんの企画で大きなヒントになったのは、家計簿ではなく「天気予報」でした。

私たちは降水確率という数字そのものを知りたいのではなく、それを見て「傘を持っていこう」「洗濯物は室内に干そう」と、その日の行動を決めています。

それなら家計簿も、過去を詳しく説明するのではなく、未来を見通すことで今日の判断を助けるものにできるのではないか。

別分野の構造を持ち込んだことで、家計簿を見る視点そのものが変わりました。

謝さんのAmbiでは、SNSとはまったく違う「部室」がヒントになっています。

部室では、ずっと話している人だけが参加者ではありません。静かに誰かの話を聞いている人も、同じ場所にいることで場の一員になれる。

その関係性をSNSへ持ち込むことで、「発言しなくても参加できる」という考えが生まれました。

山中さんの場合は、何か別のものを足すのではなく、「何もない」という弱点そのものを反転させています。

何もないから、何もしなくていい。
足りないものを補うのではなく、すでにあるものを見る角度を変えました。

アイデアを飛躍させる「見る角度」

発想を飛躍させるというと、誰も見たことのない奇抜なアイデアを生み出すことのように聞こえます。

けれど、必ずしもそうではありません。

同じ業界の中から一度出てみる。別の体験と比べてみる。弱点だと思っていたものを、逆側から見てみる。
そうやって少し距離を取ることで、問いそのものは変えずに、答えの可能性だけを大きく広げることができます。

飛躍とは、遠くへ行くことではなく、今見ているものの角度を変えることなのかもしれません。

Step4 企画を、「使ったときの体験」へ変える

コンセプトだけでは、まだ体験にならない

言葉として企画がまとまっても、それだけではプロダクトにはなりません。

「好きな言葉が人と人を静かにつなぐSNS」というコンセプトができても、ユーザーが実際に何をして、何を感じるのかがなければ、その価値を体験することはできないからです。

そこで次に行ったのが、企画を画面で起きる出来事へ翻訳することでした。

すべての機能を考える前に、このサービスで最も価値が伝わる瞬間はどこなのかを決める。その体験に必要な情報を分解し、優先順位をつけ、ローファイのワイヤーフレームへ落としていきます。

「このサービスでしか起きない瞬間」を探す

石田さんのKousekiでは、その中心がとても小さな行為に集約されました。

本を読み、心が動いた一文に線を引く。そして後から、同じ一文に別の誰かも線を引いていたことを知る。

プロフィールを見るわけでも、フォローするわけでも、リアクションを送る必要もありません。
「同じ言葉に、誰かも立ち止まった」
その事実だけで人の存在を感じる。この瞬間が見えたことで、抽象的だった「静かなつながり」が具体的な体験になりました。

田中さんのPLAYCEでは、一般的な動画サービスにある「視聴履歴」を、「何が自分に残ったか」という記憶へ置き換えています。

作品タイトルを残すのではなく、見終えた直後の、まだ言葉にならない感情を受け止める。その発想によって、画面の役割そのものが変わりました。

南雲さんのLoveClipでは、「好きなものを残す」という企画を、未来の自分に向けて、そのときの感情ごと集めていく体験へ変えていきました。

画面でも、好きなものが増えていく一覧では情報を密に見せる一方、ひとつの記録を振り返る詳細では、美術館で作品を見るように余白を大きく取っています。「集める時間」と「振り返る時間」で密度を変えることで、自分の「好き」と向き合う体験そのものをデザインしました。

「機能」と「体験」は異なる

企画をプロダクトへしようとすると、つい機能を増やしたくなります。

検索も必要かもしれない。記録もあった方がいい。共有も、分析も、設定も必要かもしれない。
でも、機能を増やすほど企画の中心が見えにくくなることもあります。

今回重視したのは、「何ができるサービスなのか」を増やすことではなく、「このサービスでしか起きない瞬間は何か」をはっきりさせることでした。

その瞬間が強ければ、必要な機能も、見せるべき画面も自然と絞られていきます。

Step5 言葉を、視覚へ翻訳する

同じコンセプトにも、いくつもの見た目がある

体験の流れが見えてきたところで、ようやく本格的にビジュアルへ進みます。
ただ、コンセプトが一つに決まったからといって、見た目まで自動的に決まるわけではありません。

「静か」「温かい」「余韻」「根づく」。
同じ言葉にも、さまざまな視覚的な解釈があります。

そこで、一つの企画から複数のムードボードをつくりました。

ひとつ目に思いついた「それっぽい世界観」で決めるのではなく、静かな方向、明るい方向、アナログな方向、テクノロジーを感じる方向など、意識的に距離のある案を並べて比較します。

「好き」ではなく、企画との相性で選ぶ

石田さんのKousekiでは、光、紙、余白、静かな読書空間といった要素を手がかりに、「好きな言葉を介して静かにつながる」という体験をどう視覚化するかを考えていきました。

ムードを探るうえでヒントとなったのが、「好きな言葉は光って見える」という感覚です。そこから、本の一文へ残す線を「光跡」として捉え、Kousekiを象徴する視覚表現へ発展させていきました。

ロゴやシンボルでも、ひとつの形をすぐに決めるのではなく、光、線、本、言葉に触れる指の動きなど、企画を構成する要素から複数の造形を検討しています。コンセプトをどの形なら最もKousekiらしく伝えられるか、視覚の側でも発散と収束を繰り返しました。

南雲さんのLoveClipでは、自分の「好き」を集めていく体験から、コレクションやライブラリ、美術館のような世界観を検討しました。

好きなものが増えていく楽しさを感じる一覧と、ひとつの記録へ静かに向き合う時間。その両方を成立させるため、情報が集積する密度のある見せ方と、作品を見るような余白のある見せ方を組み合わせています。「集める」と「振り返る」という二つの時間をどう見せ分けるかが、LoveClipらしい視覚の方向を決めていきました。

ムードを選ぶ基準は、「どれが一番好きか」ではありません。

この企画のどの側面を、最も強く感じてもらいたいのか。
その基準で比較することで、ビジュアルにも選ぶ理由が生まれます。

ビジュアルの、発散と収束

ムードボードは、完成画面を先に決めるためのものではありません。
企画をどんな感情として見せることができるのか、その可能性を一度広げるためのものです。

企画をつくるときに複数の方向を考えたように、ビジュアルもまた一度発散させる。その上で、企画との接続を見ながら収束していく。

言葉から見た目へ移るときにも、同じように考える時間が必要でした。

Step6 「好きなデザイン」を、細部まで分解する

「なんとなく好き」のままでは、自分のデザインに使えない

方向性が決まったあとにも、もう一つ大きな壁があります。

「こういうデザインにしたい」と理想像があるのに、自分でつくると同じ空気にならない。
参考サイトをたくさん集めても、その差が埋まらないことがあります。

それは、完成した見た目だけを見て、その見た目を成立させている細かな判断までは見ていないからかもしれません。

そこで講座後半では、ベンチマークを「見る」のではなく、かなり細かく分解しました。

余白、文字、色、動きまで分解してみる

画面左右のマージンはどのくらいあるのか。要素同士の余白はどう変化しているのか。見出しと本文のサイズ比、行間、字間、カードの角丸、枠線、シャドー、配色の比率、写真のトリミング、モーションの速度。

必要に応じて実際に模写しながら、「なぜこの画面を美しいと感じるのか」をパラメータまで落としていきます。

やってみると、自分が普段使っている余白よりずっと広かったり、思っていたより線が細かったり、シャドーがほとんど見えないほど弱かったりする。

「なんとなくいい」と感じていたデザインの裏側には、たくさんの細かな判断があります。

その判断を見つけることで、「センス」として一括りにしていたものを、少しずつ自分でも扱えるようにしていきました。

模写するのは、作品ではなく判断基準を学ぶため

模写というと、デザインそのものを真似するようにも聞こえます。
でも、ここで目的にしたのは完成形をコピーすることではありません。

なぜ、この余白なのか。
なぜ、この文字サイズなのか。
なぜ、この動きは心地よく感じるのか。

その背景にある判断を、自分の中へ持ち帰ることです。

作品を真似るのではなく、判断基準を学ぶ。
感覚で好きだと思ったものを、次の制作でも使える解像度まで観察する。
この工程が、企画と完成画面の間にある距離を少しずつ縮めていきました。

Step7 最後は、理屈を超えて美しくする

ここから、評価軸を変える

講座の前半では、かなりロジックを重視しました。

なぜこの問題なのか。なぜこのユーザーなのか。なぜこの機能なのか。なぜこの順番なのか。
それまでのSessionでは、説明できることを何度も求めてきました。

ただ、最後のデザインフェーズでは、評価の重心を意識的に変えました。

世界観が立ち上がっているか。見た瞬間に視覚的な主役があるか。余白や構図が美しいか。タイポグラフィに人格があるか。色や質感、動きまで含めて、その企画ならではの記憶が残るか。

ロジックは、デザインの根拠になります。
でも、根拠が説明できることと、人の心が動くことは同じではありません。

「この企画だから、この形」をつくる

Interludeでは、ムードボードの中にあった「夜明け」が、単なる背景色ではなく体験全体へ広がっていきました。

視聴中の暗い時間から、終了が近づくにつれて少しずつ光が差し、最後には日常の明るさへ戻る。その変化はUIだけでなく、ロゴ、通知、モーションにも共通して現れます。

SALADA LOOPでは、ファンとの関係を「つながる → 声を聴く → 一緒につくる → またつながる」という循環として捉えたことが、サービス全体のデザインにもつながっています。

企業向けの業務支援ツールでありながら、効率や分析だけを感じさせる無機質な画面にはせず、野菜やキッチンを想起させるモチーフや親しみのある表現を取り入れる。ファンとの会話を育てていくという企画の温度を、UIそのものにも持たせています。

ROOTEDでは、お金について「正解を知る」のではなく、数字を見ながら自分なりの納得へ少しずつ近づいていくことを視覚化しました。

「根ざす」という言葉をそのまま植物のモチーフに置き換えるのではなく、重なり、積み重なり、少しずつ満ちていく感覚へ抽象化する。金融サービスらしい信頼感を保ちながら、自分自身と静かに向き合う時間を感じられる造形へつなげています。

ほかの企画にも、それぞれの核が生まれていきました。

Horizonには、未来のお金の「余白」。
PLAYCEには、作品のあとに残る残光。
Ambiには、人の存在を感じる淡い気配と、終わりへ向かって広がる余白。

企画の中心にあった考えを、そのサービスにしかない光、形、密度、時間へ変えていく。
そこまでつながったとき、UIは単なる機能の器ではなく、その企画自身の表情になっていきます。

説明できるだけでは、まだ足りない

ここまで考え抜いたからこそ、最後は少し理屈から離れる必要もありました。

なぜこの色なのか。
なぜこの形なのか。
その理由を説明できることは重要です。

でも、それだけではまだ足りません。

見たときに何かを感じる。触れてみたくなる。あとから思い出せる。
デザインは、説明によって理解されるだけでなく、見た瞬間に人の感情へ届くものでもあります。

最後にデザインを決めるのは、そうした感覚でもありました。

同じプロセスから、9つの違う答えが生まれた

最後に残った、9つの提案

最終Sessionでは、9名がそれぞれ約20分を使い、自分の企画をプレゼンテーションしました。

講師として意識していたのは、できるだけ答えを渡さず、問いを返すことでした。

なぜ必要なのか。誰にとっての価値なのか。この画面で一番伝えたいことは何なのか。考え、つくり、また問い直す。その繰り返しの中で、最後には9名それぞれが、自分自身の言葉で「なぜこの企画なのか」「なぜこのデザインなのか」を話せるようになっていました。

方法を教えること以上に、自分で判断できるところまで一緒に問い続けること。今回の講座を通して、講師側にもそんな発見がありました。

それぞれの「次」へ

興味深かったのは、同じ講座でリサーチや発散、収束を繰り返しても、最後のアウトプットが似なかったことです。

何に違和感を持つのか。どこで問いを変えるのか。何を残し、何を削るのか。どんな状態を美しいと思うのか。同じ方法を使っていても、その一つひとつの判断には、その人自身が表れます。

方法を学ぶことは、答えを同じにすることではありません。むしろ、自分自身の答えへ辿り着くための判断軸を増やすことなのだと思います。

今回の講座を通して、違和感から問いをつくり、体験へ変え、最後は自分の感覚で形を決める。その考え方が、それぞれの中に残ったのではないかと思います。

デザインは、画面から始まるものではありません。でも最後には、画面や言葉、形として誰かに届かなければならない。

考えることと、つくること。ロジックと、感覚。
その間にある距離をどうつなぐのか。
9つの企画を通して、改めて考える3か月になりました。