教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ

はじめまして。フリーランスのUI・Webデザイナー、山口哲弘です。

教育業界での実務経験を活かし、「心に届き、行動を後押しするデザイン」という想いで活動しています。
構成設計からデザイン、進行管理まで一貫して対応可能で、教育業界を中心に、他業種の案件にも柔軟に対応しています。

このポートフォリオでは、語学アプリのUI改善、転職エージェントLP、教育系Webサイト、パーソナルジムの広告バナーなど、目的に応じたデザイン提案の事例をご紹介しています。

情報設計力・文章力・共感力を活かし、伝わる構成とビジュアルで、行動につながるデザインをご提案します。

■ お問い合わせはこちら
メール：t.yamaguchi@miekata.jp

※ポートフォリオ内の非公開実績については、面談時に個別にご紹介可能です。
ご希望の方は、上記よりお気軽にご連絡ください。

Transcript

1. 教育業界 13 年 教育分野に強い UI&Web デザイナー 徹底したリサーチと、共感力・言語化力で、 心に届き、行動を後押しするデザインを。 Portfolio by Tetsuhiro Yamaguchi
3. Contents -目次0 1 Profile プロフィール LP P.04 転職エージェントの LPリニューアル 02 Service サービス P.07 03 Works 制作実績 P.10 P.39 バナー パーソナルジムバナーの UIデザイン デザイン改善 語学学習アプリのUI改善 P.50 P.11 04 Other Works その他の実績 P.60 05 FLOW 提案の流れ P.61 06 Contact お問い合わせ P.63 Webサイト 教育コンサルティング企業 のWebサイトリニューアル P.26 P. 03
4. Profile -自己紹介実務経験 年 2 山口 哲弘 Tetsuhiro Yamaguchi 経歴 1987年4月29日生 神奈川県出身／東京都在住 2014年7月〜2016年6月の2年間、現地の教員養成大学にて、 国際協力ボランティアとして活動。 大学卒業から教育に関わる仕事に従事してきました。在職中も、生徒に「物事を わかりやすく、楽しく教えるにはどうすれば良いか？」とデザインに触れること も多く、そのような中でデザインに対する興味が広がっていきました。
 転職を決意してから、在職中にオンラインスクールでWebデザインを学び、 2024年にフリーランスとして独立しました。「誰かの『伝えたい』に寄り添い、 共感と行動を生み出せる」デザイナーになりたいと思っています。 好きなこと・趣味 映画鑑賞、サイクリング、お香、ディズニー、一人飲み 私立高校 非常勤講師 2013年4月〜2014年3月の1年間、理科の非常勤講師として勤務。 青年海外協力隊としてラオスに派遣 株式会社栄光で理科実験教室の運営 2016年12月〜2019年5月の2年半、同社のSTEM事業部にて、 小学生向け理科実験教室の講師／教室長として勤務。 三重県公立中学校 教諭として勤務 結婚のため、妻の地元三重県に移住。2019年9月〜2024年3月の4年半、 三重県内の中学校にて、理科の教諭として勤務。 株式会社BYDにて業務委託職員として勤務 2024年4月より、同社にて業務委託としてフルタイム勤務。 教育プロデューサーとして、Webデザインやグラフィックデザイン、 資料・教材制作を中心に営業やカスタマーサクセスなどの業務を行う。 現在、フリーランスデザイナーとして活動 2024年4月より、フリーランスデザイナーとして活動。 P. 04
5. Profile -できること- Figma ホームページデザイン ランディングページデザイン UIデザイン（アプリ・Webなど） バナー スライド資料 Illustrator チラシ 名刺 ロゴ Wordpress Chat GPT テンプレートを用いた実装 画像生成 構成案・文章作りの壁打ち リサーチ・競合分析の補助 Codexによるコーディング Photoshop STUDIO 画像の加工・レタッチ 写真の色補正・切り抜き処理 Web用画像の最適化 デザインしたWebサイトの実装 モバイル対応・レスポンシブ設計 Canva Power Point バナーなどの簡易デザイン 画像生成
 など スライド資料の作成 P. 05
6. Profile -大切にしていること- 心に届き、 行動を後押しする デザインを。 デザインは、価値や魅力をただ整えるだけでなく、
 受け手の心に届け、行動を後押しする手段だと考えています。
 「誰に、何を、どう伝えるか」を大切に、ヒアリングを通じて 構成や表現をご提案、お客様の負担を減らしながら、 “伝わるカタチ”を一緒につくっていきます。 P. 06
7. デザイン業務に関してこのようなお悩みはありませんか？ Case 01 見た目はキレイだけど、成果はあまり… Case 02 指示通りに動くだけで、提案がない… Case 03 コミュニケーションがうまくいかず、疲れる… Case 04 どこまで仕事を任せればいいかわからない… P. 07
8. Service -私の強みお客様の課題をデザインの力で解決します！ Case 01 Case 02 Point 01 Point 02 見た目はキレイだけど、成果はあまり… 成果から逆算するデザイン設計 見た目の美しさだけでなく、誰に・何を・どう伝えるかを明確に した上で設計します。目的に合わせて構成から見直すことで、成果 につながるデザインを実現します。 事業や業界の理解、競合分析などを丁寧 に行い、目的に合わせた構成や見せ方を 設計いたします。 指示通りに動くだけで、提案がない… 提案型のパートナーシップ ただ指示通りに作るのではなく、目的に沿ってより良くなる方向性 を提案します。 初期段階からアイデアを一緒に整理し、形にして いく伴走型のスタイルです。 お客様の課題や想いを丁寧に汲み
 取れるよう、ヒアリングシートや
 チェックシートを活用しながら、
 ご要望を反映した形で進行いたします。 P. 08
9. Service -私の強みお客様の課題をデザインの力で解決します！ Case 03 Case 04 Point 03 Point 04 コミュニケーションがうまくいかず、疲れる… 丁寧でスムーズなコミュニケーション 返信の速さや丁寧な説明など、やり取りのストレスを最小限に抑え る対応を心がけています。初めての方にもわかりやすく、安心して 相談いただけます。 SlackやLINEなど、ご希望の連絡手段や 定例MTGの頻度に合わせて、お客様に とって心地よいペースでコミュニケー ションを取りながら進行いたします。 どこまで仕事を任せればいいかわからない… 負担を軽減するための進行力 ヒアリングから構成・デザインまで一貫して対応し、限られた時間 の中でも無理なく進められる体制を整えています。多忙な方でも任 せやすく、安心しておまかせいただけます。 進行管理表などを活用し、業務の進捗を 見える化・共有しながら、安心して進め られるよう心がけています。 P. 09
10. UI design / Web site / LP / Banner 制作実績 WORKS
11. Works UIデザイン 語学学習アプリのUI改善 語学学習アプリ「NHKゴガク 語学講座」様の UI改善を行いました。 教育（語学） 担当範囲 情報設計、UIデザイン 制作期間 3週間 使用ツール Figma ジャンル 参考：「NHKゴガク」公式アプリ(https://www.nhk.jp/g/gogaku/) 本改善案は、NHK日本放送協会の公式見解やアプリとは関係のない、個人の自主制作としての提案です。 P. 11
13. Works 要件定義 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 事業内容 NHKのラジオ語学講座を手軽に聴ける無料アプリ。
 英語をはじめ、中国語・フランス語・スペイン語など全8言語に対応。 放送された講座を、アプリでストリーミング再生（翌週1週間）できる。 ターゲット 英語初心者〜中級者（中高年が多い） 毎日コツコツ学習。 通勤・家事のスキマ時間に音声中心で学ぶ傾向 「シンプル・わかりやすい・信頼できる」を重視 目的 BEFORE 公共放送としての使命を果たす 誰もが無料で教育・語学・情報にアクセスできるアプリであること 使いやすいUI／直感的に情報へアクセスできる構造 NHK＋の視聴や教材購入を促す NHK＋／NHK出版／NHKダウンロードストア／不語学プレーヤー
 アプリなどへ自然に誘導 NHKやNHK＋の新規契約、テキスト・音声・CD・電子教材などの
 販売促進 P. 13
14. Works 制作過程 本制作では、以下のプロセスを経てUIデザインを行いました。 STEP 05 UIデザインの制作 「わかりやすさ・信頼感・継続性」を軸に、UI/UXの方向性を明確に設定 STEP 04 情報設計・構成案の作成 視認性や操作性に配慮し、誰にでも使いやすいUIにデザイン STEP 03 制作方針の決定 導線・情報の優先順位を整理し、ワイヤーフレームで構成を設計 STEP 02 START 課題の整理と明確化 ユーザーとビジネス両面から、優先課題を分類・言語化 STEP 01 リサーチ アプリレビューや競合分析から、ユーザーの不満や改善のヒントを収集 P. 14
15. Works リサーチと課題の整理 ユーザーのレビューを調査し、課題点を整理しました。 ユーザーの口コミを調査 App Storeなどのユーザーレビューを調査し、実際の利用者 が抱える不満や課題を抽出。そこから導き出した内容を もとに、具体的な改善点の言語化に活かしました。 主要な低評価の口コミ 約 50 件 目的の番組を探すのが手間 約 30 件 シーク操作（戻る・進むボタンなど）が わかりにくく、使いづらい 約 20 件 ボタンが小さくて押しづらい、 誤タップが多い 課題点の整理 リサーチ結果と実際の使用体験に加え、ビジネス上の 目的達成を視野に入れながら、UI構造を分析し、課題点を 整理・言語化しました。 リサーチ結果より 01 画面構造と導線が複雑で迷いやすい 02 視認性と操作性に課題があり、使いづらい UI構造の分析より 03 外部サービスへの誘導が弱い 約 15 件 文字が小さい、画面が見づらい その他の意見 メニュー構成が複雑で、直感的に使えない 再生ボタンの操作性が悪い（ラグや配置の問題） 戻るボタンがなく、トップに戻されてしまう 制作方針の作成へ P. 15
16. Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 01 直感的に使えるナビゲーション メニューを目的別に再構成し、迷わず使える構造に 戻るボタンや再生UIなども含め、操作の流れをシンプルに整理 02 視認性と操作性の向上 階層を浅くして現在地を明確化し、操作の負担と誤タップを軽減。 TOPの縦ロールを整理し、番組一覧は横スクロールなどで視認性アップ ボタンやレイアウトを直感的にし、誰でもすぐに操作できる設計へ 03 導線設計の最適化 TOPや学習画面に「教材購入」や「NHK＋視聴」への導線を自然に設置 講座に応じた教材リンクや提案を行い、マネタイズに繋げる P. 16
17. Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 調査したアプリ Duolingo Lissn AI英会話 Busuu mikan スピークバディ 参考になった点 ボタンサイズが大きく、色や装飾のコントラストも明確で、
 タップしやすさと視認性の両立が図られていた。 「記事＋音声」の画面分割が適切で、読みながら音声を
 操作しやすく、再生UIの配置も直感的だった。 ホームやメニューが情報を絞った設計で、現在地や次に
 取るべき行動が明確に示されていた。
18. Works ペルソナ設定 利用シーンを想定した上で、ユーザー像を設計しました。 メインペルソナ サブペルソナ 佐藤 明子（さとう あきこ） 名前：田中 一樹（たなか かずき） 年齢：58歳 職業：パート勤務（事務サポート） 家族構成：夫と2人暮らし（子どもは独立） 年齢：2 歳 職業：I 業勤務（ 家族構成：一人暮らし 利用状況 使用しているデバイスはAndroidスマートフォン（ミドルスペック）で、
 利用シーンは通勤バスの中や家事の合間にラジオ講座を視聴する。
 英語レベルは初級（中学英語レベル）で、学習の目的は、趣味と老後に向けた 学び直し。
 英語ニュースをスムーズに理解したいと考えている。 課題 アプリの構成が複雑で、どこを押せばいいのか迷いやすい。 文字やボタンが小さく、操作にストレスを感じやすい。 年齢的に細かい設定や複雑な導線よりも、シンプルで一目で使い方が
 分かるUIを求めている。 7 T企 在宅ワーク中心） 利用状況 Ph e 休憩 音声 聞き流 TOE C600点程度 備 力 高 キ 時 を 使用デバイスはi on で、通勤や 中などのス マ 間に英語ニュース で している。
 英語レベルは中級（ I ）で、 リアアップや 職 えて英語 を めたいと考えている。 キャ 転 活動に 課題 ロ 煩 だっ ぐに
 離脱 まう傾 あ 必要 情報 機能 ぐ セ き 効率 軽快 過度 演出 装飾 不要 実 性 ピ 重 操作フ ーが 雑 たり、操作にストレスを感じるとす してし 向が る。 な や にす アク スで る、 的で なUIを求めている。 語学学習アプリに な や は で、 用 とス ード感 視している。 を
 P. 18
19. Works カスタマージャーニー ペルソナ情報をもとにカスタマージャーニーマップを作成しました。 フェーズ きっかけ 認知・関心 初回利用 継続利用 教材購入 思考 英語力があれば、もっと
 世界が広がるかも でも何から始めれば
 いいか、わからない… 手軽に、無料で、
 信頼できる方法がいいな NHKなら安心できるかも？ 完全無料だし、試しに
 聴いてみよう 使いにくかったらイヤだな 継続できている自分に
 満足感 もっとレベルアップした い、新しいことも学びたい ラ ジオだけより、教材を
 使ったほうが理解が深まり そう NHK＋なら映像も見れて、
 さらに学びやすそう 感情 🤔 新しい挑戦へのワクワク でもちょっと不安
 （続くかな？） 行動 海外旅行 、外国人との
 交流 自己成長・生涯学習への
 興味 😯 少し安心 でも「本当に続けられる
 かな？」という疑念も少し ンターネット検索 知り合いの口コミ 過去の記憶 イ 😌 使いやすい、続けられそう
 ＝安心感 リ ダウンロ ド
 初 起動 ラ オ講座 トリー
 ミング 視 アプ を ー して めて ジ をス で 聴してみる 🙂 気持ちいい」
 ポ ティブな感情 物 り さ 向上心 通勤 や家事中にアプリを
 習慣的に利用する 「続けるって という ジ 足 な 、 🥰 勉強 ！」
 意欲 己投資 前向 納得感 アプ リからNHK出版、
 ダウンロードストア、 NHK+へのリンクに遷移 教材購入やNHK+の契約 「もっと したい という 自 に きな P. 19
20. Works 情報設計 収益機会を自然に生むための画面遷移を再設計しました。 アプリ内の各画面に、関連教材へ誘導するリンク（CTA＝行動を促すボタン）を自然に配置。
 ユーザーの流れを妨げず、必要なタイミングでCTAや教材ページ（CVページ）にアクセスできる設計に しました。 ホーム画面 番組一覧ページ ラジオ番組 番組一覧 番組画面(再生画面) 番組名 メニュー画面 もっと勉強したい人へ CVページへ （アプリ内NHK+紹介ページ） CVページへ （アプリ内有料コンテンツ紹介ページ） 番組情報 ニュース記事 設定・その他 CVページ NHK＋とは NHK＋ 番組紹介 CTA （NHK+のHPへ） CTA（教材販売ページへ） CVページへ – （アプリ内NHK+紹介ページ） CVページへ （アプリ内有料コンテンツ紹介ページ） – CTA（教材販売ページへ） CTA（アプリDLページへ） CTA（アプリDLページへ） 教材販売 CTA （教材販売ページへ⁨）⁩⁨ 有料アプリ CTA （アプリDLページへ） P. 20
21. Works デザインシステム 読みやすさと親しみやすさを意識し、自然と馴染むトーンで設計しました。 フォント コ ポ ネ ン カラー ー ント 和文 Noto Sans JP -Bold Noto sans JP -Medium #03A9F4 #D01027 #F0F1F2 欧文 Roboto -SemiBold Roboto -Medium フォントは、可読性と信頼感を重視し、 和文には「Noto Sans JP」、欧文には
 「Roboto」を使用しています。
 Noto Sans JPは安心感のある読みやすさが
 特長で、Robotoは英語でも視認性が高く、
 洗練された雰囲気を演出します。 #3CB371 #F6F144 #FF9010 #222222 メイ カラー HKゴガク 水色 アクセ HK公式 赤 親 バラ スを 意識 背景 ライ グレー うこ で 目 優 全体 向上 各機能 番組 合わせ テーマカラー 柔軟 展開 ン にはN の ントにはN 信頼感と の 、 を使い、 しみやすさの ン しました。
 には に ト しく、 や を使 と の視認性も に を 。
 て、 に しています。 P. 21
22. Works ホーム画面 BEFORE 番組一覧 AFTER 番組一覧 すべての番組が縦並びで表示され、 スクロール量が多く、目的の番組に たどり着くのが面倒。 横スクロール表示に変更し、タブバー からも直接ジャンプできるように 設計。目的の番組に素早くアクセス 可能に。 リンク導線 画面下部に配置されているため気づきにくく、 内容も無料アプリ紹介のみで、マネタイズに 繋がりにくい。 リンク導線 スクロール負荷を軽減しつつ、教材
 販売やNHK＋への導線を強化。
 視認性とマネタイズ効果を両立。 P. 22
23. Works ラジオストリーミング BEFORE リンク導線 トロフィーと簡単な教材紹介のみで、 番組に関連した教材への誘導が弱く、 マネタイズにつながりにくい。 再生画面 巻き戻し・早送りが6秒固定で、表示がなく 直感的に分かりづらい。 AFTER リンク導線 番組ごとに関連教材を表示し、さらに 語学アプリのDLリンクも追加。学習意欲が 高まったタイミングで自然に遷移できる 設計に。 番組一覧 番組一覧ページを追加。また、ポップアップで 教材やアプリのDLリンクの導線も追加。 再生画面 10秒の巻き戻し・早送りをアイコン＋秒数 表示で直感的に操作できるよう改善。 倍速再生などの便利機能も追加。 P. 23
24. Works ニュース記事 BEFORE 番組一覧 AFTER 番組一覧 サムネイルがなく、一覧が文字情報 のみのため、どんな記事かが直感的に わかりづらく、興味を持ちにくい。 ニュース一覧にサムネイルを追加し、 視覚的にメリハリのある構成に改善。 記事内容も把握しやすくなった。 再生画面 再生画面を開く操作が必要で、英文・和訳・ 学習ポイントの切り替えも下部にあるため、 音声と文章を同時に活用できない。 再生画面 和文・英文・学習ポイントの切り替えを 上部に配置し、再生画面を常に表示する ことで、文章を見ながら音声学習が可能に。 P. 24
25. Works ニュース記事 BEFORE メニュー AFTER おすすめコンテンツ 左上にハンバーガーメニューがあり、 見つけにくく片手操作もしづらい。 画像を含んだカード型リストにし、画面に メリハリを持たせて視認性を向上。
 興味を引きやすく、ボタン設計でリンクで あることも明確に伝わる構成に改善。 おすすめコンテンツ 文字情報のみで視覚的な訴求力が弱く、 リンクであることもわかりにくい。 メニュー タブバーに変更することで、現在位置が ひと目でわかり、片手でも直感的に操作可能に。 P. 25
26. Works Webサイト 教育コンサルティング企業の Webサイトリニューアル 教育ベンチャーの株式会社BYD様の公式Webサイトの リニューアルを行いました。 教育コンサルティング 担当範囲 情報設計、デザイン 制作期間 3週間 使用ツール Figma ジャンル 参考：株式会社BYD(https://byd.education/) 本改善案は、株式会社BYDの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 P. 1226
28. Works 要件定義 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 事業内容 ターゲット 目的 学校・企業・自治体向けに、探究学習の出前講座や教材開発、教育コンサルティングを提供。
 アントレプレナーシップや生成AIなど最先端テーマを扱い、全国150校以上で実績。 探究学習や教育改革に関心のある中高の教職員、校長・教務担当者。 教育連携を模索する企業の教育・CSR・採用担当者。 教育に情熱を持つ若手人材や転職・副業希望者。 ブランディング BYDの思想・世界観・教育への本気度を伝える 認知の向上 「探究学習」「教育×企業連携」での存在感アップ 採用強化 共感して一緒に働きたいと思える人材を呼び込む BEFORE P. 28
29. Works リサーチと課題の整理 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 類似ビジネスの課題 （１）収益の安定化 学校側の予算が限られ、単発案件が多く、継続収益を
 生む仕組みや商品設計が課題。 （２）人的リソースの偏り 少人数に業務が集中しやすく、分業や業務の再現性ある
 仕組み化が必要。 （３）採用と育成の難しさ スキルとカルチャーの両面でマッチする人材の確保が困難。 （４）認知・ブランド力の不足 導入後の評価は高いが知名度が低く、「何者かの説明」に 営業コストがかかる。 点 課題 の整理 類似ビジネスの傾向や課題感を踏まえ、サイト構造と役割 を分析し、仮説に基づいた課題を整理・言語化しました。 01 採用強化 ム 事 魅力 伝わ ず 共感採用 チー や仕 の が が にくい。 つな り ら 、 に 02 ブランディング・認知向上 ビジョン 想 十 語 てお ず、 や いが 分に られ ら 」が に BYDってどんな会社？ 印象 残りづらい。 「 03 競合との差別化 授 質・企 連携 強さ・新規開 力 った 業の が、 魅力 業 で の 発 とい い い。 Web上 立ち上がって な （５）競合との差別化 類似サービスが増えてきている中で、他社との差別化が
 難しく、独自性の伝え方が鍵となる。 制作方針の作成へ P. 29
30. Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 01 ファーストビューの再設計 キャッチコピーで「BYDらしさ」と「未来を動かす学び」を印象づける 生徒の笑顔や授業風景を背景に使い、体験価値を直感的に伝える 02 情報構造の整理 理念やストーリーは簡潔にビジュアルと併せて提示、詳細は下層に サービス・実績・採用は構成を軽くし、直感的に伝わるビジュアル設計へ 共感や興味を惹きつける導線を意識し、流れを整理 03 視覚的ブランディングの強化 信頼感と前向きさを両立したトンマナで、教育現場・企業の両方に響く
 印象を形成 既存カラーを軸に、余白やフォントで安心感と教育の可能性を表現 P. 30
31. Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 「業界（競合他社）」「構成」「FVデザイン」に分けてリサーチし、参考にすべき点を言語化 業界（競合他社） 抽象的な背景や図形が多く、子どもの写真は少なめ 全体的にシンプル設計だが、やや単調 「信頼感」or「ポップさ」に寄った印象 →FVのインパクトや導線の工夫で差別化が可能 構成 セクションごとに背景や装飾でメリハリを演出 ポップでもフォント・配色で信頼感を確保 →柔らかさ＋信頼性の両立が鍵に FVデザイン 太字＋変形・反転文字などでインパクト 背景とのコントラストで視認性UP →写真・コピー・あしらいを一体化した印象設計 P. 31
32. Works ペルソナ設定 利用シーンを想定した上で、ユーザー像を設計しました。 ペルソナ 名前：鈴木 拓真（すずき たくま） 年齢：38歳 職業：東京都の私立中高一貫校（進学校） 教務主任・探究学習推進担当 家族構成：妻と小学生の小４の息子と小１の娘がいる 背景 受験指導中心だった学校で、探究学習コースの立ち上げに携わる 主体的な学び・ICT活用を推進したい意欲あり 教育委員会や同業者の口コミも大事にする堅実タイプ 課題・悩み 具 め 信 い ラン 材 講師サポ ト ワン トッ 依頼 い 信頼 き 外部パ トナ て “ 文化” 解重視） 探究学習の 体的な進 方に自 がな 授業プ ・教 ・ ー を ス プで した で る ー ーを探し いる（ 学校 への理 ニーズ 会社の理念・教育への考え方（自校と価値観が合うか） 実際の授業内容、子どもたちの反応 導入校や企業連携などの客観的な実績 行動パターン ベント・行政紹介・同業者の口コミを通じて、信頼できる情報を収集 SNS 特 Facebook）で探究教育の最新事例やトレンドも日常的にチェック Web訪問時は理念・実績を確認し、自校に合えば資料請求や問い合わせへ 教育イ （ に P. 32
33. Works カスタマージャーニー ペルソナ情報をもとにカスタマージャーニーマップを作成しました。 フェーズ 思考 感情 認知 自校でも探究を進めたい。 信頼できる外部がいれば… 🤔 少 期待 慎重に
 比較 接触 導入 教育観に共感できるか、
 実績は十分か？ 上司に提案するには根拠が
 必要 まずは詳しい話を聞いて
 みよう 初めての探究、信頼できる
 パートナーと組みたい 😯 😌 🙂 🥰 、でも 見 めたい 「ちゃん としてそう。
 詳しく知りたい」 「こ の会社なら、話を
 通せそう」 「直接 、担当者と、導入に 「一緒 にやれる安心感が
 関する具体的な相談を
 ある」 したい」 「今後も長いお付き合いを
 期待したい」 教育イベントやSNSでBYD の存在を知る Webサイトで理念・実績・
 サービスを見る 資料を請求し、他社と比較
 しながら実績や連携企業を
 確認 問い合わせを行い、
 オンライン面談に申し込む し 極 行動 関心 校内で提案し採用、出前
 講座を導入 P. 33
34. Works フォント・カラー 読みやすさと親しみやすさを意識し、自然と馴染むトーンで設計しました。 フォント カラー Noto Sans JP（和文） 可読性が高く、教育・行政・企業といった幅広いターゲット に対して信頼感を与えるフォント。
 本文やナビゲーション、各セクションの説明文など、サイト 全体の基調書体として使用。 Futura（欧文） 洗練された幾何学的なデザインで、ビジュアルに上品さや モダンさをプラス。主に見出しや数字に使用。 Anton（欧文） インパクトがあり、採用セクションのキャッチコピーなど、 強いメッセージを伝える場面で使用。 #015FB7 #FC8B12 #0184DC #EB3624 ~#0184DC #222222 #015FB7 ~#00C0FA #CECECE メインカラー：ブルー BYDのブランドカラーを基調に、信頼感や先進性を強調する濃い ブルーを基調に、ナビやボタンなどに活用。 アクセントカラー（オレンジ／赤×青グラデーション） オレンジで温かみと勢いを演出し、採用セクションには赤×青の グラデーションで目を引く仕掛けを設置。 サブカラー（ブルーグラデーション） 濃淡のブルーで広がりと統一感を持たせ、背景やタイトル装飾に 使用。 P. 34
35. Works TOPページ全体 BEFORE AFTER P. 35
36. Works デザインの意図 ファーストビュー キービジュアル 生徒と先生が共に未来を見つめ、希望や成長への期待を 象徴する構図。
 背景のラインは、勢いや前進する力、先進的な教育を視覚的に 表現するために配置。 キャッチコピー 生徒の成長や変化といった“ベネフィット”が伝わる独自の
 キャッチコピーを採用。
 文字を斜めに配置することで視線誘導と勢いを演出。配色には オレンジを用い、視認性と感情訴求を両立（既存カラーに
 依存せず最適な表現を優先）。 権威性 キービジュアル直下に、受賞歴や導入校のロゴを掲載し、 ユーザーが最初に“信頼に値する企業”と認識できるように設計。 P. 36
37. Works デザインの意図 下層ページ① お知らせ 信頼感と活動の鮮度を伝えるセクション。
 実績や社会的評価が目に留まる位置にあり、導入検討時の安心材料に。
 FV直後に設置することで、第一印象と同時に“裏付け”を提示。 私たちについて 「どんな想いで教育に取り組んでいるか」を伝えるブランドセクション。
 ビジョンやストーリーを完結に語り、会社の理念やこれまでのストーリーに興味を持ってもらう。 背景は、ウェーブ上にすることで、構成にメリハリをつける。
 写真はICTを用いた教育活動をイメージさせ、テクノロジーを用いた教育活動が強みであることを伝える。 サービス BYDのコア事業を端的に紹介。
 サービスの種類をわかりやすく分け、対象（学校・企業など）や提供価値がひと目で伝わる構成に。
 ビジュアル付きで、具体的な学びのシーンが想像できる工夫。 スライダー形式にして、こちらもメリハリのある流れに。 P. 37
38. Works デザインの意図 下層ページ① 導入実績 信頼性・社会的実績を可視化し、初見ユーザーに安心感を与える。
 写真と実績サマリーで、「自分の学校でも導入できそう」と感じさせる構成。
 教育現場や企業の信頼を獲得していることを視覚的に表現。 採用情報 「この会社で働きたい」と思える共感型の採用導線。
 メンバーの写真を大胆に配置し、“人の魅力”と“熱量”をダイレクトに伝える。
 強いメッセージ性のある英語コピー＋サブコピーで、教育への情熱に共鳴する人材を引き込む。 フッター シンプルでオーソドックスな構成に、右下へ視線を誘導するグラデーションのラインと光の円を
 重ね、「未来へと広がる可能性」を想起させる、静かで印象的なアクセントを加えました。 P. 38
39. Works LP 転職エージェントの LPリニューアル ラグジュアリー・ファッションブランド業界特化型 転職エージェント株式会社Aprime様のLPリニューアルを行いました。 業界特化型転職エージェント 担当範囲 情報設計、デザイン 制作期間 3週間 使用ツール Figma ジャンル 参考：株式会社Aprime(https://lp.a-prime.jp/20250415-03/) 本改善案は、株式会社Aprimeの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 P. 39
41. Works 要件定義 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 事業内容 ターゲット 目的 ラグジュアリー・ファッション業界特化のハイクラス転職支援 非公開求人の紹介から面接・年収交渉・入社後のフォローまでを一貫サポート 少数精鋭で、柔軟かつマンツーマンの丁寧な対応を提供 20代〜30代の男女（ラグジュアリーブランド経験者） キャリアアップ志向があり、自分に合う職場を重視する層 BEFORE LINE友だち追加をCVポイントとする 業界特化の専門性や年収アップ実績、手厚いサポート体制など、
 A-primeの強みを知ってもらう 転職希望者に安心感を与え、相談・登録へと導く導線設計 P. 41
42. Works リサーチと課題の整理 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 類似ビジネスの課題 （１）求人の幅が狭い 特化型ゆえに選択肢が限られ、紹介可能な求人がなく 離脱につながることもある。 （２）対応スピードにばらつきがある タイミングによってレスポンスに差が出て、他社より 遅く感じられる場面がある。 （３）情報の見える化が弱い 非公開求人が多く、登録前に求人内容や魅力が
 伝わりにくい。 （４）認知・信頼の弱さ 知名度や広告露出が少なく、「安心して登録できる理由」
 がやや伝わりづらい。 点 課題 の整理 類似ビジネスの傾向や課題感を踏まえ、サイト構造と役割 を分析し、仮説に基づいた課題を整理・言語化しました。 01 サービスの強みや他社との違いが伝わりづらい 別 の打ち 弱 長 実績 記憶に 差 化 出しが く、特 や りにくい になっている。 残 構成 が 02 情報量が多く、視線誘導や余白の整理が不十分 コ テ ツ 詰め込ま 重要 訴 ト ン ン が れ、 もれてし っている。 埋 ま な 求ポイン が
 03 視覚的に伝わる魅力や具体性が不足しており、 期待感につながりにくい 中 の中 ベネフィットや強みの 見せ方 抽象的 ユーザーの想像を促しづらい。 非公開求人が 心 でも、 が で、 （５）差別化が伝わりづらい サービス品質は高いが、他社との違いがLP上で十分に 打ち出せていない。 制作方針の作成へ P. 42
43. Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 01 強みを直感で伝える 「他社との違い」や年収UP率などの強みを、図解やバッジで視覚的に
 整理し、印象に残る構成に。 02 行動を後押しする導線 共感・憧れを喚起するコピーとビジュアルで感情を動かし、登録までの
 ハードルを下げる。 03 ストレスのないUI設計 色・余白・情報量を整え、「読む・押す・理解する」がスムーズな
 画面設計に。 P. 43
44. Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 「業界（競合他社）」「構成」「FVデザイン」に分けてリサーチし、参考にすべき点を言語化 業界（競合他社） 構成 FVデザイン FVで実績・企業ロゴなどで権威性を訴求、信頼感 を獲得 色味は淡く、余白を多く取ることで高級感と読み
 やすさを演出 CTAが複数箇所に自然に配置されており、ストレス なく登録まで導く構成 FV→CTA→強み→比較→再CTAなど、行動を促す ジャンプポイントが豊富 写真・アイコンで視線を誘導し、階層やメッセージ を整理 押しやすさを意識したCTAボタンの配置とデザイン 設計 キ ービジュアル＋キャッチコピーのみの
 シンプル構成で感情に訴える 実績やロゴなどの補足要素はFVから切り
 離し、下層で整理 背景画像は明度・彩度を調整し、コピーの 可読性を優先
45. Works ペルソナ設定 利用シーンを想定した上で、ユーザー像を設計しました。 ペルソナ 名前：佐藤 美咲（さとう みさき） 年齢：29歳 職業：国内アパレルブランドのショップスタッフ（正社員） 家族構成：一人暮らし 背景 国内アパレルブランドで販売職として正社員勤務中 短大卒 → アパレル業界で着実に経験を積み、キャリアアップを目指している 渋谷で一人暮らし、ファッション感度が高く、SNS活用も日常的 課題・悩み 現 職ではキャリアアップ・年収アップの限界を感じている 書類や面接準備が不安で、転職活動自体が初めてで踏み出せない 「自分に合った職場か」「転職で失敗しないか」という不安が強い ニーズ ラグジュアリー業界に強いエージェントの専門的なサポート 非公開求人や、個人に合った提案・マッチング 書類作成・面接対策・転職ノウハウなどのマンツーマン支援 行動パターン ホ中心の情報収集（Google検索＋Instagram・TikTokもチェック） 検索キーワードは「ラグジュアリーブランド 転職」「エージェント 
 おすすめ」など スマ P. 45
46. Works フォント・カラー 読みやすさと上品さを大切に、信頼感と親しみが自然に伝わるトーンで設計しました。 フォント カラー Hiragino Kaku Gothic Pro（和文） 読みやすく上品な印象を与えるゴシック体。
 安心感や丁寧さを大切にするこのLPの世界観と相性が良く、
 信頼感や誠実さを伝えながら、高級感のあるトーンを保てる
 ため、ファーストビューから本文まで、全体の基本フォント
 として採用。 Shippori Mincho（見出し） キービジュアルのキャッチコピーには、高級感と語りかける ような親しみを両立させるためのフォントを使用しています。 Barlow Semi Condensed（数字・ 欧文） 細身でスタイリッシュな印象のサンセリフ体。
 数字や英語に限定して使用することで、視覚的なアクセント
 を生み、情報の整理やステップ表示にメリハリを与える。
 和文との相性もよく、ブランドらしさと洗練感を補強できる。 #F0F8FF #22BA4F #3E90E4 #FFE3D7 #222222 #ED6D35 #D9D9D9 メインカラー：ブルー 演出する青系を基調に、背景と見出しで使い
 引き締めています。 信頼感と上品さを けながら全体を 分 アクセントカラー（オレンジ／赤×青グラデーション） 温かみと華やかさを兼ね備えた色で、LINEグリーンとの補色効果 を活かし、CTAの訴求力を高めています。 サブカラー（ブルーグラデーション） INEカラーや淡いベージュ・グレーを使い分け、ブランド連携と 視認性の両立、そして全体の調和を意識しています。 L P. 46
47. Works キービジュアル BEFORE ターゲット 「いろんな人」に見せようとして、結果
 “誰にも響かない”構成に。 配色と装飾 パーツの主張が強く、どこから見て良いか
 わからない状態に。 キャッチコピー 長くて説明的、印象に残りづらいことに加え、
 誰に向けたメッセージかが曖昧。 権威性 強みはあるが、配置とデザインが雑多で
 目立たない。 テイスト・イメージ フォントや構成、人物写真の選定がチープに
 見えてしまい、ブランドとの親和性に欠ける。 AFTER ターゲット ペルソナの20代女性に寄せたビジュアルと コピーで「自分ごと」感を強化 配色と装飾 抑 色設計 余白で、視線の流れと
 情報 階層 整理 トーンを えた と の を 。 キャッチコピー シンプルにメッセージを絞り込み、20代女性が
 “自分の未来”を重ねやすい言葉に設計。 権威性 バッジ化＋ゴールドの装飾で強調され、
 視認性と信頼感の両立を実現。 テイスト・イメージ 上品なフォント、落ち着いたトーン、モデルの
 選定により、ラグジュアリーブランドを目指す
 ユーザーに合った世界観を演出。 P. 47
48. Works デザインの意図 下層ページ① CTA 元のLPではボタンの訴求が弱く、配置も目立ちにくいため
 行動につながりにくかった。
 改善FVでは上下2箇所にCTAを配置し、視認性を高めつつ
 接触回数を増やす工夫を。
 「4つの特典」「1分で完了」など、メリットを明確に伝える
 コピーを添えて、行動を後押しできるようにした。 以降、要所でこれと同じCTAを配置している。 選ばれる５つの理由 改善前の「悩み共感型」の導入は遠回りで、強みが伝わる前に 離脱されやすい構成だった。
 改善FVでは「選ばれる5つの理由」として端的に見出し＋説明で
 整理し、一目で魅力が伝わる構成に変更。
 情報密度と読みやすさのバランスを整え、訴求力を高めた。 P. 48
49. Works デザインの意図 下層ページ② 他社との比較 元の比較表は色や装飾が多く、内容が埋もれてしまっていた。
 色数を絞り、シンプルな構成で自社のメリットが際立つ設計に
 変更し、配置も「選ばれる理由」の直後に置き、自然な流れで
 比較できるようにした。 転職者の声 既存LPでは、実際の「転職者の声」の紹介サムネイルが小さく、
 視認性が低かった。転職者の声を大きく目立たせ、もっとも 目立つように配置した。
 LINE等もだち特典のインタビュー動画の紹介もモックアップに
 変更し、手軽に視聴できる印象を持たせる工夫をした。 転職支援の流れ 既存のLPでは、カラフルな配色とイメージがぞうはイラスト
 中心の構成で、具体的なイメージが湧きにくかった。
 STEP表示＋実写画像を用いることで、リアルなプロセスを
 視覚的に理解できる構成にリデザインした。 P. 49
50. Works バナー パーソナルジムバナーの デザイン改善 Meta広告に出稿されているパーソナルジム
 「T-balance」様のバナーデザイン改善を行いました。 パーソナルジム 担当範囲 情報設計、デザイン 制作期間 3週間 使用ツール Figma ジャンル 参考：株式会社ティーバランス(https://t-balance-gym.com/) 本改善案は、株式会社ティーバランスの公式見解や公式サイトとは関係のない、個人の自主制作としての提案です。 P. 50
52. Works 要件定義 自主制作のため、以下の内容を要件として仮定し、制作を進めました。 （正方形とレクタングルのバナーを各２パターン作成） 事業内容 完全個室・手ぶらOKで通いやすいパーソナルジム 首都圏・関西エリアに展開 質の高いトレーナーによるマンツーマン指導と、柔軟な
 オーダーメイドプランを提供 食事指導やウェア貸出付きのフルサポートで、業界屈指の
 コスパを実現 ターゲット 健康や体型が気になり始めた 30〜40代男性 手軽にボディメイクしたい 20〜30代女性 目的 BEFORE 正方形バナー（SNS/Google ディスプレイ広告） T-BALANCEの強み（個別指導・コスパ・サポート体制・
 通いやすさ）を訴求し、体験申し込みへの集客を図る。 レクタングル→LP内キャンペーンバナー 4月限定のキャンペーン内容（体験料・入会金・
 初月会費が0円）を強調し、CV（体験申し込み）を
 後押しする導線として設置。 P. 52
53. サー Works リ チと 類似ビジネスの傾向や課題感を踏まえて仮説を立て、課題の整理を行いました。 類似ビジネスの課題 （１）価格競争の激化 価格だけでは選ばれにくくなっており、付加価値や
 ブランドの魅力が差別化の鍵となる。 （２）継続率の低さ 多くの利用者が短期で退会しており、継続を促す仕組みを
 持つジムが優位に立つ。 課題の整理 （３）トレーナー人材の不足・質のばらつき トレーナーのスキル差が顧客満足に直結し、教育体制と
 質の均一化が重要になる。 （４）サービスの差別化が難しい ベーシックな機能では埋もれやすく、価格以上の価値や
 驚きを伝える設計が求められる。 課題点の整理 類似ビジネスの傾向や課題感を踏まえ、構造と役割を分析 し、仮説に基づいた課題を整理・言語化しました。 01 競合との差別化が弱い 「安い 」 見 わ い い 特典 バ 目 たず 訴 弱い サポ 通い さ 表現さ い い だけ に えて、価値が伝 って な が ナーで 立 、 求が ートや やす が れて な 02 ターゲットが男女混在で曖昧 ビ ュア コピ 貫性 い ジ ルと ーに一 りの だが、 け 伝 り らく、 女性寄 印象 誰向 か わ づ 男性向 行動 がな け要 も につながりにく 素 混在 い 制作方針の作成へ P. 53
54. Works 制作方針 リサーチ・課題の整理の結果から、下記の３点を制作の方針としました。 01 安さへの不安を払拭する ベネフィットを具体的に伝えることで“安かろう悪かろう”の印象を避け、 アンケート結果などの権威性で安心感を補強する。 02 ターゲット別に訴求を最適化（正方形バナー） ターゲットを男女に分けて、それぞれ２パターン作成する。各々の目的や
 価値観に合わせたコピーとビジュアルで、共感と行動意欲を引き出す。 03 媒体ごとに訴求軸を調整 SNSでは価格とベネフィットを簡潔に、LP内ではキャンペーン特典と
 お得感を明確に伝える。 P. 54
55. Works ベンチマーク 制作方針をもとに、ベンチマーク・競合を調査し、デザインの参考にしました。 「業界（競合他社）」「デザインの参考」に分けてリサーチし、参考にすべき点を言語化 業界（競合他社） デザイン参考 強みや権威性を明確にアピールしている 顧客のベネフィットが伝わるキャッチコピー・ビジュアル設計 低価格やサポート内容など、情報の取捨選択が的確 心理的ハードルを下げる工夫が上手い（「30秒で予約」
 「手ぶらOK」など） ターゲットや訴求内容に応じた構成・トンマナ設計 適切な要素選択（フォント・配色・構図）による視認性の向上 バナーが表示された“最初の1〜2秒”で視線を止めるインパクト 作り 「自分ごと化」を促すビジュアル設計 P. 55
56. Works 正方形バナー Pattern A キャッチコピー ビジュアル キャッチコピーに呼応したビジュアルを
 用いることで、「こうなれる」という
 理想像を視覚的に提示。
 強い印象とモチベーションを喚起し、
 広告効果を高める狙いです。 価格 「1回60分5,000円〜」という明快な価格
 提示により、コストパフォーマンスの
 高さを具体的に表現。
 “通いやすさ”という心理的ハードルを
 下げることを意識しています。 「腹が凹む!!」という端的な言葉で、ターゲット
 （30〜40代男性）のニーズにストレートに訴求。
 業界最安水準という事実と組み合わせることで、
 “安くて結果が出る”というベネフィットをアピール。 権威性 3項目のアンケート結果を“デザインバッジ”
 として掲載。視認性・信頼性を両立しながら、
 「安いけど不安」な印象を払拭し、安心して
 選んでもらえる構成に。 CTA 「今だけ！無料」などの文言と、コントラストの強い配色で視線を集める工夫を。
 登録のメリットを明確にし、すぐに行動を促せる構造にしています。 P. 56
57. Works 正方形バナー Pattern B ビジュアル 笑顔と引き締まったボディラインを見せた女性の
 ビジュアルを使用。
 コピーと連動して「自分もこうなれるかも」と
 思わせる理想像を提示し、共感とモチベーションを
 引き出します。 キャッチコピー 「手軽に美ボディ」という言葉で、
 20〜30代女性が求める“手間なくキレイに
 なりたい”というニーズをストレートに表現。
 明朝体や光彩加工によって、高級感・
 洗練さをプラスし、価格以上の価値を伝える
 意図があります。 男性向けがベネフィットの直接訴求だった
 のに対し、こちらはメッセージ性や共感を
 重視しています。 CTA 今 登録 ！無料 リ ど 文 確 価格 6 5, 円 快 パク な
 そ 心 的 壁 払拭 配色 柔 調整 「 0分 000 〜」という明 でコン ト 訴求で、“高 う”という 理 な を 。
 女性向けに も らかく しています。 強 配色 構造 線 集 夫 「 だけ 」な の 言と、コントラストの い で視 を める工 を。
 のメ ットを明 にし、す に 動を せる にしています。 ぐ 行 促 P. 57
58. Works レクタングルバナー Pattern A キャッチコピー ビジュアル 「0円で健康ジム習慣」という短く力強いコピーで、
 “コスト不要で始められる”お得さを直感的に訴求。 パターンBと比べ、メッセージやビジュアルで
 直感訴えるスタイルで作成。 価格 59,800円などの具体的な金額を打ち消して「すべて0円」
 と強調することで、インパクトのある訴求に。 運動習慣を始めることに前向きな印象を与える笑顔の
 女性を配置し、明るく親しみやすい印象に。 キャンペーンについて 「4月限定」「先着10名様」など、希少性と
 今だけ感を押し出して、即行動を促す構成。 P. 58
59. Works レクタングルバナー Pattern B ビジュアル キャンペーンについて 桜や帯のモチーフで“春らしさ”を演出し、
 限定感＋季節感での共感を誘発。 シンプルなポージングの女性を使用し、パターンAと 異なり、主役はあくまで“お得情報”であることを強調。 キャッチコピー＋価格 「ぜ〜んぶ無料！」というラフで勢いのあるワードで、明確にキャンペーンの中身を伝えやすくしている。 「最大約11万円OFF」や「入会金＋体験料＋初月会費＝無料」を文字サイズ・色使いで目立たせ、
 明瞭な価格メリットを提示。 P. 59
60. Other Works その他の実績 学校など教育機関向けの デザイン制作物の実績 制作物 学校向け出前講座用スライド資料 営業資料／提案資料 チラシ、ポスター ご興味のある方には、個別にご案内可能です。 お問い合わせ時にお知らせください。 取引先 大手企業との取引もございます。 例）株式会社ロッテ、花王株式会社 株式会社朝日新聞社、三菱電機株式会社 ※契約上の都合により公開を控えております。 P. 60
61. FLOW ご提案の流れ
62. FLOW -ご提案の流れSTEP 01 STEP 02 STEP 03 STEP 04 事前ヒアリング ヒアリング ご提案・お見積り ご契約 最適なご提案ができるよう、事前 対面またはオンラインにて30分程 ヒアリング内容をもとに、デザイ 提案内容にご納得いただけました にヒアリングシートをご記入いた 度のヒアリングを実施致します。 ンのアイデアやお見積もりを提示 ら契約を結び、制作を開始いたし だきます（10-15分程度）。 制作の目的やターゲット像、デザ いたします。 ます。 インイメージをお伺いします。 P. 62
63. お問い合わせ CONTACT
64. CONTACT -よくある質問Q デザインの実績が少ないようですが、依頼しても大丈夫でしょうか？ A Q 教育業界以外の案件にも対応できますか？ A Q デザイン経験が浅い分、丁寧なヒアリングとリサーチを重ねながら、お客様の目的やイメージを深く理解することを大切にしています。 修正は基本的に回数制限を設けず、「納得いくカタチになるまで伴走する」姿勢で取り組んでいます。
 なお、実績の中に公開できないものもございますが、ご希望の方には個別でご説明いたします。どうぞお気軽にお問い合わせください。 はい、対応可能です！
 これまでの経験から、複雑な情報をわかりやすく伝える力や、ターゲットに合わせた表現力を培ってきました。
 業界やジャンルを問わず、「伝えたい価値を、誰にどう届けるか」を大切にしながら、目的に沿ったデザインをご提案します。 修正は何回までできますか？ デザインの A 形 幅 変更 つ 回数の制限は設けていません。納得いただける になるまで、しっかり対応させていただきます！
 ただ、デザイン の大きな方 や、大 な に いては、 に応 て をお いすることが ります。 完成後 向転換 内容 じ 追加料金 願 あ P. 64
65. THANK YOU!! 最後までご覧いただき、誠にありがとうございます。 「心に届き、行動を後押しするデザイン」を大切に、伝わる構成と丁寧な進行を心がけています。
 安心してお任せいただけるパートナーでいられるよう、誠実に取り組んでまいります。
 些細なことでも構いませんので、どうぞお気軽にご相談ください。 お問い合わせはこちらまで ご相談・お見積りは無料です。 ご連絡をいただいた後、 24時間以内に返信いたします。
 （土日祝を除く） 山口 哲弘 E-mail Chatwork t.yamaguchi@miekata.jp @Tecchan_yama P. 65