
【デザイントースト修了・卒業講評会レポ・前編】 第4期前半ターム(基礎)
こんにちは!私、ふぁむ子はデザイントーストというオンラインデザインスクールのレッスン講師をしております(私自身もデザイントーストの一期卒業生でもあります)。
デザイントーストはWebデザインやグラフィックデザインを本格的に学べるオンラインスクールです。レッスンは毎週あり、提出課題も盛りだくさんの学校です。
今回の受講生はデザイントースト第4期所属、6ヶ月継続マスターコースのうちの前半、基礎ターム12週を終えて、ラスト制作の講評でした!
基礎コース修了制作テーマ「ビール会社"TOAST BEER"の新卒採用Webサイトデザイン」
2014年にできたばかりの北海道を拠点とするベンチャー企業という設定です。サイトの目的は、「うちに合う人材に応募してもらうこと!」
PCサイト用デザインとSP(スマートフォン)用デザインの2種類を制作という鬼の修了課題!
受講生には、以下の付加情報が渡されました。
会社の雰囲気はベンチャー寄りの社風
①安定よりは挑戦的な人
②ダイバーシティ・海外志向でリーダーシップのある方に入ってほしい
採用における売りポイント
・やる気があれば仕事はどんどん任せてもらえる
・創業者は日本育ちの中国人の女性。多様性を大切にしている
Web渡されたテキストデータはクライアントが持ってきた文章と写真という最低限のものという設定です。
(必要だと感じたら、商用可能の素材を自分で見つけてきます)
ターゲット(サイトを訪問する主なユーザー)は「大学を来年春卒業する新卒」ということで、どういう人物なのかを仮定する「ペルソナ設定」も自分で行ってもらいます。
いかがですか?かなり難易度高いな〜!と思われる方多いのではないでしょうか。これを、デザインのを勉強を初めて3ヶ月目の受講生がたった2週間で作り上げました!
4期前半ターム 1人目 misocoさん
もともとWebディレクターとして活躍されている中で実際に手を動かしてデザインをしたいという動機からデザイントーストに入学されました。
◆どんな人向け?
ペルソナ設定は「Z世代の22歳、外語大学に通う男子学生」です。
設定理由は「異文化に元々関心がたかかったり、コミュニケーションが得意な人なので今回のクライアントであるトーストビアの求める人材であるから」ということです。
◆分析・ターゲット設定
「キービジュアル(サイトTOPの画像)のキャッチコピーである『そこに物語はあるか』に共感してもらえる」人材というかなり詳細な設定を仮定にされ、そこからデザインを制作。

デザインを作る上で3つの点を意識されということです。
・物語を想起させるようなキービジュアル
・印象に残る色合い、白、黒、赤を採用
・Z世代向けのトレンド、紙の風合い、あたたかみを取り入れたかった
かなりコンセプトがしっかりされていて、デザインにより説得力が出ますね。


サイト内のコンテンツも例えば「私たちのビジョン」と「代表メッセージ」は分けた方が読みやすいからと上手に情報整理されたり、追加で作成された応募フォームも今自分がどこにいるのか?がわかりやすい工夫がしてあり、UIを考えるのが本当に上手な方だなという印象を強く受けました。

宮本「本来はクライアントからターゲットの設定が来てから詰めるとおもうけど、ここまできちんと想像できて設定しているので実際聞かれても引き出しポイントを抑えた返答ができそう。ここを足してみたら?の提案も具体的で非常によかった」
きのした「情報整理がとても上手!ただ渡されたテキストをきちんと咀嚼し、わかりやすくデザインに落とし込めていてすごいと思った」
ほり「たくさん添削されたのかな?と思いきや、ほぼ初回でこれが出せたのは本当に素晴らしい!写真の加工もとっても上手にできていて、サイトに一体感が出ている。」
最初からすごいデザインが出てきた!と一同大盛り上がりです。
4期前半ターム2人目 かんさん
もともとデザインに興味があったけど、入学時はAdobe系のソフトを触るのは初めてというところからのスタートでした。
◆どんな人向け?
ペルソナ設定は「デジタルネイティブmYoutubeやtiktokで視覚でインパクトのあるものになれている世代」です。
・多様性重視、Z世代の人の方が抵抗がない。
・子供の頃から災害も何度か経験していることもあり、環境への意識が高い
と分析されました。
◆分析・ターゲット設定
上記を踏まえた上で、大手ビール会社四社、他のクラフトビールの会社を比較。
採用ページはこんな感じだな、という感じをつかんだ上で、ベンチャー企業の構成などを参考に構成、色使いにポイントを置いて配置したとのことです。

キービジュアルは「そこに物語はあるか」というキャッチコピーの「そこ」を各人が想いを馳せられるようにという狙いでいろんなシーンを切り出し、また、ビールの泡を思わせるあしらいを各所にちりばめていくことで物語が続いていくことを表現したそうです。説得力のあるプレゼンにメンター陣も感心しきりでした。


サイトを通して出てくる、青とオレンジの色も「海外志向」「リーダーシップ」を想起させるようなはっきりした色合いにした理論的に説明をされていました。

きのした「初めてソフトを触るところからのスタートで、ここまでできるというのが本当にすごい!デザインも最後までコツコツ諦めずに取り組まれていてガッツがあります」
宮本「ゼロからここまでできたというところに本当に驚きました。こういう形にしたいというのも言葉でしっかり伝わってきたし、底力がありますね」
ほり「キービジュアルの説明にグッときました。ここまでしっかり考えてもらえたらクライアントさんもとっても嬉しいと思う。海外デザインの研究もされていて、きちんと考えられてデザインを作られていて感心した」
どうですか?とチーフメンターから聞かれて「いつもギリギリで…やらなきゃ!という気持ちと手がついていかないところで葛藤しました」と答えられたかんさん。
良いものを作りたい!という気持ちが全ての原動力です、メンター一同大いにエールを送りました。
4期前半ターム3人目むーみんさん
デザインに関してはほぼ初めて、というところからスタートされました。
◆どんな人向け?
ペルソナ設定は「コンセプトが2つ、今回の課題であるトーストビアは女性の方が割合が多いが、世間的にはまだまだ女性がビール会社に入るというのは珍しいので、就活中の女性を対象にしたいという気持ちから作った」ということです。
◆分析・ターゲット設定
白を基調として、落ち着いた色の黄色、女性でも受け入れられるような、優しい、明るい、ビールの色を使用し、差し色で赤を採用されました。

フォントを細めにすることで女性が親やすいデザイン、日本語と英語を表記することでダイバーシティを意識したデザインを作成。

ダイバーシティに関しては、別途ページを儲けて詳しく解説するという提案に加え、応募フォームからは海外在住の人でもエントリーできるような配慮をされました。
文章が横になりすぎると読みづらいなど、UIもしっかり考えられた作りになっています。

エントリーボタンがビールの中に入っているような遊び心のあるデザインもあり、固くなりすぎないバランスが取れたWebサイトになりました。

きのした「女性向けというのと少し尖った前衛っぽさと絶妙にバランスがとれている。最初の頃はデザインに少し迷いがあったようですが、ペルソナ設定からデザインまで落とし込めるまでに成長できて素晴らしい!」
宮本「インタビューの部分のデザインがすごく良かったです。エントリーボタンもおしゃれにできてるなと思いました。」
ふぁむ子「コンセプトがしっかりしていて、デザインもそれに説得力がでるようにきちんと作られていて良かったです。遊び心のある部分などもあり、クライアントはこれを見てとても満足すると思う」
ほり「ペルソナまでしっかり考えられるというのはこれから働く上でも説得力がすごくあってとても良い。書くパーツもしっかり手を入れてデザインしていてすごい。」
プレゼンも「工夫した点は」や「○○に関しては3つあり」と最初に要点を言うことで聞き手の聞く準備を促す話し方がとてもよかったと大好評でした。
4期前半ターム4人目しのさん
Web・グラフィックデザインはほぼ経験なし、「Adobeソフトは初めて触る」というところから始められました。
◆どんな人向け?
ペルソナ設定は「就活中の21歳男性、ビール会社で採用されている人は理系の学部が散見されたためそれにならって商品開発、いずれは自分がつくったものが海外でどう通用するか?を試したい人」という具体的なもの。
・ベンチャー寄りの社風と聞いたため、ベンチャー企業のサイト、採用サイトを参考に
・採用サイトを作る目的「うちに合う人材を」「挑戦的、海外志向、リーダーシップ」を考えた
としっかり説明されました。
◆分析・ターゲット設定
調べていくうちにベンチャー企業のサイトはシンプルなものが多いな感じたため、今回もシンプルを一つのキーワードにして制作されました。
採用したい「挑戦したい人」から想像して「行動力があって無駄がない人」がペルソナなのもシンプルにした理由の一つです。
今回は、大手ビール会社と差別化をはかった上で市場に挑戦しているトーストビアに合う特別感・高級感のあるネイビーを採用しました。
キービジュアルも、最初のインパクトで「物語」を感じてもらえるように選んだとのことです。

また、商品プロジェクトというコンテンツを追加、ブログでエントリーする人が不安に思いそうなことを解消するという具体的な提案まで行いました。


応募フォームも、安心してもらえるようなフラットな社風が感じられる写真を置いたということです。
全てのデザインにきちんと意味があるとしっかり納得がいくような形で説明されていて、大変聞き応えがありました。

きのした「ザインが好きで好きで寝る間も惜しいとい思ってくれてるのがよく伝わってきた。男性向け、ということでゴシックで太い感じも大変良い」
宮本「未経験からここまで成長できるのがすごい!」
ふぁむ子「全ての項目で説得力があるプレゼンができていて感激した。しっかりと考えることができると言うのはデザインの技術以上に身に付きにくいことなので、既にそれができているのは素晴らしい」
ほり「リサーチで、理系学部出身の人が多かったという情報、ベンチャーの採用サイトはシンプルな作りが多かったという発見もしっかり言語化できていて良かった。ブログの中にどういうものを入れたらいいか?という提案もさりげないようでクライアントはとても嬉しいもの。随所に工夫がされていてとても良かった」
デザイントースト4期前半ターム(基礎)を終えて
ほぼ全員が未経験からスタートしたにもかかわらず、4名ともとんでもない大作を短期間で仕上げてきました。
たったの3ヶ月ですが、全力で取り組むとこんなに実力がつくんだ!と目の前に見せられる醍醐味。
デザイントーストは課題も多く、手を動かすだけではなく時代に合ったデザインなどクオリティも厳しく求められます。また、手を動かすだけではなく調査や背景を調べるといった準備段階もかなりのレベルが求められます。
学業や仕事がある中で取り組むのは本当に大変だったと思いますが、こんなに素晴らしい修了作品ができあがります!
さらに、4名とも後半タームでさらに実力をつけていきます。次の3ヶ月でどこまで成長するのか!?とメンター一同ワクワクドキドキ、楽しみにしています。
時期から、アウトプットを後押しする制度も作られて、外部の人からも成長を見守っていただけることと思います!
4期後半ターム(応用コース)の卒業制作発表レポートはこちら!!