実案件課題：「発音講座のLPデザイン」

■ヒアリング

★クライアント 主催：VIVID MANIA
講師：池亀 葉子（いけがめ ようこ）様 …NPO法人Creative Debate for GRASS　ROOTS（グラスルーツ）代表。 　主な事業として、英語教育・日本語教育。
プロフィールはポートフォリオでは省略。

★目的 　全１２回の本講座に来てもらいたいが、とにかく体験講座でまずは触れてもらいたい。
　

★講座の趣旨
英語の発音は難しい。海外留学や実際の業務等を経ても、苦手意識を持つ日本人は多い。 →なぜ難しいのか？ →このなぜ？を考えることで、今まで教科書的に学習していた英語から一歩踏み出し、気付きを得る。

 →その気付きによって自分の中に「発音の先生」を作り、英語の発音が上達していく土台とする。

・なぜ日本人がうまく発音できないのか
・お手本から音を真似ると難しい
・その音をどうやって出したらいいか「論理的に」わかる。
・論理的な理解と、自分自身による気付きで、家に帰っても正解の音が分かるようになる。

★特徴 ・論理的に教えるところ。忘れない。
・日本人が英語が下手な理由もわかる
・答えをすぐ教えず自分で気付いて自分を育てる。
・体験講座で3000円一回講座。 　　　他では10000とる内容で格安。

★サイト制作の目標：体験講座に来てもらう。 　　　　　　集客目標ひとまずは８人。

 ★ターゲット
・英語の心得が多少あるけど、仕事をしているけど発音がうまくなりたい人。
・今のところ女性を多めに狙っていく。
・発音に価値を見いだせる人
・英語が苦手でも、発音を向上させたい人。

★サイト誘導媒体 　・facebook広告　 　・instagram広告

 ★その他
・半永久的な能力学習を低価格で体験できる。
・特典・本講座全12回を57600円（約6万）で受けられる。（これに関して入れるかは相談）
・コンバージョンを体験の申込みにしたい

・こくちーずに直近のイベント募集を出している。 　

 ★講師のキャラクター
明るくエネルギッシュ。 黒しか着ていない。「くすんだ和の色がすき」とのこと。 あたたかみのある色が好かれやすい。
頭の回転が早く物事すべてに「なぜ？」

 
★NGキーワード「発音道場」 　同名の競合あり。

 ★制作にあたって
・提供画像はあまり高品質ではない。
・AdobeSTOCK　サブスクリプション　使用OK
・フォームはいらない、申込みボタンだけ。
・動画の訴求力低め

 
★現状のチーム方針
・素直にシンプルなデザインで ピンポイントでターゲットを狙う
・適切なキャッチコピーをトップにもってくる。
・ラストに価格で惹き付けボタンを押してもらう。

■整理

★構成

・全体写真

・講座内容

・お客様の声

・講師プロフィール

・体験価格3,000円申し込みボタン

・主催情報　開催場所　アクセス

★ターゲット

・かっこいい発音を得たい方

・歌を歌っている方(英語のフレーズを上手く歌いたい)

・苦労した経験がある方(←本音の部分)

　　↑

　苦労した経験がある方にハマれば本講座への決定率高いはず。そのくらいの自信と信頼性、根拠が強い

★ペルソナ

ターゲット　28歳　旅行女子

海外好美（かいがいよしみ）さん

・独身

・女性

・大阪市内在住（気軽に空港に行ける）

・一人暮らし

・旅行と英会話とランニング（ホノルルマラソンに出たい）

・お酒好き

・インスタ女子（一日一回はアップしている）

・看護師

・サバサバ系

★カラー案

・ゴールド、スカイブルー、ショッキングピンク

・オレンジ、イエロー　○こちらで決定

★デザイン

イメージ：おしゃれスッキリ

・メインビジュアルを目立たせる

・その下からはホワイト基調のシンプルデザインに

・白ベースに色（イエロー・オレンジ）を入れる。

■ワイヤーフレーム作成

ディレクターがXDで作った簡易ワイヤーフレームを元に、すぐにアートボードに起こしてフォルダ分けを行い、デザイナーで共有した。

自分が講師プロフィールから下半分。もうひとりが上半分を担当し、最終的に自分がカンプをまとめて調整する方針となった。またメインビジュアルに関しては、担当デザイナーが悩んでいる様子だったので、下のような画像を送ってアイディア出しをした。

★初期案（自担当セクション）

この時点でディレクターより、「クロージングのボタンを目立たせて欲しい」とフィードバックがあり、急ぎボタン案を提案する。

結果、光沢・シャドウどちらもあるパターンを採用。

デザイナー二人で相談、案を統合。ビジュアルの提案、ディレクターのフィードバックを繰り返す。

下がプレゼンに使用したカンプ案となる。なおadobe Stock画像を使用したため、ポートフォリオ上ではその箇所はカラーオーバーレイで隠し「adobe画像」の文字が入っている。

★特徴

全体的にオレンジを基調とすることで、親しみやすさ、明るさを感じるサイト設計にした。地色に白を持ってくることや、全体的にスッキリとしたスタイリッシュなデザインに仕上げていくことで、閲覧するターゲットに信頼性・誠実さの印象を持ってもらえるようにした。

ポップな印象になりやすい配色のため、幼い印象を持たれないよう、ブロークングリッドレイアウトや斜めの色配置を行い、色味のもつ親しみやすすぎる印象を抑えた。

★結果

現在チーム全体のプレゼン提出後、結果待ち（ポートフォリオ掲載許可あり）。

■感想

ディレクターの提案後、講師からの指摘としては
「配色のバランスはよく、黄色やオレンジをベースにしててもポップになり過ぎていない点は良い」
「だが、コーディングのことを考えたとき、やや難しいだろう」
とのこと。

・予算やコーディングのコスト、サイトの目的に見合ったデザインかどうかの視点が重要。

・レスポンシブで無理がでないデザインかどうか

このあたりは現在自主課題のコーディングをしていても頭が痛い問題になっているため、ワイヤーフレームを考える段階からサイト規模や目的を照らし合わせ、熟慮が必要だと学んだ。

■チームについて

今回の案件に取り組んだチームは、全員レスポンスが速く、複数の案を出した時もディレクターだけでなくチームメンバー全員から感想や指摘を頂けた。ほとんどがチャットワークを用いたやりとりで作業をしていたが、コミュニケーション不全はなく、活発に進捗の報告や案の提出、フィードバックが行われた。

打ち合わせは週2回、ヒアリングから納期まで23日だったが、時間外の打ち合わせや追い込みの制作時間などをとることなく、チャットによるやりとりでスムーズに完成させられた。

メンバー全員に心から感謝している。