Basic Web Design Studio - Portfolio

Transcript

1. UI✕WEB Design Portfolio B a s i c W e b D e s i g n S t u d i o WEBデザイナー実務経験4年 元広告代理店デザイナー 元WEBエンジニア 建築業界出身 共に考え、共に創る、 戦略的な制作パートナー 制作実績 件超 120
3. 01 プロフィール P.04 サービス 02 P.07 制作実績 03 P.12 その他の制作物 04 P.66 料金 05 P.67 お問い合わせ 06 P.73 家計簿アプリのUI改善 UIデザイン 01 UI design P.14 toB向けトレーニングデバイス 販売LP制作 LP 03 Landing Page P.43 児童発達支援教室の サービスサイト制作 Webサイト 04 Service Site P.55 鉄鋼業等を営むグループ企業の 採用サイト制作 Webサイト Recruitment Site Macbook Pro 02 P.32 目次 Contents 目次 Contents
4. Profile 自己紹介／スキル／大切にしていること
5. Hajime Kanai 金井 基 1992.7.29 群馬県出身／神奈川県在住 # インテリア # アート # ミニマリズム # 散歩 # サウナ # 筋トレ # ウイスキー # 日本酒 好きなこと・趣味 4年 実務経験 2021年にフリーランスとして独立 WEBデザインスクールの講師や広告代理店のデザイナー、 事業会社様からのWEB制作の業務委託など幅広く経験 株式会社インフラトップにてWEBスクール事業のインハウス デザイナーとして参画。 サービスサイトの改修や広告バナーのCVRアップに貢献。 大学で建築学を学び、 グラフィックデザインにも興味が湧く 新卒で一部上場の内装設計の会社に入社 ほぼ独学でプログラミングの勉強を開始し、 WEBエンジニアに転職 WEBデザインの存在を知り、 デザインへの興味が再燃する エンジニアをしながら、 副業でWEBデザインのお仕事も受注し始める 最近は筋トレにハマっていて 週2〜3ジムに通ってます。 最近は筋トレにハマっていて 週2〜3ジムに通ってます。 Figma HTML Git chatGPT Photoshop CSS GitHub Chatwork Illustrator Sass WordPress Slack Adobe XD Canva Javascript Elementor Zoom jQuery STUDIO Google系一式 3年 6年 5年 1年 8年 6年 5年 5年 5年 5年 7年 5年 2年 2年 5年 3年 5年 5年 2年 5年 ス キ ル セ ッ ト その他ビジネス系 WEB制作系 デザイン系 メインで使用 マークアップ、静的コーディング エンジニア時代に活用 画像生成、リサーチ等 画像加工、レタッチ等 WEBサイト装飾 コードレビュー等 コミュニケーション 画像加工、レタッチ等 記述の効率化 ブログ運営、オリジナルテーマ開発 エンジニアとのコミュニケーション グラフィック、印刷物等 フロントエンド開発 WPノーコード開発 打ち合わせ、画面共有 GAS等も使用可 資料制作、アニメーション等 アニメーション適用等 ノーコード制作 プロフィール Profile プロフィール Profile インボイス制度に対応済み 適格請求書発行事業者 登録番号 T5810423446534 アドビ認定プロフェッショナル取得
6. 提唱者 (INFJ-T) ヒアリング力（傾聴力） 提案力 調整力 共感力・対話力 完遂力 ヒアリング力（傾聴力） 表面的なご要望だけでなく、その背景や目的を丁寧にヒアリングすることで、 言語化が難しい課題や理想像を一緒に明確にしていきます。 提案力 デザインの意図や選択の理由を、専門用語に頼らず伝えることで、納得感と 安心感を持って進められるよう心がけています。 調整力 スケジュールの変化やご相談内容のアップデートにも、柔軟かつ前向きに対 応。円滑な進行のために都度状況を整理し、最適な進め方をご提案します。 共感力・対話力 「一緒に良いものをつくる」パートナーとして、クライアント様の立場に立 ち、丁寧に向き合うコミュニケーションを大切にしています。 完遂力 納 期厳守はもち ろん、 チー ムとして 作業の 見える化や進 捗報告をこまめに行 い、 不安を 与えない進行を意 識しています。 ストレングスファインダー 上位３つの資質 回復思考 1 現状に満足せず 常に問題の解決を 目指します 2 互いの意見を尊重し より良い合意点を 探ります 調和性 3 自分の意志をもって 目的を遂行します 自我 性格タイプ・ ビジネススキル Profile 性格タイプ・ ビジネススキル Profile
7. Service サービスの特徴
8. このようなお悩みはありませんか？ デザイン・コーディングのリソースが不足している 要望を正確に汲み取ってくれるデザイナーが見つからない 納期やレスポンスのスピード感が合わない イメージの言語化が難しく、認識齟齬が発生する 継続して頼める信頼できるパートナーが見つからない デザインが「売上」や「KPI」に紐づかず、自己満足になっている 複数案件を抱えているため、指示コストや教育コストをかけられない 外注とのやり取りに時間がかかり、本業に支障が出る WEB制作会社 マーケティング会社 事業会社 の方
9. お客様の課題をデザインの力で解決します！ 4年の実務経験で 培った豊富な実績 01 02 03 04 マーケティング視点 でのご提案 十分なヒアリング から最適なご提案 負担軽減のための 進行力 私の強み Service 私の強み Service
10. 4年の実務経験で培った豊富な実績 01 マーケティング視点でのご提案 02 広告代理店や事業会社のデザイナーとして現場での実務経験を通して学んだのは、ただ“つく る”だけでは成果は出ないということ。 各フェーズで何を意識すべきかを理解し、状況に応じた柔軟なご提案が可能です。 デザインの意図を言語化し、クライアント様との認識を丁寧にすり合わせながら、「迷いのない 進行」と「成果につながるデザイン」の両立を目指します。 私の強み Service 私の強み Service これまでに企業のコーポレートサイトやサービスLP、キャンペーンバナーなど、業種・目的を問 わず多様な制作に携わってきました。 新規立ち上げからリニューアル、部分的なデザイン改善まで、状況に応じた柔軟な対応が可能で す。目的に合った成果を出すために、見た目の美しさだけでなく、ユーザー視点・導線設計・運 用のしやすさにも配慮したデザインを心がけています。
11. 私の強み Service 私の強み Service 十分なヒアリングから最適なご提案 03 負担軽減のための進行力 04 限られた時間や人員の中でも安心してお任せいただけるよう、段取りや確認事項を整理し、ス ムーズな進行を心がけています。「何をどう伝えればいいのか分からない」といった不安にも寄 り添いながら、やるべきことを明確にし、判断の手間や負担を最小限に抑えます。 ただ作るだけでなく、“進めやすさ”も含めて価値提供することが、プロとしての役割だと考えて います。 課題やご要望を丁寧にお伺いしたうえで、目的やユーザー視点に沿ったご提案を行います。 「なんとなく」ではなく、根拠のある構成・デザインをご提案することで、成果につながるクリ エイティブを実現します。 一方的に作るのではなく、一緒に考え、納得感を持って進められるパートナーであることを大切 にしています。
12. 分かりにくいことが、 嫌いです 私は、デザインの役割を「問題解決」だと捉えています。 情報がうまく整理されていない、導線が不明瞭、言葉が抽象的―― そうした“分かりにくさ”は、ユーザーの行動を妨げ、成果を遠ざけます。 制作においてまず重視するのは、情報の整理と構造設計です。
 誰に向けて、何を伝えたいのか。それはどう見せれば一瞬で伝わるのか。
 論理と感性の両面から設計することで、見た目だけでは終わらない「伝わるデザイン」 を組み立てていきます。 同時に、デザインは一人で完結するものではありません。 クライアントやチームとのやり取りの中で、意見を尊重し合いながら本質をすり合わせ ていく。 調和性を活かして、対立を避けながらも、誰もが納得できる落としどころを見つけるこ とを大切にしています。 “分かりやすくする”というのは、単なるビジュアルの工夫ではなく、
 誰かの迷いや判断コストを減らす、実務的かつ戦略的な行為です。
 私は、そうしたデザインの価値を正しく提供したいと考えています。 大事にしていること Service 大事にしていること Service
13. Works アプリUI／求人サイト／LP／HP／バナー
14. Works 家計簿アプリのUI改善 家計簿アプリ「Monelyze」様のUI改善を行いました。 参考：「家計簿 マネライズ」公式アプリ(https://monelyze.app/ja/) 本改善案は、Monelyzeの公式見解やアプリとは関係のない、個人の自主制作としての提案です。 ジャンル ファイナンス（家計） 担当範囲 情報設計、UIデザイン 制作期間 2週間 使用ツール Figma プロトタイプ https://figmashort.link/Jsz5PA 01UI design
16. Monelyze 家計簿 マネライズ - お金管理をシンプルに Monelyzeは、支出の記録とグラフによる可視化に特化した、シンプル で使いやすい家計簿アプリです。 直感的な操作性が評価されている一方で、「入力の手間」「継続の難し さ」「目的が見えにくい」といった課題があり、継続率の向上が今後の 改善ポイントです。ユーザーが“使い続けたくなる体験”を提供するため に、記録の成果が可視化されるUI設計や、モチベーション維持に繋がる フィードバック機能の導入を検討しています。 リサーチ アプローチ 競合分析・ベンチマーク調査 情報設計・UIデザイン制作 仮説の設定 ペルソナ設計 カスタマージャーニー設計 ユーザーの生活背景や行動パターン、 ニーズの把握 課題解決のために必要な機能・仕様・ 体験の言語化 画面構成・ 情報の 配置・ 操作導線の 設 計 と具体化 類似サー ビスとの機能・体験の 比較と 差別化 ポイン トの 発見 ユーザー行動や 離脱要 因に 対する仮の 原因の 明確化 代表的ユーザー 像の 具体化 と関係者間 の 認識統一 ユーザーの 感情・行動・ 接点の 可視化 に よる体験 全体の 整理 制作概要 UI design Works 制作概要 UI design Works 改善対象のアプリ 事業内容 UI 改善のプロ セス 提供形式 主な機能 マ ネタイ ズ 市場ポジ ション iOS / An dro id アプ リ（無料DL、 アプ リ内課金 あり） 無料＋有料プラン （PRO）で差別化 ：
 詳細分析／予算自動化 ／広告非表示／クラ ウド同期な ど 「マネー フォワー ド」「Zaim」な ど高機能 系とは違い、 “家計簿 初心者向け”特化のシンプル 設計 支出入力・ 履歴表示・ グラ フ可視化・ 節約達成演出・ 通知・ 予算設定
19. なぜ家計簿は続かないのか？ 仮説 改善の方向性（課題 → 解決策） 起動直後に支出入力UI、過去履歴からのワンタップ入力 記録が面倒 ユーザー課題 改善アイデア 通知の最適化、継続日数の可視化、達成スタンプの演出 習慣化できない 週／月の節約金額、支出傾向グラフ、自動コメント 成果が見えない 丸みのあるUI、やさしいトーン、ミニキャラなど演出 堅苦しい印象 グラフ詳細や自動予算など、“その先”を自然に体験させる設計 課金理由が見えない 「記録＝目的」になっており、 記録の先にある成果や気づきが体験として得られないから 仮説・改善の方向性 UI design Works 仮説・改善の方向性 UI design Works
20. より具体的な顧客視点の悩みやニーズを明確にするために、ペルソナを設定しました。 ” 気づいたら残高が減っているのをなんとかした‘ ” コンビニ・外食・サブスクに使いすぎるのを抑えた‘ ” 手軽に支出を見える化したい（でも面倒なのはNGi ” 節約や貯金を意識したいけど、管理は苦手 ” 朝はギリギリまで寝て夜遅めに帰宅 → 記録時間がな‘ ” 飲み会やデリバリー、コンビニでの無意識支出が多‘ ” 月末に「残高少ないな」と焦ってクレカ明細を開‹ ” 一応節約意識はあるが、ルーズになりがち ” 毎月の支出が「なんとなく」でしか把握できていな‘ ” 家計簿アプリを何度か試したが、入力が面倒ですぐやめÙ ” クレカ請求額にビビるが、記録して対策できていな‘ ” 何に使ったかが可視化されず、浪費傾向が自覚できない 名前 田中 直樹（たなか なおき） 年齢 25歳 職業 IT企業のエンジニア（4年目） 居住地 神奈川県・ワンルームマンションに一人暮らし 年収 約350万円（手取り月21〜22万円） 趣味 YouTube、サウナ、飲み会、スマホゲーム 支払い クレカ・交通系IC・スマホ決済メイン（現金ほぼ使わない） 利用目的（このアプリを使う理由） ライフスタイル・お金の使い方 現状の悩み・課題 ペルソナ UI design Works ペルソナ UI design Works
21. フェーズ きっかけ 認知・関心 初回利用 継続利用 2週間〜1ヶ月 有料版検討 行動 R 給料日前に残高確A R クレカ明細を見る R ダウンロード
 → 起動後すぐ記録 R AppStoreで家計簿 アプリを探す R 通知で思い出しなが ら記録継続 R グラフ比較／予算機 能に興味が出る 「またお金ギリギリ… どこに使ったんだ？」 「え、こんなに簡単に？」 「続かなかったけど、 今回こそ…」 「コンビニ多すぎかも」 「もっとしっかり管理したいな」 銀行アプリ／
 クレカアプリ 不安に寄り添う広告： 「お金、どこで消えた？」 起動画面、入力UI 起動直後に入力画面 → 電卓＋カテゴリワン タップ構成 アプリストア、レビュー、 YouTube紹介 「登録不要」 「2秒で記録」などの 手軽さアピール 通知、履歴画面、 グラフ カレンダー・棒グラフで傾 向を“気づきやすく”見せる グラフ詳細画面／ 有料機能バナー 「もっと管理したいなら Pro版へ」など自然な誘導 感情 思考 タッチポイント アプリの役割 設計ポイント カスタマージャーニーマップ UI design Works カスタマージャーニーマップ UI design Works
22. contents layouts idea design 単なる支出の記録だけでは、ユーザーはすぐに離脱 してしまう。そこで、「記録した結果どう変わった のか？」を可視化する仕組みを重視する。たとえ ば、「今週の外食が多め」「先月より3,000円多く 貯まった」などのミニインサイトや成果表示によっ て、続けたくなる理由を作る。また、目標設定や節 約達成バッジといった小さな成功体験を通して、 ユーザーに前向きな実感を与える。さらに、有料機 能も“知りたくなるタイミング”で自然に訴求し、価 値訴求と転換率の向上を目指す。 家計簿アプリは 起動→記録 →確認という 一連の 流れ が スムー ズで あることが 命。そこで、 ホー ム画面は 「今月の支出 概要」「支出 入力エリア」「 履歴やグ ラフの 概要」を上から 順に 並べ、ユーザーの 行動フ ローに 寄り 添った設 計とする。 入力は 最短で3 アク ション （金額入力 → カテゴリ選択 → 保存）で 完了 できるようにし、 負荷を 極限まで 下げる。さらに、 記録 漏れが ひと目でわかる カレン ダー 形式や、支出 傾向を週 ／月 ごとに 比較できるグ ラフ切替えなど、 階層構造を 工夫して 情報取得の 負担を 抑える。 「 家計簿＝堅い ・面倒・難しい」という先 入観を 払 拭するために、 デザイン 面では 柔らかく フラットな 印象を目指す。 配色は ホワイト ＋ペー ル系カラー （ミント、 緑系）で 清潔感と 親しみを 両立。 ボタン や 入力欄は 角丸＋ゆったりとした 余白で スト レスを 感 じさ せない。記録 完了時には ポジ ティブな フィー ドバッ クを 積み重 ねる。 数字の マイ ナス面ではな く“変化”や“前 進”を感 じら れるよう、グ ラフのトー ンや 文言にも 配慮する。  起動直後に「入力」から始められ¾  プッシュ通知は親しみやすく・押しつけがましくな¸  続けたくなる演出（連続記録・節約スコアŠ  UIが「迷わない」「考えさせない」設†  カレンダーやグラフで日々の成果が視覚化される ユーザーに“気づき”と“成果”を与える 仕掛けを用意する 入力・確認・比較の導線を 最短かつ直感的にする 親しみやすく、 毎日使いたくなる印象を設計する 習慣化につながる設計ポイント アプローチ UI design Works アプローチ UI design Works
23. アプリ起動時にすぐに新規入力 画面が立ち上がる。 分かりやすいカテゴリ選択画面。 ほとんどの項目が網羅されている。 金額、品名、カテゴリという最低限 の入力でを完結できる！ 達成感のあるアニメーション 演出で継続率アップ！ 収支簡易入力（起動画面） カテゴリ選択画面 入力完了画面 画面遷移 家計入力のフロー UI design Works 画面遷移 家計入力のフロー UI design Works
24. 「詳細を確認・編集する」ボタンを押すと詳 細入力画面に遷移。時間がある時は、支払い 方法や店名、メモ等を詳しく入力できる。 入力完了後は自動で入出金履歴画面に遷移。 その日の買い物が一覧で見れる。 マイページ画面では今月の収支と先月の 収支を見比べることができる。 収支簡易入力画面へ 詳細入力画面 入出金履歴画面 マイページ画面 画面遷移 家計入力のフロー UI design Works 画面遷移 家計入力のフロー UI design Works
25. フォント カラー カテゴリ各種アイコン コンポーネント 和文フォントは、最もスタンダードで視認性の良いNoto sans JPを使 用。無料で使えるWEBフォントであり、安心感と信頼性もあります。 欧文フォントには、可読性が高くどの媒体でも使用されて多くの世代が 慣れ親しんでいるInterを採用しました。 カラーは流行に左右されづらく、親しみやすいグリーンやブルーグリーン系 を使用して統一感を出しています。 カテゴリの各種アイコンがカラフルなので、どの色を乗せても視認性が低下 しないように、全体のトーンを調整しました。 各種アイコンは視認性を第一に考えてトーンのレベルを調整しました。 和文 欧文 Noto sans JP - Regular デザインに一貫性を持たせるため、デザインシステムを作成。 figmaのコンポーネント、バリアント機能を使用して一元管理できるようにしました。 Inter - Medium Inter - Semi Bold Inter - Bold Noto sans JP - Medium Noto sans JP - Bold マイページ カレンダー 入出金履歴 1 分析 マイページ カレンダー 入出金履歴 1 分析 食費 ¥99,999 前月比 ¥-999 ¥-99,999 日用品@ドラッグストア トイレットペーパー・洗剤 ¥-99,999 日用品@ドラッグストア トイレットペーパー・洗剤 ¥99,999 99.9% 交通費 前月分との差 -¥9,999 支出 ¥99,9999 デザインシステム UI design Works デザインシステム UI design Works
26. 9:41 Easy Stretch Hard 買い物直後にサクッと片手で入力できるよ うに、モバイルユーザビリティを考慮した 配置となるような設計にしました。 簡易入力画面などで、片手で入力を求められ る画面では、基本的にEasyエリアに収まるよ うに配置。 優先順位が少し下がるものはStretchエリア に配置。 Hardエリアには基本的にタップできるもの は置かない。 設定や通知確認など、時間的余裕があって両 手を使える際に使ってもらう。 基本仕様 UI design Works 基本仕様 UI design Works
27. Before 収支入力画面 After 標準の電卓と同じようなUIで入力 エリアを広く取ることで、直感的に 分かりやすく押しやすい仕様に モバイルユーザビリティを考慮し て、画面上部には入力エリアを廃止 することで入力のストレスを減らす 必須情報を視認性の高い位置に変更 テキストボックスを無くすことで入 力の負担を軽減 数値を大きく表示すること で金額の間違いを減らす カラーリングを統一してスタイリッシュ にすることで堅苦しい印象を払拭 パッと見で何を押したら どうなるのかが分かりづ らい… タップする箇所が変則的 なので両手を使わないと 入力出来ない… 金額入力から保存ボタンへ の位置が遠く、確定させる のに毎回迷う… 全体的に無機質なデザイ ンで入力にワクワク感が 無い… ビフォーアフター UI design Works ビフォーアフター UI design Works
28. よく使うカテゴリを下部に持っ てくることで、入力を手軽に カテゴリに小項目を設けることで 選択の迷いを軽減 全体的にアイコンのトーンを落と してコントラスト比を高めること で視認性の向上 アイコンの色が薄いので分 かりづらい… シンプルだけどカテゴリ がざっくりしているので もう少し細分化したい… 押しやすいエリアになぜ か収入のカテゴリがあ る… Before カテゴリ選択画面 After ビフォーアフター UI design Works ビフォーアフター UI design Works
30. 項目ごとの比率を出して前月との 差分を出すことで分析が容易に グラフとアイコンを効果的に配置 し、見ていて気持ちの良いUI 月ごとの成果を見える化することで継続の モチベーションをアップさせる 全体の収支のバランスを比 較したい… 円グラフの面積が大きす ぎて逆に見づらい… 項目毎にどれくらい節約で きているのかを分析したい Before 分析画面 After ビフォーアフター UI design Works ビフォーアフター UI design Works
31. 今月の収支やカテゴリの比率、先月と の比較など、知りたい情報を網羅的に 確認することができます。 月ごとの予算を設定することで今月 はどれくらい節約・貯金できるのか を客観的に見ることができます。 家計コンサルキャラクターからの 一言コメントを毎週お届け。 継続率アップに繋がります。 支出の金額が高い順に4件の カテゴリを表示させます。 マイページ画面 UI design Works マイページ画面 UI design Works
32. Works Macbook Pro 02Recruitment Site 鉄鋼業等を営むグループ企業の 採用サイト制作 鉄鋼業、コンクリート製造業、土木・建築工事業 などを手掛ける、タカノグループ様の採用サイト制作を行いました。 ジャンル 採用サイト 担当範囲 情報設計、デザイン、ブラッシュアップ 制作期間 2週間 使用ツール Figma
34. 事業内容 役場、病院といった公共建築や、マンション、ショッピングモールといった 大型建築に欠かせない鉄鋼製品を、図面作成から加工、現場施工まで一貫して行う。 ターゲット — 地元の企業や建設業界に興味のある学h — 建築のスキルを活かしてキャリアアップしていきたい社会‡ — 技術を磨いて地元に貢献したい外国人留学生 目的 — 求人媒体からの流入で企業状況や働く環境を知ってもらいた‹ — 会社の信用度を上げる（他企業、銀行、求職者に対して£ — エントリー数の増加。会社のイメージを伝えて、事業とマッチした人材からの応募 デザインでのレベルを上げて 現状の課題 — 現行のサイトが企業のイメージ動画のみなので、採用サイトとして運用出来ていな‹ — 求職者の知りたい情報が載せられていないので、求人数が伸びない 要件定義 Recruitment Site Works 要件定義 Recruitment Site Works
35. 仮説  求職者は「職場のリアル」を求めている。 → 現場写真・社員インタビュー・1日の流れ・研修体制などのコンテンツが有効。 → 信頼感・清潔感・実直さを感じさせるデザインが企業イメージを向上させる。  信用力の高いデザインは「安心できる会社」としての第一印象を左右する。 → ペルソナに合わせた訴求軸を用意し、自分事化できる導線設計が重要。  求職者は「この仕事に自分が合うかどうか」を見極めようとしている。 定性リサーチ結果  「現場がきつそう」「閉鎖的そう」などイメージ面での誤解が多いÙ  実際には職人気質の中にも面倒見がよく温かい環境がある企業も多いÙ  仕事内容や一日の流れがイメージできることで志望度が上がる。 定量・定性リサーチ Recruitment Site Works 定量・定性リサーチ Recruitment Site Works 定量リサーチ結果  求人媒体での離脱ポイントは「仕事内容が見えない」
 「企業文化が分からない」が上位Ù  建設・土木業界は求人倍率が高く、他社との差別化が必須Ù  若年層は「働く環境」「成長機会」「雰囲気」に関心が高いÙ  経験者層は「待遇」「裁量の大きさ」「安定性」に重きを置く傾向。
36. ペルソナ設定 Recruitment Site Works ペルソナ設定 Recruitment Site Works 名前 佐藤 大樹 年齢 22歳・大学4年 属性 地方の工学部（土木系）在学中、実家暮らし 行動 就活サイト・リクナビ・マイナビを中心に情報収集。 会社説明会に積極的。 志向 「安定した仕事」「地元に貢献したい」 「現場で手応えを感じたい」 不安 業界がきつそう、雰囲気が分からない、職場に馴染めるか 名前 中村 彩香 年齢 29歳・現場監督経験あり 属性 建設会社で施工管理を5年経験。 首都圏勤務から地元回帰を検討中。 行動 indeed、エン転職、建築求人ナビ等で経験者向け求人を 定期的にチェック。 志向 「スキルを活かしたキャリアアップ」 「裁量あるポジション」「安定＋評価」 不安 転職先での待遇・成長機会・現場環境の見えなさ
37. 競合の企業や他の業種で上手くいっている採用サイトをリサーチ 会社の見せ方・構成・コンテンツ内容などを分析して、ユーザーが求めている情報を精査して情報設計やデザインに落とし込みました ベンチマーク Recruitment Site Works ベンチマーク Recruitment Site Works
38. 課題点との改善方針 Recruitment Site Works 課題点との改善方針 Recruitment Site Works contents layouts design ファーストビューに社内の雰囲気や仕事内容、 働く理想像を入れます。 会社の理念を押し付けず、求職者ファーストで まずは知りたい情報を教えることを重点に置い てコンテンツを設計します。 凝った演出はあえてせずに、社員インタビュー や社内の臨場感が伝わるような情報を優先的に 載せます。 TOPページは知りたい情報に包括的にアクセス できるハブとなるようにレイアウト構成を考え ます。 求職者視点で、知りたい情報に順々にアクセス できるように一覧性を取り入れました。 グループ会社なので、各企業のページにもアク セスしやすい画面設計を考えます。 デザインのクオリティで清潔感が出せるように 目指します。 余白を十分に取り、視線の流れを整理してわか りやすさと見やすさを重視します。 ボタンのアイコンを統一して、ひと目で知りた い情報に繋がるように各パーツを設計します。 テーマカラー 第一印象 信頼感、清潔感 白、紺、青
39. ファーストビュー CTA 会社を知る 職種・グループ会社説明 社内情報 社員インタビュー 採用情報 CTA フッター 情報設計 ワイヤーフレーム Recruitment Site Works 情報設計 ワイヤーフレーム Recruitment Site Works
40. ビフォーアフター Recruitment Site Works ビフォーアフター Recruitment Site Works
41. ヘッダーボタン メインビジュアル キャッチコピー CTAボタン シンプルながらも、このサイトの目的である「募集要 項」と「エントリー」へのリンクは強調させるように 意識しました。 また、実装するときは、固定ヘッダーとしてスクロー ル追従させたいと思います。 ファーストビューは新卒・中途の方に向けて、クール で明るい印象を持ってもらいつつ、親しみやすさも抱 いてもらうようなデザインを目指しました。 キャッチコピーが変わってもファーストビューの印象 が変わらないような配置を意識しました。 求職者がすぐにアクセスしやすいように、FV内に募集 要項と応募フォームのボタンを設置しました。 デザイン意図 ファーストビュー Recruitment Site Works デザイン意図 ファーストビュー Recruitment Site Works
42. デザイン意図 各セクション Recruitment Site Works デザイン意図 各セクション Recruitment Site Works タカノを知る About us Occupation 職種を知る 土木建設に欠かせない、鉄鋼・生コン製造、砕石販売、運送、各 種工事をグループ内で。 各社の連携を生かしたフレキシブルな対応で、地域の方が安心し て暮らせる街づくりに貢献していきます。 タカノグループでは様々な職種があるので、自分に合った職種を選ぶことができます。 未経験でもCADを一から覚えられるので、建築など他の職種へ活きるスキルが身に付きます。 実際に挿入する文章は、インタビューを行ったのちにライターにて文章調整（てにおは、ですます調）を行います。 1ページで分かるタカノ 働く人への思い 役場、病院といった公共建築や、マンション、ショッピ ングモールといった大型建築に欠かせない鉄鋼製品を、 図面作成から加工、現場施工まで一貫して行います。 公共・民間問わず、土木工事全般をお引き受けしていま す。道路の維持管理をはじめとした舗装工事、アパート やマンション、商業施設の外構・造園工事等幅広く手が けます。 土木・建設に欠かせない生コンクリートを製造から販売 までワンストップで。特殊コンクリートの製造にも対応 しています。 建設資材や建設用重機、生コンクリートの運搬を行って います。多種多様な車両を揃え、土木・建設現場の多様 な運送ニーズに対応しています。登米本吉運送事業競合 組合に加盟しています。 生コンプラントや土木・建設現場への各種砕石・砂の販 売を行っています。大型ダンプ一台からタイムリーに運 搬。お客様のニーズに応えます。 タカノ鐡工 高野組 高野コンクリート 高野企業 アオイ商事 動画で見るタカノ 社員インタビュー Environment Careers Interview 採用情報 新卒・高校卒業後採用 タカノグループは、建築・コンクリート製造・運送などを通じ て地域社会を支えてきた、歴史あるものづくり企業です。 社会を支えるやりがいのある仕事に、ゼロから挑戦できる環境 を整えています。 安心して成長できる研修制度と温かい仲間たちが、あなたの第 一歩を全力でサポートします。 仕事内容を見る 中途採用 経験を活かし、次のフィールドで力を試したいあなたへ。 タカノ鐵工グループでは、建築・製造・運送など多様な分野で 培ってきた技術と信頼をもとに、幅広いキャリアの方が活躍し ています。 社会インフラを支える誇りある仕事に、私たちと共に取り組ん でみませんか？ 仕事内容を見る 自身で書いた図面が、徐々に形になっていく姿は何度 見ても感動します。 自身で書いた図面が、徐々に形になっていく姿は何度 見ても感動します。 自身で書いた図面が、徐々に形になっていく姿は何度 見ても感動します。 インタビュー一覧を見る 環境を知る タカノ鐵工では、先輩スタッフのつきっきり指 導で未経験からでも安心です。 実際に挿入する文章は、インタビューを行った のちにライターにて文章調整（てにおは、です ます調）を行います。 タカノで働くメリット 制度・福利厚生 現場・オフィスの様子 評価・給与体系 20◦◦年入社 　役職・職務など 20◦◦年入社 　役職・職務など 20◦◦年入社 　役職・職務など 情報の一覧性 会社情報・社内の様子 社員インタビュー 採用情報 職種・グループ会社 求職者の知りたい情報にすぐにアク セスできるような配置。 社内の情報はこちらにまとまってい るので、求職者が最も知りたい情報 がここからアクセスできます。 こちらにメインカラーを背景に使う ことでサイト全体にメリハリを持た せています。スクロールしていても視 認性が良く見つけられやすい構成に なっています。 興味を持ってくれた訪問者により詳し い採用情報のページへ誘導します。 ページ下部に持ってくることで、熱量 が高い状態を維持することができま す。 グループ会社を一画面で表示。 興味がある職種を直感的に見つけら れ、求職者の興味を誘います。
43. Works 03Landing Page toB向けトレーニングデバイス 販売LP制作 株式会社ANAPAフィットネス様が販売されてる、VBTデバイス 「velocient」のLPを制作させていただきました。 ジャンル toB向け物販&コンサル 担当範囲 LPデザイン、ブラッシュアップ 制作期間 2週間 使用ツール Figma
45. 要件定義 Landing Page Works 要件定義 Landing Page Works 事業内容 トレーニングにおける動作速度関連の情報を計測できる機器（VBTデバイス）の販売 ターゲット ˆ 体育系の教育機“ ˆ パーソナルトレーニングを提供する接骨院（トレ特化i ˆ 医療系の教育機“ ˆ パーソナルトレーニングを提供するジムやスポーツチーム 目的 ˆ まずはURLベースで手軽に問合せいただいたリードに共有できる必要十分な情報が 盛り込まれた媒体（LP）を作成したŒ ˆ ゆくゆくはリーチできる層を広げるためにもそのまま広告出稿できるような構成の LPが望ましい 現状の課題 ˆ パンフレットだけでは商品の魅力を伝えきれなŒ ˆ サイトを持つことが主流となってきている中、サイトがないことが信頼性の欠如や 競合比較の際に商品スペック以外のところで機会損失を生んでいる可能性がある
46. 定量・定性リサーチ Landing Page Works 定量・定性リサーチ Landing Page Works 仮説 P トレーナー・教育機関担当者は「導入ハードルの低さ」を重視している。 → 価格の手頃さ、シンプルな操作性、購入前に分かるUIや使い方紹介コンテンツが有効。 → 実際の使用シーン・活用事例・成果の見える化が重要。 P 検討者は「導入後の具体的な活用イメージ」が持てないことで離脱している。 → 問い合わせ前に知りたい内容を一通り網羅しつつ、シンプルにまとまった構成が効果的。 P 今すぐ購入に至らなくても「比較検討の候補として残る」情報が必要。 定性リサーチ結果 P 「測定したいけど機器が高い／使いにくい／難しそう」といった印象 が根強& P トレーナーや教育機関では「正確性」「簡易性」「データの活用方 法」に対する不安があ P 導入後の使い方・活用事例・トレーニングへの反映が具体的でないと 購買につながりにくい 定量リサーチ結果 P 「VBT（速度ベーストレーニング）」は国内ではまだ浸透途上だが、 アスリート界や一部トレーナー間で注目されつつあ P 海外メーカーのVBTデバイス（例：PUSH、Vmaxpro）は高価格かつ 英語UIのため、導入ハードルが高& P トレーニング科学の普及と共に、大学・専門学校・フィットネスジム での導入検討が徐々に増加
47. ペルソナ設定 Landing Page Works ペルソナ設定 Landing Page Works パーソナルトレーニングジムの トレーナー 医療系の教育機関の担当者 （リハビリ・理学療法系） 名前 鈴木 健太 年齢 34歳 属性 都内パーソナルジムのトレーナー、トレーナー歴10年 現状 お客様の筋力・パフォーマンスの「可視化」に 興味があるが、予算と手間がネックで導入できていない 志向 効果の数値化／差別化／説得力のある指導／単価アップ 不安 初期費用・設定の難しさ・使いこなせるか・顧客の反応 名前 山本 由紀子 年齢 40歳 属性 医療系専門学校の講師／研究者（運動療法系） 現状 学生に「エビデンスに基づいた指導」を伝えたいが、 実験機器は高額で導入が難しい 志向 科学的なデータ教育／簡単な操作での実習導入／ 信頼性の高い機器 不安 精度／教育用途としての適性／他校との比較優位性
48. ベンチマーク Landing Page Works ベンチマーク Landing Page Works 国内外の類似製品や競合が少なかったため、 製品特性やターゲット層を踏まえ、toB向けや物販、フィットネス系のLPの構成・訴求内容・デザイン表現をリサーチしました。
49. 課題点との改善方針 Landing Page Works 課題点との改善方針 Landing Page Works contents layouts design 訪問者の課題やお悩みからターゲットを明確に し、それぞれに刺さるようなコンテンツ構成に します。 「資料請求」「無料トライアル」など複数の接 点を用意し、検討初期のリードも獲得できるよ うにします。 使用者のコメント、教育機関での導入実績、 研究データなどを掲載し、安心感を高めます。 冒頭に要点をまとめた図や箇条書きを設け、 ひと目で「どんな製品か」が理解できるように します。 「トレーナーの方へ」「教育機関の方へ」と いった分岐ナビゲーションを設け、訴求内容を 最適化します。 価格を提示する前に「なぜこの価格で提供でき るのか」「どんな成果が得られるのか」といっ た背景情報を挿入します。 テーマカラーを使用しつつ、信頼感や清潔感を 感じられる配色・トーンに調整し、ターゲット に合わせた印象設計を行います。 ページ内複数箇所にCTAを設置し、スクロール 位置に関わらず常にアクションが取れるように します。 見出しの視認性や段落の余白、フォントサイズ を調整し、読みやすく整理されたレイアウトに します。 テーマカラー 第一印象 分かりやすさ、視認性の高さ、信頼感 黒、紺、紫
50. ファーストビュー イメージ動画 お悩み ソリューション CTA 根拠・理由付け デバイスの選び方 料金・性能比較 CTA お客様の声 よくある質問 無料トライアル訴求 ご利用までの流れ 問い合わせフォーム フッター FVデザイン - パターン 情報設計 ワイヤーフレーム Landing Page Works 情報設計 ワイヤーフレーム Landing Page Works
51. ビフォーアフター Landing Page Works ビフォーアフター Landing Page Works
52. デザイン意図 ファーストビュー Landing Page Works デザイン意図 ファーストビュー Landing Page Works こんな方におすすめ 特徴 VBTデバイスの選び方 活用事例 お客様の声 059-271-7190 ※土日祝日を除く 受付時間10:00〜19:00 お問い合わせ 資料請求 速度を可視化することで トレーニングの パフォーマンスを最大化 速度を可視化することで トレーニングの パフォーマンスを最大化 今だけ10日間無料トライアル実施中 まずは資料請求 無料トライアルに申し込む ヘッダー メインビジュアル キャッチコピー CTAボタン 各セクションへのリンクをヘッダーメニューを固定さ せることで、知りたい情報へすぐにアクセスすること ができます。また電話番号を明記することで問い合わ せを受け付けやすくします。 一番に商品の画像に視線が集まるような配置にするこ とによってページを開いた瞬間に何のLP七日が分かる ようにしています。 ターゲットに刺さるようなコピーを表現。 白文字ですが、全体のテーマカラーとコントラスト日 を調整して視認性を上げています。 無料トライアルのマイクロコピーを付けることでユー ザーの興味を引き立てます。 ボタンの色を反転冴えることで視認性を上げています。
53. デザイン意図 各セクション Landing Page Works デザイン意図 各セクション Landing Page Works トレーニング中の怪我が多い 各学生のコンディションに応じた適切な トレーニングプログラムの設計が難しい スポーツ専門・大学・コーチの方 最新のトレーニング手法を取り入れ、患者に より効果的なトレーニングを提供したい トレーニング機器や技術の導入にコストが かかる 接骨院・医療系機関の方 お客様一人ひとりの能力や目標に応じた個別 トレーニングを提供するのが難しい お客様のモチベーションを高め、継続的に通って もらいたい 他社とは差別化したトレーニングスタイルを 提供したい もっと効率的で効果の出るトレーニングを 提供したい 企業・個人パーソナルトレーナーの方 「速度」という今まで 感じられなかった成長も視覚化 継続率や モチベーションが向上 力に加え、速度も計測 できるように より を実現 網羅的で的確な分析と フィードバック 動きや機器を変えずとも 「速度」という新しいデータが持てる 高額な機器導入が不要のため 少ない投資で高度なサービス を 提供可能 こんな課題を感じていませんか？ このような課題は VBTデバイス velocient ですべて解決できます! 今だけ10日間無料トライアル実施中 まずは資料請求 無料トライアルに申し込む 電話から無料相談 059-271-7190 受付時間 10:00〜19:00（土日祝日 を除く） 個人の特性 やコンディションに合わ せて トレーニングの強度 と量 を的確 に調整できる トレーニング手法です。 従来 のトレーニング手法との違 い VBT導 入で のパフォ ーマ ンス向上 や怪我 のリ スク軽減 従来 のトレーニング手法では 、1RM（1回 の最大挙上重量） を基準 に負荷 を設定 し、固定さ れた重量で トレーニングを 行っ ていました。 しかし、1RMは日々 コンディションによっ て変動する ため、 この方法は正確性 に欠け ます。 一方、VBT トレーニングでは 、毎日変動する1RM をリア ルタ イムで算出 し、最適な重量設定が可 能になります。 VBT トレーニングでは 、従来 の1RM（1回 の最大挙上重量） を基準 に負荷 を設定する トレーニングとは 異なり、動 作速 度が 低下してき たタ イミングで セットを終了する 目安とな ります。 この方法によ り、過度 な追い込みによる怪我 のリ スクを抑 える ことが可 能となります。 また、科学的 にも、挙上 速度が10 %〜 20 %程度 低下した時 点で トレーニングを切り上 げる 方が 、過剰な疲労を避け な が ら効果的 に筋力や瞬発力を高める ことができる という研 究結果が 示さ れています。 適正重量設定が可能 挙 上 速 度 velocientに表示される挙上速度が
 低下したタイミングでセットを切り上げ そもそもVBTとは何か？ トレーニングの速度が重要な理由 VBT トレーニングに必須 なデバ イスの選び 方 VBT トレーニングでは動 作速度 をリア ルタ イム に計測できるVBT デバ イスが必要 になります。 POINT01 収集したいデータの内容 まず、貴社がど のトレーニングにおいて、何を計測したいかを明確 にしましょ う。 他社製品である 、巻き 取り装置タ イプのデバ イスは 、グループ単位で の計測に 適しています。 一方で 、個々 のフォ ーム の乱れや動 作の正確性 を詳細に把握したい場合 には 、 センサー式タ イプのデバ イス（velocient）が 効果的です。 収集したいデータの内容 まず、貴社がど のトレーニングにおいて、何を計測したいかを明確 にしましょ う。 他社製品である 、巻き 取り装置タ イプのデバ イスは 、グループ単位で の計測に 適しています。 一方で 、個々 のフォ ーム の乱れや動 作の正確性 を詳細に把握したい場合 には 、 センサー式タ イプのデバ イス（velocient）が 効果的です。 POINT02 デバイスの使い勝手と環境への適応性 デバ イスを使う際の手軽さ や、トレーニング環境に適している かを確 認しま しょう。 センサー式デバイス（velocient）は、取り付けが簡単で、トレーニング中に邪 魔になりにくいのが特 徴です。 巻き 取り装置は 、バ ーベルにケーブ ルをつなぐタ イプで 、ケーブ ルの長さ や取 り回 しに注意が必要です。 トレーニング中にケーブ ルが 邪魔になる 場合 もある ので 、実 際の使い勝手を考 えて選び ましょう。 デバイスの使い勝手と環境への適応性 デバ イスを使う際の手軽さ や、トレーニング環境に適している かを確 認しま しょう。 センサー式デバイス（velocient）は、取り付けが簡単で、トレーニング中に邪 魔になりにくいのが特 徴です。 巻き 取り装置は 、バ ーベルにケーブ ルをつなぐタ イプで 、ケーブ ルの長さ や取 り回 しに注意が必要です。 トレーニング中にケーブ ルが 邪魔になる 場合 もある ので 、実 際の使い勝手を考 えて選び ましょう。 POINT03 価格 これまで のVBT デバ イスは 、多 機能である 一方、高価格帯の製品が 主流で し た。 しかし、すべての機能が貴社のトレーニングニーズに必要とは限りませ ん。多 機能で 高価格なデバ イスが多 い中、速度 計測に特 化し、シンプルかつコ ストを抑えたデバ イスも登場しています。 予算 と必要 な機能を慎重 に検討し、コストパフォーマンスに優れたデバイスを 選定しましょう。 価格 これまで のVBT デバ イスは 、多 機能である 一方、高価格帯の製品が 主流で し た。 しかし、すべての機能が貴社のトレーニングニーズに必要とは限りませ ん。多 機能で 高価格なデバ イスが多 い中、速度 計測に特 化し、シンプルかつコ ストを抑えたデバ イスも登場しています。 予算 と必要 な機能を慎重 に検討し、コストパフォーマンスに優れたデバイスを 選定しましょう。 お悩み 選ばれる理由 背景に人体シルエットを配置 課題解決 選び方 赤背景＋白文字＋ボタンデザイン タ ーゲット層を明確 に分類する こと で 、自分に関係ある かど うかをす ぐ に判断しやすく しています。 セクションタ イトルを中央配置＆白 文字で 視認性 高く設 計し、「読み飛 ばさ れずに注目してもらえる導 入」 を意識しています。 「従来 との違 い」と「導 入による 効 果」という2段構成で 、理 論と実 証の 両面から納得感を持たせる 構成に なっ ています。 トレーニング・体 づく りに直結する 視覚的 文脈を補強 し、直感的 に「身 体 のことだ 」と伝える 効果。 「見出 し → 説明 → 写真」の構造 で 、情報をスキャンしやすく 、目に 留まるよ う設 計さ れており、解決手 段のポイント（ 例：フ ィードバ ッ ク、測定 、改善） を素早く 伝えます。 白背景に切り替える ことで 前セク ションとのメリ ハリ を持たせ、読み やすさ と余白感を演出 しています。 3つのポイントをカード 形式で 分け 、 視覚的 な情報整理 をしなが らユー ザーが 見つけ やす い構成を目指して います。 CTA としてしっ かり目立ち 、「緊急 性 」「特 典感」が 伝わる 色使いを採 用しています。
54. デザイン意図 各セクション Landing Page Works デザイン意図 各セクション Landing Page Works パーソナルトレーニングの 質を向上 研究機関での 精密なデータ収集 リハビリテーションでの 安全な筋力回復 お客様がより短期間で目標を達成で き、トレーナーの信頼性が向上 データに基づく科学的な結論が得ら れ、研究結果の信頼性と精度が向上 患者の回復速度が向上し、 過負荷による再発リスクを低減 使用場面 負荷と筋肥大効果の研究における データ収集 バー速度を一定にし、 筋力と筋持久力の相関関係を分析 使用場面 膝の手術後、レッグプレスの 速度に基づいた漸進的な負荷調整 高齢者の運動能力評価において、 速度ベースでの筋力測定を実施 使用場面 セッションごとにリアルタイムで プログラムを調整 お客様ごとの速度測定に 基づくより的確な強度設定 価格 ¥54,780〜 ¥99,000〜 使用人数によって変動 ¥110,000〜 ¥236,000〜 アプリ使用料込み 計測方法 巻き取り装置 加速度センサー 加速度センサー 加速度センサー 27mm×44mm×13mm 50mm×33mm×15mm 70mm×85mm×75mm 26mm×48mm×14mm サイズ 重量 17g 365g 16g 21g 日本製 アイルランド製 ドイツ製 ドイツ製 日本製 操作端末 velocient本体 アプリ操作 アプリ操作 アプリ操作 velocient 当社 他社製品A 他社製品B 他社製品C velocientは、VBTトレーニングにおいて本当に必要な機能だけに絞り込むことで高品質を保ちながらリーズナブルな 価格を実現しております。 アプリは通常閲覧専用で、データ管理は紙で行うことが多いため、アプリの有無による負担はほとんどありません。 今だけ10日間無料トライアル実施中 まずは資料請求 無料トライアルに申し込む 電話から無料相談 059-271-7190 受付時間10:00〜19:00（土日祝日を除く） コストパフォーマンス重視の方は velocient がおすすめです velocientの活用事例 ※ 最適な計測方法は器具の使用等により変動する場合があります。 千葉県立高校野球部コーチ / 田中慎也 様 一言で言うと、「現代の最強トレーニン グデバイス」です。 velocientとの出会いは、昨年の10月頃になります。 本校に導入してから日は経っていませんが、なんと秋 から春までに全選手の体重平均が6キロ増！！ それ以上に驚きだったのが、怪我人が1人も出ていな い事です。 短期間でも体を大きくする事が出来る＋怪我のリスク も少ない事が使用して実感しています。 最近では、足を速くする為にvelocientを使用してト レーニングに励んでいます。今後も愛用させて頂きま す。 会員制パーソナルトレーニングジム代表 / 戸来勇真 様 ボディメイクやトレーニング指導を10年 以上続けていますが、「もっと早く知り たかった。」と思う機械です。 トレーニング強度や、疲労管理を感覚的にしていた私 からすると、それらを数値化してくれるこのデバイス を導入したことで、強度とセット数を大幅に増やすこ とが出来ました。 自分の肉体は想像以上に強くて、一般的には「オー バーワーク」と言われるセット数でも対応出来る肉体 であることが速度数値により知ることができ、安全に 効率的にボディメイクが出来ています。 「1種目は多くても5セットまで！」と言っていた、過 去の自分に今すぐ購入してあげたい一品です。 Q トライアルをした結果、契約しなくても大丈夫ですか？ A 大丈夫です、トライアルとは製品を購入する前にお客様に試して頂くことを目的としております。 Q 専門的なVBTの知識がないと使いこなせませんか？ A 製品に関しましては、取扱い説明書がございますのでご安心下さい。 Q 導入後のサポートやメンテナンスが心配です。 A サポートに関しましては、有料にてさせて頂いております。 webでのサポート、実技を交えてのサポートがございますのでお問い合わせ下さい。 Q VBTの指導や器具の使用方法についてのデモンストレーションを行なっていただくことは 可能ですか？ A 可能でございます。 有料になりますがwebでのサポート、実技を交えてのサポートを行っておりますのでお問い合わせ下さい。 Q velocientの操作方法は複雑ですか？ 身体の部位に装着して計測 ダンベルショルダープレス プルアップ ワンハンドローイング ヒップリフト ジャンプスクワット ダンベルショルダープレス プルアップ ワンハンドローイング ヒップリフト ジャンプスクワット バーベルやダンベルに 取り付けて計測 ベンチプレス デッドリフト ベントオーバーローイング クイックリフト（パワークリーン） フリースクワット ベンチプレス デッドリフト ベントオーバーローイング クイックリフト（パワークリーン） フリースクワット マシンのプレートに 設置して計測 ペックデッキ ラットプルダウン レッグプレス レッグエクステンション レッグカール ペックデッキ ラットプルダウン レッグプレス レッグエクステンション レッグカール voice お客様の声 Training Menu Example 計測できるトレーニングメニュー例 よくあるご質問 比較表 メニュー例 活用事例 よくある質問 比較表を中心に構成することで、 ユーザーが複数製品の違いを視覚的 に瞬時に把握できるように設計して います。 赤系を基調としたベースカラーで 「velocient」列をハイライトし、推 奨製品であることが一目で分かるよ うに強調しています。 写真付きの3カラム構成で、トレーニ ングスタイルの違い（装着方法ご と）を視覚的に把握しやすくしてい ます。 各項目はゴールド系の見出し帯で分 類されており、視認性と高級感を両 立しています。 3カラム構成で活用パターンを分類し、 業種・職種ごとの具体的なイメージが湧 くように構成されています。 下部の文章エリアで「より多くの使われ 方がある」ことや「今後の展開の可能 性」なども補足しており、応用性の高さ を印象づける構成になっています。 シンプルなアコーディオンUIにすること で、情報を必要な分だけ展開でき、ペー ジが煩雑にならない設計です。 アコーディオン開閉によって視線移動が 少なく済み、CTAへの導線を阻害しない 設計になっています。
55. Works 04Service Site 児童発達支援教室の サービスサイト制作 児童支援教室のサービスのサイトリニューアル案件を 対応させていただきました。 ジャンル 児童発達支援教室 担当範囲 情報設計、構成、デザイン 制作期間 3週間 使用ツール Figma 埼玉県の児童発達支援・放課後等デイサービス TKUZOジュニアについて ご利用の流れ 教室一覧 よくある質問 お問い合わせ 採用情報 もっとやってみたいの自信に変える。 昨日の を今日の に。 できた! できない 知り合いに 紹介したい放デイ No. 1 知り合いに 紹介したい放デイ No. 1 ご家族 満足度 98% ご家族 満足度 98% 独自 プログラム数 No. 1 独自 プログラム数 No. 1
57. 要件定義 Service Site Works 要件定義 Service Site Works 事業内容 埼玉県を中心に児童発達支援教室の店舗を運営。主に未就学児（0〜6歳）を対象に、発達に特性や 遅れのある子どもたちに対して、 日常生活に必要なスキルの習得や集団生活への適応を支援する療 育サービスを提供 ターゲット ˜ 子どもの発達に不安を感じているが、どこに相談すればよいか迷っている未就学児の保護| ˜ 医療機関、保育園、幼稚園、保護者からの相談を受けて児童発達支援教室を紹介する立場の専門i ˜ 自治体の福祉課や療育相談窓口など 目的 ˜ 教室の支援方針・特長・雰囲気をわかりやすく伝え、信頼感・安心感を与え½ ˜ ˜ 医療機関・保育園など関係機関への情報共有・紹介時の信頼材料として使える媒体とする 保護者が安心して相談・問い合わせ・見学予約できるよう導線を整備す½ 現状の課題 ˜ 専門的な内容が多く、保護者にとって分かりにくい表現が多W ˜ 他教室との違いや独自性が伝わっておらず、選ばれる理由が明確ではない
58. 定量・定性リサーチ Service Site Works 定量・定性リサーチ Service Site Works 仮説 A 保護者は「自分の子が対象かどうか」が分からず相談をためらっている。 → よくある相談例や、対象年齢・傾向をやさしい言葉で紹介することで不安を和らげます。 → 「初めての方へ」や「利用の流れ」などを設け、問い合わせ〜見学までの道筋を明確にします。 A 制度や利用の流れが複雑に感じられ、見学予約までたどり着きにくい。 → 支援体制、資格者の有無、活動実績などを明示し、紹介先としての信頼を高めます。 A 自治体の相談員は、保護者に安心して紹介できる客観的な情報を求めている。 定性リサーチ結果 A 保護者は「我が子が対象なのか」「優しく対応してくれるか」に強い不 安を持っている3 A 難しい言葉や制度説明だけでは不安が増す。「気軽に相談しても大丈夫 そう」という印象が安心感につながる3 A 自治体の相談員は、保護者の質問に答えるために「連携のしやすさ」 や「基本情報の網羅性」「紹介しやすさ」を重視している。 定量リサーチ結果 A 「児童発達支援」「発達障害 相談」「子ども 療育」などの検索ボ リュームは年々増加3 A ホームページからの問い合わせ行動に至るまでに、平均で3〜5ペー ジを閲覧する傾向がある3 A 多くの教室サイトで「支援内容」「料金」「場所」が先に見られ、 次に「スタッフ・雰囲気・実績」が参照されている。
59. ペルソナ設定 Service Site Works ペルソナ設定 Service Site Works 名前 高橋 さゆり（32歳・主婦） 家族構成 夫・4歳の長男と3人暮らし 状況 幼稚園の先生から「少し気になることがある」と 言われて検索し始めた 感情 「障害なの？」「普通じゃないの？」という 不安と罪悪感 情報収集 Google検索・ママ友LINE・Instagram・園での 配布チラシ 行動傾向 まずはこっそり調べる→不安が強まる→ 気軽に相談できそうなところを探す 名前 渡辺 聡子（47歳・福祉課所属） 担当業務 子育て支援窓口での相談対応 判断基準 安全性・支援内容の明確さ・他機関との連携しやすさ 行動 地域の福祉関連施設のパンフ・HPを日常的に確認。 紹介先として安心かを重視 情報ニーズ 対象年齢／支援体制／職員の資格・経験／ 1日の流れ／空き状況など
60. ベンチマーク Service Site Works ベンチマーク Service Site Works 同地域または同業種の児童発達支援教室のサイトを中心に、構成・訴求内容・導線設計・デザイン表現を調査します。 信頼感を与えつつ、他教室との差別化につながるポイントを抽出し、構成やコンテンツ設計に活かしていきます。
61. 課題点との改善方針 Service Site Works 課題点との改善方針 Service Site Works contents layouts design やさしい言葉を用いて説明し、「療育内容」や 「お悩み例」を保護者目線でわかりやすく記載 します。 教室の写真、コース紹介、教室ごとの療育内容 などを掲載し、安心感を与えるコンテンツを充 実させます。 「はじめての方へ」や「ご利用の流れ」などを 設け、制度や手続きの不安を軽減する情報設計 にします。 ファーストビューに実績や権威性、教室のバ ナー等を設置してひと目で強みが分かるような 構成にします。 セクションごとに「見出し＋要点→詳細」の構 成でまとめ、視認性と読みやすさを高めるレイ アウトにします。 ページ内に複数のCTA（相談・予約ボタン）を 設置し、常に問い合わせしやすいレイアウトに します。固定型のフッターCTAも検討します。 全体的に図形に関しては自由曲線を使ったり、 長方形も角丸にすることで親近感を演出しまし た。 フォントサイズのジャンプ率をつけ過ぎずぎな いようにしたり、パキッとした写真を使うこと で可愛くなりすぎない工夫をしました。 あしらいや余白を効果的に配置することで、ど の年齢層が見ても見やすくて親しみが湧くよな 雰囲気を目指しました。 テーマカラー 第一印象 分かりやすさ、安心感 青、水色系
62. ファーストビュー 教室バナー サービスの特徴 主な療育内容 教室一覧 お知らせ 採用情報・会社情報 CTA フッター 情報設計 ワイヤーフレーム Service Site Works 情報設計 ワイヤーフレーム Service Site Works
63. デザイン意図 ファーストビュー Service Site Works デザイン意図 ファーストビュー Service Site Works 埼玉県の児童発達支援・放課後等デイサービス TKUZOジュニアについて ご利用の流れ 教室一覧 よくある質問 お問い合わせ 採用情報 もっとやってみたいの自信に変える。 昨日の を今日の に。 できた! できない 知り合いに 紹介したい放デイ No. 1 知り合いに 紹介したい放デイ No. 1 ご家族 満足度 98% ご家族 満足度 98% 独自 プログラム数 No. 1 独自 プログラム数 No. 1 ABOUT ヘッダー・ボタン メインビジュアル 権威性のあるバッジ キャッチコピー 丸みを帯びたデザインで可愛さと親近感を演出。 子どもと保育士の自然なふれあいの写真を大きく使 い、温もりや信頼感がダイレクトに伝わる構成として います。明るく柔らかいトーンを背景にしつつ、コン トラストを抑えた配色で、安心感ややさしさを演出し ています。 「実績」「満足度」「紹介意向」といった重要な信頼 指標を直感的に伝える役割を担っており、第一印象で 安心材料を提示することを意識しました。 キャッチフレーズの背景には手書き風の要素や吹き出し のあしらいを加えることで、硬すぎず・砕けすぎない絶 妙なやわらかさと親近感のバランスを目指しました。
64. デザインの意図 各セクション Service Site Works デザインの意図 各セクション Service Site Works page top 主な療育内容 お子様が社会や日常生活でスムーズに過ごせるよう、さまざまな外出イベントなど、お子様が楽しめる多彩な体験を提供。 地域交流も積極的に推進し、社会との繋がりを強化しています。 教室一覧 TOKUZOジュニア北戸田教室 〒335-0031
 埼玉県戸田市美女木2-27-15 TEL: 048-485-9402 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る TOKUZOジュニア戸田教室 〒335-0031
 埼玉県戸田市大字新曽353-2 MGRビル3階 TEL: 048-452-8348 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る TOKUZOジュニアせんげん台教室 〒343-0042
 埼玉県越谷市千間台東1-7-26 ララせんげん台Ⅱ2F TEL: 048-984-76 20 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る TOKUZOジュニアせんげん台教室 〒343-0042
 埼玉県越谷市千間台東1-7-26 ララせんげん台Ⅱ2F TEL: 048-984-76 20 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る TOKUZOジュニア蕨塚越 教室 〒335-0002
 埼玉県蕨 市塚 越5丁目 24-10 平泉荘 102 TEL: 048-299-4992 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る TOKUZOジュニア蕨塚越 教室 〒335-0002
 埼玉県蕨 市塚 越5丁目 24-10 平泉荘 102 TEL: 048-299-4992 営業日: 月曜日〜金曜日（祝日営業） 空き状況などを詳しくを見る CONTENTS ClASSROOM LIST お知らせ NEWS 身 体能力 の向上 と基本動作 の習得 をサポ ート 運動療育 個別 のニ ーズに合わ せた学び をサポ ート 学習支援 プログラミング 論理 的思考力 を育む 楽しいコ ーディ ングレッ スン コミュニケ ーション能力 と社会性 の育成 ソーシャルスキルトレーニング テキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ スト テキ ストテキ ストテキ ストテキ スト テキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ スト テキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ ストテキ スト 2023.10.15 2023.9.10 2023.8.3 コース COURSE トップ TKUZOジュニ アについて お 子さま一人ひとりのミライを見据えて
 それぞれに応じた療育プログラムを実践しています。 児童発達支援は、子どもの成長や発達に関わる問題や困難に対して個 別に支援を行い、彼らの可能性を最大限に引き出す取り組みです。身 体的・認知的・社会的な発達に影響を与える障害や困難を持つ子ども たちに適切なサポートを提供し、自己肯定感を高めながら健全な成長 を支援します。 放課後等デイサービスは、学校放課後や休日に子どもたちに安全な環 境で遊びや学習の支援を提供するサービスです。子どもたちの成長や 社会的なスキルの発展を促し、保護者の働きや生活の支援も行いま す。 児童発達支援 放課後等デイサー ビス TKUZOジュニ アについて 運動を通して、身体機能・生活機能の向上を 図ります。
 運動に親しむことで柔軟性やリズム感、バラ ンス感覚などを養い、積極的に運動に取り組 む意欲を生み「出来た！」という成功体験 から自己肯定感の成長に繋がります。 早期療育が必要な未就学児に対して、子ども 達の発達や特性に合わせ療育や興味・関 心・やる気に合わせたサポートを行います。 揺れる、触る、回る、見るなど様々な感覚 を十分に経験することで複数の感覚が統合さ れ、環境に合わせて自身の体をスムーズに動 かしたり落ち着いて課題に取り組んだりでき るようになり、学習の基礎を作ります。 埼玉県の児童発達支援・放課後等デイサービス TKUZOジュニ アについて ご利用の流れ 教室一覧 よくある質問 お問い合わせ 採用情報 運動 療育コ ース 児童発達支援 C hil d Devel opment S upport を 増 やして子どもたち の成長 を支 え ていきます。 TOKUZOジュニ アでは デキタ！ トクゾ！ あなたのお 子さ ん に こん な 動きは ありませんか？ 落書 きがない 空気が 読 めない 集団行 動 が 苦手 、 怒 りやすい 細か い作 業をするのが 苦手 動 きが ぎこち ない、よく ふ らつく 力 やス ピ ー ド のコ ント ロ ールが 苦手 読み書 きが 苦手 発語 が 少 ない 作 業療育コ ース 集 中 療育コ ース 主な療育内容 主な療育内容 教室一覧 特徴 コース紹介 セクション全体に淡い水色の背景を 敷く こ とで、安心感・親し み ・柔ら か さを感じるトーンに仕上 げていま す。 5つの項目をカー ド 状に分けて配置 し、情報を視覚的に整理 しながら も、各内容の独立性 と等価性 を強調 しています。 各項目には実写写真を添 え る こ と で、プロ グ ラムの具体的な雰囲気が 伝わ りやすくなっており、視覚的な 説得力 を高めています。 2カラムの写真＋説明文構成 で、各支 援内容をわか りやすく比較できるよ う設計しています。 見出しにはアクセントとしてアイコ ンとオレ ンジ色の楕円背景を配置 し、目を引きつけながらやさしい印 象を持た せています。 実際の療育 シーンを切り取った 写真 を使う こ とで、保護者が利用時の様 子を具体的にイメージしやすくして います。 実際の教室を紹介するセクションとい う こ とで、視認性 と 読み やすさを優先 した 縦 長 カー ド 型レ イアウトを採用し ています。 カー ド には、教室写真・名称・住所・ 地図リンク・詳 細 ボタンが揃ってお り、必要な情報が1枚にまとまっている た め、利便性 が高い構成 です。 「デキ タ！」「トクゾ！」を円形囲 み ＆イラスト風にデザインする こ とで、 ブラン ド ス ロ ーガン的に印象付けやす い仕掛けになっています。 写真は実際の様子を切り取る形で、教 室の雰囲気・活動 内容が自然に伝わ る よう配慮されています。
65. デザインの意図 各セクション Service Site Works デザインの意図 各セクション Service Site Works CONTACT STEP1 お問い合わせ・ご相談 お電話またはLINE、問い合せフォームよりお問合せください。 04-7136-2940 受付時間：9:00~17:00（平日） お問い合わせフォームはこちら 友だち追加 LINE STEP2 見学・体験 教室の雰囲気や授業の進め方などを実際に見たり体験したりすることができます。
 面談にて実際にご利用する場合の各コースのご提案などさせていただきます。 STEP3 申込手続き 通所受給者証とは、児童福祉法に基づく障害児を対象とした児童福祉サービスを利用する際 に必要となる証明書です。交付の対象となった場合、発達に気がかりなところがある児童を 支援する「児童発達支援」や「放課後等デイサービス」「保育所等訪問支援」などのサービ スが利用できます。
 TOKUZOで提供している障害児通所支援（児童発達支援事業/放課後等デイサービス）をご利 用になる場合は、この通所受給者証の取得が必要になります。 ※自治体相談窓口は、自治体によって窓口が異なりますが、障がい福祉課など発達に関する相談室へご 相談ください
 ※申請後、支給決定までは1～2ヶ月を要するにことがあります 受給者証の申請 受給者証交付 自治体へ相談の流れ 1.市区町村窓口に相談 2.サービス等利用計画の作成 ※自治体によって異なります 3.支給決定 STEP4 ご契約 ご利用される教室よりご契約手続きやご利用方法などのご説明をいたします。この時点で不安なことなども あれば、お気軽にご相談ください。 STEP5 ご利用開始 ご利用契約が完了しましたら、支援がスタート致します。また定期的に支援計画書の見直しを行いながら、 お子様の成⻑に合わせたサポートを行っていきます。 埼玉県の児童発達支援・放課後等デイサービス TKUZOジュニアについて ご利用の流れ 教室一覧 よくある質問 お問い合わせ 採用情報 トップ ご利用の流れ ご利用の流れ CONTACT 今すぐ申し込む 戸田教室 ◯…空きあり　△…残りわずか　×…空きなし サービス種目 対象年齢 月 ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ 火 水 木 金 土 日 2歳～6歳
 （未就学児） 6歳～18歳
 （就学児） 児童発達支援 放課後等
 デイサービス ※営業時間　9：00 ～ 18：00 施設名 TOKUZOジュニア戸田教室 所在地 〒335-0031
 埼玉県戸田市大字新曽353-2 MGRビル3階 戸田教室からのメッセージ 見出し見出し見出し見出し見出し見出し 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テ キスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テ キスト本文テキスト。 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テ キスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テ キスト本文テキスト。 空き状況 Availability ご利用をご検討の方はお気軽にお問い合わせください message 施設情報 Facility Information 埼玉県の児童発達支援・放課後等デイサービス TKUZOジュニアについて ご利用の流れ 教室一覧 よくある質問 お問い合わせ 採用情報 トップ 教室一覧 TOKUZOジュニア戸田教室 教室詳細 主な療育内容 学習支援 プログラミング ソーシャルスキル トレーニング TOKUZOジュニアについてくわしく見る 施設の写真 教室詳細 利用の流れ 空き状況 申し込み手続き 「主な療育内容」はアイコン＋ラベ ルで視覚的に分類されており、保護 者が興味のあるプログラムをすぐに 認識できる設計になっています。 アイコンにカラーを分けていること で、それぞれの特徴が視覚的に区別 され、親しみやすさも演出されてい ます。 「詳しく見る」リンクをテキスト内 に設置することで、ページ遷移の導 線もスマートに構成されています。 全体としては、申し込みフローに対 して「難しそう」「面倒そう」とい う印象を与えないよう、やさしく丁 寧な設計で構成しました。 順を追って読む中で自然と理解が深 まり、行動に移しやすいよう配慮し ています。 セクション背景を淡いブルーに切り替 えることで、「お知らせ」や「実用情 報」としての役割を明確にしていま す。 表組みによる時間割レイアウトで、曜 日・対象年齢・利用時間がひと目でわ かるよう配慮されています。 空き状況の記号表示（◦・△・×） は、シンプルで直感的な記法であり、 初見でも理解しやすいユーザー目線の 設計になっています。 他ステップより情報量が多いため、 カード調の囲みデザインを用いて内容 を整理し、読みやすさを重視した設計 となっています。 「受給者証の申請」「面談の流れ」 「受給者証交付」の3ブロックで構成 されており、それぞれに見出しをつけ て情報をステップごとに丁寧に分解し ています。 全体的に角の丸いボックスと淡い青を 使うことで、情報量が多くても圧迫感 が出ないよう配慮されています。
66. 05Other Works 広告バナー／SNS画像 広告バナー／SNS画像 スライド資料等のデザインも行います スライド資料等のデザインも行います
67. Price 料金
68. 料金 Flow 料金 Flow ランディングページ制作 ・・・ ・・・ ・・・ 120,000円 100,000円 40,000円 デザイン(PC・SP対応) コーディング(静的) WordPress制作 長さ（px数）によって変動することはありません。 ノーコードツールで制作される場合は費用のご相談可能です。
69. 料金 Flow 料金 Flow WEBサイト制作 デザインから公開まで、まるっと請負います ・・・ ・・・ 400,000円 500,000円 10ページ以内 20ページ以内 内容に関係なく、まるっとお任せいただける場合の料金です
70. 料金 Flow 料金 Flow WEBサイト　デザイン制作 TOPページ（PC） TOPページ（SP） 下層ページ（PC）通常 下層ページ（PC）簡易 下層ページ（SP）通常 下層ページ（SP）簡易 標準的なコンテンツ量 会社概要、プライバシーポリシー、お問い合わせ、サンクスページ等 そこまでデザイン性が必要ないページ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 60,000円〜100,000円 10,000円〜20,000円 〜20,000円 〜6,000円 〜7,000円 〜4,000円
71. 料金 Flow 料金 Flow WEBサイト　コーディング 静的コーディング基本料金 ・・・ デザイン費用と同等 Wordpress構築基本料金 ・・・ 〜40,000円 カスタム投稿追加 ・・・ 5,000円 カスタムフィールド追加（1つ毎） ・・・ 3,000円 404ページ ・・・ 5,000円 お問い合わせ機能（CF7） ・・・ 10,000円 作業環境構築、管理画面の設定、プラグイン等基本設定、通常投稿
72. 料金 Flow 料金 Flow 制作スケジュールと費用感の事例 飲食店WEBサイト https://inkyo-yoidokoro.com/ ・担当：デザイン ・費用：10万円 ・納期：1週間程度 ・ページ数：2ページ 児童支援事業サービスサイト https://tokuzo-jr.com/ ・担当：デザイン ・費用：20万円 ・納期：2~3週間 ・ページ数:7ページ 医師向けセミナー募集LP https://post-lintel.com/lp/doctor/ ・担当：デザイン、コーディング、WP問い合わせフォーム ・費用：14万円 ・納期：2週間 ・ページ数：1ページ 婚活事業サービスサイト https://goodluck-stage.jp/ ・担当：デザイン、WP構築 ・費用：35万円 ・納期：2~3週間 ・ページ数：10ページ程度
73. B a s i c We b D e s i g n S t u d i o 最 後 ま で ご 覧 い た だ き あ り が と う ご ざ い ま し た もしご興味をもっていただけましたら、ご相談のみでも歓迎ですので、 メールやチャットワークでご連絡いただけますと幸いです。