ポートフォリオ_赤塚亮太

ポートフォリオ資料になります。

Transcript

1. 戦略設計・ プランニング 迅速な レスポンス ディレクター 視点 納品後も サポート Webデザイナーです 顧客視点の 制作会社で3年間ディレクターをやってきた
2. HP ・学習塾のHP UI/UX ・乗換案内アプリのUI/UX Banner ・クリームチーズケーキのバナー LP ・国産うなぎの通販LP 06 CONTACT お問い合わせ 05 FLOW ご契約までの流れ 04 PRICE 料金パック 03 WORKS 作品 02 SERVICE サービス / 提供価値 / 選ばれる理由 01 PROFILE プロフィール/これまでの経験 目次
3. PROFILE プロフィール プロフィール プロフィール
4. 大学在学中にプログラミングを学びました。 その後新卒で塾講師として働く中でWEB制作に興味を持ち、WEB制作の職業訓練校に半年ほど通いコーディングとデザインソフトの操作を学びWEB制作会 社に入社いたしました。 そこでアートディレクター兼マネージャーとしてホームページ制作の案件進捗管理、制作における品質チェックとデザイン品質向上のための基礎作り、制作 アルバイト20名ほどのマネジメントを約3年ほど従事し退職。 現在、フリーランスデザイナーとして活動しています。 1996.09.01 三重県津市出身 赤塚 亮太 2024.10 同社を退職。フリーランスデザイナとして活動中 2021.11 株式会社ガーディアン 入社 2021.3 WEB制作コースの職業訓練校 受講 2019.4 株式会社早稲田アカデミー 入社 2019.3 日本大学生産工学部数理情報工学科 卒業 経歴 前職ではアートディレクターポジションでサイト制作案件の進捗管理や顧客との打ち合わ せ、マーケティング視点でのサイト品質チェックをしていました。 ディレクション AI ChatGPT・Photoshop、素材加工、ス プレッドシートで使用。 Chromeの検証ツール HTML/CSSの追加変更やサイト内の画像 サイズ確認に使用 HTML/CSS 職業訓練校で基礎から半年ほど学習。 Figma WebデザインやUIデザイン、パワポ作成 に使用 Illustrator WEBデザイン、紙デザインに使用 Photoshop Webデザインや写真レタッチに使用 スキル ネット検索・通販を見る テレビ 動物 野球 グルメ 趣味 ダックス 飼ってます プロフィール
5. SERVICE サービス サービス サービス
6. デザインを提供します ターゲットの心を動かす 商品・サービスの魅力を伝え デザインを提供します ターゲットの心を動かす 商品・サービスの魅力を伝え ディレクション DIRECTION ヒアリング HEARING 前職での経験からリアルでのコミュニケーションはもちろ んオンラインでのコミュニケーションもたくさん経験して おりました。丁寧なヒアリングと徹底した報連相を行い、 認識齟齬がないよう制作してまいります。また進捗管理と 共有を徹底し期限遵守にて進めてまいります。 前職での経験からリアルでのコミュニケーションはもちろ んオンラインでのコミュニケーションもたくさん経験して おりました。丁寧なヒアリングと徹底した報連相を行い、 認識齟齬がないよう制作してまいります。また進捗管理と 共有を徹底し期限遵守にて進めてまいります。 事前に顧客情報と競合他社をリサーチした上でビジュアル 面だけでなくどうしたら成果をあげられるのかという視点 を第一にしてヒアリングいたします。 事前に顧客情報と競合他社をリサーチした上でビジュアル 面だけでなくどうしたら成果をあげられるのかという視点 を第一にしてヒアリングいたします。 サービス
7. 主体的な提案をしてほしい レスポンスが遅い デザイン以外もみてほしい 進捗がわからない こんな はありませんか？ お悩み
8. します 決 解 そんなお悩みを 成果を出すため を いたします。 積極的な提案 主体的な提案をしてほしい ご連絡には に 返信いたします。 5時間以内 レスポンスが遅い ディレクション経験を元に での ご提案もさせていただきます。 マーケティング視点 デザイン以外もみてほしい 毎営業日 記録を取り、 をいたします。 進捗の共有 進捗がわからない
9. 3つの理由 選ばれる 3つの理由 選ばれる 見た目だけいいデザインでは成果をあげるこ とはできません。ただ指示されたことをこな すのではなく競合他社と世の中の結果が出て いるクリエイティブを分析し、成果にコミッ トした主体的な提案をいたします。 成果重視の 戦略設計・プランニング 見た目だけいいデザインでは成果をあげるこ とはできません。ただ指示されたことをこな すのではなく競合他社と世の中の結果が出て いるクリエイティブを分析し、成果にコミッ トした主体的な提案をいたします。 成果重視の 戦略設計・プランニング 日中は5時間以内にレスポンスを行い円滑な コミュニケーションを行います。また案件進 捗の見える化を行うため、毎日進捗や不明点 等の報連相をいたします。 迅速なレスポンス と報連相 日中は5時間以内にレスポンスを行い円滑な コミュニケーションを行います。また案件進 捗の見える化を行うため、毎日進捗や不明点 等の報連相をいたします。 迅速なレスポンス と報連相 デザイナーのみの視点で制作をしてもただの 自己満足なものが制作されるだけです。前職 での経験を生かしてデザイナー・ディレク ター・顧客の3視点での制作を心がけており ます。 ディレクター視点での デザイン デザイナーのみの視点で制作をしてもただの 自己満足なものが制作されるだけです。前職 での経験を生かしてデザイナー・ディレク ター・顧客の3視点での制作を心がけており ます。 ディレクター視点での デザイン サービス
10. Opportunity (機会) 強みを活かして 脅威を回避し切り抜ける Threat (脅威) 弱みのを理解し 脅威による影響を最低限にする Weakness (弱み) 弱みの補強/改善で 機会を掴めるように対策する Strength (強み) 強みをチャンスとなる 成長機会に活かす 外 部 環 境 内 部 環 境 マイナス要因 プラス要因 SWOT分析 顧客層 購買行動 顧客ニーズ 市場・顧客 強み/弱み 市場シェア 企業理念・ビジョン 競合 強み/弱み 他者評価 企業理念・ビジョン 自社 3C分析 設計が間違っていると どんなに良いデザインでも 成果を上げることができません。 分析結果を元に USPを明らかにし適切な訴求を デザインで行っていきます。 地域密着型学習塾の分析例 ◆市場・顧客◆ 少子化にも関わらず塾業界では売上げが伸びて いる。それは誰もが塾に通うことが当たり前に なってきたという背景がある。 ◆競合◆ オンライン授業塾が増えている。大手塾は学生 アルバイト講師が多く授業の品質にムラがあ る。 ◆自社◆ 分析結果と自社の強みから以下をUSPとして打 ち出していく ・ただ学習を教えるだけでなく学習習慣などを 身につける指導も行い人間力の育成を行う学習 システム ・塾長自ら指導を行い一人ひとりをサポート ・現在少なくなってきている対面だからこその 熱血指導 見た目だけいいデザインでは成果をあげることはできません。 業界市場・競合他社を分析し成果にコミットした主体的な提案をいたします。 成果重視の戦略設計・プランニング 01
11. 要件・期日の提示 要件・期日の提示 5時間以内のレスポンス 5時間以内のレスポンス 進捗をシートで見える化 (リンクを共有いたします) ※納期まで進捗を しっかりと管理いたします 進捗をシートで見える化 (リンクを共有いたします) ※納期まで進捗を しっかりと管理いたします 迅速なレスポンスと報連相で期日厳守いたします。 迅速なレスポンスと報連相 02
12. B:権威性を訴求 A:素材感を訴求 訴求軸 デザインする前に訴求軸を明確にすることが大切です。 ディレクター/閲覧者視点でどういった訴求軸が適切か を見極めてクリエイティブを制作します。 B:権威性を訴求 A:素材感を訴求 訴求軸 デザインする前に訴求軸を明確にすることが大切です。 ディレクター/閲覧者視点でどういった訴求軸が適切か を見極めてクリエイティブを制作します。 様々なデザインを収集 テイスト ディレクター視点で顧客情報を元にしっかりとリサーチ を行った上でテイストを決めてデザインしていきます。 またディレクターが行うワイヤーフレームでの情報設計 作成や複数パターンの作成も可能です。 様々なデザインを収集 テイスト ディレクター視点で顧客情報を元にしっかりとリサーチ を行った上でテイストを決めてデザインしていきます。 またディレクターが行うワイヤーフレームでの情報設計 作成や複数パターンの作成も可能です。 制作会社でのディレクター経験を生かしたデザインを作成いたします。 ディレクター視点でのデザイン 03
13. WORKS 作品 作品 作品
14. 通販ではあまり詳細な情報は読まずにぱっと見て判断されることが 多いため見てわかる！ようなデザインを意識して制作しました。 通販ページに掲載する国産うなぎの購入を促すLPを作成しました。 国産うなぎの通販LP Illustrator(デザイン)・Photoshop(写真加工) 使用ツール デザイン 制作範囲 3週間 制作期間 商品購入 目的 作品
16. 産地や生産者にこだわった 高級な鹿児島県産の国産うなぎを通信販売している。 事業内容 ・鹿児島県産の国産うなぎを通信販売している ・子どもに美味しいうなぎを食べさせたい親 ・年末年始で孫がくるので贅沢をしたい祖父母 ターゲット 商品に興味関心をもってもらい 商品を購入してもらう。 目的 ・和風の高級感のイメージにしたい ・高級感がありつつも家族で楽しく美味しい感もだす ・写真を大きく見せてインパクトを出したい 要望 作品
17. テイスト、レイアウト、コンテンツから制作方針を立てる デザインの制作方針 コンテンツの上部には商品である国産うなぎの和風で高級感のある イメージにし、下部には閲覧差視点になったデザインにしていく。 また目を止まらせたいコンテンツには大きく画像を配置したり余白 を取って目を引くポイントをつくる。 和風で高級感な中にも親しみやさをだす コンテンツ 閲覧者が自然と下に読み進めてもらえるようなレイアウトにしてい く。 見せたいものと読ませるものを分け、サイズのコントラストをつけ て表現する。 コンテンツ間の境目には繋がりを持たせて一体感をだす。 閲覧者に飽きさせないレイアウトに レイアウト 国産うなぎの和風で高級なテイストをデザインで表現する。 背景には黒を使用することで高級感を、あしらいには和雲や細い 線、フォントにはシンプルな明朝体と筆体、配色には赤色と金を使 用し高級感をだす。 和風で高級感のあるデザインに テイスト 作品
18. フォント・配色・あしらいの使い方 FVでの商品の見せ方、レイアウト 訴求ポイント 参考ポイント 通販サイト、ピンタレスト、Google検索からベンチマークを選定。 うなぎだけでなく飲食全般からも探し商品の見せ方を参考にする。 ベンチマーク 作品
19. 視線誘導の流れ 訴求ポイントを明確にし、メリハリをつける コンテンツのストーリーを意識した配置 気をつけたポイント 課題解決への制作方針とベンチマークの作品を観察しながらライ ティングを元にワイヤーフレームを作成。 ワイヤーフレーム 作品
20. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルでありながら和風で高級感があるため使用。 数字など注目させたいポイントには斜体で強調。 日本語見出し TA風雅筆 インパクトのあり和風なイメージであるため使用。 使用箇所はキャッチなど目を引きたい箇所に限定。 ベースカラー 和と救急感の雰囲気をだすため黒を使用。 メインカラー 黒背景で目立ちトーンを調整できることで 和風な印象を出すこともできる赤いろを使用 アクセントカラー 高級感がありながらギラギラしていない 落ち着ついた金色を使用。 カラー 作品
21. 食料品の通販ページではいくつもの同じ商品が並んでいます。 バッと見てこの商品美味しそうと興味関心を持ってもらうために シズル感があり美味しそうな画像をあえて大きく表示することで 目を引くように配置しています。またレイアウトは商品画像➡商 品名➡..➡商品梱包・内容量の読ませたい順番で視線誘導を意識 しております。 目を引く商品画像からテキスト情報 を読ませるファーストビュー Point01 パッと目を引く 商品画像 権威性をもたせる 文言 たっぷりな内容量が イメージできるよう なパッケージ画像と 強調した数字 権威性をもたせる 文言 作品
22. 通販ページではしっかりとテキストを読まれないため、読みレベ ルではなく見るレベルでイメージや情報が伝わるように画像を選 定して使用しています。 テキストを読まなくても 伝わるイメージ画像 Point02 たっぷり感が伝わる 積み重なったうなぎ 画像 たっぷり感が伝わる 積み重なったうなぎ 画像 作品
23. 商品の選ばれる理由以降のコンテンツでは受け手の気持ちを意識 してデザインしました。メインターゲットが子どものいる家族の ため、ターゲットに合った受け手イメージと子どもが喜んでいる 画像を使用することで商品を購入することのベネフィットをビ ジュアル面で訴求しています。 売り手と受け手を 意識したデザイン Point03 商品を購入すること で得られるベネ フィットイメージ 悩みを見るレベルに ビジュアル化したデ ザイン 作品
24. 商品が美味しそうに見えるよう質のよい画像選定とレタッチを行 いました。特に意識したポイントはシズル感とインパクトです。 シズル感はPhotoshopで加工し、インパクトはレイアウトや商 品の大きさなどで表現しています。 美味しそうに見える うなぎ画像 Point04 切り抜いてインパク トを出したアレンジ 画像 シズル感のあるうな ぎを集めた目を引く 画像 作品
25. いろんなデザインパターンで境界を感じさせないように工夫して います。反対に強調したいコンテンツに関してはあえて境界を はっきりとさせて目が止まるようにデザインしています。 コンテンツ境界の工夫で 自然と下まで読み進めさせる Point05 グラデーションを使 用してなじませる 同じ背景色にして境 目をなくす 作品
26. Illustrator(素材加工)・Photoshop(デザイン・写真加工) 使用ツール デザイン、構成、ライティング 制作範囲 3日間 制作期間 興味関心を引き、通販ページへリンクさせる 目的 広告バナーのため目を引くようなキャッチや画像を意識し、A/Bテ ストするために2パターンのデザインを作成しました。 通販ページにリンクさせるMeta広告バナーを作成しました。 クリームチーズケーキのバナー #LP 作品
27. After Before
28. 東京と沖縄にお店をかまえ チーズケーキやスコーンなどの洋菓子を製造し 店舗、通販、および毎月全国で 開催するイベントショップで販売している。 事業内容 ◆職種：主婦 ◆名前(年齢)：吉田かなこ(47歳) ◆居住地：大阪府大阪市 ◆情報： 大阪市内の高層マンションに住んでおり旦那は大 手広告代理店勤務で年収1000万円。子どもはい ない。スイーツが大好きで毎月通販でいろんなス イーツを取り寄せている。 ペルソナ 広告バナーから商品に興味関心をもってもらい クリックしてもらう。 目的 ・目を引くデザインになっていない ・商品の良さが伝わらない ・テキストが小さくバナー感がない 改善点 作品
29. テイスト、レイアウト、構成から制作方針を立てる デザインの制作方針 今回は2パターンのデザイン構成を用意する。 訴求軸は素材イメージでの訴求と権威性と商品画像での訴求の二軸 でデザインをしていく。 商品イメージと権威性を軸に訴求 構成 目を引くためにキャッチコピーを大きく入れて商品情報に視線を誘 導する。 今回は2案のデザインを作成するため訴求に合ったレイアウトを作 成していく。 目を引くキャッチと商品画像をメインに レイアウト 現状のシンプルな温かみのあるイメージからHPやSNSなどの会社情 報を元に品のあるナチュラルなブランドイメージの世界観をデザイ ンで表現する。 また商品の推しポイントである滑らかな味で材料のレモンと牛乳が 視覚的に伝わるようにする。 ブランドイメージにあった世界観に テイスト 作品
30. フォント・配色・あしらいの使い方 商品イメージの見せ方 訴求ポイント 参考ポイント Meta広告、ピンタレスト、Google検索からベンチマークを選定。 チーズケーキだけでなく他の飲食広告からも探し商品の見せ方を参 考にする。 ベンチマーク 作品
31. 視線誘導の流れ 目を引くキャッチコピー メリハリをつけたテキスト 気をつけたポイント 課題解決への制作方針とベンチマークの作品を観察しながらライ ティングを元にワイヤーフレームを作成。 ワイヤーフレーム 作品
32. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルであり品がある明朝体を使用。 キャッチコピーは縦比率を伸ばして使用。 日本語(1パターンで使用) Noto Sans JP 明朝体との対比で目を引くキャッチコピーに使用。 ベースカラー 品がありナチュラルである薄いオレンジを使用 メインカラー ブランドイメージカラーを使用 商品が黄色系のため背景に使用して商品を映えさせる アクセントカラー 商品の色を使用 デザイン全体に統一感がでて青との組み合わせで目を引 く色味 カラー 作品
33. スマホでスクロールしていてパッと目に入るようキャッチコピー のサイズやテキストと背景色のコントラストをつけて強調してい ます。 目を引くキャッチコピー Point01 青背景に黄色文字で 強調 キャッチコピーのみ にゴシック体を使用 文字の縦比率をあげ 目立たせている 大きな文字と明るい 背景とのコントラス トを意識した黒文字 作品
34. 商品にたくさん使用されているレモンと牛乳をイメージさせるデ ザインを作成しました。 レモンはみずみずしさ、牛乳はなめらかさを表現しています。 味をイメージさせる素材 Point02 フレッシュなレモン のイメージ 美味しそうな牛乳の イメージ なめらかなイメージ を表現 みずみずしいレモン のイメージ。レモン をたくさん使ってい る商品のためたくさ んのレモン画像をつ かっています。 作品
35. 今回は訴求軸を味のイメージとメディアで紹介されているという 権威性にしてデザインを作成しました。 訴求軸に沿ったデザインパターン Point03 キャッチコピーの中 でも一番目立たせた い箇所はテキストカ ラーとマーカーを入 れる 一番先に目に入る 権威性 素材イメージ画像 直感的に商品の味が イメージできる キャッチ 作品
36. Figma(デザイン)・Photoshop(素材加工) 使用ツール 要件定義、デザイン、構成 制作範囲 4日間 制作期間 経路検索と観光案内を利用してもらう 目的 観光案内機能もついている。 京都市内のバス・鉄道を対象とした出発地と目的地を入力するだけで 簡単に最適な経路や運賃、所要時間を調べられる無料の経路検索アプリ。 乗換案内アプリのUI/UX #UI/UX 作品
37. After Before
38. After Before
39. After なし Before
40. 実際に3名ほどにアプリを使用してもらい行動や思考を洗い出しました。 体験設計 ・いきなりマップがでてきてわ かりづらいな。 まずはルート一覧で比較したい な ・ルートの特徴を知りたいな ・普段と違うUIで使いづらいな ・手で押しづらいな ・とりあえず京都に特化してい るアプリで良さそうだし試して みるか ・TOP検索画面が使いづらくて 不安だけど経路検索詳細を見て みよう ・大手アプリは電車の乗り換え はわかりやすいがバスも含む ルートは分かりづらい ・マップでバス亭までの道のり をわかりやすく案内してもらえ る機能がほしいな ・旅行期間しか使用しないの で、無料アプリがいいな なるべく交通費を抑えながら 効率よく観光したいので バスと電車をうまく活用したい 自分が使用したい 経路を選択して使用 情報を入力し、検索する アプリを開く インターネット、SNS、アプリ ストアから良さそうなアプリを 探して比較検討する バスと電車を使った 乗換案内をしてくれる サービスに関心が高まる 京都乗り換え案内アプリをダウンロードし交通経路を検索する 京都乗り換え案内アプリを ダウロードし 交通経路を検索する 複数の乗換アプリを 比較した上で どのアプリを利用するのか決定 京都へ旅行することになり 交通ルートを下調べする 思考・心理 行動 定義 フェーズ アプリの利用 比較検討 アプリ利用のきっかけ 作品
41. AppleやGoogle Playにある 京都市交通局が作成した市民や観光客が 出発地から目的地までの最適な交通手段の情報を 簡単に入手できるアプリで観光案内もついている。 App内容 ◆職種：会社員 ◆名前(年齢)：小川恭平(27歳) ◆居住地：千葉県習志野市 ◆情報： 普段からよく乗換案内アプリを使用している。 京都市内への観光でアプリを使用と思っている。 ペルソナ アプリで交通手段の検索と観光案内を利用してもらう。 目的 ・UIが分かりづらい ・検索時に経路一覧がない ・観光案内の機能が独立してしまっている 改善点 作品
42. テイスト、レイアウト、構成から制作方針を立てる デザインの制作方針 実際にアプリを使用するに加えて知り合いにも使ってもらいユー ザー視点での意見を取り入れていく。 また世の中にある乗換案内アプリも実際に触って参考にする。 ユーザー視点での構成 構成 今回改善するアプリは普段使用するものでないと想定できる。 そのため初めてでも老若男女誰でも使いやすいデザインを心がけて いく。 老若男女だれでも使いやすいように レイアウト 現状あまり京都感がない。観光客が使うことも多いので京都感を出 してアプリのイメージを作る。 具体的には茶色や朱色などや和風の模様などを使用する。 京都感を取り入れたテイストに テイスト 作品
43. 画面構成 レイアウト 和風テイスト 参考ポイント 乗換案内アプリ、ピンタレストからベンチマークを選定。 京都のテイストを出すために京都系デザインも参考。 ベンチマーク 作品
44. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Sans JP シンプルで信頼感のある読みやすいゴシック体を使用。 ベースカラー 和風で落ち着いた薄い黄色を使用 メインカラー 京都のイメージがある茶色を使用 アクセントカラー メインとのコンテラストがある黄土色を使用 カラー 作品
45. 老若男女だれでも使いやすいと意識し 大きく構成を変更。 検索TOPのデザイン Point01 左右どちらでも押し やすく目立つ検索ボ タン 読みやすさを意識し た時刻テキストの順 番と検索範囲のアイ コン 直感的にわかりやす いレイアウトとテキ ストの読みやすさ 上部にタブを追加 検索履歴とお気に入 りを入れアプリを普 段から使用している 方の使いやすさ向上 After 検索TOP時点でお気 に入りボタンは不要 (検索してみてみな いとわからない) 一番大切な検索ボタ ンが右に寄っていて 左手で押しづらい ボタンを押さないと 意味が伝わらない 指で押しづらいレイ アウト 経路を逆にするボタ ンと経由の位置も右 にあり機能が直感的 に分かりづらい Before 作品
46. 機能を洗い出し どこに配置すればいいのかを 考えデザインしました。 経路詳細のデザイン Point02 予定時間が変わった 時に備えてコンテン ツ下にボタンを追加 既存では独立してい た観光案内を到着地 にいれることで機能 をより使ってもらえ るように バスと電車を区別で きるようテキストを 追加 出発地と到着地は時 刻に背景をつける 既存では「駅情報」 となっていたボタン を直感的にわかる時 刻表と周辺地図に変 更 直感的にわかる経路 タブと経路情報 After アイコンだけだと電 車かバスか分かりづ らい ボタンが押すまでな んの機能があるのか わからない 駅やバス停の情報が なくて不便 必要最低限の情報は あるが直感的に分か りづらい 他の経路も比較でき ない Before 作品
47. 既存アプリにはなかった経路一覧ページを作成。 検索時に一覧で経路をみて気になるものを確認できるようになっ ている。 経路一覧のデザイン Point03 絞り込みできる条件 の時間・乗換回数・ 料金がわかるような 構成 縦に並べることで比 較しやすく経路の情 報もみやすい 優先したい順番にで きるタブ After なし なし Before 作品
48. Figma(デザイン)・Photoshop(MV画像作成・写真加工) 使用ツール デザイン、構成、リライティング 制作範囲 3日間 制作期間 HPからの無料体験のお問い合わせをしてもらう 目的 少人数クラスで一人一人と時間をかけて正面から向き合った指導を している。 三重県津市にある小中高生を対象とした学習塾。 学習塾のHP #HP 作品
49. Before
50. After
51. 三重県津市にある小中高生を対象とした学習塾。 少人数クラスで一人一人と時間をかけて 正面から向き合った指導をしている。 事業内容 ◆職種：主婦 ◆名前(年齢)：山田よし子(37歳) ◆居住地：三重県津市 ◆情報： 他塾に通っている中学生の息子がいるが成績に伸 び悩んでいる。少人数クラスで生徒一人一人に合 わせた丁寧な指導をしてくれる塾を探している。 ペルソナ 少子化が進む中でeラーニングの塾や同じ地域の他塾に 生徒を取られており生徒数が減っている。 対面授業の塾として他塾との競合に勝ち地域に根ざした 塾を目指していきたい。 ビジネス課題 ・ただ勉強を指導するのではなく、一人ひとりに向き 合い人間力から変えていく指導 ・勉強に集中できる環境(先生がきちんとみてくれる) ・塾長 が指導(学生講師 がいない) USP HP から塾に興味 を持 っても らい 体験 授業のお問 い合わせにつ なげ る。 目的 ・塾のUSP がわからない ・タ ーゲット がわからない ・閲覧者視点 でコ ンテ ンツ の構 成がさ れていない HP改善点 作品
52. テイスト、レイアウト、構成から制作方針を立てる デザインの制作方針 既存サイトからの改善としてMVとMV下のコンテンツで塾のUSPを 訴求して興味を持ってもらえるような構成にしています。 コンバージョンは閲覧者の心理を考えここでお問い合わせしたいポ イント2箇所設置しています。 USPが伝わり興味を持ってもらう構成に 構成 奇抜なおしゃれさは不要でシンプルで見やすいレイアウトにしてい く。生徒や教室の様子など画像がメインとして良いイメージを与え られるようにしていく。 情報のみやすさを第一に レイアウト 現状のサイトは当たり障りのない人間味のないテイストになってい る。そのため塾らしい信頼感のある雰囲気を残しつつ塾のUSPであ る人生を変えるというコンセプトにあったデザインに落とし込む。 塾らしい誠実感と先生の想いを入れる テイスト 作品
53. フォント・配色・あしらいの使い方 コンテンツ構成 他塾のUSP 参考ポイント 閲覧者が検索するワードを考えてのGoogle検索、ピンタレストから ベンチマークを選定。 デザインだけでなく各教室のUSPや構成も参考。 ベンチマーク 作品
54. メリハリをつける フックとなるターゲット、ベネフィット、特徴が伝わるFV 情報の見やすさ 気をつけたポイント 課題解決への制作方針とベンチマークの作品を観察しながらライ ティングを元にワイヤーフレームを作成。 ワイヤーフレーム 作品
55. 以下のように選定。 フォント・カラー フォント 日本語・英数字 Noto Serif JP シンプルで信頼感のある読みやすいゴシック体を使用。 日本語見出し TA風雅筆 先生の想いを伝えたい見出しに使用。 ベースカラー シンプルで清潔感のある白を使用 メインカラー 人間味あり先生の熱い想いが伝わる赤を使用 アクセントカラー 学習塾らしい信頼感のある青を使用 カラー 作品
56. FVで情報が伝わり興味を持ってもらうための構成をデザインに落 とし込んでいます。 一番目立たせたいベネフィットを大きく打ちだし塾の特徴を3つ の円でわかりやすくしています。 一画面で情報が伝わるMV Point01 ぱっとみてわかる3 つの強み 背景には学習風景と 合格後のイメージを いれて良いイメージ を連想させる ターゲットとベネ フィット(USP)を一 番に訴求 サービス内容を明示 作品
57. FVで情報が伝わり興味を持ってもらうための構成をデザインに落 とし込んでいます。 一番目立たせたいベネフィットを大きく打ちだし塾の特徴を3つ の円でわかりやすくしています。 見せたい箇所は動画や図解を使用 Point02 動画をみない方向け の文言。 一部色変えでポイン トを押させる MV下の一番上に動 画をいれてどんな塾 なのか認知させて興 味を持たせる 作品
58. 学習塾のためあまり主張が強いコンバージョンにしない上でテイ ストに合わせた工夫をしました。 テキストを左で人画像を右二配置することでテキストに目がいく ようにしています。 またボタン上に閲覧者の心理を言語化しコンバージョンの後押し をしています。 トンマナに合わせながら 目を止めてもらうコンバージョン Point03 目が留まる人画像 信頼感のある青スト ライプで他のコンテ ンツ背景とのコント ラストをつける コンバージョンを後 押しするテキスト 吹き出しをいれて軽 い感じをだし、テキ ストに目がいくよう にデザイン 作品