はじめまして。ご依頼内容を拝見し、著者としての個人プロフィールページのデザイン・実装についてご提案させていただきます。 ■ 制作方針 中村様のキャリアコンサルタント・コーチ・著者としてのブランドイメージを最大限に引き出すことを目指しました。ターゲットである30〜40代のビジネスパーソンに対して「信頼感」と「親しみやすさ」を両立するデザインを心がけています。 ■ ページ構成と各セクションの設計意図 ページ全体を1枚のシームレスな流れとして設計し、訪問者が自然にスクロールしていく中で「この人に相談したい」と感じてもらえる導線を組み立てています。 1. Hero（トップ）— 第一印象で信頼と権威を伝える 訪問者が最初に目にする3秒間で「誰が・何をしている人か・信頼できるか」を伝えることを最優先にしました。 - 写真を左に大きく配置：キャリアコンサルタントは「人」が商品です。顔と佇まいをファーストビューで見せることで「この人に相談したい」という感覚を生みます。グラデーション額縁と光彩効果で写真を「額に飾られた一枚」のように演出し、ただの証明写真ではなく「ブランドとしての人物像」を表現しています。 - キャッチコピー「選択したときから人生が動き出す。」：中村様のサービスの核心を一文で伝えます。「選択」をブランドカラーで強調することで、ブランド名「Choice」との繋がりを視覚的に示しています。 - 実績カウンター（14年以上・10,000人+）：数字は最も説得力のある信頼シグナルです。説明文の中に埋もれさせず、独立したカードとして目立たせることで、斜め読みでも目に留まるようにしています。 - アンビエント装飾（ラジアルグロー、ライトストリーク、フローティングリング）：Hero全体の空気感をリッチにし、「普通のサイトではない」という第一印象を与えます。 2. ビジョン — 共感と問いかけで引き込む Heroで興味を持った訪問者に「自分のことだ」と感じてもらうセクションです。 - 冒頭の問いかけ「何の制約もないとしたら、やりたいことは何ですか。」：訪問者自身に自問させることで、当事者意識を引き出します。読み手を「観客」から「参加者」に変える効果があります。 - 巨大引用「あなたの可能性は、そんなもんじゃない。」：中村様の信念を強い言葉で伝え、感情に訴えかけます。ここで「この人は自分の味方だ」と感じてもらうことが狙いです。 - アニメーション付き実績数字：スクロールで画面に入ったタイミングで数字がカウントアップする演出により、数字の印象を強化しています。 3. サービス — 具体的な価値を1つずつ丁寧に伝える 「何をしてくれるのか」を明確にするセクションです。 - スティッキースクロール方式（PC）：3つのサービスを1つずつ順番に全幅で表示し、スクロールに応じて次のカードが上に重なっていく体験を提供します。一度に3つ並べるより、1つずつ読ませることで各サービスの印象が強くなります。 - 巨大番号（01/02/03）：視覚的なアンカーとして機能し、情報の構造を直感的に伝えます。 - 「直感・論理・感情」の3軸：キャリアコンサルティングの専門性を端的に示し、「体系的なアプローチを持っている人だ」という信頼感を与えます。 4. メディア — 第三者評価で信頼を補強する ビジョンとサービスで関心を高めた訪問者に、客観的な裏付けを提供するセクションです。 - 書籍情報（左カラム）：著者であることは最大の権威性シグナルです。出版予定の情報を先行して伝えることで「この人は本を出すレベルの専門家だ」という認識を形成します。 - 実績リスト（右カラム）：「ビズリーチ ヘッドハンターアワード受賞」等の具体的な実績を、ダッシュ記号で簡潔にリスト化。自慢ではなく事実の提示として控えめに、しかし確実に目に入る配置にしています。 5. プロフィール — 人となりを知ってもらう ここまでの情報で「相談してみたい」と思った訪問者が「もう少しこの人のことを知りたい」と感じるタイミングで配置しています。 - 写真＋経歴の2カラム：改まったプロフィール写真と経歴を並べることで、ビジネスパーソンとしての信頼感を補完します。 - 経歴を3ブロック（導入・ハイライト・クロージング）に構成：長い文章を読ませるのではなく、要点を掴みやすい構造にしています。ハイライト部分（キャリアの転機や信念）は一回り大きいフォントで強調しています。 6. お問い合わせ — 行動のハードルを下げる ページの最後に「まずは、話してみませんか。」という問いかけ形式の見出しを配置しています。 - 問いかけ形式：「お問い合わせ」という事務的な見出しではなく、会話の延長としてフォームに誘導します。ここまでスクロールしてきた訪問者の心理に寄り添う表現です。 - 問い合わせ種別の選択：個人/法人/メディア/キャリア相談の4種を最初に選ばせることで、「自分に合った窓口がある」という安心感を与えます。法人・メディア選択時のみ会社名欄を表示し、個人の方のフォーム入力負荷を軽減しています。 - フィールド数は最小限（4〜5項目）：離脱率を下げるため、必要最低限の情報のみ求めています。 ■ ページ全体のデザイン手法 - Liquid Glass効果：Apple のデザイン言語にインスパイアされた、すりガラス風の背景効果を各セクションのコンテンツエリアに適用しています。背景の幾何学装飾が透けて見えることで、奥行きと洗練された印象を生み出します。 - 幾何学装飾：ブランドカラーの弧線・円・三角・ドットパターンをページ全体に散りばめ、余白の「過疎感」を解消しています。コンテンツの邪魔にならない透明度で、ページ全体にブランドの一体感を持たせています。 - タイポグラフィ主導：各セクションの見出しは全て異なるスタイル（巨大背景テキスト、引用形式、問いかけ形式など）を採用し、テンプレート感を排除しています。 - レスポンシブ対応：スマートフォン（375px）からデスクトップ（1440px）まで、フォントサイズ・レイアウトが滑らかに変化します。30〜40代のターゲットに合わせ、一般的なサイトより1段階大きいフォントサイズを基準にしています。 ■ ブランドカラーの厳守 ご提供いただいたブランドカラー指定書に基づき、以下を厳守しています。 - リング（シンボル）: #9FD4D5 - 文字（ロゴタイプ）: #15B2C7 - 装飾用途での透明度調整は行っていますが、ブランドカラー自体の変更・濃淡調整は行っていません。 ご不明点やご要望がございましたら、お気軽にご連絡ください。 ご検討のほど、よろしくお願いいたします。
メンバーからのコメント
はじめまして。ご依頼内容を拝見し、著者としての個人プロフィールページのデザイン・実装についてご提案させていただきます。
■ 制作方針
中村様のキャリアコンサルタント・コーチ・著者としてのブランドイメージを最大限に引き出すことを目指しました。ターゲットである30〜40代のビジネスパーソンに対して「信頼感」と「親しみやすさ」を両立するデザインを心がけています。
■ ページ構成と各セクションの設計意図
ページ全体を1枚のシームレスな流れとして設計し、訪問者が自然にスクロールしていく中で「この人に相談したい」と感じてもらえる導線を組み立てています。
1. Hero（トップ）— 第一印象で信頼と権威を伝える
訪問者が最初に目にする3秒間で「誰が・何をしている人か・信頼できるか」を伝えることを最優先にしました。
- 写真を左に大きく配置：キャリアコンサルタントは「人」が商品です。顔と佇まいをファーストビューで見せることで「この人に相談したい」という感覚を生みます。グラデーション額縁と光彩効果で写真を「額に飾られた一枚」のように演出し、ただの証明写真ではなく「ブランドとしての人物像」を表現しています。
- キャッチコピー「選択したときから人生が動き出す。」：中村様のサービスの核心を一文で伝えます。「選択」をブランドカラーで強調することで、ブランド名「Choice」との繋がりを視覚的に示しています。
- 実績カウンター（14年以上・10,000人+）：数字は最も説得力のある信頼シグナルです。説明文の中に埋もれさせず、独立したカードとして目立たせることで、斜め読みでも目に留まるようにしています。
- アンビエント装飾（ラジアルグロー、ライトストリーク、フローティングリング）：Hero全体の空気感をリッチにし、「普通のサイトではない」という第一印象を与えます。
2. ビジョン — 共感と問いかけで引き込む
Heroで興味を持った訪問者に「自分のことだ」と感じてもらうセクションです。
- 冒頭の問いかけ「何の制約もないとしたら、やりたいことは何ですか。」：訪問者自身に自問させることで、当事者意識を引き出します。読み手を「観客」から「参加者」に変える効果があります。
- 巨大引用「あなたの可能性は、そんなもんじゃない。」：中村様の信念を強い言葉で伝え、感情に訴えかけます。ここで「この人は自分の味方だ」と感じてもらうことが狙いです。
- アニメーション付き実績数字：スクロールで画面に入ったタイミングで数字がカウントアップする演出により、数字の印象を強化しています。
3. サービス — 具体的な価値を1つずつ丁寧に伝える
「何をしてくれるのか」を明確にするセクションです。
- スティッキースクロール方式（PC）：3つのサービスを1つずつ順番に全幅で表示し、スクロールに応じて次のカードが上に重なっていく体験を提供します。一度に3つ並べるより、1つずつ読ませることで各サービスの印象が強くなります。
- 巨大番号（01/02/03）：視覚的なアンカーとして機能し、情報の構造を直感的に伝えます。
- 「直感・論理・感情」の3軸：キャリアコンサルティングの専門性を端的に示し、「体系的なアプローチを持っている人だ」という信頼感を与えます。
4. メディア — 第三者評価で信頼を補強する
ビジョンとサービスで関心を高めた訪問者に、客観的な裏付けを提供するセクションです。
- 書籍情報（左カラム）：著者であることは最大の権威性シグナルです。出版予定の情報を先行して伝えることで「この人は本を出すレベルの専門家だ」という認識を形成します。
- 実績リスト（右カラム）：「ビズリーチ ヘッドハンターアワード受賞」等の具体的な実績を、ダッシュ記号で簡潔にリスト化。自慢ではなく事実の提示として控えめに、しかし確実に目に入る配置にしています。
5. プロフィール — 人となりを知ってもらう
ここまでの情報で「相談してみたい」と思った訪問者が「もう少しこの人のことを知りたい」と感じるタイミングで配置しています。
- 写真＋経歴の2カラム：改まったプロフィール写真と経歴を並べることで、ビジネスパーソンとしての信頼感を補完します。
- 経歴を3ブロック（導入・ハイライト・クロージング）に構成：長い文章を読ませるのではなく、要点を掴みやすい構造にしています。ハイライト部分（キャリアの転機や信念）は一回り大きいフォントで強調しています。
6. お問い合わせ — 行動のハードルを下げる
ページの最後に「まずは、話してみませんか。」という問いかけ形式の見出しを配置しています。
- 問いかけ形式：「お問い合わせ」という事務的な見出しではなく、会話の延長としてフォームに誘導します。ここまでスクロールしてきた訪問者の心理に寄り添う表現です。
- 問い合わせ種別の選択：個人/法人/メディア/キャリア相談の4種を最初に選ばせることで、「自分に合った窓口がある」という安心感を与えます。法人・メディア選択時のみ会社名欄を表示し、個人の方のフォーム入力負荷を軽減しています。
- フィールド数は最小限（4〜5項目）：離脱率を下げるため、必要最低限の情報のみ求めています。
■ ページ全体のデザイン手法
- Liquid Glass効果：Apple のデザイン言語にインスパイアされた、すりガラス風の背景効果を各セクションのコンテンツエリアに適用しています。背景の幾何学装飾が透けて見えることで、奥行きと洗練された印象を生み出します。
- 幾何学装飾：ブランドカラーの弧線・円・三角・ドットパターンをページ全体に散りばめ、余白の「過疎感」を解消しています。コンテンツの邪魔にならない透明度で、ページ全体にブランドの一体感を持たせています。
- タイポグラフィ主導：各セクションの見出しは全て異なるスタイル（巨大背景テキスト、引用形式、問いかけ形式など）を採用し、テンプレート感を排除しています。
- レスポンシブ対応：スマートフォン（375px）からデスクトップ（1440px）まで、フォントサイズ・レイアウトが滑らかに変化します。30〜40代のターゲットに合わせ、一般的なサイトより1段階大きいフォントサイズを基準にしています。
■ ブランドカラーの厳守
ご提供いただいたブランドカラー指定書に基づき、以下を厳守しています。
- リング（シンボル）: #9FD4D5
- 文字（ロゴタイプ）: #15B2C7
- 装飾用途での透明度調整は行っていますが、ブランドカラー自体の変更・濃淡調整は行っていません。
ご不明点やご要望がございましたら、お気軽にご連絡ください。
ご検討のほど、よろしくお願いいたします。