Tomosuは、大阪府柏原市を拠点に、コーチングとコミュニケーションの講座を案内しているサイトです。深い緑と白を基調とした配色に、人と人が向き合う場面の写真を組み合わせ、相手の話を聴くことを大切にする姿勢を落ち着いたトーンで表現しています。
この記事では、トップページを中心に、配色、ファーストビュー、写真の扱い、余白と書体、ボタンと導線の設計を順に読み解いていきます。傾聴力の付け方や、聴く力と営業力の関係をテーマにした講座サイトを企画している方にとって、取り入れやすいヒントが多いサイトです。
Tomosuが案内しているサービスとサイトの位置づけ
デザインを見ていく前に、サイトで紹介されている内容を整理しておきます。サイトの主な役割は、個人向けのコーチングと、ビジネスの場で役立つコミュニケーション講座を知ってもらい、問い合わせにつなげることにあります。
Tomosu（トモス）のサポートメニューには、パーソナルコーチングのほか、傾聴力向上講座と信頼構築コミュニケーション講座が用意されています。個人に向けたセッションに加えて、企業からの研修や講演の相談にも応じている旨が記載されています。
代表は菅原 夏樹様で、学校教員として多くの人と向き合ってきた経験をもとに、コーチングの技術を身につけたと紹介されています。サイト名には、心に明かりを「灯す」ことや、歩みを「共す」ことへの思いが込められているそうです。
活動の拠点は大阪府柏原市で、面談や講座はオンラインのほか、指定の会議室などで行われます。詳しい面談場所は予約の際に知らせる形をとっており、オンラインでは地域を問わず対応し、出張研修や対面でのセッションも相談できると案内されています。
深緑と白で誠実さを伝える配色とトーン＆マナー
Tomosuのデザインの印象を決めている最大の要素は、深緑と白に絞り込んだ配色です。色数を抑えているため、コーチングや講座というテーマにふさわしい誠実で落ち着いた雰囲気が生まれています。ここでは、緑の使い分けと、白やグレーが担っている役割を見ていきます。
明るさの異なる2つの深緑を使い分ける
ヘッダー左上の問い合わせボタン、ロゴの上辺に引かれたライン、ページ下部の問い合わせブロックには、わずかに青みを帯びた深緑が使われています。一方で、右上のメニューボタンや悩みリストのチェック欄、フッターのナビゲーション帯は、黒に近い濃い緑で塗られています。
同じ緑の系統でも明るさに差をつけることで、画面が単調にならず、要素ごとの役割も見分けやすくなります。問い合わせの入口とロゴまわりに同じ色味をそろえている点は、ブランドの印象と行動への導線を結びつける配色として参考になります。
白とグレーでつくる読みやすい土台
ページの背景は白が中心で、悩みリストの各項目には緑がかった淡いグレーが敷かれています。本文の文字色もグレーに抑えられており、深緑の見出しとのあいだに自然な強弱が生まれています。
差し色になる強い色は使われていませんが、ページ後半のCONTENTSでは、明るい若葉の写真が背景一面に広がります。落ち着いた配色のなかに生き生きとした緑が加わることで、スクロールしたときの印象に変化がつき、深緑のテーマカラーとも無理なくつながっています。
中央を軸に組み立てたファーストビュー
サイトを開いた直後の画面は、ヘッダー、全幅のメインビジュアル、キャッチコピーで構成されています。ロゴとキャッチコピーが画面の中央を軸に配置されているため、視線が自然と中心に集まり、最初に伝えたいメッセージへ意識が向きます。
ロゴを白いタブに収めたヘッダー
ヘッダーは、左端に深緑の問い合わせボタン、中央にロゴ、右側に短いタグラインとメニューボタンを配置した構成です。セリフ体の文字で表された「Tomosu」のロゴは、上辺に深緑の線を引いた白いタブのなかに置かれ、タブの下端がメインビジュアルに少し重なっています。
ロゴの部分だけがヘッダーの高さからはみ出しているため、横長のヘッダーのなかでもサイト名がすぐに目に入ります。左右の端を深緑の四角いブロックで締めている効果もあり、中央の白いタブがいっそう引き立って見えます。
写真が切り替わるスライド形式のメインビジュアル
メインビジュアルは、複数の写真が時間の経過とともに入れ替わるスライド形式です。表示を確認したところ、カーテンを背景に男性が女性と向き合う場面、ソファに座る女性と会話を交わす場面、ノートパソコンの前で笑顔を見せる場面などが順に映し出されました。
写真が変わってもキャッチコピーは同じ位置に表示され続けるため、伝えたいメッセージがぶれません。「答えは、あなたの中に。」から始まる3行のコピーは、太めのゴシック体を広い字間で組み、その下に講座名を示す小さめの一行を添えています。
細い白線と斜線の質感で写真を整える
メインビジュアルで特徴的なのは、写真の上に重ねられた細い白線です。画面の外周を囲む線に加えて、中央の縦長のエリアだけがやや暗いトーンに落とされ、その境目に沿うように白い線が引かれています。
中央を暗くしているのは、白いキャッチコピーの読みやすさを確保するための工夫と考えられます。写真には細かな斜線状のテクスチャも重ねられており、写真の生々しさが和らいで、額に収めた作品のような上品さが加わっています。
画面の中央下部には、縦向きに配置された「Scroll」の文字と細い縦線が置かれています。下へ読み進められることを、主張しすぎない形で伝えている部分です。
悩みの確認から講座紹介へ進む情報設計
ファーストビューの下は、読者の悩みを確認し、サイトの考え方を伝え、講座を紹介するという順番で組み立てられています。訪問者が自分ごととして読み進めやすい流れになっており、講座やサービスを案内するサイトの構成として参考にしやすい部分です。
チェックマークで並べた悩みリスト
最初のセクションでは、問いかけの形をとった深緑の見出しの下に、4つの悩みが横長のボックスで縦に並びます。各ボックスの左端には濃い緑の正方形があり、白いチェックマークが入っています。
挙げられているのは、営業で話しすぎてしまう状態を改善したい、傾聴力の付け方を学んで信頼関係を深めたい、聴く力を高めて営業力につなげたい、といった悩みです。チェックリストのような見せ方なので、読者は自分の状況と照らし合わせながら読むことができ、続く講座の紹介へ関心が向かいやすくなります。
写真を左右にずらして配置したABOUT US
悩みリストの次には、2枚の写真を左右にずらして配置したエリアがあります。1枚目は街並みを背にスーツ姿の男性が話す写真を左寄せに、2枚目は手を握り合う様子を写した写真を右寄せにしており、視線が左から右へジグザグに動くレイアウトです。
続くABOUT USでは、欧文の見出しと小さな日本語の補足を上下に組み合わせ、字間を大きくとったグレーの見出しで「ライフプロンプター」という考え方を打ち出しています。説明文のあとには角丸の枠線ボタンが置かれ、サイトの考え方を詳しく紹介するページへ進めるようになっています。
写真を背景にした3枚のメニューカード
MENUのセクションでは、パーソナルコーチング・傾聴力向上講座・信頼構築コミュニケーション講座の3つが、同じ大きさのカードで横一列に並びます。どのカードも写真の上に暗めのフィルターと細い白線の枠を重ね、メニュー名と短い説明文を白い文字で中央にそろえています。
メインビジュアルと同じ白線の枠と斜線の質感をカードにも取り入れているため、ページの上部から中盤まで表現に統一感があります。3つのメニューを同じ形式で見せることで、内容の違いを比べやすくしている点も見どころです。
余白と書体の使い分けがつくる読みやすさ
Tomosuのページは、要素同士の間隔を広くとり、欧文と和文の書体を役割ごとに使い分けています。情報を詰め込みすぎず、ひとつずつ受け止めてもらう設計は、聴くことを大切にするサイトのテーマとも重なります。
セリフ体の欧文見出しと左右に伸びる横線
ABOUT US、MENU、VOICE、STAFF、FAQ、CONTENTS、ACCESSといったセクション名は、字間を広げたセリフ体の欧文で統一されています。なかでもMENU、VOICE、STAFF、FAQの見出しは中央に配置され、左右から細い横線が伸びる形になっているため、セクションの区切りがひと目で分かります。
ロゴも同じくセリフ体の文字なので、見出しとサイト名の印象がそろっています。一方で、キャッチコピーや悩みリストの見出しといった日本語の大きな文字にはゴシック体が使われ、欧文の上品さと和文の読みやすさを両立させています。
写真・短い説明文・ボタンをくり返すセクション構成
VOICE、STAFF、FAQの各セクションは、横長の写真、2行ほどの短い説明文、角丸の枠線ボタンという同じ並びでまとめられています。写真には、赤い帽子をかぶって笑顔を見せる女性、緑の木々のなかに立つスーツ姿の男性、青空を背にした後ろ姿など、それぞれ異なるカットが選ばれています。
構成のパターンを固定しながら写真で変化をつけているため、縦に長いページでも単調になりにくく、読者は迷わずに次の情報へ進めます。説明文の上下左右にも十分な余白がとられ、文字量が少なくても窮屈さや間延びを感じさせない配置です。
形のルールを統一したボタンと導線の設計
Tomosuのサイトでは、ボタンの形やメニューの開き方に一貫したルールがあり、ページのどこにいても次の行動を選びやすくなっています。ここでは、ボタンの見た目、メニューの動き、ページ下部の問い合わせ導線を順に確認します。
角丸の枠線ボタンで統一した誘導
各セクションの末尾にあるボタンは、両端を丸くした横長の形で、細い深緑の線と太めの文字で表示されています。塗りつぶしではなく枠線だけで表現しているため、白い背景になじみながらも、押せる要素であることがはっきり伝わります。
若葉の写真を背景にしたCONTENTSでは、同じ形のボタンを白い線と白い文字に切り替えており、背景にはメインビジュアルと同じ細い白線の枠も重ねられています。背景に合わせて色だけを変え、形は変えないという扱い方は、サイト全体のデザインルールをつくるうえで見本になります。
なお、ACCESSのエリアには、ピンのアイコンを添えた角のある枠線ボタンが置かれ、Googleマップで場所を確認できるようになっています。
右上のボタンから開く全画面メニュー
パソコンの画面幅で表示すると、ナビゲーションは右上の深緑のボタンにまとめられています。ボタンを押すと、画面の左半分に深緑のメニュー一覧、右半分に若葉の写真が広がり、サポートメニューの項目の下には3つのメニューが一段下げて並びます。
ページを下へスクロールするとヘッダーは画面の外へ流れますが、このメニューボタンだけは右上に残り続けます。写真を大きく見せるページでありながら、ほかのページへ移動する手段を常に確保している点が、使いやすさにつながっています。
ページ末尾の問い合わせブロックとフッター
ページの最下部には、「メールでのお問い合わせ」という小さな文字と、メールのアイコン、CONTACTの文字を組み合わせた深緑の大きなブロックが中央に置かれています。ヘッダー左上の問い合わせボタンと同じ色と要素で構成されているため、ページを読み終えた読者も同じ入口だとすぐに分かります。
その下には、黒に近い深緑の帯にページ名を横一列に並べたナビゲーションがあり、さらにFacebook、Instagram、LINEのアイコンが続きます。メニューを開かなくても主要なページへ移動できるため、最後まで読んだ読者がほかのページも見て回りやすい作りです。
傾聴力の付け方と聴く力を営業力に生かす視点
ここからは、サイトが扱うテーマについても触れておきます。Tomosuの傾聴力向上講座は、営業の場面で相手のためを思って話しすぎてしまい、かえって顧客の気持ちが離れてしまうことに悩む方に向けた講座として紹介されています。
講座のページでは、話しすぎてしまう心理的な背景を理解するところから、ビジネスの場面を想定したロールプレイング、現場で実践した結果をもとにしたフィードバックまで、受講の流れが段階ごとに示されています。会話のテクニックに頼るのではなく、相手が本音を話しやすくなる聴き方を身につけることに重点が置かれています。
聴く力が営業力の土台になる理由
営業では話す力が重視されがちですが、相手の話を丁寧に聴くことで、顧客が本当に求めていることや不安に感じている点が見えてきます。聴く力は、提案の内容を相手の状況に合わせるための土台であり、営業力と切り離せない関係にあります。
一般的な傾聴力の付け方としては、相手の話を途中で遮らずに最後まで聴く、相づちや要約で理解していることを示す、答えを急がずに質問で考えを引き出す、といった基本がよく挙げられます。パーソナルコーチングの紹介で示されている、答えを与えるより問いを届けるという考え方も、こうした聴く姿勢と方向性が重なります。
営業で話しすぎる状態を改善するための考え方
営業で話しすぎてしまう背景には、商品の魅力を伝えたい気持ちや、会話が途切れることへの不安があると言われます。改善の第一歩としては、自分が話している時間と相手が話している時間の割合を意識し、質問をしたあとは相手の言葉を待つ習慣をつける方法が考えられます。
Tomosuのサイトでは、こうした悩みをファーストビュー直後のチェックリストで示し、傾聴力向上講座のカードの説明文でも同じテーマをくり返しています。訪問者の課題と講座の内容を早い段階で結びつける構成は、研修やセミナーを案内するサイトを設計する際のヒントになります。
まとめ：テーマとデザインがかみ合ったTomosuのサイト
Tomosuのサイトは、深緑と白に絞った配色、細い白線で写真を囲む表現、セリフ体の欧文見出し、角丸の枠線ボタンといった要素を、ページ全体で一貫して使っています。悩みの確認から講座紹介へ進む構成と、右上に残り続けるメニューボタンによって、読みやすさと移動のしやすさも両立しています。
コーチングやコミュニケーション研修を扱うサイトのデザインを考えている方は、写真の選び方や情報を並べる順番に注目すると、自分のサイトづくりに生かせる点が多く見つかります。実際の画面の雰囲気や講座の詳しい内容は、営業で話しすぎる悩みの改善をサポートするTomosuのサイトで確かめてみてください。
