教育分野に強い UI&Webデザイナー 教育業界 年 12 徹底した と、 で、 リサーチ 共感力・言語化力 心に届き、行動を後押しするデザインを。 Portfolio by Tetsuhiro Yamaguchi 

No content

01 Profile プロフィール P.04 02 Service サービス P.07 03 Works 制作実績 P.10 04 Other Works その他の実績 P.60 05 FLOW 提案の流れ P.61 06 Contact お問い合わせ P.63 語学学習アプリのUI改善 UIデザイン UIデザイン UIデザイン P .11 転職エージェントの LPリニューアル LP LP LP P .39 パーソナルジムバナーの デザイン改善 バナー バナー バナー P .50 教育コンサルティング企業 のWebサイトリニューアル Webサイト Webサイト Webサイト P .26 03 P. Contents -目次- 

山口 哲弘 Tetsuhiro Yamaguchi 1987年4月29日生 神奈川県出身／東京都在住 経歴 経歴 経歴 私立高校　非常勤講師 2013年4月〜2014年3月の1年間、理科の非常勤講師として勤務。 青年海外協力隊としてラオスに派遣 2014年7月〜2016年6月の2年間、現地の教員養成大学にて、 国際協力ボランティアとして活動。 株式会社栄光で理科実験教室の運営 2016年12月〜2019年5月の2年半、同社のSTEM事業部にて、 小学生向け理科実験教室の講師／教室長として勤務。 三重県公立中学校　教諭として勤務 結婚のため、妻の地元三重県に移住。2019年9月〜2024年3月の4年半、 三重県内の中学校にて、理科の教諭として勤務。 株式会社BYDにて業務委託職員として勤務 2024年4月より、同社にて業務委託としてフルタイム勤務。 教育プロデューサーとして、Webデザインやグラフィックデザイン、 資料・教材制作を中心に営業やカスタマーサクセスなどの業務を行う。 現在、フリーランスデザイナーとして活動 2024年4月より、フリーランスデザイナーとして活動。 大学卒業から教育に関わる仕事に従事してきました。在職中も、生徒に「物事を わかりやすく、楽しく教えるにはどうすれば良いか？」とデザインに触れること も多く、そのような中でデザインに対する興味が広がっていきました。
 転職を決意してから、在職中にオンラインスクールでWebデザインを学び、 2024年にフリーランスとして独立しました。「誰かの『伝えたい』に寄り添い、 共感と行動を生み出せる」デザイナーになりたいと思っています。 映画鑑賞、サイクリング、お香、ディズニー、一人飲み 好きなこと・趣味 好きなこと・趣味 好きなこと・趣味 Profile-自己紹介- 実務経験 1年 実務経験 1年 実務経験 1年 04 P. 

Illustrator & バナー（広告・SNS用など & チラÉ & 名刺 Photoshop & 画像の加工・レタッC & 写真の色補正・切り抜き処G & Web用画像の最適化 Canva & バナーなどの簡易デザイi & 画像生成
 など Power Point & スライド資料の作成 ペライチ & 簡易ランディングページの実装 Profile -できること- 05 P. Figma & ホームページデザイi & ランディングページデザイi & UIデザイン（アプリ・Webなど & バナ & スライド資料 STUDIO & デザインしたWebサイトの実 & モバイル対応・レスポンシブ設計 Chat GPT & 画像生成（参考イメージなど & 構成案・文章作りの壁打Ý & リサーチ・競合分析の補助 

デザインは、価値や魅力をただ整えるだけでなく、
 受け手の心に届け、行動を後押しする手段だと考えています。
 「誰に、何を、どう伝えるか」を大切に、ヒアリングを通じて 構成や表現をご提案、お客様の負担を減らしながら、 “伝わるカタチ”を一緒につくっていきます。 06 P. Profile-大切にしていること- 心に届き、 行動を後押しする デザインを。 

見た目はキレイだけど、成果はあまり… Case 01 指示通りに動くだけで、提案がない… Case 02 どこまで仕事を任せればいいかわからない… Case 04 コミュニケーションがうまくいかず、疲れる… Case 03 デザイン業務に関してこのようなお悩みはありませんか？ 07 P. 

Service -私の強み- 08 P. お客様の課題をデザインの力で解決します！ 見た目はキレイだけど、成果はあまり… Case 01 指示通りに動くだけで、提案がない… Case 02 Point 01 成果から逆算するデザイン設計 見た目の美しさだけでなく、誰に・何を・どう伝えるかを明確に した上で設計します。目的に合わせて構成から見直すことで、成果 につながるデザインを実現します。 事業や業界の理解、競合分析などを丁寧 に行い、目的に合わせた構成や見せ方を 設計いたします。 お客様の課題や想いを丁寧に汲み
 取れるよう、ヒアリングシートや
 チェックシートを活用しながら、
 ご要望を反映した形で進行いたします。 提案型のパートナーシップ ただ指示通りに作るのではなく、目的に沿ってより良くなる方向性 を提案します。 初期段階からアイデアを一緒に整理し、形にして いく伴走型のスタイルです。 Point 02 

Service -私の強み- 09 P. お客様の課題をデザインの力で解決します！ コミュニケーションがうまくいかず、疲れる… Case 03 どこまで仕事を任せればいいかわからない… Case 04 丁寧でスムーズなコミュニケーション 返信の速さや丁寧な説明など、やり取りのストレスを最小限に抑え る対応を心がけています。初めての方にもわかりやすく、安心して 相談いただけます。 Point 03 SlackやLINEなど、ご希望の連絡手段や 定例MTGの頻度に合わせて、お客様に とって心地よいペースでコミュニケー ションを取りながら進行いたします。 負担を軽減するための進行力 ヒアリングから構成・デザインまで一貫して対応し、限られた時間 の中でも無理なく進められる体制を整えています。多忙な方でも任 せやすく、安心しておまかせいただけます。 Point 04 進行管理表などを活用し、業務の進捗を 見える化・共有しながら、安心して進め られるよう心がけています。 

WORKS UI design / Web site / LP / Banner 制作実績 

語学学習アプリのUI改善 語学学習アプリ「NHKゴガク 語学講座」様の UI改善を行いました。 参考：「NHKゴガク」公式アプリ(https://www.nhk.jp/g/gogaku/) 本改善案は、NHK日本放送協会の公式見解やアプリとは関係のない、個人の自主制作としての提案です。 ジャンル 教育（語学） 担当範囲 情報設計、UIデザイン 制作期間 3週間 使用ツール Figma 11 P. WorksUIデザイン 

No content

BEFORE Works 要件定義 ターゲット ターゲット ターゲット 英語初心者〜中級者（中高年が多い） € 毎日コツコツ学習f € 通勤・家事のスキマ時間に音声中心で学ぶ傾E € 「シンプル・わかりやすい・信頼できる」を重視 目的 目的 目的 公共放送としての使命を果たす NHK＋の視聴や教材購入を促す € 誰もが無料で教育・語学・情報にアクセスできるアプリであるこ € 使いやすいUI／直感的に情報へアクセスできる構造 € NHK＋／NHK出版／NHKダウンロードストア／不語学プレーヤー
 アプリなどへ自然に誘¾ € NHKやNHK＋の新規契約、テキスト・音声・CD・電子教材などの
 販売促進 事業内容 事業内容 事業内容 NHKの ラジオ語 学講座を 手軽に聴 ける無料アプリ。
 英語を はじめ、中 国語 ・フランス語 ・スペイン語 など全8言語 に対応。 放送 された 講座を 、アプリでストリーミング再生（ 翌週1週間） できる。 自主制作のた め、以下の 内容を 要件として 仮定し 、制作を 進めました 。 13 P. 

Works 制作過程 14 P. アプリレビューや競合分析から、ユーザーの不満や改善のヒントを収集 リサーチ STEP 01 STEP 01 STEP 01 アプリレビューや競合分析から、ユーザーの不満や改善のヒントを収集 リサーチ STEP 01 アプリレビューや競合分析から、ユーザーの不満や改善のヒントを収集 リサーチ STEP 01 ユーザーとビジネス両面から、優先課題を分類・言語化 課題の整理と明確化 STEP 02 STEP 02 STEP 02 ユーザーとビジネス両面から、優先課題を分類・言語化 課題の整理と明確化 STEP 02 ユーザーとビジネス両面から、優先課題を分類・言語化 課題の整理と明確化 STEP 02 導線・情報の優先順位を整理し、ワイヤーフレームで構成を設計 制作方針の決定 STEP 03 STEP 03 STEP 03 導線・情報の優先順位を整理し、ワイヤーフレームで構成を設計 制作方針の決定 STEP 03 導線・情報の優先順位を整理し、ワイヤーフレームで構成を設計 制作方針の決定 STEP 03 視認性や操作性に配慮し、誰にでも使いやすいUIにデザイン 情報設計・構成案の作成 STEP 04 STEP 04 STEP 04 視認性や操作性に配慮し、誰にでも使いやすいUIにデザイン 情報設計・構成案の作成 STEP 04 視認性や操作性に配慮し、誰にでも使いやすいUIにデザイン 情報設計・構成案の作成 STEP 04 「わかりやすさ・信頼感・継続性」を軸に、UI/UXの方向性を明確に設定 UIデザインの制作 STEP 05 STEP 05 STEP 05 「わかりやすさ・信頼感・継続性」を軸に、UI/UXの方向性を明確に設定 UIデザインの制作 STEP 05 「わかりやすさ・信頼感・継続性」を軸に、UI/UXの方向性を明確に設定 UIデザインの制作 STEP 05 本制作では、以下のプロセスを経てUIデザインを行いました。 START 

Works リサーチと課題の整理 ユーザーのレビューを調査し、課題点を整理しました。 15 P. ユーザーの口コミを調査 ユーザーの口コミを調査 ユーザーの口コミを調査 App Storeなどのユーザーレビューを調査し、実際の利用者 が抱える不満や課題を抽出。そこから導き出した内容を もとに、具体的な改善点の言語化に活かしました。 その他の意˜ ” メニュー構成が複雑で、直感的に使えな ” 再生ボタンの操作性が悪い（ラグや配置の問題z ” 戻るボタンがなく、トップに戻されてしまう 主要な低評価の口コミ 主要な低評価の口コミ 主要な低評価の口コミ 目的の番組を探すのが手間 50 約 件 ボタンが小さくて押しづらい、 誤タップが多い 20 約 件 シーク操作（戻る・進むボタンなど）が わかりにくく、使いづらい 30 約 件 文字が小さい、画面が見づらい 15 約 件 課題点の整理 課題点の整理 課題点の整理 リサーチ結果と実際の使用体験に加え、ビジネス上の 目的達成を視野に入れながら、UI構造を分析し、課題点を 整理・言語化しました。 リサーチ結果より リサーチ結果より リサーチ結果より 01 画面構造と導線が複雑で迷いやすい 02 視認性と操作性に課題があり、使いづらい UI構造の分析より UI構造の分析より UI構造の分析より 03 外部サービスへの誘導が弱い 制作方針の作成へ 

Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 16 P. 直感的に使えるナビゲーション p メニューを目的別に再構成し、迷わず使える構造 p 戻るボタンや再生UIなども含め、操作の流れをシンプルに整理 01 視認性と操作性の向上 p 階層を浅くして現在地を明確化し、操作の負担と誤タップを軽減• p TOPの縦ロールを整理し、番組一覧は横スクロールなどで視認性アッ p ボタンやレイアウトを直感的にし、誰でもすぐに操作できる設計へ 02 導線設計の最適化 p TOPや学習画面に「教材購入」や「NHK＋視聴」への導線を自然に設Ï p 講座に応じた教材リンクや提案を行い、マネタイズに繋げる 03 

Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 Duolingo AI英会話 スピークバディ Lissn Busuu mikan 調査したアプリ 調査したアプリ 調査したアプリ n ボタンサイズが大きく、色や装飾のコントラストも明確で、
 タップしやすさと視認性の両立が図られていた— n 「記事＋音声」の画面分割が適切で、読みながら音声を
 操作しやすく、再生UIの配置も直感的だった— n ホームやメニューが情報を絞った設計で、現在地や次に
 取るべき行動が明確に示されていた。 参考になった点 参考になった点 参考になった点 

Works ペルソナ設定 利用シーンを想定した上で、ユーザー像を設計しました。 18 P. 佐藤 明子（さとう あきこ） 年齢：58歳 職業：パート勤務（事務サポート） 家族構成：夫と2人暮らし（子どもは独立） 利用状況 利用状況 利用状況 課題 課題 課題 使用しているデバイスはAndroidスマートフォン（ミドルスペック）で、
 利用シーンは通勤バスの中や家事の合間にラジオ講座を視聴する。
 英語レベルは初級（中学英語レベル）で、学習の目的は、趣味と老後に向けた 学び直し。
 英語ニュースをスムーズに理解したいと考えている。 ç アプリの構成が複雑で、どこを押せばいいのか迷いやすいÉ ç 文字やボタンが小さく、操作にストレスを感じやすいÉ ç 年齢的に細かい設定や複雑な導線よりも、シンプルで一目で使い方が
 分かるUIを求めている。 メインペルソナ メインペルソナ メインペルソナ 名前：田中 一樹（ たなか かずき） 年齢：2 7歳 職業：I T企業勤務（ 在宅ワーク中 心） 家族構成：一人暮らし 利用状況 利用状況 利用状況 課題 課題 課題 使用デバイスはi Phon eで、通勤や 休憩中などのス キマ 時間に英語ニュース を 音声で 聞き流している。
 英語レベルは中級（ TOEI C600点程度）で、 キャリアアップや 転職 活動に 備えて英語 力を 高めたいと考えている。 ç 操作フ ローが 煩雑 だったり、操作にストレスを感じるとす ぐに
 離脱してし まう傾向が あるÉ ç 必要な 情報や 機能にす ぐアク セスで きる、 効率的で 軽快なUIを求めているÉ ç 語学学習アプリに 過度な 演出や 装飾は 不要で、 実用 性とス ピード感 を
 重視している。 サブペルソナ サブペルソナ サブペルソナ 

Works カスタマージャーニー ペルソナ情報をもとにカスタマージャーニーマップを作成しました。 19 P. フェーズ きっかけ 認知・関心 初回利用 継続利用 教材購入 • 英語力があれば、もっと
 世界が広がるか… • でも何から始めれば
 いいか、わからない… • 新しい挑戦へのワクワp • でもちょっと不安
 （続くかな？） • 手軽に、無料で、
 信頼できる方法がいい€ • NHKなら安心できるかも？ • 少し安¨ • でも「本当に続けられる
 かな？」という疑念も少し • 完全無料だし、試しに
 聴いてみよÀ • 使いにくかったらイヤだな • 使いやすい、続けられそう
 ＝安心感 • 継続できている自分に
 満足è • もっとレベルアップした い、新しいことも学びたい • 「続けるって 気持ちいい 」
 という ポジ ティブな感  • 物足 りな さ、 向上心 • ラジ オだけよ り、 教材を
 使った ほうが 理解が 深ま り そÀ • NHK ＋なら 映像も 見れて、
 さらに学びやすそう • 「もっと 勉強したい ！」
 という 意” • 自 己投資に 前向きな 納得感 思考 感情 行動 • 海外旅行、 外国人と の
 交 • 自 己成 長・生涯学 習へ の
 興味 • イ ンター ネッ ト検Œ • 知り合いの 口コ– • 過去の 記憶 • アプ リを ダウンロー ド
 して 初めて 起¨ • ラジ オ講座をス トリー
 ミングで 視聴してみる • 通勤や 家事中にアプ リを
 習慣的に 利用する • アプ リからNHK 出版、
 ダウンロー ドス トア、 NHK +への リンクに 遷Î • 教材購入やNHK +の 契約 

ホーム画面 番組一覧ページ メニュー画面 CVページ 番組画面(再生画面) ラジオ番組 ニュース記事 CVページへ （アプリ内NHK+紹介ページ） CVページへ （アプリ内有料コンテンツ紹介ページ） 番組一覧 CTA（教材販売ページへ） CTA（アプリDLページへ） – – CVページへ （アプリ内NHK+紹介ページ） CVページへ （アプリ内有料コンテンツ紹介ページ） もっと勉強したい人へ 設定・その他 CTA（教材販売ページへ） CTA（アプリDLページへ） 番組名 番組情報 CTA （NHK+のHPへ） NHK＋ 番組紹介 NHK＋とは CTA （教材販売ページへ⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩） CTA （アプリDLページへ） 教材販売 有料アプリ 20 P. Works情報設計 収益機会を自然に生むための画面遷移を再設計しました。 アプリ内の各画面に、関連教材へ誘導するリンク（CTA＝行動を促すボタン）を自然に配置。
 ユーザーの流れを妨げず、必要なタイミングでCTAや教材ページ（CVページ）にアクセスできる設計に しました。 

21 P. Works デザインシステム 読みやすさと親しみやすさを意識し、自然と馴染むトーンで設計しました。 フォント フォント フォント Noto Sans JP -Bold 和文 欧文 Noto sans JP -Medium Roboto -SemiBold Roboto -Medium フォントは、可読性と信頼感を重視し、 和文には「Noto Sans JP」、欧文には
 「Roboto」を使用しています。
 Noto Sans JPは安心感のある読みやすさが
 特長で、Robotoは英語でも視認性が高く、
 洗練された雰囲気を演出します。 カラー カラー カラー #03A9F4 #3CB371 #F6F144 #FF9010 #222222 #D01027 #F0F1F2 メイン カラーにはN HKゴガクの 水色、 アクセントにはN HK公式の 赤を使い、 信頼感と 親しみやすさの バラン スを 意識しました。
 背景には ライト グレーを使 うこと で 目に 優しく、 全体の視認性も 向上。
 各機能や 番組に 合わせて、 テーマカラーを 柔軟に 展開しています。 コン ポー ネント コン ポー ネント コン ポー ネント 

すべての番組が縦並びで表示され、 スクロール量が多く、目的の番組に たどり着くのが面倒。 番組一覧 横スクロール表示に変更し、タブバー からも直接ジャンプできるように 設計。目的の番組に素早くアクセス 可能に。 番組一覧 画面下部に配置されているため気づきにくく、 内容も無料アプリ紹介のみで、マネタイズに 繋がりにくい。 リンク導線 スクロール負荷を軽減しつつ、教材
 販売やNHK＋への導線を強化。
 視認性とマネタイズ効果を両立。 リンク導線 Worksホーム画面 22 P. BEFORE BEFORE BEFORE AFTER AFTER AFTER 

トロフィーと簡単な教材紹介のみで、 番組に関連した教材への誘導が弱く、 マネタイズにつながりにくい。 リンク導線 番組ごとに関連教材を表示し、さらに 語学アプリのDLリンクも追加。学習意欲が 高まったタイミングで自然に遷移できる 設計に。 リンク導線 巻き戻し・早送りが6秒固定で、表示がなく 直感的に分かりづらい。 再生画面 10秒の巻き戻し・早送りをアイコン＋秒数 表示で直感的に操作できるよう改善。 倍速再生などの便利機能も追加。 再生画面 番組一覧ページを追加。また、ポップアップで 教材やアプリのDLリンクの導線も追加。 番組一覧 Worksラジオストリーミング 23 P. BEFORE BEFORE BEFORE AFTER AFTER AFTER 

サムネイルがなく、一覧が文字情報 のみのため、どんな記事かが直感的に わかりづらく、興味を持ちにくい。 番組一覧 ニュース一覧にサムネイルを追加し、 視覚的にメリハリのある構成に改善。 記事内容も把握しやすくなった。 番組一覧 再生画面を開く操作が必要で、英文・和訳・ 学習ポイントの切り替えも下部にあるため、 音声と文章を同時に活用できない。 再生画面 和文・英文・学習ポイントの切り替えを 上部に配置し、再生画面を常に表示する ことで、文章を見ながら音声学習が可能に。 再生画面 Worksニュース記事 24 P. BEFORE BEFORE BEFORE AFTER AFTER AFTER 

左上にハンバーガーメニューがあり、 見つけにくく片手操作もしづらい。 メニュー 画像を含んだカード型リストにし、画面に メリハリを持たせて視認性を向上。
 興味を引きやすく、ボタン設計でリンクで あることも明確に伝わる構成に改善。 おすすめコンテンツ 文字情報のみで視覚的な訴求力が弱く、 リンクであることもわかりにくい。 おすすめコンテンツ タブバーに変更することで、現在位置が ひと目でわかり、片手でも直感的に操作可能に。 メニュー Worksニュース記事 25 P. BEFORE BEFORE BEFORE AFTER AFTER AFTER 

教育コンサルティング企業の Webサイトリニューアル 教育ベンチャーの株式会社BYD様の公式Webサイトの リニューアルを行いました。 参考：株式会社BYD(https://byd.education/) 本改善案は、株式会社BYDの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 ジャンル ジャンル ジャンル 教育コンサルティング 担当範囲 担当範囲 担当範囲 情報設計、デザイン 制作期間 制作期間 制作期間 3週間 使用ツール 使用ツール 使用ツール Figma 12 P. WorksWebサイト 26 P. 

No content

BEFORE Works 要件定義 ターゲット ターゲット ターゲット i 探究学習や教育改革に関心のある中高の教職員、校長・教務担当者@ i 教育連携を模索する企業の教育・CSR・採用担当者@ i 教育に情熱を持つ若手人材や転職・副業希望者。 目的 目的 目的 ブランディング 認知の向上 採用強化 BYDの思想・世界観・教育への本気度を伝える 「探究学習」「教育×企業連携」での存在感アップ 共感して一緒に働きたいと思える人材を呼び込む 事業内容 事業内容 事業内容 学校・企業・自治体向けに、探究学習の出前講座や教材開発、教育コンサルティングを提供。
 アントレプレナーシップや生成AIなど最先端テーマを扱い、全国150校以上で実績。 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 28 P. 

Works リサーチと課題の整理 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 29 P. 類似ビジネスの課題 類似ビジネスの課題 類似ビジネスの課題 （１）収益の安定化 学校側の予算が限られ、単発案件が多く、継続収益を
 生む仕組みや商品設計が課題。 （２）人的リソースの偏り 少人数に業務が集中しやすく、分業や業務の再現性ある
 仕組み化が必要。 （３）採用と育成の難しさ スキルとカルチャーの両面でマッチする人材の確保が困難。 （４）認知・ブランド力の不足 導入後の評価は高いが知名度が低く、「何者かの説明」に 営業コストがかかる。 （５）競合との差別化 類似サー ビスが 増えてきている中で、 他社との 差別化 が
 難しく、 独自性の 伝え方が 鍵と なる。 課題 点の整理 課題 点の整理 課題 点の整理 類似ビジネスの傾向や課題感を踏まえ、サイト構造と役割 を分析し、仮説に基づいた課題を整理・言語化しました。 01 採用強化 チー ムや仕 事の 魅力が 伝わら ず、 共感採用に つなが りにくい。 02ブランディング・認知向上 ビジョンや 想いが 十分に 語られ ておら ず、 「 BYDってどんな会社？」が 印象に 残りづらい。 03競合との差別化 授業の 質・企業 連携の 強さ・新規開発 力とい った 魅力が、 Web上で 立ち上が ってい ない。 制作方針の作成へ 

Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 30 P. ファーストビューの再設計 g キャッチコピーで「BYDらしさ」と「未来を動かす学び」を印象づけ` g 生徒の笑顔や授業風景を背景に使い、体験価値を直感的に伝える 01 情報構造の整理 g 理念やストーリーは簡潔にビジュアルと併せて提示、詳細は下層± g サービス・実績・採用は構成を軽くし、直感的に伝わるビジュアル設計 g 共感や興味を惹きつける導線を意識し、流れを整理 02 視覚的ブランディングの強化 g 信頼感と前向きさを両立したトンマナで、教育現場・企業の両方に響く
 印象を形í g 既存カラーを軸に、余白やフォントで安心感と教育の可能性を表現 03 

Works ベンチマーク 31 P. 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 業界（競合他社） 業界（競合他社） 業界（競合他社） – 抽象的な背景や図形が多く、子どもの写真は少なw – 全体的にシンプル設計だが、やや単„ – 「信頼感」or「ポップさ」に寄った印u – →FVのインパクトや導線の工夫で差別化が可能 構成 構成 構成 – セクションごとに背景や装飾でメリハリを演— – ポップでもフォント・配色で信頼感を確保 →柔らかさ＋信頼性の両立が鍵に FVデザイン FVデザイン FVデザイン – 太字＋変形・反転文字などでインパクÒ – 背景とのコントラストで視認性UP →写真・コピー・あしらいを一体化した印象設計 「業界（競合他社）」「構成」「FVデザイン」に分けてリサーチし、参考にすべき点を言語化 

Works ペルソナ設定 32 P. 利用シーンを想定した上で、ユーザー像を設計しました。 名前：鈴木 拓真（すずき たくま） 年齢：38歳 職業：東京都の私立中高一貫校（進学校） 教務主任・探究学習推進担当 家族構成：妻と小学生の小４の息子と小１の娘がいる 背景 背景 背景 ± 受験指導中心だった学校で、探究学習コースの立ち上げに携わ§ ± 主体的な学び・ICT活用を推進したい意欲あz ± 教育委員会や同業者の口コミも大事にする堅実タイプ ニーズ ニーズ ニーズ ± 会社の理念・教育への考え方（自校と価値観が合うかÑ ± 実際の授業内容、子どもたちの反à ± 導入校や企業連携などの客観的な実績 課題・悩み 課題・悩み 課題・悩み ± 探究学習の 具体的な進 め方に自 信がな 9 ± 授業プ ラン・教 材・ 講師サポー トを ワンス トップで 依頼した 9 ± 信頼で きる 外部パー トナーを探し ている（ “学校 文化”への理 解重視） 行動パター ン 行動パター ン 行動パター ン ± 教育イ ベント・ 行政紹介・同業者の口コミを 通じて、 信頼で きる 情報を 収v ± SNS（ 特に Facebook）で探究教育の 最新事 例や トレンドも 日常的に チェッu ± Web訪問時は理念・実績を 確認し、自校に合え ば資料請求や 問い合わ せへ ペルソナ ペルソナ ペルソナ 

Works カスタマージャーニー 33 P. ペルソナ情報をもとにカスタマージャーニーマップを作成しました。 フェーズ 認知 関心 比較 接触 導入 x 自校でも探究を進めたい。 信頼できる外部がいれば… x 教育観に共感できるか、
 実績は十分か？ x 上司に提案するには根拠が
 必要 x まずは詳しい話を聞いて
 みよう x 初めての探究、信頼できる
 パートナーと組みたい 思考 行動 x 教育イベントやSNSでBYD の存在を知る x Webサイトで理念・実績・
 サービスを見る x 資料を請求し、他社と比較
 しながら実績や連携企業を
 確認 x 問い合わせを行い、
 オンライン面談に申し込む x 校内で提案し採用、出前
 講座を導入 x 少し 期待、でも 慎重に
 見 極めたい x 「ちゃんとして そう 。
 詳し く知 りたい 」 x 「この 会社なら、話を
 通せ そう 」 x 「直接、 担当者と、導入に 関する 具体的な 相談を
 したい 」 x 「一緒にやれる 安心感が
 ある † x 「今後も 長い お付き合いを
 期待したい 」 感情 

Works フォント・カラー 34 P. 読みやすさと親しみやすさを意識し、自然と馴染むトーンで設計しました。 フォント フォント フォント 可読性が高く、教育・行政・企業といった幅広いターゲット に対して信頼感を与えるフォント。
 本文やナビゲーション、各セクションの説明文など、サイト 全体の基調書体として使用。 Noto Sans JP（和文） 洗練された幾何学的なデザインで、ビジュアルに上品さや モダンさをプラス。主に見出しや数字に使用。 Futura（欧文） インパクトがあり、採用セクションのキャッチコピーなど、 強いメッセージを伝える場面で使用。 Anton（欧文） カラー カラー カラー #222222 #EB3624 ~#0184DC #CECECE #0184DC #015FB7 ~#00C0FA #FC8B12 #015FB7 メインカラー ：ブルー BYDの ブラン ドカラーを基調に、信頼感や 先進性を強調 する 濃い ブルーを基調に、ナビや ボタンなどに 活用。 アクセントカラー （オレン ジ／赤×青グラ デー ション ） オレンジで 温かみと 勢いを 演出し、採用セクションに は赤×青の グラデーションで 目を 引く 仕掛けを 設置。 サブカラー （ブルー グラ デー ション ） 濃淡の ブルーで広がりと 統一感を 持た せ、 背景やタイトル 装飾に 使用。 

35 P. Works TOPページ全体 BEFORE BEFORE BEFORE AFTER AFTER AFTER 

Works デザインの意図 36 P. ファーストビュー 権威性 権威性 権威性 キービジュアル直下に、受賞歴や導入校のロゴを掲載し、 ユーザーが最初に“信頼に値する企業”と認識できるように設計。 キービジュアル キービジュアル キービジュアル 生徒と先生が共に未来を見つめ、希望や成長への期待を 象徴する構図。
 背景のラインは、勢いや前進する力、先進的な教育を視覚的に 表現するために配置。 生徒の成長や変化といった“ベネフィット”が伝わる独自の
 キャッチコピーを採用。
 文字を斜めに配置することで視線誘導と勢いを演出。配色には オレンジを用い、視認性と感情訴求を両立（既存カラーに
 依存せず最適な表現を優先）。 キャッチコピー キャッチコピー キャッチコピー 

Works デザインの意図 37 P. 下層ページ① お知らせ お知らせ お知らせ 信頼感と活動の鮮度を伝えるセクション。
 実績や社会的評価が目に留まる位置にあり、導入検討時の安心材料に。
 FV直後に設置することで、第一印象と同時に“裏付け”を提示。 「どんな想いで教育に取り組んでいるか」を伝えるブランドセクション。
 ビジョンやストーリーを完結に語り、会社の理念やこれまでのストーリーに興味を持ってもらう。 背景は、ウェーブ上にすることで、構成にメリハリをつける。
 写真はICTを用いた教育活動をイメージさせ、テクノロジーを用いた教育活動が強みであることを伝える。 私たちについて 私たちについて 私たちについて BYDの コア事業を 端的に 紹介。
 サービスの 種類を わかりやす く分け、 対象 （学校・企業など ）や提 供価 値が ひと目で伝 わる構成に。
 ビジ ュアル付 きで、 具体的な 学びのシーンが想 像で きる 工夫。 スライ ダー 形式に して、こ ちらもメリハリのある 流れに。 サービス サービス サービス 

Works デザインの意図 38 P. 下層ページ① 導入実績 導入実績 導入実績 信頼性・社会的実績を可視化し、初見ユーザーに安心感を与える。
 写真と実績サマリーで、「自分の学校でも導入できそう」と感じさせる構成。
 教育現場や企業の信頼を獲得していることを視覚的に表現。 「この会社で働きたい」と思える共感型の採用導線。
 メンバーの写真を大胆に配置し、“人の魅力”と“熱量”をダイレクトに伝える。
 強いメッセージ性のある英語コピー＋サブコピーで、教育への情熱に共鳴する人材を引き込む。 採用情報 採用情報 採用情報 シンプルでオーソドックスな構成に、右下へ視線を誘導するグラデーションのラインと光の円を
 重ね、「未来へと広がる可能性」を想起させる、静かで印象的なアクセントを加えました。 フッター フッター フッター 

転職エージェントの LPリニューアル ラグジュアリー・ファッションブランド業界特化型 転職エージェント株式会社Aprime様のLPリニューアルを行いました。 参考：株式会社Aprime(https://lp.a-prime.jp/20250415-03/) 本改善案は、株式会社Aprimeの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 ジャンル 業界特化型転職エージェント 担当範囲 情報設計、デザイン 制作期間 3週間 使用ツール Figma WorksLP 39 P. 

No content

Works 要件定義 41 P. ターゲット ターゲット ターゲット F 20代〜30代の男女（ラグジュアリーブランド経験者a F キャリアアップ志向があり、自分に合う職場を重視する層 目的 目的 目的 F LINE友だち追加をCVポイントとすŠ F 業界特化の専門性や年収アップ実績、手厚いサポート体制など、
 A-primeの強みを知ってもらw F 転職希望者に安心感を与え、相談・登録へと導く導線設計 事業内容 事業内容 事業内容 F ラグジュアリー・ファッション業界特化のハイクラス転職支À F 非公開求人の紹介から面接・年収交渉・入社後のフォローまでを一貫サポーª F 少数精鋭で、柔軟かつマンツーマンの丁寧な対応を提供 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 BEFORE 

Works リサーチと課題の整理 42 P. 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 類似ビジネスの課題 類似ビジネスの課題 類似ビジネスの課題 （１）求人の幅が狭い 特化型ゆえに選択肢が限られ、紹介可能な求人がなく 離脱につながることもある。 （２）対応スピードにばらつきがある タイミングによってレスポンスに差が出て、他社より 遅く感じられる場面がある。 （３）情報の見える化が弱い 非公開求人が多く、登録前に求人内容や魅力が
 伝わりにくい。 （４）認知・信頼の弱さ 知名度や広告露出が少なく、「安心して登録できる理由」
 がやや伝わりづらい。 （５）差別化が伝わりづらい サービス 品質は高いが、他社と の違いが LP上で 十分に 打ち出 せていない。 課題 点の整理 課題 点の整理 課題 点の整理 類似ビジネスの傾向や課題感を踏まえ、サイト構造と役割 を分析し、仮説に基づいた課題を整理・言語化しました。 01 サービスの強みや他社との違いが伝わりづらい 差 別化 の打ち出しが 弱く、特 長や 実績が 記憶に 残りにくい 構成になっている。 02情報量が多く、視線誘導や余白の整理が不十分 コン テン ツが 詰め込まれ、 重要な 訴求ポイン トが
 埋もれてし まっている。 03視覚的に伝わる魅力や具体性が不足しており、 期待感につながりにくい 非公開求人が 中心 の中でも、 ベネフィットや 強みの 見せ方が 抽象的で、 ユーザーの想像を促しづらい。 制作方針の作成へ 

Works 制作方針 43 P. リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 強みを直感で伝える 「他社との違い」や年収UP率などの強みを、図解やバッジで視覚的に
 整理し、印象に残る構成に。 01 行動を後押しする導線 共感・憧れを喚起するコピーとビジュアルで感情を動かし、登録までの
 ハードルを下げる。 02 ストレスのないUI設計 色・余白・情報量を整え、「読む・押す・理解する」がスムーズな
 画面設計に。 03 

Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 業界（競合他社） 業界（競合他社） 業界（競合他社） s FVで実績・企業ロゴなどで権威性を訴求、信頼感 を獲ˆ s 色味は淡く、余白を多く取ることで高級感と読み
 やすさを演v s CTAが複数箇所に自然に配置されており、ストレス なく登録まで導く構成 構成 構成 構成 s FV→CTA→強み→比較→再CTAなど、行動を促す ジャンプポイントが豊¯ s 写真・アイコンで視線を誘導し、階層やメッセージ を整 s 押しやすさを意識したCTAボタンの配置とデザイン 設計 FVデザイン FVデザイン FVデザイン s キー ビジ ュア ル＋キャッ チコ ピーのみ の
 シンプ ル構成で感 情に訴 え( s 実績やロゴなどの 補足要素はFV から切り
 離し、 下層で整 s 背景画像は 明度・ 彩度を 調整し、コ ピーの 可読性を 優先 「業界（競合他社）」「構成」「FVデザイン」に分けてリサーチし、参考にすべき点を言語化 

Works ペルソナ設定 45 P. 利用シーンを想定した上で、ユーザー像を設計しました。 名前：佐藤 美咲（さとう みさき） 年齢：29歳 職業：国内アパレルブランドのショップスタッフ（正社員） 家族構成：一人暮らし 背景 背景 背景 ‘ 国内アパレルブランドで販売職として正社員勤務Ž ‘ 短大卒 → アパレル業界で着実に経験を積み、キャリアアップを目指してい{ ‘ 渋谷で一人暮らし、ファッション感度が高く、SNS活用も日常的 ニーズ ニーズ ニーズ ‘ ラグジュアリー業界に強いエージェントの専門的なサポーà ‘ 非公開求人や、個人に合った提案・マッチンÉ ‘ 書類作成・面接対策・転職ノウハウなどのマンツーマン支援 課題・悩み 課題・悩み 課題・悩み ‘ 現職で はキャリアアップ・年 収アップの 限界を感 じてい{ ‘ 書類や面接 準備が 不安で、転職活 動自体が 初めてで 踏み 出せな ' ‘ 「自分に合った職 場か」「転職で 失敗しない か」とい う不安が強い 行動パター ン 行動パター ン 行動パター ン ‘ スマ ホ中心の 情報収集（ Google検索＋Instagram・ TikTokもチェッ クj ‘ 検索キー ワード は「ラグジュアリーブランド 転職 」「エージェント 
 おすすめ」など ペルソナ ペルソナ ペルソナ 

Works フォント・カラー 46 P. 読みやすさと上品さを大切に、信頼感と親しみが自然に伝わるトーンで設計しました。 フォント フォント フォント 読みやすく上品な印象を与えるゴシック体。
 安心感や丁寧さを大切にするこのLPの世界観と相性が良く、
 信頼感や誠実さを伝えながら、高級感のあるトーンを保てる
 ため、ファーストビューから本文まで、全体の基本フォント
 として採用。 Hiragino Kaku Gothic Pro（和文） キービジュアルのキャッチコピーには、高級感と語りかける ような親しみを両立させるためのフォントを使用しています。 Shippori Mincho（見出し） 細身でス タイリッシュな印象の サン セリフ体。
 数字や 英語に 限定して使用することで、 視覚的なアク セント
 を 生み、 情報の 整理やス テッ プ表示に メリハリを与える。
 和文との相性 もよく、 ブラン ドらしさと 洗練感を 補強で きる。 Barlow Semi Condensed（数字・ 欧文） カラー カラー カラー #222222 #FFE3D7 #D9D9D9 #3E90E4 #ED6D35 #22BA4F #F0F8FF メインカラー ：ブルー 信頼感と上品さを 演出する 青系を基 調に、 背景と 見出しで使 い
 分けながら全体を 引き締めています。 アクセントカラー （オレン ジ／赤×青グラ デー ション ） 温かみと 華やかさを 兼ね備えた 色で、L INEグリーンとの 補色効果 を 活かし、 CTAの 訴求力を高めています。 サブカラー （ブルー グラ デー ション ） L INEカラーや 淡い ベージュ ・グレーを使い 分け、 ブラン ド連携と 視認性の両立、 そして全体の 調和を 意識しています。 

47 P. BEFORE BEFORE BEFORE AFTER AFTER AFTER Works キービジュアル 「いろんな人」に見せようとして、結果
 “誰にも響かない”構成に。 ターゲット パーツの主張が強く、どこから見て良いか
 わからない状態に。 配色と装飾 長くて説明的、印象に残りづらいことに加え、
 誰に向けたメッセージかが曖昧。 キャッチコピー 強みはあるが、配置とデザインが雑多で
 目立たない。 権威性 フォントや構成、人物写真の選定がチープに
 見えてしまい、ブランドとの親和性に欠ける。 テイスト・イメージ ペルソナの20代女性に寄せたビジュアルと コピーで「自分ごと」感を強化 ターゲット ターゲット ターゲット トーンを 抑えた 色設計と 余白で、 視線の 流れと
 情報の 階層を 整理。 配色と装飾 配色と装飾 配色と装飾 シンプルにメッセージを 絞り 込み、20代女性 が
 “自分の 未来”を 重ねや すい 言葉に 設計。 キャッチコピー キャッチコピー キャッチコピー バッジ化 ＋ゴールドの 装飾で強 調され、
 視認性と 信頼感の 両立を 実現。 権威性 権威性 権威性 上品なフォント、 落ち着いたトーン、 モデル の
 選定により、ラ グジュア リーブランドを目 指す
 ユーザーに 合った 世界観を 演出。 テイスト・イメージ テイスト・イメージ テイスト・イメージ 

48 P. Works デザインの意図 下層ページ① 元のLPではボタンの訴求が弱く、配置も目立ちにくいため
 行動につながりにくかった。
 改善FVでは上下2箇所にCTAを配置し、視認性を高めつつ
 接触回数を増やす工夫を。
 「4つの特典」「1分で完了」など、メリットを明確に伝える
 コピーを添えて、行動を後押しできるようにした。 以降、要所でこれと同じCTAを配置している。 CTA CTA CTA 改善前の「悩み共感型」の導入は遠回りで、強みが伝わる前に 離脱されやすい構成だった。
 改善FVでは「選ばれる5つの理由」として端的に見出し＋説明で
 整理し、一目で魅力が伝わる構成に変更。
 情報密度と読みやすさのバランスを整え、訴求力を高めた。 選ばれる５つの理由 選ばれる５つの理由 選ばれる５つの理由 

49 P. Works デザインの意図 下層ページ② 元の比較表は色や装飾が多く、内容が埋もれてしまっていた。
 色数を絞り、シンプルな構成で自社のメリットが際立つ設計に
 変更し、配置も「選ばれる理由」の直後に置き、自然な流れで
 比較できるようにした。 他社との比較 他社との比較 他社との比較 既存LPでは、実際の「転職者の声」の紹介サムネイルが小さく、
 視認性が低かった。転職者の声を大きく目立たせ、もっとも 目立つように配置した。
 LINE等もだち特典のインタビュー動画の紹介もモックアップに
 変更し、手軽に視聴できる印象を持たせる工夫をした。 転職者の声 転職者の声 転職者の声 既存のLPでは、カラフルな配色とイメージがぞうはイラスト
 中心の構成で、具体的なイメージが湧きにくかった。
 STEP表示＋実写画像を用いることで、リアルなプロセスを
 視覚的に理解できる構成にリデザインした。 転職支援の流れ 転職支援の流れ 転職支援の流れ 

パーソナルジムバナーの デザイン改善 Meta広告に出稿されているパーソナルジム
 「T-balance」様のバナーデザイン改善を行いました。 参考：株式会社ティーバランス(https://t-balance-gym.com/) 本改善案は、株式会社ティーバランスの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 ジャンル ジャンル ジャンル パーソナルジム 担当範囲 担当範囲 担当範囲 情報設計、デザイン 制作期間 3週間 使用ツール 使用ツール 使用ツール Figma Worksバナー 50 P. 

No content

Works 要件定義 52 P. ターゲット ターゲット ターゲット P 健康や体型が気になり始めた 30〜40代男$ P 手軽にボディメイクしたい 20〜30代女性 目的 目的 目的 正方形バナー（SNS/Google ディスプレイ広告€  T-BALANCEの強み（個別指導・コスパ・サポート体制・
 通いやすさ）を訴求し、体験申し込みへの集客を図る。 レクタングル→LP内キャンペーンバナq  4月限定のキャンペーン内容（体験料・入会金・
 初月会費が0円）を強調し、CV（体験申し込み）を
 後押しする導線として設置。 事業内容 事業内容 事業内容 P 完全個室・手ぶらOKで通いやすいパーソナルジÞ P 首都圏・関西エリアに展Ì P 質の高いトレーナーによるマンツーマン指導と、柔軟な
 オーダーメイドプランを提½ P 食事指導やウェア貸出付きのフルサポートで、業界屈指の
 コスパを実現 自主制作のため、 以下の内 容を 要件とし て仮定し、 制作を 進め ました 。 （正方形とレクタングルのバナーを 各２パターン 作成） BEFORE 

53 P. 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 類似ビジネスの課題 類似ビジネスの課題 類似ビジネスの課題 （１）価格競争の激化 価格だけでは選ばれにくくなっており、付加価値や
 ブランドの魅力が差別化の鍵となる。 （２）継続率の低さ 多くの利用者が短期で退会しており、継続を促す仕組みを
 持つジムが優位に立つ。 （３）トレーナー人材の不足・質のばらつき トレーナーのスキル差が顧客満足に直結し、教育体制と
 質の均一化が重要になる。 （４）サービスの差別化が難しい ベーシックな機能では埋もれやすく、価格以上の価値や
 驚きを伝える設計が求められる。 課題点の整理 課題点の整理 課題点の整理 類似ビジネスの傾向や課題感を踏まえ、構造と役割を分析 し、仮説に基づいた課題を整理・言語化しました。 01 競合との差別化が弱い ” 「安いだけ 」に 見えて、価値が伝 わって いな w ” 特典が バナーで 目立 たず、 訴求が 弱w ” サポートや 通いやす さが 表現されて いな い 02ターゲットが男女混在で曖昧 ” ビジ ュアルと コピーに一 貫性がな w ” 女性寄りの 印象だが、 男性向け要 素も 混‚ ” 誰向け か伝 わり づらく、 行動につながりにく い 制作方針の作成へ Worksリサー チと課題の整理 

54 P. リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 安さへの不安を払拭する ベネフィットを具体的に伝えることで“安かろう悪かろう”の印象を避け、 アンケート結果などの権威性で安心感を補強する。 01 ターゲット別に訴求を最適化（正方形バナー） ターゲットを男女に分けて、それぞれ２パターン作成する。各々の目的や
 価値観に合わせたコピーとビジュアルで、共感と行動意欲を引き出す。 02 媒体ごとに訴求軸を調整 SNSでは価格とベネフィットを簡潔に、LP内ではキャンペーン特典と
 お得感を明確に伝える。 03 Works 制作方針 

55 P. Works ベンチマーク 業界（競合他社） 業界（競合他社） 業界（競合他社） h 強みや権威性を明確にアピールしていi h 顧客のベネフィットが伝わるキャッチコピー・ビジュアル設R h 低価格やサポート内容など、情報の取捨選択が的• h 心理的ハードルを下げる工夫が上手い（「30秒で予約」
 「手ぶらOK」など） デザイン参考 デザイン参考 デザイン参考 h ターゲットや訴求内容に応じた構成・トンマナ設R h 適切な要素選択（フォント・配色・構図）による視認性の向³ h バナーが表示された“最初の1〜2秒”で視線を止めるインパクト 作v h 「自分ごと化」を促すビジュアル設計 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 「業界（競合他社）」「デザインの参考」に分けてリサーチし、参考にすべき点を言語化 

56 P. Works 正方形バナー Pattern A Pattern A Pattern A 「腹が凹む!!」という端的な言葉で、ターゲット
 （30〜40代男性）のニーズにストレートに訴求。
 業界最安水準という事実と組み合わせることで、
 “安くて結果が出る”というベネフィットをアピール。 キャッチコピー キャッチコピー キャッチコピー 3項目のアンケート結果を“デザインバッジ”
 として掲載。視認性・信頼性を両立しながら、
 「安いけど不安」な印象を払拭し、安心して
 選んでもらえる構成に。 権威性 権威性 権威性 キャッチコピーに呼応したビジュアルを
 用いることで、「こうなれる」という
 理想像を視覚的に提示。
 強い印象とモチベーションを喚起し、
 広告効果を高める狙いです。 ビジュアル ビジュアル ビジュアル 「1回60分5,000円〜」という明快な価格
 提示により、コストパフォーマンスの
 高さを具体的に表現。
 “通いやすさ”という心理的ハードルを
 下げることを意識しています。 価格 価格 価格 「今だけ！無料」などの文言と、コントラストの強い配色で視線を集める工夫を。
 登録のメリットを明確にし、すぐに行動を促せる構造にしています。 CTA CTA CTA 

57 P. Works 正方形バナー Pattern B Pattern B Pattern B 笑顔と引き締まったボディラインを見せた女性の
 ビジュアルを使用。
 コピーと連動して「自分もこうなれるかも」と
 思わせる理想像を提示し、共感とモチベーションを
 引き出します。 ビジュアル ビジュアル ビジュアル 「手軽に美ボディ」という言葉で、
 20〜30代女性が求める“手間なくキレイに
 なりたい”というニーズをストレートに表現。
 明朝体や光彩加工によって、高級感・
 洗練さをプラスし、価格以上の価値を伝える
 意図があります。 男性向けがベネフィットの直接訴求だった
 のに対し、こちらはメッセージ性や共感を
 重視しています。 キャッチコピー キャッチコピー キャッチコピー 「 60分 5,000 円〜」という明 快でコン パクト な
 訴求で、“高 そう”という 心理 的な 壁を 払拭。
 女性向けに 配色も 柔らかく 調整しています。 価格 価格 価格 「 今だけ ！無料」な どの 文言と、コントラストの 強い 配色で視 線を 集める工 夫を。
 登録のメ リットを明 確にし、す ぐに 行動を 促せる 構造にしています。 CTA CTA CTA 

58 P. Works レクタングルバナー Pattern A Pattern A Pattern A 「0円で健康ジム習慣」という短く力強いコピーで、
 “コスト不要で始められる”お得さを直感的に訴求。 パターンBと比べ、メッセージやビジュアルで
 直感訴えるスタイルで作成。 キャッチコピー キャッチコピー キャッチコピー 運動習慣を始めることに前向きな印象を与える笑顔の
 女性を配置し、明るく親しみやすい印象に。 ビジュアル ビジュアル ビジュアル 59,800円などの具体的な金額を打ち消して「すべて0円」
 と強調することで、インパクトのある訴求に。 価格 価格 価格 　「4月限定」「先着10名様」など、希少性と
 今だけ感を押し出して、即行動を促す構成。 キャンペーンについて キャンペーンについて キャンペーンについて 

59 P. Works レクタングルバナー Pattern B Pattern B Pattern B 「ぜ〜んぶ無料！」というラフで勢いのあるワードで、明確にキャンペーンの中身を伝えやすくしている。 「最大約11万円OFF」や「入会金＋体験料＋初月会費＝無料」を文字サイズ・色使いで目立たせ、
 明瞭な価格メリットを提示。 キャッチコピー＋価格 キャッチコピー＋価格 キャッチコピー＋価格 シンプルなポージングの女性を使用し、パターンAと 異なり、主役はあくまで“お得情報”であることを強調。 ビジュアル ビジュアル ビジュアル 桜や帯のモチーフで“春らしさ”を演出し、
 限定感＋季節感での共感を誘発。 キャンペーンについて キャンペーンについて キャンペーンについて 

学校など教育機関向けの デザイン制作物の実績 取引先 取引先 取引先 大手企業との取引もございます。 例）株式会社ロッテ、花王株式会社 　　株式会社朝日新聞社、三菱電機株式会社 制作物 制作物 制作物 ˆ 学校向け出前講座用スライド資q ˆ 営業資料／提案資q ˆ チラシ、ポスター Other Worksその他の実績 60 P. ※契約上の都合により公開を控えております。 ご興味のある方には、個別にご案内可能です。 お問い合わせ時にお知らせください。 

FLOW ご提案の流れ 

FLOW-ご提案の流れ- 62 P. 事前ヒアリング 最適なご提案ができるよう、事前 にヒアリングシートをご記入いた だきます（10-15分程度）。 STEP 01 STEP 01 STEP 01 STEP 02 STEP 02 STEP 02 STEP 03 STEP 03 STEP 03 STEP 04 STEP 04 STEP 04 ヒアリング 対面またはオンラインにて30分程 度のヒアリングを実施致します。 制作の目的やターゲット像、デザ インイメージをお伺いします。 ご提案・お見積り ヒアリング内容をもとに、デザイ ンのアイデアやお見積もりを提示 いたします。 ご契約 提案内容にご納得いただけました ら契約を結び、制作を開始いたし ます。 

CONTACT お問い合わせ 

CONTACT -よくある質問- 64 P. Q Q Q デザインの実績が少ないようですが、依頼しても大丈夫でしょうか？ A A A デザイン経験が浅い分、丁寧なヒアリングとリサーチを重ねながら、お客様の目的やイメージを深く理解することを大切にしています。 修正は基本的に回数制限を設けず、「納得いくカタチになるまで伴走する」姿勢で取り組んでいます。
 なお、実績の中に公開できないものもございますが、ご希望の方には個別でご説明いたします。どうぞお気軽にお問い合わせください。 Q Q Q 教育業界以外の案件にも対応できますか？ A A A はい、対応可能です！
 これまでの経験から、複雑な情報をわかりやすく伝える力や、ターゲットに合わせた表現力を培ってきました。
 業界やジャンルを問わず、「伝えたい価値を、誰にどう届けるか」を大切にしながら、目的に沿ったデザインをご提案します。 Q Q Q デザインの 修正は何回までできますか？ A A A 回数の制限は設けていません。納得いただける 形になるまで、しっかり対応させていただきます！
 ただ、デザイン 完成後の大きな方 向転換や、大 幅な 変更に ついては、 内容に応 じて 追加料金をお 願いすることが あります。 

THANK YOU!! 最後までご覧いただき、誠にありがとうございます。 「心に届き、行動を後押しするデザイン」を大切に、伝わる構成と丁寧な進行を心がけています。
 安心してお任せいただけるパートナーでいられるよう、誠実に取り組んでまいります。
 些細なことでも構いませんので、どうぞお気軽にご相談ください。 お問い合わせはこちらまで ご相談・お見積りは無料です。 ご連絡をいただいた後、 24時間以内に返信いたします。
 （土日祝を除く） [email protected] @Tecchan_yama 山口 哲弘 E-mail E-mail E-mail X X X 65 P. 

APPENDIX -ご料金- TOPページ ¥100,000~ /ページ ¥40,000~ /ページ 下層ページ コーポレートサイト／採用サイト／店舗サイト　など Webサイトデザイン Webサイトデザイン Webサイトデザイン TOPページ ¥150,000~ /ページ コーポレートLP／採用 LP／集客用LP　など LPデザイン LPデザイン LPデザイン ホームページ用バナー／Web広告用バナー　など ¥5,000~ /枚 バナー バナー バナー 教材／営業資料／提案資料／プレゼン資料／
 サービス紹介資料　など ¥5,000~ /ページ スライド スライド スライド ¥20,000~ その他 その他 その他 チラシ、名刺　など（詳しくはお問い合わせ下さい） 66 P. 料金は一例です。ご依頼の内容や工数に応じて柔軟に
 調整いたしますので、まずはお気軽にご相談ください。