portfolio.pdf

Transcript

1. Web制作 Portfolio name sou 『 成 果 の 最 大 化 』 を デ ザ イ ン す る
2. 名前・在住 sou ・京都 屋号 yosasouda（ヨサソウダ） 自己紹介 15年以上の製造業の経験×Web制作スキルで、 クライアントに寄り添い、一緒に考え伴走し、 課題の解決を目指します。 略歴 2010.04 大学卒業後、製造業で会社員として勤務開始 2023.04 課長職に就任 2023.11 Web制作者として活動開始 好きなこと 暖かい地域や島への旅行 → リフレッシュ＆新たな出会い 旅行先での飲食 → 好奇心＆探求心の刺激 豚骨ラーメン → 出身地である福岡愛 そう Profile プロフィール
3. V V M お客様の描く未来をWebで形にするために、単なる外注先ではなく、共に成長し、 成功へと導くかけがえのないビジネスパートナーであること ミッション：未来を共創する最も信頼される事業参謀 ビジョン：正しい戦略で成長を未来へ繋ぐ バリュー：誠実さを基盤にWHYから導く戦略で常に成果を最大化する お客様との信頼関係を最優先に考え、常に誠実であることを誓います。 そして、表面的な『What』や『How』だけでなく、「なぜそれが必要なのか」を深く追求し、 本質的な価値を生み出し、成果の最大化を目指します。 「Web制作は『作る』ことがゴールではありません。常に明確な戦略に基づき、 お客様の事業が持続的に成長し、豊かな未来へと繋がる道筋をデザインします。 クライアント様の現状とありたい姿を把握しそのギャップ＝問題から課題を導き出して施策を打ち、 ありたい姿を実現すること。 事業のサービスの枠を超えて事業の根幹に関わる提案を行い、クライアント様のビジネスを成功させるために 必要なことを本気で考え、単なる外注先である“制作者”ではなく、かけがえのない“事業参謀”になること。 Ideal State 目指す姿
4. S E R V I C E よ く あ る 課 題 ・ わ た し の 強 み ・ サ ー ビ ス の 特 長
5. Problem よくある課題 こんなお悩みはありませんか？ ホームページ・LPを作りたいけど、初めてでよく分からない。 新しいサービスや商品を効果的にアピールしたい。 コミュニケーションコストがかかり、やりとりに時間を要した。 連絡したものの返事が遅く、不安に感じた。 Web担当者がおらず、何から手をつけていいのか分からない
6. Strong Point わたしの強み しっかり寄り添い解決いたします！ 設計 事業内容を理解し、競合他社の調査を行い成果の出るサイトを設計 提案 ビジネスの根幹から課題を導き出す「事業参謀力」。必要に応じて積極的な提案を実施。 反応 稼働時間中は即レス、遅くとも12時間以内のレスポンスを実施 進行 スムーズな進行とストレスを感じさせないコミュニケーション 管理 設計～デザイン～制作の「ワンストップ対応」と徹底した品質管理 実際にこのように取り組んでいます
8. features - voice サービスの特長 - クライアント様からの声 - 前向きな声をいただけるのが 一番の喜びです！
9. Figma Affinity 幅広いスキルセットで成果を最大化します！ ・LP ・コーポレートサイト ・バナー ・名刺 ・ロゴ ・資料作成　など ・AI活用（ライティング等） ・VBA（Excelマクロ） ・RPA（winactor） ・SEO対策 ・MEO対策 ・Googleリスティング広告 ・ワイヤーフレーム作成　など features- skill サービスの特長 - スキル マーケティング デザイン コーディング その他 静的サイト構築 HTML CSS Sass(Scss) 動的サイト構築 WordPress PHP アニメーション構築 JavaScript GSAP
10. W O R K S 制 作 実 績
11. T A S U K A R U - タ ス カ ル - LP制作
12. Works 制作実績 「タスカル -TASUKARU-」アプリのLP制作 企業様 株式会社TAFUSU 制作期間 2週間 制作範囲 ワイヤーフレーム ライティング デザイン ロゴ制作 使用ツール Figma 種類 制作途中でPJ終了
14. Works 要件定義 事業内容 軽貨物自動車運送事業者向けの法令遵守支援SaaSサービス。 目的 コンバージョン率の向上 法令の重荷から解放されたい現場のドライバーからのサービスへの登録数を増やすこと ポイント ・自動化による手軽さ、使いやすさ ・法令準拠 ・圧倒的コスパ ・現役ドライバー、運送会社がサービスを作っている点 ターゲット ①個人事業主ドライバー（効率重視・ギグワーカー型） ・法令は守りたいが、余計な時間は1秒も使いたくない ・デジタルリテラシー：中。スマホ操作は慣れているが、新しいアプリの学習コストは嫌う。確定申告はfreeeを使用。 ②個人事業主ドライバー（ 不安解消重視・ ベテラン 転身型） スマホは 苦手 だが、 仕事が できなくなるのはも っと 怖い デジタルリテラシー： 低。 電話と LINE、 Googleマ ップは使 えるが、アプリのイ ンストールや ID・ パス ワード 管理が 苦手。
15. Works ペルソナ ユーザー視点に立ってデザインするためにペルソナを設定。 佐藤 健二 (38) 個人事業主ドライバー 「法令は守りたいが、余計な時間は1秒も使いたくない」 主な悩み 2025年の法改正のニュースを見て、「何か記録しな きゃいけない」とは知っているが、具体的に何を記録 すれば「正解」なのか調べるのが面倒。 求める体験 「これさえやっておけば、もし監査が入っても大丈夫」 という安心感。 （スマホ操作は慣れているが、新しいアプリの学習コストは嫌う。） ITスキル 鈴木 博 (54) 個人事業主ドライバー 「スマホは苦手だが、仕事ができなくなるのはもっと怖い」 主な悩み 仲間か ら2025年の法改正を 聞いて 不安になっている。 手 書きでは 休息チェックな どができ ず、うっかり 違反 してし まうのが怖い。 求める体験 老眼でも見える、 専門用語が 少ない、 難しい 設定は 不 要、 自分でも使えるという 確信。 電話、 LI NEは使えるが、アプリイ ンストールや パス ワード 管理が苦手。 ITスキル
16. Works ベンチマーク・競合調査 企業向け（管理） 権威性 多機能 高価格 シンプル機能 低価格 個人向け（自衛） 親しみやすさ 競合4社の分析を通じて、4象限マトリクスで「タスカル」の勝ち位置（ポジショニング）を整理。 対 K-LINK（権威・管理）： 「管理」ではなく「ドライバーの自衛」に寄り添う。 対 CarryNote（多機能・アプリ）： 「多機能」は不要。「シンプル機能・ブラウザ」の軽さを売る。 対 ケイログ（簡易・未完成）： 「ただの記録」ではなく「自動判定」による安心感を売る。 対 らくらく日報（安価・スプシ）： 「設定・管理の手間」を排除し、思考停止で使える楽さを売る。
17. Works バリュープロポジション 顧客が求め、競合ができず、自社だからこその価値 競合他社が 提供できる 価値 自社が 提供できる 価値 顧客が 望んでいる 価値 「法改正は怖いから対策したい。でも、今の快適なルーティン（Amazon Flexア プリ、freee、慣れた手順）を壊されたくない。」 新しい「多機能アプリ」への乗り換えは、メリットではなく「学習コストという 苦痛」。欲しいのは、今の業務の「隙間」にスッと入るだけのツール。 K-LINK（ 協会） ： 「 管理・監視」を 目的化。 ドライバー 個人の「自 由・自 衛」の ニー ズとは 異なる サー ビス 。 Carr yNo te（多機能） ： 「 オール イン ワン」が 売り。そのため、「機能の 引き 算（ 単機能 化）」はでき てい ない。 既存ツールを 使っている 層に対し ては「機能 重複（ 無駄なコスト）」とな り、 共存できない。 ケイログ、らくらく 日報（ 無料・簡易アプリ） ： 「ただ 記録するだけ」で あり、「法 令バリ デー ション（ 違反の自 動チェッ ク）」と いう 安心感（ ＝プ ロ品質）を提供できない。 引き 算の 設計： 現役ドライバーが 開発に 関わっているからこそ 、 「 要らない機能」を 勇気を 持って捨てられる 。 ブラウザ完結： アプリストアを 通さないことで、「 即時性」「 軽量性」を提供し 、 物理的にも 心理的にも「 端末を 占拠しない」 立ち位置を 取れる 。 運送会社 運営の 信頼： 機能を 削ぎ落とし ても、「法 令対 応の 質」だけは 削っていないとい う 裏付け（ 権威性）が ある。 既存の「配送スタイル」や「愛用ツー ル」を一切変えずに、
 スマホの容量も時間も奪わず、「2025年法改正」だけを自動でクリ アする
 『共存型・法令オー トメーション 』 バリュープロポジション
18. Works カスタマージャーニーマップ ペルソナ視点でカスタマージャーニー・マップを作成し、導線を見える化しLPの役割を整理。 ユーザーの心理 ユーザーの行動 タッチポイント 施策 KPI 課題 認知 興味・関心 比較・検討 意思決定 利用 【危機感・不安】 「2025年から規制が厳しくなるらし い…」「罰金とか免許停止は絶対に避け たい」「でも、何をすればいいか調べる のが面倒だ」 待機所や喫煙所でのドライバー同士の噂 話・YouTubeで「軽貨物 2025年問題」 の動画視聴・SNS（X）で法改正の愚痴 を見る 「軽貨物 日報 アプリ」「乗務記録 無 料」などで検索・リスティング広告をク リック・LPを流し読みする 競合他社（K -LINK , CarryNo te）と比 較・「アプリ不 要」「 月額」を 確認・利 用規 約や 運営会社（ 運送会社か ？）を チ ェック 「無料で 始める」 ボタンをタップ・ Goo gle /LIN Eログインで 登録・ ホー ム画 面に ブック マーク 追加 業務 開始/終了時にタップ・ 週次/月次の レポート 確認・ 有料プラン（P ro） への 切り替え検討 YouTube（ドライバー 系イン フルエン サー）・SNS（X , T ikTo k）・ 荷待 ち場所 での 口コミ・ ニュース記 事（Y ahoo ! ニュース 等） 【 脅威訴求】「知らないと免許が危な い」 啓蒙ショート動画・「 手書きvsアプ リ」の比較画 像拡散 「 自分は 大丈夫」とい う正 常性バイア ス・ 情報の 洪水に よる思 考停止 動画 再生数・SNS エン ゲー ジメント・ 指 名検索 ボリ ュー ム リスティング広告・リター ゲティング広 告・ 「タスカル」LP 【 引き算の 訴求】「インストー ル不 要」 を 強調した広告バ ナー・「 既存アプリと 共存OK」の メッ セー ジ発信 「 新しい ことを 覚える」認知 負荷・ ブラ ウザアプリ への理 解不 足（アプリストア にない不安） LP への流 入数（ CT R）・ 直帰率・ 滞在時 間 「タスカル」LP（機 能・ ソリ ュー ション セク ション）・比較記 事ブログ・ 公式 Q&A 【 権威と 共感 】・「 現役ドライバー 開 発」に つい て・機 能性（ ×機 能の 多さ ◦ シンプ ルさ）・法 令順守 「安す ぎる ＝低品質」とい う誤解・ 「 データが 消えるのでは ？」とい う不 安・ 競合の「 全部入り」 への 未練 スク ロー ル率（ 特に比較・ 価格エリ ア）・「無料トライア ル」 ボタンのク リック 率 登録 フォー ム（ 最小入力）・ ウェルカム メー ル 【 ハード ル破壊】・「ク レカ登録不 要」 の 明記・「 ホー ム画面に 追加」の 誘導ガ イド・ 60 秒で 終わる 初回設定 登録 時の 入力項目が 多いと 離脱する・ パ ス ワード 設定の面倒く ささ 【 CV】無料 会員登録 数・ 登録 完了率 サー ビス画面（ ブラ ウザ）・利用 ガイド （チ ュートリア ル）・定 期メー ル（法 令 ニュース 等） 【 成功体験の 提供】・「 今週の 節約時 間：◦◦分」の 表示・「 監査対 応モー ド」の安心感 醸成・ 紹介キャン ペーン （ Amazo nギフト 券等） ブック マークを 忘れ てアク セスで きなく なる・ 習慣化する 前の 離脱（ 三日 坊主） D AU（ デイリーアクティ ブユーザー）・ 有料プラン転換 率・ 解約率（ Chu rn Rate） 【 自分ごと 化・探 求】 「 手書きの日報なん て、忙しく て無理 だ」「ス マホで簡単に済ませたい」「で も余計なアプリを 入れると重くなるし な…」 【疑念・選別】 「 他社は『 全部入り』ですごそ うだけ ど、高いし 設定が面倒そ う」「 今の 会計 ソフトと機 能が被っ てるのは無駄」「本 当に これだけで法 令対 応で きるのか ？」 【納得・ 解消】 「 これなら 今のアプリの邪魔をしない」 「 現役ドライバーが作っ てるなら 信頼で きそ う」「無料だし、と りあ えず試し て みるか」 【安堵・ 習慣化】 「本当にタップするだけで 終わった！」 「警告が出ないから安心で きる」「仲 間 にも教 えてやろ う」
19. Works コンセプト 参考イメージ サービスのイメージキーワード 親しみ 清潔感 使いやすさ シンプル ターゲットが好むイメージキーワード 法令順守 低コスト 分かりやすさ 操作性の良さ ①実際のサービスをイメージさせる画面をモックアップに載せる 実際の画面を画像として持ってくることで使った時のことを イメージさせます。 ②数字での訴求 数字をグラフ等で表現し訴求力を高めます。 ③イラストを活用し、親しみやすさを出す。 イラストはフラットなものを使用し、ポップになりすぎず、 シンプルさの中で洗練さも表現します。 ④図形は角丸を使用。 角を 丸くしすぎると 可愛い感じになり やす いため、 少し 控えめに表現 することで、洗練した 雰囲気も 保ちつつ、シンプルですっ きりとした デザインに いたします。
20. Works コンセプト 参考イメージ カラー ホワイト・ライトグレーをベースに安全・信頼の青を使用 以下のカラーで全体的に、シンプル、洗練された雰囲気を目指します。 ・ベース：清潔感・落ち着きを表現するホワイト・ライトグレー ・メインカラー：安全・信頼の青 ・アクセントカラー：軽自動車用の事業用ナンバープレートの黄色を 　　　　　　　　　　想起させる黄色を使用しコンバージョン率を高ます。 Typography Noto Sans JP あアAa123 ・文字がつぶれにくい、スマホの小さな画面でも視認性が高い 　フォントを採用しました。 ・クセのないデザインで日本語、英語、数字の全ての表記において 　統一感を持たせ安心感を与えるフオントです。
21. Works LP構成 「PASBECONA（パスビーコナ）の法則」で論理と感情を積み上げ、お悩み解決型でターゲットの不安解消にフォーカスした構成にしました。 要素 番号 内容 構成（セクション） 【Problem：問題】
 【Affinity：親近感】
 【Solution：解決策】 【Benefit：利得】 【Evidence：証拠】 【Contents：内容】 【Offer：提案】 【Narrowing Down：絞込】 【Action：行動】 3
 4
 5 7 8,9 10 11 1-14 13 「事故4割増」 「法改正による罰則リスク」 を突きつけ、 問題 を認識させます。
 「手作業には戻れない」 「管理アプリは面倒」 というドライバーの心理に寄り添い共感 。
 「自動 記録」 「法令準拠 」 「低価格」 という解決策 を提 示。 機能説明の前に 「1 5分が3 分になる」 という具体的なベネフィットを視覚的に見せる。 「国交省規制完全準拠 」 「現場ドライバーの声」 で、 機能が本物である証拠 を提 示。 「あえて機能がないこと」 や具体的なプラン内容 を提 示し、 検討材料を渡す。 「月額600円」 「1 ヶ月無料」 というオファーを提 示。 ターゲットを 「個人事業主ドライバー」 に絞 り込 み。 「今すぐ無料で試す」 という具体的な行動 を促進。 ヘッダー 1 9 2 1 0 11 1 2 13 1 4 3 4 5 6 7 8 FV 課題提 起 共感 ソリューション C TA be fore /a fter 主要 機能 利 用者の声 競合優位性 料金プラン よくある質問 C TA フッター ターゲットは「2025 年問題 （法令改正）」という悩みは知っているが、「どのツールを使えばいいか（解決 策 ）」が決 まっていない状態。 いきなりスペック（機能）を並べるのではなく、「法改正、面倒ですよね（Problem ）」→「これなら楽です よ（Solution ）」→「今なら無料です（Launc h）」という順序で、マイナス状態をゼロ・プラスに戻す訴求を 実施。 通常の型では「あれもこれもできる」と言いがちですが、今回はペルソナが「既存ツールとの重複」を嫌がって いるため、「機能を削ぎ落としたこと」を価値（USP ）として定義。 ポイント （参照元著書： 神田昌典　『コピーライティング技術大全ーー百年売れ続ける言葉の原則』）
22. Works FV レイアウト 左上のロゴから始まり、キャッチコピー（左）→ メリット （中央）→ 写真（右）へと視線が自然に流れるような配置 にしています。 特に右下の青い波打つシェイプは、全体の 堅苦しさを和らげつつ、視線を自然と「スマホ画面（ツー ルの実体）」や「CTAボタン」周辺に留め、親しみを印象 付ける役割を果たしています。 キャッチコピー FVで最も重要なのは「誰に」「何を」「どうする」 サービスかを3秒以内に伝えることです。 キャッチコピーで明確に伝え、その下に根拠となる情報 を月桂樹を使い権威性を可視化したかたちで配置してい ます。 CTA ベース カラーの「青（ 信頼）」に 対し、 アクセント カラーとして 軽貨物車の ナン バーにも使 われている 「 黄色（ 注意・活気）」をボタンの 背景あしらいに使 用しています。これにより、ボタンが 埋もれ ずに ポップ アップして 見えます。「 1ヵ月 無料ト ライ アルつ き」のマイ クロコピーは、 心理的ハー ドルを下げ る役割を 担っています。 メイ ンイ ラスト 右 側の写真は、 夕日に 照らされた ドライ バーの 横顔が、 現場の「 誇り」や「 哀愁」、そして 仕事終わりの「 安堵感」を 演出し、 無機質な SaaSツールではな く、 人の 温かみを 感じさ せて ます。 一方で、中央下 部にスマホを 持った 人物と UI画面のイ ラストを配置することで、「実 際にどう使うのか」「スマホ 一つで 完結する 手軽さ」など 機能面を 補完しています。
23. モ バ イル アプリ開 発会 社 株式会社 WAKE WONDER コーポレートサイト制作
24. Works 制作実績 モバイルアプリ開発会社の コーポレートサイト制作 企業様 株式会社WAKE WONDER 制作期間 1ヵ月 制作範囲 ワイヤーフレーム デザイン ライティング 使用ツール Figma 種類 自主制作
26. 事業内容 UXデザインと高度な技術力を融合させ、クライアントのニーズに 応える高品質なアプリを提供しているモバイルアプリ開発会社。 ターゲット アプリ開発のリソースや知識が不足する中小企業、スタートアッ プ企業、公共機関。 課題 自社プロダクトアプリ「OHA!」の普及に対し、企業とし ての知名度が低いという課題を抱えています。コーポレー トサイトを通じて運営会社としての存在感を確立し、既存 の中小企業だけでなく、スタートアップや公共機関へと ターゲット顧客層を拡大することを目指しています。 施策 課題解決のために、ターゲット顧客のニーズに合わせた訴 求を行い、お知らせセクションやブログの定期更新を通じ て、アプリ開発に関する有益な情報や独自の情報を発信す ることで、サイトへの流入増加と企業ブランディング強化 を図ります。 目的 Figma ご要望 設立5年目を迎え、アプリ開発事業の拡大に伴いWEBサイト のリニューアルを決定。既存サイトは簡易的に作っただけ で、運用や活用が全くできていない状態。自社プロダクト 「OHA!」のさらなる普及と、ITスタートアップ企業や教育機 関・自治体への積極的なアプローチを目的に、会社の事業内 容や強みを効果的に訴求できるサイトが欲しい。 Works 要件定義
27. 競合 アプリ開発における先進性や体験価値の提供、 具体的な成功事例の魅せ方が、信頼性、安定性を与えている。 デザイン 落ち着いたトーンと、情報が体系的に整理されたシンプルなレイ アウトが特徴。セクションごとの明確な区切り、画像を多用した 直感的なレイアウトで情報量の多いサイト構成でも煩雑さを感じ させない。 カラー メインカラーは落ち着いたブルーで、 グレーやホワイトを基調とした配色。 企業の信頼性、プロフェッショナリズム、 安定感を象徴し、堅実なビジネスイメージを構築している。 カラー デザイン 競合 参考サイトを集め、競合・デザイン・カラーの3つの角度から ベストプラクティスを言語化。 Works ベンチマーク
28. デザインコンセプト 技術力と先進性でアイデアをカタチに。 顧客のビジネス課題にどこまでも寄り添い成功へと導く 「信頼できるクリエイティブ・パートナー」 。 キーワード 信頼感 技術力 先進性 クリエイティブ 共創 アイデア シンプル 親しみやすさ Works デザインコンセプト / キーワード
29. フォント Noto Sans JP 可読性を最優先に設計されたフォントで、長時間読んでも疲れにくく、 高い信頼性や誠実な印象を与える。 Montserrat 都会的で幾何学的なフォルムが特徴のサンセリフ体です。そのスタイリッシュな佇まいは、先 進性や技術力を重視するIT・テクノロジー系の企業イメージと非常に相性が良いです。 カラー #005AAA #666666 #CCCCCC #EFBC19 #333333 #666666 #CCCCCC #EFBC19 #FFFFFF ・ブルー系の色によって、信頼性と最先端のテクノロジーを想起させる先進性を印象を付けてお ります。また、背景に敷くことでサイト全体にプロフェッショナルで一貫性のある世界観を構築 しています。 ・エナジェティックイエロー（#EFBC19）によって、視線誘導や行動喚起を促すと同時に、 ポジティブさやエネルギーといった人間的な温かみを加え、「技術的に高度だが、親しみやす く、共に新しいものを創り出すワクワク感」を伝えております。 ・ホワイト、グレー系の色によって、ユーザーがストレスなく情報を読み進められるようにして おり、豊富な余白によって、コンテンツへの集中を促進しております。 Works フォント / カラー
30. ナビゲーションメニュー 主要な４つのナビゲーションリンクとお問い合わせボタン に絞り込み、ユーザーにサイトの全体像を一瞬で把握さ せ、アクセントカラーで際立たせたお問い合わせボタンに 視線と意識を誘導します。 キャッチコピー 頭の中にあるアプリ開発のアイデアをカタチにしたいク ライアントへの共感、カタチを『』で囲み単なる形では なく、アプリや成功といったゴールそのものを表現、余 白を多くとりこの一文の重要性を際立たせています。 CTA 白い背景の中に彩度・明度が高いイエローのボタンを置くことで、視線をひきつけ最も重要であること を表現し、「何か新しいことが始まりそう」という期待感を抱かせ、クリックへの心理的ハードルを下 げます。また、右向きの矢印（＞）でユーザーが迷うことなくボタンと認識します。 メインイラスト アイデアをレゴのようなブロックとBLOB（不定形の形）で表現し、 ブロックの上にスマホアプリを置いて、 【アイデアを『カタチ』にする】というキャッチコピーをビジュアルで訴求してます。 Works ＦＶ
31. 企業情報 サイトの基調色であるディープブルーを背景に敷くことで、専門性と技術 力の高さを視覚的に訴求しています。右側に配置された「顧客と共に画面 を創り上げる」イラストは、顧客に寄り添う「パートナー」であること を表現しています。 代表アプリのご紹介 背景色を切り替えることで、前のセクションからの場面転換を演出してま す。企業の理念（ミッション）とプロダクトを結びつけて語ることで、単 なる技術提供者ではなく、ビジョンを持った創造者集団であることを印 象付けています。 サービス 再びディープブルーの背景に戻すことで、ここが企業の核となる「提供価 値」のセクションであることを表現してます。2つの主要サービスを、明 確に分離されたカード型のUIとミニマルなイラストで提示し、ユーザー に自身のニーズがどちらに近いかを直感的に判断させます。 お知らせ リスト形式のレイアウトは、時系列に沿った情報の提示に適しており、拾 い読みしやすいさを生んでます。カテゴリタグで、ユーザが興味ある情報 へアクセスするのを助けています。 ブログ アイキャッチ画像をイラストにすることで、記事の内容を視覚的に要約 し、ユーザーのクリックを促します。「業界の最新トレンドを深く理解 し、その知見をお客様に還元できる専門家集団です」というメッセージを 発信する役割を担います。 お問い合わせ 背景を再び穏やかなライトグレーにすることで、ユーザーにプレッシャー を与えず、安心して行動を起こせる心理的な空間を創り出しています。 アクセントカラーのイエローでユーザーの視線を引き付けます。 Works ＴＯＰ
32. 提案資料のデザイン制作
33. Works 制作実績 AI営業ツール「コネクトインテリジェンス」提案資料スライドデザイン 企業様 GMOコネクト株式会社 制作期間 10日間 制作範囲 デザイン 使用ツール Figma 種類 コンペ
35. Works ペルソナ分析 BtoB SaaS企業の成長を牽引するセールスマネージャー 氏名: 田中 浩一（38歳） 役職: 営業部 課長 業種: BtoB向けSaaS（プロジェクト管理ツール）提供 所属部署:6名の営業チーム 自身が若手時代に経験した、非効率なテレアポやリスト作成のプロセスに課題を感じており、テクノロジーを 活用した「スマートな営業」の実現を常に模索している。データに基づいた意思決定を重視し、チームの生産 性向上に情熱を注いでいる。 最重 要目標: 四半期ごとのチーム 全体の 売上 目標を 120%達成する こと。 チーム 運営: 営業チームの 残業を 削減し、 メンバーが 疲弊せずに成 果を 出し 続け られる 体制を 構築したい。 プロセス 改善: 属 人的な営業活 動から脱却し、データに基づいた効率 的なリー ド獲得の 仕組みを 確立したい。 キャリア: 営業部 門の部長 への 昇進を 見据え、 革新的な手 法で 会社に 貢献している と経営 陣に 示したい。 非効率なリスト作成 ・低いアポの 質・効 果の 出ない メール 施策・リ ソース 不足 ・課題を 解決し、 彼が理 想とする「スマートな営業チーム」を実現するた めの 戦略的パート ナー として 映る。 ・「 AIに よる 全自 動での 商談創出」 は、 彼が 最も時 間を 割きたい「 商談・クロージ ング」にチームのリ ソース を 集中 させる ことを 可能にする。 ・「 質の 高いアポ イント への コミット メント」 は、 彼の「 無駄なアポで エースの時 間を 浪費した くない」 とい う悩みに 直接応えて くれる。 ・「 圧倒的な コスト パフォーマ ンス」 は、 新しい メンバーを 1人採用する より も低コストで、 それ以上の成 果 が 見込めるた め、 予算が 限られている中で経営 陣を 説得しやすい 強力な 材料となる。 当サービスが響く理由 基本情報 ペルソナ 人物像・背景 課題・悩み 目標
36. Works コンセプト フォント メイリオ（Meiryo）を使用しております。メイリオは、パッと見てわかりやすい判読性や視認性に優れており、 パソコン画面上で特に見やすくいフォントとされています。 デザインの方向性 「知的でスマートな営業パートナー」を、クリーンで洗練されたデザインで表現。白を基調とした背景に、 キーカラーにGMOブルーを効果的に使用することで、信頼感と先進性を両立させた一方で、アクセントカラーに ピンクを使用し、ユーザーの目を引きたいポイントを明確化しました。 また、「無機質なテクノロジー感」を避け、知的でスマートな営業パートナーという印象を与えるために、温か みのあるイラストを使用しました。HPに使われている写真やあしらいを踏襲してトンマナを合わせ、一貫したブ ランドイメージを構築しました。
37. Works 説明 P1 目的: サービスの提供価値を瞬時に伝え、興味を喚起する 「コネクトインテリジェンス」を訳すと「つながる知能」であるこ と、GMO CONNECT様のミッションが「ビジネスに価値あるつながり を提供する」であることから、「人間と人間」、「AIと人間」、「質の 高い商談の創出」を円形でつなげて配置し表現しました。上部、下部 の写真はHPから採用させていただいております。 P2 目的: ターゲットが抱える具体的な悩みを提示し共感を呼ぶ。 「こんなお悩みありませんか？」という問いかけと、具体的な4つの課 題をイラスト付きで示すことで、ターゲットが「自分ごと」として捉え やすいように表現しました。
38. Works 説明 P3 目的: 提示した課題に対する具体的な解決策を示し、 期待感を醸成する。 「その課題、コネクトインテリジェンスが解決します」と力強く宣言 し、続く3つのソリューションへとスムーズに繋げています。 抽象的か つ分かりやすいイラストで表現することで、直感的に理解できるよう工 夫しました。 P4 目的: サービスの導入プロセスを簡潔に示し、 導入のハードルを下げる。 「お客様」が行うことと「自動」で行われることを色分けして明示的 に表現しました。3-STEPの中でお客様が行うことがターゲット設定の みであること、あとはAIが実施することを一目で伝えてます。
39. Works 説明 P5 目的: サービスの優位性を示し、競合他社との差別化を図る。 3つの強みを、天秤・頭脳・握手といった象徴的なアイコンを用いて視 覚的に表現しました。 P6 目的: 透明性のある価格を提示し、導入の具体的な検討を促す。 2つのプランを並べて比較できる表形式を採用し、検討しやすさに配慮 しました。 「今なら」の最も訴求したいキャンペーン情報を、大きく目立たせ、 強力なCTAとしての役割をもたせました。
40. Works 説明 P7 目的: 感謝を伝え、次のアクション（問い合わせ）へと繋げる。 HPの問い合わせセクションで使用されていた写真がまさに「知的でス マートな営業パートナー」という印象を与えると思い使用させていた だきました。
41. Works その他の制作実績 主にコーディングの実績となります。 HPからご覧ください。 https://yosasouda.com/work/
42. F L O W ご 提 案 ～ ご 契 約 の 流 れ
43. 01 ヒヤリング オンラインMTGにてヒヤリングをさせてい ただきます。クライアント様の手間を極力減 らし、より有意義なMTGにするために、事 前にフォームにていくつかのご質問にご回答 いただく場合がございます。 02 調査・ご提案 ヒヤリング内容をもとに、競合他社や市場な ど調査を実施しご提案資料を作成してご提案 させていただきます。 03 ご契約 ご提案内容に価値を感じていただけました ら、ご契約をお願いします。 Flow ご提案の流れ（一例）
44. Flow ご契約後の流れ（一例） 01 デザイン デザイン作成→FB→修正を経てデザインが 完成となります。 進め方は、３割作成してFB、FVのみ作成し てFBなどクライアント様に合わせて臨機応 変に対応します。 02 開発・納品 デザイン確定後に、実装→FV→修正→検収 を経て納品となります。 03 アフターフォロー 納品後も新規のご相談やご提案など継続的に サポートさせていただきます。制作し納品す ることを最終目標とせず、クライアント様の ビジネスの成功を目指します。
45. C O N T A C T よ く あ る ご 質 問 ・ お 問 い 合 わ せ 先
46. FAQ よくあるご質問 制作料金はいくらですか？ / 料金プランを教えて下さい。 Q 目的、規模、実装機能によって変動しますので、クライアント様のビジネスゴールをヒヤリングした 上で、最適なプランをカスタマイズしてご提案します。 A デザインの修正は何回できますか？ Q デザイン完成後の大幅な修正、変更については別途料金が発生してしまいますが、 完成前の修正回数に制限はございません。ご安心下さい。 A SEO対策（検索で上位に表示されるための対策）はしてくれますか？ Q 内部SEO対策（適切なHTML構造・表示速度の最適化）は標準でご対応いたします。 コンテンツSEOや広告運用については、制作とは別のプランでご提案可能です。 A サーバーやドメインなどWeb知識に疎いですが大丈夫ですか？ Q サーバー/ドメインの取得や設定まで全てサポート可能です。過去に取得から公開まで全て対応した 経験もございますのでご安心下さい。 A
47. 最後までご覧いただき、ありがとうございます。 クライアント様のビジネスを成功させるために必要なことを本気で考え、 課題解決に向けて全力で取り組みます。お気軽にご連絡・ご相談下さい。 Contact お問い合わせ先 https://yosasouda.com/contact/ https://x.com/sou_web1988 yosasouda@gmail.com HP Ｘ gmail