12Diviパーソナルコーチングウェブサイトの例

公開: 2017-05-28

パーソナルコーチングは、ウェブ上でもウェブ外でも人気のある業界です。パーソナルコーチングサービスを提供する人は、潜在的なクライアントに彼らのサービスと製品について伝えるためにうまく設計されたウェブサイトを必要とします。幸いなことに、あなたの想像力を刺激するのを助けるためにDiviで作られた多くの個人的なコーチングウェブサイトがあります。この記事では、DiviのパーソナルコーチングWebサイトの12の例を見ていきます。

パーソナルコーチングは、ライフスタイル、健康、経済、人間関係、キャリアなど、多くのトピックをカバーしています。パーソナルコーチのニーズは、幅広いサービスのためにコーチごとに異なります。ほとんどの場合、サインアップフォーム、予約情報、製品、連絡先情報、ブログなどが含まれます。 Webサイトを通じてサービスを提供するものもあれば、Webサイトを使用して製品を紹介するものもあります。

これらの12のWebサイトは順不同です。最後にボーナスもあります–Extraで作られた個人的なコーチングサイトです。見てみましょう…

1.琥珀色のチャラス

Amber Chalusは、画面の右側にスタイル付きの電子メールサインアップフォームを備えたフルスクリーン画像を使用します。これに続くのは、ブランドカラーでスタイル設定されたフォントのaboutセクションです。次は、ページにリンクする画像を含む全幅セクション、ブログセクション、青い背景の上にエレガントな白いフォントを使用した引用を含む全幅セクション、および画像、テキスト、およびサイト所有者に関するセクションです。彼女が紹介されているメディアアイコン。ナビゲーションはドロップダウンなしでシンプルです。レイアウトはうまく設計されており、サイトはソフトブルーとエレガントなフォントを使用しています。

2.コートニー・マクダーモット

コートニーマクダーモットには、タグラインとそれに続くメディアアイコンの全幅セクションと電子メールサインアップフォームを含むフルスクリーン画像が含まれています。情報セクションでは、続きを読むメッセージとして、背景色とエレガントなフォントを備えたテキストモジュールを使用しています。 3つのCTA（召喚状）が水平に並んでおり、その後に証言として全画面画像が続きます。ブログセクションでは、クリック可能な3つの画像を使用しています。これに続いて、本のCTA、メディアへのリンク、およびサインアップフォーム付きのフッターがあります。このサイトは画像とフォントを大いに活用しています。

3.ハイジローズ

ハイジローズは、ロゴ、タグライン、スタイル付きボタンを備えたフルスクリーン画像を表示します。ボタンをクリックするとホーム画面に移動し、全画面画像とトップナビゲーションが表示されます。スクロールすると、動機付けのメッセージ、CTA、およびフッターメニューを含むいくつかのセクションが表示されます。ブログでは、投稿のタイトルの上に3つの画像が全幅で表示されます。投稿自体はサイドバーのない単一の列の中央に配置され、エレガントな外観を作成します。 Work With Meページは、視差のあるテキストと画像を交互に配置したスタイリッシュなレイアウトを使用しています。ストアはWooCommerceを利用しています。このサイトは、レイアウト、フォント、および画像をうまく利用しています。

4.求愛vs交際

Courtship vs Datingは、CTAとニュースレターフォームを備えた全幅スライダーを使用します。スクロールすると、画像と説明が記載された書籍のCTAと、Kindleストアへのリンクが記載された書籍のリストが表示されます。 3列の情報セクションでは、テキストとアイコンを使用します。イベントセクションには、イベントページへのリンクを含む画像が表示されます。これに続いて、紹介文のセクション、ブログのセクション、ブランドカラーのフッターがあります。このサイトはブランドカラーをうまく利用しています。

5.インサイトコーチング

Insight Coachingは、メニューの上にタグラインが付いたロゴ付きの大きなヘッダーを使用します。全幅の画像には、詳細情報を含むタグラインが含まれています。スクロールすると、サービスに関するアイコンとリンクが付いた宣伝文が表示された3列のセクションが表示されます。 aboutセクションは、スタイル付きブロック内にテキストを配置します。情報セクションでは、箇条書きで情報を提供します。お客様の声のセクションでは、ヘッダー画像のミラーバージョンを背景として使用しています。このサイトはシンプルで、ターゲットオーディエンスのために色とフォントをうまく利用しています。

6.ミシェル・ラフト

Michelle Luftは、CTAとTawk.Toを利用したチャットシステムを備えた全幅画像を使用しています。視差の背景画像の上に配置されたタグラインが含まれています。丸で囲んだ画像にはサービスへのリンクがあります。アニメーションの情報セクションには、お問い合わせフォームの上にスライドショーが表示されます。ブログセクションには、スライダー内に投稿が表示されます。お客様の声は、タグラインと同じ視差の背景の上に配置されます。フッターにはFacebookのリンクが埋め込まれています。イベントカレンダーは、WP EventPlusを利用しています。レイアウトはすっきりしていて、トピックに合うようにカラフルな背景画像を使用しています。

7. We2Me

We2Meは、視差のロゴが付いたフルスクリーン画像を使用します。スクロールすると、ミッションステートメントが引用として表示され、その後にさまざまなページへのリンクが続きます。ホームページのセクションは、紹介テキスト付きの視差のフルスクリーン画像で区切られています。セクションでは、画像、テキスト、ビデオなどを使用します。これには、報道機関の記事へのリンク、埋め込みオーディオ、お問い合わせフォーム、およびCTAを含む4列のセクションが含まれます。サブスクリプションはWooCommerceを利用しています。このサイトでは、ブランドカラーを使用してターゲットオーディエンスを引き付けています。

8.呼吸と至福

Breathe and Blissは、視差でメッセージを回転させたフルスクリーンの背景画像を使用します。情報セクションでは、背景画像が透けて見えるヘッダーテキストを使用します。サービスの宣伝文句は、視差の背景の上に配置されます。セクションに関する2列には、片側に画像が表示され、反対側に箇条書きが表示されます。全幅CTAは、クラスとワークショップを示すために画像を表示します。全幅のInstagramフィードも含まれています。ブランドカラーはムードを設定するために使用されます。

9.私の心臓の錬金術師

My Heart Alchemistは、オーバーレイ、リンク、およびCTAにタグラインを含む全幅の画像を表示します。問題を説明するaboutセクションでは、中央揃えのテキストを使用します。個人的な引用は、色付きの背景を使用して全幅のテキストセクション内に配置されます。全幅の画像コラージュは、オーバーレイ内のステートメントをCTAとして使用します。アバウトセクションには利点が表示され、その後に全幅の紹介文と全幅のCTAが表示され、セクション全体がリンクになります。予約はLeadBoxフォームを介して処理されます。このサイトでは、ブランドの色、画像、CTAを活用しています。

10.それよりも深い

Deeper Than Thatは、視差のある全幅画像の上にCTAとそれに続くタグラインを含む全幅画像を表示します。ブログセクションはホバーアニメーションを使用しています。アバウトセクションは、フルスクリーン画像の片側へのリンクを含むテキストボックスを配置します。埋め込まれたYouTubeビデオは、YouTubeでビデオを表示するためのリンクを含むビデオのスニペットを表示します。 Instagramセクションには、石積みグリッドにInstagramフィードが表示されます。フッターには、電子メールのサインアップフォーム、ページへのリンク、および連絡先情報が含まれています。ダウンロードはDropboxからの埋め込みファイルです。このサイトは、黒と白を使用してムードを設定します。

11.ローリー・アードマン

Laurie Erdmanは、片側に大きな画像があり、反対側にActiveCampaignを利用したサインアップフォームがある2列のセクションを使用しています。全幅セクションは、背景パターンの上にタグラインを表示します。スクロールすると、詳細を聞くためのリンク付きの埋め込みビデオ、ホバーアニメーションを使用したブログカテゴリの画像、片側に紹介文とメディアリンクのある2列のセクション、リンクとソーシャルメディアのフォローボタンのあるフッターが表示されます。このショップはWooCommerceを利用しています。このサイトは色と画像をうまく利用しています。

12.ワイルドセイクリッド

Wild Sacredは、ヘッダーテキストの背後にあるハイライトとしてWebサイト全体で使用される色付きのスプラッシュを含む、中央にロゴが付いたボックスデザインを使用しています。 2列のデザインを使用して、サイトの片側にウェルカムメッセージとニュースレターフォームを含む画像が含まれています。これに続いて、CTAとして片側にテキストオーバーレイがある一連の画像があります。一部のテキストは、全幅の画像の片側に配置されます。お客様の声は、全幅のスライダー内に表示されます。コースの購入はWooCommerceを通じて処理されます。このサイトは、色と写真をうまく利用しています。

ボーナス：追加の例–希望とセント

Hope and Centsには、視差のタグラインとCTAを含むフルスクリーン画像が含まれています。ホームページには、投稿スライダー、すべてのカテゴリを含むタブ付き投稿モジュール、ニュースレターCTA、人気のある最近の投稿を2列に含むサイドバー付きの単一列レイアウトが含まれています。サイドバーには、ソーシャルフォローボタン、Aboutウィジェット、メディアアイコン、賞状、最近のツイートが表示されます。フッターには、中央に大きなロゴとメニューが表示されます。 Work With Meページでは、各サービスをステップスルーし、視差のある全幅の画像でサービスを分離します。レイアウトがすっきりしていて、色をうまく利用しており、Extraのマガジンモジュールを使用して通常のWebサイトを作成する良い例です。

最終的な考え

これらの12のDiviサイトと1つのExtraサイトは、コーチングのトピックに関係なく、個人的なコーチングWebサイトの優れた例です。レイアウト、色、フォント、連絡先情報、サインアップフォーム、予約情報、製品、ブログなどのインスピレーションが必要かどうかにかかわらず、パーソナルコーチ向けの次のDiviデザインに役立つ何かがここにあるはずです。

ご意見をお聞かせください。 これらのDiviパーソナルコーチングWebサイトの例から、お気に入りのデザイン要素は何ですか？ 以下のコメントであなたの考えを教えてください。

Vector Goddess /shutterstock.comによる注目の画像