オンラインで話し方を教える、徳田真由美さんのサイトです。
写真が主役の上品な雰囲気に、徳田さんらしい表情とことばを合わせました。
講座の内容、受講生の体験、ラジオの活動を知り、相談へ進める形に整えています。
写真が主役の、余白のあるデザイン
今回の出発点は、以前のホームページや講座資料、公開インタビュー、ラジオの活動を、新しいサイトにまとめることでした。 話し方講座を中心に据えながら、徳田さんの人柄も伝えたいと考えました。
デザインの参考としていただいたのは、パティスリーのサイトです。 大きな写真、白い余白、写真に少し重なる文章のパネル。 そうした雰囲気を手がかりに、話美人アカデミーの見せ方を組み立てています。
本文は落ち着いたブラウン、案内ボタンにはゴールドを使いました。 装飾で埋めるより、写真と短いことばに視線が向くようにしています。 ページを下へ読む中で、写真、文章、次の案内へとリズムが変わる構成です。
徳田さんの表情と、大きなことば
トップで伝えるのは、「想いが届くと あなたはもっと輝く」というメッセージです。 誰から学ぶ講座なのかも、最初の画面で分かるようにしました。
徳田さんから提供いただいた写真をもとに、表情や髪型、グリーンの服を手がかりとして、背景や文字を含むトップ画像をAIで制作しています。 実写写真をそのまま載せたものではなく、本人写真を参照してつくったビジュアルです。
大きな日本語の見出しも、写真と一緒に生成しました。 文字を置く場所まで構図に含めることで、顔とメッセージが一つの画面で伝わる表現を目指しています。 いただいた公式ロゴは、ヘッダーやフッターにも配置しました。
スマホでは、見る順番から組み直す
パソコン用の横長画像とは別に、スマホ用の縦長画像を用意しました。 上から見出し、徳田さんの表情、講座への案内と、自然に読める順番です。 横長の画面を小さく縮めるだけにせず、限られた幅に合わせて構図を変えています。
制作途中には、スマホで似た写真が続き、内容の違いが分かりにくくなる箇所もありました。 そこでトップの次は、パソコンとノートがある、人物のいない写真に変更しました。
学びの紹介も、スマホでは「01・02・03」の番号と文章を中心にしています。 写真の印象を残す場所と、内容を読み進める場所を分けた工夫です。 パソコンでは、画面の広さを活かした写真の並びを残しています。
まず文章で読み、気になったら動画へ
受講生の声は、動画を見る前にも内容をつかめるページにしました。 公開インタビューをもとに、悩んでいたこと、ご本人が感じた変化、動画で聞ける話を文章で紹介しています。
まず短い文章で、自分に近い悩みを探す。 気になる体験があれば、その方の動画へ進む。 声や表情まで知りたい方には、インタビューを見ていただける流れです。
話し方講座の体験と、関連サポートの体験は、見出しで区別しています。 一人ひとりが何を利用した感想なのかを、混同せず読めるようにしました。
講座と発信を、一つの入口につなぐ
主な案内は、オンラインの話し方講座です。 人前で話す実践講座や、宇宙経営未来コンサルティングには、それぞれ独立したページを用意しました。 最初に主軸の講座を知り、関心に合わせて詳しい内容へ進めます。
ラジオ「話美人カフェ」も紹介しています。 文章でプロフィールを読み、ラジオで徳田さんの声や対話に触れる。 講座の説明だけでは伝えきれない雰囲気を、実際の発信から知っていただくための入口です。
料金は、ご相談時に案内する形にしました。 気になる点はよくある質問で確かめ、公式LINEから相談へ進めます。
公開してから、育てられるサイトに
サイトはWordPressに接続し、講座、プロフィール、受講生の声などをページごとに整理しました。 ブログを追加すると、Journalに公開記事が並ぶつくりです。 これからの発信も、同じサイトに積み重ねられます。
今回整えたのは、写真の世界観と、情報を探すための流れです。 パソコンとスマホで表示を確かめ、トップ画像、文章、動画へのリンク、ご相談までの案内を確認しました。
好きな雰囲気を、伝わる見せ方へ
大切にしたのは、参考の雰囲気を、徳田さんの仕事に合う形へ置き換えることです。 写真の美しさを入口に、誰から何を学べるかを知り、体験談や発信で確かめる。 見た目と情報の順番を、一緒に考えました。
講座や教室を運営し、写真、動画、ブログが別々の場所にある方にも、この整理は役立つと考えています。 今ある材料を見ながら、初めて訪れる方へ何を先に届けるかを、一緒に考えませんか。