デザイナーの中川です。
昨年から今年にかけて、CREATIVE CLASSにて中川博文先生の「面白さの種」を見つけて咲かせる思考術を受講しました。

これまでコンセプトを視覚で伝えることに課題を感じていたのですが、そんなタイミングで阿部さんに「こんなコースあるよ、受けてみたら?」と声をかけていただきました。つくる経験を増やせること、普段とは違う視点でフィードバックをもらえる機会が嬉しいなと思い受けることを決めました。ありがとうございます!


授業自体は隔週で90分全7回あり、最終回で制作物のプレゼンテーションを行います。
下記が課題で制作したサイトデザイン案や提案書になります。

講座では、コンセプトを起点にデザインをつくりあげる考え方とプロセスを学びました。課題を通して、どのように言葉やニュアンスを抽出してビジュアルに落とし込んでいったかを紹介します。

概要

CREATIVE CLASS(クリエイティブクラス)とは、「憧れのあの人」から直接フィードバックが受けられる次代を担うクリエイターのためのオンラインスクールです。私が今回受講したコースの詳細は下記になります。

本コースは、まだ誰も言葉にしていない「面白さの種」を見抜く視点を磨くことから始まります。このブランドづくりの出発点となるアイデアを、発散と収束を繰り返す中で具体的な形にし、潜んでいる可能性を見抜いて育てる力を養います。

さらに、デザインをブランドの本質を伝える手段として捉え、その力を拡張します。表に見えにくい言葉やニュアンスを丁寧に抽出し、それを「どう受け取り、どう翻訳するか」というプロセスを通してビジュアルへと展開。この一連の流れを体験することで、ブランドの世界観を力強く拡張していくための思考と技術を習得します。

CREATIVE CLASS コース詳細

CREATIVE CLASS サイト内画像

今回のコースでは、中川先生がANDMADE Inc.でアートディレクション全般を担当した「SATOYAMA TERRACE(サトヤマテラス)」を題材としてブランドサイト制作などの課題を進めていきます。サトヤマテラスは千葉の富津市にあるグランピング&サウナ施設になります。

元々行きたいなと気になっていたサウナだったので、今回課題で作成できることになり嬉しかったです!

今回私が受講したコースの中川先生の詳細はこちらになります。
中川先生が担当していた株式会社米コーポレートサイトのデザインを以前拝見してとても格好いいなと思っていたので、今回ご縁がありコース受講できて嬉しかったです!

中川 博文
ANDMADE Inc., Nauts
Art Director / Founder

X Instagram

2017年 ANDMADE Inc.を設立。クライアントと共にモノづくりをする共創のスタンスで、企業やブランド、製品などのブランディングに関わるWebサイトやデジタル施策のUI設計、ビジュアルコミュニケーションにおけるグラフィックまで、包括的にアートディレクションとデザインを行っている。

「種」を見つけるキーワード選定と方向づけ

1番最初の課題は、コンセプトを元にたくさんのキーワードを抽出し、その中から種になりそうなキーワードを3つに絞ること。ここで出したキーワードを軸にしてデザインを展開していきます。

キーワードを抽出する:30個以上「水」と「風」がもつ清らかさや流動性、千葉の富津市という開放的で自然豊かな風景から感じられる感覚を言葉(キーワード)に落とし込み、ブランドの本質や価値観を言語化する。

サトヤマテラスがある富津市の特徴や歴史、施設名にも入っている里山について調査を進めながらキーワードを出していきました。富津市は海と山に囲まれた自然豊かな場所にあります。サトヤマテラスもその地形や特徴を活かして設計されており、吹き抜ける風を味わえるように柱のない大屋根やキャビン、湧き水を活かした水風呂などがあります。これらの特徴を伝えられるようなキーワードを考えました。

施設でどんな体験をできるか、どんな価値があるか、どのような効果をもたらすのか考えながらキーワードを絞り込んでいきました。選んだ3つのキーワードはこちらになります。

  • 「Enveloped(満たされる)」
  • 「Confluence(出会う)」
  • 「Open(解放する)」

サトヤマテラスでサウナを体験することで、風や水、澄んだ空気に満たされる。美しい自然に包まれて心が満たされる体験をする。山の風と海の水、人と自然など違う物同士が出会い、溶け合う。ありのままの自然に包まれることで、気持ちを解放していく。その場所での体験を考えながらストーリーを膨らませていきました。

3つのキーワードを選定した後はイメージボードを作成します。キーワードごとにイメージボードを作成することで、言葉とビジュアルを紐づける練習になりました。同じ言葉でも、人によって感じ方や出力する形は違うので、イメージボードをつくることで視覚でどのように表現した方がいいか、どんな質感になりそうかなどを考えることができました。

思考を止めない「手書きラフ」でアイデア発散

手書きのラフでウェブサイトのキービジュアルや演出案を考えていきます。既存サイトのコピー、写真などを利用しても、新しく素材を作成してもOKです。

ラフは手書きにすることで、完成度を気にせず量を出すことができる。また、手書きによる歪みやずれなどのノイズが次の発想に繋がると教えてもらいました。

キーワードを視覚や体験でどのように表現できるか考えながら案出しを進めました。ラフの時点ではいいアイデアかも!と感じても、デザインに起こしてみるとあまり説得力のないビジュアルになってしまうことも。また、 体験や表現に注力して施設の魅力が上手く伝わらない案もあり、苦戦しました。

作成したA案は下記になります。サウナの写真を抽象化した柄が組み合わさったビジュアルに変換することで、豊かな土や水や森などの多様な要素や出会いを表現する案になります。

続いて他の案。水や森の写真をマスクしてサウナの写真に重ねることで、出会いや多様な要素を伝えようとしましたが、「コラージュの仕方が唐突で馴染んでないかも」とフィードバックをいただきました。

そのほかに作成した案はこちらになります。写真をどんどん重ねていくことで、サトヤマテラスに豊かな自然や環境があることを伝えた案。1枚の風景ではなく、積層された環境みたいな意味で伝えられそうなところはいいので、ファーストビューでも演出の世界観を引き継げるといいねとフィードバックをもらいました。

アイデアは出してみたものの、どの案もキーワードとアイデアが上手く結びつけられていない気がして悩んでいました。

アイデアを形へ昇華させる

前回考えたアイデアを軸にして、トップページのメインビジュアル案を作成します。写真のバランスや文字組み、マスクの形状など検証を重ねていきました。多様な要素の出会いを、写真のコラージュで表現しようと試みました。

上記で作成した案を整理して、3案を提出しました。

先生からは「写真を集めた以上の体験になっていない。」「要素が多く、コピーや写真が同じレイヤー、同じ温度感で並んでいる。何を一番感じて欲しいかわかりづらい。」というフィードバックをいただきました。

自分の中で伝えたい情報を取捨選択しきれず、施設の魅力があまり伝わらないデザインになっていました。サイトに訪れた時、どんな体験をユーザーにしてほしいかを考え直しました。

施設の「水と風を、味わう」というコンセプトや、自然の循環を体感できるような体験をサイトから感じて欲しいと考えました。自然とサウナの関係性を理解できるような表現にしようと調整を重ねました。

写真の量を減らし、代わりに自然を感じるテクスチャを入れたオブジェクトを追加しました。また、それぞれの要素の繋がりがわかるように、要素の名称を入れて線で繋げています。

背景色やコピーのバランス、オブジェクトのサイズや配色で検証を重ねていきました。

悩んだ時はMVに入れる要素を抽象化して眺めて頭をすっきりさせてみたりしました。サトヤマテラスの施設の特徴とも言える水、風、里山との関係性を写真同士を矢印で繋いでいます。施設の構造、自然の中にある施設という特徴を伝えるビジュアルです。
多様な要素があることを伝えるために、写真はそれぞれ異なる形でマスクしています。

最終的に作成したMVはこちらになります。

MVと同時に配下のセクションもつくりこみを進め、完成したサイトデザインが下記になります。施設と自然の関係性を伝え、豊かな自然を感じられるサイトを目指しました。

プレゼンテーション

実際にクライアントに提案する時を想定して、提案の目的や前提などは自分で仮に作成してプレゼン資料づくりを進めました。

提案では、作成したビジュアルに納得感を持ってもらえるような構成を意識しました。また、他のグッズも制作し、今後どのように展開していけるかを想像できるような仕組みも提案に追加しました。サトヤマテラスの特徴や魅力を伝えられるデザインになっていたら嬉しいです。

CREATIVE CLASSで学んだこと

今回の授業を受講して、感覚任せではなく、思考の積み重ねでデザインする方法を学びました。今までつくったデザインに説得力を持たせるのに苦手意識がありましたが、コンセプトをしっかりと定めることで意思決定の軸ができ、何を伝えるべきか決まると表現がぶれなくなりました。
自分自身の表現の幅や、ビジュアルでの表現の出力はまだまだ課題なので引き続き頑張ります。考えたものを込めて、説明を加えなくても意図が伝わるデザインをつくれるようになりたいです。

中川先生に毎回案を見ていただく中で、どうすればより良くなるかを一緒に探し、考えてくださる温かいフィードバックが本当に嬉しく、大きな心の支えでした。

また、一緒に授業を受けたメンバーが、フィードバックを重ねてより良い案にしていく姿にも刺激を受けました。

今回得た経験を仕事に活かしていきます。素敵な機会をありがとうございました!


📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか?

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

  • フロントエンドエンジニア
  • アシスタントフロントエンドエンジニア
  • ディレクター
  • アシスタントディレクター

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。