篠永コンサルティングオフィスは、広島市安佐南区に拠点を置き、キャッシュフローコーチングや財務コンサル、ビジョン策定を通じて経営者を支える事務所です。公式サイトはオリーブグリーンと生成り色を基調に、明朝体の見出しと写真を組み合わせた落ち着いたデザインでまとめられています。
本記事では、広島で経営コンサルや財務コンサルのサイトづくりを考えている方に向けて、このサイトの配色、ファーストビュー、情報設計、導線の工夫を順に読み解きます。数字を扱う業種でありながら、堅くなりすぎない印象をどのように作っているのかに注目してご覧ください。
篠永コンサルティングオフィスとはどんな事務所か
篠永コンサルティングオフィスは、代表の篠永 雄佑様が運営する事務所です。篠永様は愛媛県の出身で、現在は広島に住み、個人向けのファイナンシャルプランナーと法人向けのキャッシュフローコーチを兼ねて活動しています。
サイトでは、経営者向けと社員向けの2つの切り口でコンサルティングを紹介しています。経営者向けでは毎月の決算書をもとにキャッシュフロー表を作り、年間の目標づくりとその後の振り返りを支えるほか、設備投資や採用、借入、売上目標といった重要な判断の相談にも応じる内容です。社員向けでは、退職金制度や弔慰金制度を含む福利厚生プランづくりや勉強会など、従業員が働きやすい環境を整える支援が並んでいます。
ブログでは、広島を拠点に中小企業の資金繰りの改善やビジョン策定を支えていることも紹介されています。会社の数字を整えることだけでなく、経営者と従業員の暮らしを豊かにすることを目的に掲げている点が、サイト全体のやわらかなトーンにもつながっています。
生成りとオリーブグリーンで信頼感をつくる配色
このサイトの印象を決めているのは、くすみのあるオリーブグリーンと、紙のような生成り色の組み合わせです。強い原色を使わず、自然を思わせる中間色でまとめることで、お金という緊張しやすい話題を穏やかに受け止める雰囲気を作っています。
濃淡2段階のグリーンでセクションを切り替える
ヘッダーや悩みを紹介するカード、比較表の見出し行には、落ち着いたオリーブグリーンが使われています。About usやFlow、動画を紹介するエリアでは、同系色を少し明るくしたセージグリーンを背景全面に敷き、生成り色のセクションと交互に並べています。
同じ色相のなかで明るさだけを変えているため、スクロールしても色の印象がばらつかず、セクションの区切りだけがはっきり伝わります。色数を増やさずにページのリズムを作る手法として参考になります。
サーモンピンクと紺色のロゴをアクセントに
グリーンと生成りの画面の中では、見出しの下線やフッターのCONTACTボタンにサーモンピンクが差し色として使われています。お客様の声のエリアでは、写真の背後に淡いグリーンとピンクの色面をずらして重ね、柔らかな温かみを加えています。
左上のロゴは、「永」の一字を紺色の円で囲んだデザインです。ブログでは、永く続く会社であることを願うモチーフとしてロゴを作ったと紹介されており、グリーン系の画面の中で紺色のロゴが全体を引き締める役割を担っています。
ファーストビューで伝える「お金の不安を安心へ」というメッセージ
トップページを開くと、画面いっぱいの写真の上に大きなキャッチコピーが重なるファーストビューが現れます。写真で業務の雰囲気を、コピーでサイトの約束を伝えるという役割分担がはっきりしています。
資料と電卓を写した写真に暗めのトーンを重ねる
背景には、グラフが印刷された資料や電卓、ペンを手にした人たちの手元を写した写真が使われています。財務の相談を連想させる写真ですが、全体に暗めのトーンをかけることで、上に載せた白い文字が読みやすくなっています。
画像の下部には3つのドットが並び、複数の写真を切り替えるスライド形式であることが分かります。人物の顔ではなく手元に寄せた構図のため、訪れた経営者が自分の机の上を重ねて想像しやすい見せ方です。
明朝体のキャッチコピーと控えめな補足文
中央には、お金の不安を安心や前向きな気持ちへ変えるという趣旨のキャッチコピーが、字間を広く取った明朝体で大きく配置されています。その下には、法人と個人の両面から将来の計画を支えることを伝える補足文が、小さな文字で2行にわたって続きます。
大きなコピーと小さな補足文の差をはっきりつけているため、最初の一瞬で伝えたい言葉と、読み進めて理解してほしい説明が自然に分かれます。ヘッダーにはロゴと英字のグローバルナビ、明るいグレーのCONTACTボタンが横一列に並び、ファーストビューの写真を邪魔しない控えめな構成です。
悩みから解決へ導くストーリー型の情報設計
ファーストビューの次には、経営者が抱えやすい悩みを示し、その後に解決の内容を見せる流れが組まれています。読者が自分の状況を確かめてから答えにたどり着ける順番になっている点が、この構成の大きな特徴です。
6つの悩みを写真付きカードで並べる
悩みのパートでは、会計知識、資金、借入、人材採用、社員の定着、売上目標という6つのテーマが、オリーブグリーンのカードにまとめられています。カードの上部には考え込む人物や会議の様子を写した写真があり、その下に白い文字で悩みの内容が書かれています。
カードは上段に4枚、下段に2枚を中央寄せで配置しています。端数の2枚を左に寄せず中央にそろえることで、画面の左右のバランスが崩れず、整った印象が保たれています。
下向きの矢印と下線付き見出しで視線を送る
悩みのカードの下には、グリーンの三角形を2つ重ねた下向きの矢印が置かれています。その先に、篠永コンサルティングオフィスがこれらの悩みに応えることを宣言する見出しがあり、サーモンピンクの細い下線が添えられています。
矢印と下線という小さな装飾だけで、問題提起から解決へという場面の転換を示しているため、文章で説明しなくても読者の視線が自然に下へ流れます。続いて、お金のブロックパズルという図解の手法を使い、社長と社員それぞれの不安を安心へ変えていく方針が、2行の大きな文字で示されます。
悩みと対になる6枚の解決カード
解決のパートでも、写真と文章を組み合わせた6枚のカードが、4枚と2枚の配置で並びます。決算の数字を図にして見える化すること、部門ごとの売上と粗利を管理すること、借入の計画を立てること、採用の判断、社員への還元の考え方、部署ごとの目標づくりといった内容が、先に挙げた悩みと同じ順番で対応しています。
悩みと解決を同じ形のカードでそろえると、読者は上下を見比べるだけで、どの悩みにどの支援があるのかを理解できます。サービスの説明を一方的に並べるのではなく、読者の疑問に答える形で情報を整理している点は、コンサルティング業のサイトで特に参考になるでしょう。
欧文セリフ体と明朝体でそろえたタイポグラフィ
サイト全体の文字づかいは、欧文のセリフ体と日本語の明朝体を基本に統一されています。書体の雰囲気をそろえることで、端正で知的な印象をページの最後まで保っています。
大きな欧文見出しと日本語サブタイトルの組み合わせ
About us、Menu、Voice、Flow、News&Blog、Contact Usといった各セクションの見出しは、大きな欧文のセリフ体で表示されています。そのすぐ横や下には細い横線と日本語の小さなサブタイトルが添えられ、英字の装飾性と日本語の分かりやすさを両立しています。
見出しの色は背景に合わせて切り替えられており、生成りの背景ではグリーンやグレー、グリーンの背景では白が使われています。本文も字間を広めに取った明朝体で組まれ、紙面をめくるようにゆったりと読み進められる質感があります。
背景に大きく敷いた英字の社名
About usとphilosophyの間には、SHINONAGAから始まる社名の英字表記が、画面の端から端まで届く大きさで配置されています。文字は背景になじむ淡い色で、一部は画面の外へはみ出しており、あえて全体を見せない配置が余白に動きを与えています。
情報を伝える役割よりも、ブランド名を印象に残す装飾として機能している要素です。セクションの間に広い余白を取りつつ、その余白を単調に見せない工夫として取り入れやすい手法でしょう。
人物と理念を伝えるAbout usとphilosophy
サイトの中盤では、事務所の代表者と考え方を紹介するパートが続きます。明るいセージグリーンの背景に文章と写真を並べ、信頼感と親しみやすさを同時に伝える構成です。
左に文章、右に写真を置く2カラム
About usでは、左側に代表の篠永 雄佑様によるあいさつ文、右側に人物写真を置いた2カラムの構成になっています。あいさつ文では、出身地や現在の活動、漠然としたお金の不安を和らげる手伝いをしたいという思いが、語りかけるような口調でつづられています。
philosophyも同じく左に文章、右に写真という配置で、ビジョン、ミッション、バリューの3項目を少し大きめの見出しで区切っています。バリューは丸数字を付けた5つの短い文で整理されており、長くなりがちな理念を読みやすく分けて見せる工夫が見られます。
点線で区切った事業者情報
理念の下には、代表者、所在地、メールアドレス、電話番号をまとめた事業者情報があります。項目ごとに細い点線で区切ったシンプルな表組みで、グリーンの背景に白い文字が映え、必要な情報をすぐに見つけられます。
所在地には広島市安佐南区の住所が明記されており、地域の経営者が相談先を探す際の判断材料になります。装飾を加えず淡々と並べることで、理念パートの情緒的な雰囲気から、事実を示すパートへ切り替わったことが伝わります。
サービス内容を比べやすくする見せ方
サービスを紹介する部分では、概要、詳細、補足という順に情報の粒度を変えて見せています。読者が知りたい深さに合わせて読み進められるよう、表現方法をセクションごとに変えている点が特徴です。
写真と文章を横に並べたserviceカード
serviceのパートは、見出しを右側に寄せ、両側に細い線を添えた控えめなラベルから始まります。その下に経営者向けと社員向けの2枚のカードが縦に並び、左側に写真、右側に明るいグレーの面と説明文を配置しています。
カードには薄い影が付けられ、グリーンの背景から少し浮き上がって見えます。タブレットでグラフを確認する手元や、握手を交わす場面の写真が添えられ、それぞれのサービスの雰囲気を直感的に伝えています。
●の記号で内容の違いを示すMenuの比較表
Menuでは、キャッシュフローコーチング、ビジョン策定、オープン経営コンサルの3つのプランと、サービスの項目を並べた比較表が掲載されています。表の見出し行はオリーブグリーンで、各項目の番号はグリーンの丸いバッジで示されています。
各プランに含まれる項目は●の記号で表され、表の下の方に進むほど右側のプランにだけ●が付く並びになっています。文章で違いを説明するよりも、記号の並びで差がひと目で分かるため、プランを見比べるときの助けになります。表全体の角を丸めて影を付け、カードのように見せている点も、表組みの堅い印象をやわらげています。
ブロックパズルを解説する動画エリア
比較表の後には、セージグリーンの背景に、お金のブロックパズルを紹介する動画を置いたエリアがあります。見出しの下に白い下線を引き、財務分析の基本や数字の読み方を動画で学べることを短い文章で案内してから、横幅の広い動画を中央に配置しています。
会計の説明は文章だけでは伝わりにくいため、動画で補う構成は理にかなっています。案内文から動画へという順番で置くことで、再生する前に何を学べるのかが分かる点も親切です。
お客様の声と依頼の流れで安心感を高める導線
ページの後半では、利用者の声、依頼の流れ、ブログ、お問い合わせへと、相談を決める前に知りたい情報が順番に並んでいます。読み終えた人が次に取る行動に迷わないよう、段階的に背中を押す構成です。
写真と色面を重ねたVoiceのレイアウト
Voiceでは、エステサロンを経営する女性と、パーソナルトレーナーとして働く30代男性の声が紹介されています。左側に肩書と見出し、本文を置き、右側に写真を配置したうえで、写真の背後に淡いグリーンとピンクの四角い色面をずらして重ねています。
色面を写真からはみ出させることで、単純な2カラムに奥行きと動きが生まれています。声の内容も、お金の流れが見えるようになって判断に自信を持てたという具体的な変化を伝えており、読者が相談した後の姿を想像しやすくなっています。
アイコン付きの4ステップで示すFlow
Flowでは、問い合わせ、ヒアリング、提案、契約とサービス開始までの流れが、4枚の白いカードで横一列に示されています。各カードの左上には01から04の番号があり、中央にクリップボードや耳、書類、人物をかたどったグレーのアイコン、その下に手順名と短い説明が続きます。
角を丸めたカードとシンプルなアイコンによって、初めて相談する人でも手順を一目で把握できます。番号、アイコン、見出し、説明の順に情報の強弱がそろっているため、横に目を動かすだけで全体の流れが頭に入ります。
ブログからContact Us、フッターへ続く締めくくり
News&Blogでは、ロゴを使ったサムネイルとblogのラベルが付いた記事カードが置かれ、右下にはグリーンのもっと見るボタンがあります。その下のContact Usでは、会議の様子を写した写真を暗く沈めた背景に、大きな欧文の見出しと白い枠線のお問い合わせボタンを中央へまとめています。
それまでの明るい配色から一転して暗い背景に切り替わるため、ページの終わりが近いことと、ここが行動を促す場所であることが直感的に伝わります。フッターには事務所名とサーモンピンクのCONTACTボタン、右側に縦並びのナビゲーションがあり、最後まで問い合わせの入口を見失わない設計です。
広島で経営コンサル・財務コンサルを選ぶときの視点
広島で経営コンサルや財務コンサルを探す際は、支援の内容だけでなく、相談の進め方や説明の分かりやすさも確かめておくと安心です。ここでは、公式サイトを見比べるときに役立つ一般的な視点を紹介します。
- 決算書や試算表の数字を、図や表を用いて分かりやすく説明してくれるかを確かめます。
- 単発の助言だけでなく、目標づくりから振り返りまで継続して関わる形があるかを見ます。
- 資金繰りや借入、採用など、自社の課題に近いテーマを扱っているかを確認します。
- 相談から契約までの手順が、事前にサイトで分かるようになっているかも大切です。
篠永コンサルティングオフィスのサイトは、こうした確認項目にあたる情報を、悩みと解決のカード、比較表、動画、依頼の流れといった形で整理しています。広島市や安佐南区で経営コンサルを探している方にとって、相談前に知りたいことを順番に確かめられる構成といえます。
篠永コンサルティングオフィスのサイトから学べるデザインのまとめ
篠永コンサルティングオフィスの公式サイトは、オリーブグリーンと生成り色の穏やかな配色、明朝体と欧文セリフ体をそろえたタイポグラフィ、悩みから解決へ導くカード構成によって、お金の話題に親しみやすさを持たせています。比較表や動画、4ステップのFlowなど、情報の種類に合わせて見せ方を変えている点も、多くの内容を扱うコンサルティング事務所のサイトの見本になります。
数字を扱う業種のサイトに温かみを加えたい方や、コンサルティングの内容を段階的に伝えたい方にとって、参考になる要素が多いデザインです。実際の色づかいやスライド、動画の見え方は、ぜひ公式サイトで確かめてみてください。
