株式会社トーカンのウェブサイトは、完成した屋外空間の写真を大きく扱いながら、白とグリーンの少ない色数で画面全体を整理したコーポレートサイトです。エクステリアや外構の工事は、仕上がった風景そのものが仕事の中身を語ります。そのため写真の見せ方と情報の並べ方が、そのままサイトの説得力につながります。
ここでは徳島でエクステリア工事を手がける会社のサイトとして、ファーストビュー、配色、レイアウト、導線がどのように設計されているかを順に見ていきます。外構工事を紹介するサイトを検討している方にとって、構成の参考になる要素がいくつも見つかります。
ファーストビューは施工した風景の写真で事業を伝えます
結論として、このサイトの第一印象は「実際に手がけた屋外空間を見せる」という一点に集約されています。画面いっぱいに広がる写真には、石張りの舗装、階段と手すり、刈り込まれた植栽が写り込み、住宅の庭よりも規模の大きい屋外空間の雰囲気が伝わります。文字による説明を読む前に、扱う仕事の領域が視覚的に理解できる構成です。
写真の上に置かれた2行のコピー
写真の左下には、エクステリア工事によって徳島の街と住まいを美しくしていく、という趣旨の言葉が白抜きの2行で配置されています。文字は太めの和文ゴシックで、写真の明るい部分に重なっても読めるように配置されています。中央揃えではなく左下へ寄せているため、写真の主役である舗装や階段のラインが隠れずに見えます。
ファーストビューにボタンを重ねていない点も特徴です。行動を促す要素を置かず、写真とコピーだけで構成しているため画面が静かにまとまり、下へスクロールする流れが自然に生まれています。
ヘッダーは日本語と英語を2段で表示します
ヘッダーは白い帯で、左に社名ロゴ、中央から右にかけて7つのナビゲーション項目が並びます。各項目は日本語を上、英語を小さく下に置いた2段のラベルになっており、文字数の異なる項目でも高さがそろって見えます。ページを下へスクロールした状態でもヘッダーは画面上部に残るため、どの位置からでも別のページへ移動できます。
右端にはグリーンで塗りつぶした問い合わせボタンが置かれ、封筒のアイコンが添えられています。ほかのナビゲーション項目が黒い文字だけであるのに対し、この一つだけが面で塗られているため、視線が自然にそこへ向かいます。
白を基調にグリーンを差した配色設計
配色は白、黒に近いダークグレー、はっきりとしたグリーンという三色にほぼ絞られています。色数を抑えることで、写真ごとに異なる素材の色、たとえば石の灰色やレンガの赤茶、植栽の緑が画面の中で際立ちます。ここでは色の役割分担と余白の取り方を見ていきます。
グリーンは操作できる場所の合図になっています
グリーンが使われているのは、ヘッダーの問い合わせボタン、各セクションの英字見出し、会社概要と施工実績のボタン、よくあるご質問の丸いQアイコン、フッター最下部の帯、そして右下にある画面上部へ戻る丸いボタンです。読者が押す場所と、セクションの始まりを示す場所に限って使われているため、色そのものが案内の役割を持ちます。
同じグリーンでも濃さを変えている点が丁寧です。ボタンには彩度の高いグリーンを、施工実績のパネル背景や強みの線画イラストには淡いトーンを当てているため、面積の大きい部分でも色が主張しすぎません。
白と余白が写真を引き立てます
セクションとセクションの間には広めの間隔が取られ、背景はほとんどが白のままです。写真カードやパネルが白い面の中に浮かぶように置かれるため、一つひとつの要素が独立して認識できます。装飾的な罫線や影を重ねず、間隔そのもので区切りを作る手法だといえます。
スクロールの順序に沿った情報設計
トップページは、会社の姿勢、できる工事、選ばれる理由、実績、疑問への回答、連絡先という順で並んでいます。初めて訪れた人が抱く疑問の順序に沿っているため、上から読み進めるだけで判断に必要な材料がそろいます。ここからは主要なセクションの作り方を個別に確認します。
お知らせは小さな面積で更新性を示します
ヒーローの直下には、左に「NEWS お知らせ」というラベル、細い縦罫を挟んで右に日付と本文を並べたお知らせ欄があります。日付は細い枠線で囲んだ小さな箱に入っており、本文との区別が一目で付きます。掲載件数が少なくても寂しく見えないよう、面積を抑えたレイアウトにしている点が参考になります。
ごあいさつは写真のコラージュと文章を左右に分けます
ごあいさつのセクションは、左に施工写真3枚、右に見出しと本文を置いた2カラムです。写真は敷石と石積みの外構、レンガの接写、カーポートのある住宅の外構という3種類で、大きさと位置をずらして重ねたコラージュになっています。均等なグリッドに並べるよりも動きが出て、扱う素材の幅が同時に伝わります。
右側は「ごあいさつ」という小さな和文見出しから始まり、太い一文の見出し、3段落の本文、そしてグリーンの会社概要ボタンへと続きます。文字の大きさが段階的に変わるため、視線が上から下へ迷わず流れます。徳島県で長く続くエクステリア工事会社であることや、公共の事業にも関わってきたことが、この位置で語られています。
事業内容は番号付きの写真カードで4領域を並列に見せます
事業内容のセクションでは、正方形に近い写真カードが4枚横並びで配置されています。各カードの右上には01から04までの大きな白い数字、左下には英語表記と日本語の名称が重ねられ、アルミ製品、ブロック製品、造園工事、石材工事という4つの領域が示されます。写真はそれぞれカーポート、石積みの壁、多肉植物のある植栽、積み上げたレンガで、文字を読まなくても内容が想像できます。
4枚を同じ大きさでそろえているため、どれかが主力に見えるといった印象の偏りが生まれません。事業の幅を同格に見せるための構成だと読み取れます。
強みは線画イラストで読みやすくしています
私たちの強みのセクションは中央揃えの見出しから始まり、その下に3つの区画が並びます。それぞれの上部には、輝きの付いた家、レンガとコテ、握手という線画のイラストが置かれ、細い線とグリーンの塗りで統一されています。写真が続いたあとにイラストを挟むことで画面のリズムが変わり、読み疲れを防いでいます。
イラストの下には短い見出しと数行の説明が続きます。長年にわたる実績、公共の事業を通じた景観づくり、一人ひとりに合わせた対応という3点が、それぞれ同じ形式でまとめられています。
施工実績とよくあるご質問で疑問を解消します
施工実績のセクションは、淡いグリーンの大きなパネルの中に一文と緑のボタンを配置した簡潔な作りです。一般の住宅から公共の事業まで幅広く対応しているという説明を置き、詳しい内容は別のページへ渡す設計になっています。
よくあるご質問はアコーディオン形式で、丸いQアイコンと薄いグレーの帯によって質問行が示されます。3件の質問が並び、その中には対応できる工事の内容についての質問も含まれています。開閉式にすることで、必要な人だけが答えを読める構成になっています。
問い合わせまでの導線の作り方
導線は、各セクションの末尾にボタンを1つだけ置く方法と、ページ下部にまとめて連絡先を示す方法の二段構えです。読者が知りたい情報を読み終えた位置に次の行動が置かれるため、迷いが少なくなります。
セクションごとにボタンは1つだけです
ごあいさつには会社概要、施工実績にはその一覧へ進むボタンというように、セクションごとに置かれる誘導は1つに絞られています。同じ画面の中で複数の選択肢を並べないため、次に押す場所が明確です。ボタンには右向きの小さな矢印が添えられ、先へ進む動きが視覚的に示されています。
問い合わせは電話とメールを横並びで示します
ページ下部の問い合わせセクションは、外構の施工写真を背景に敷き、白い半透明のパネルを重ねた構成です。左に大きな英字の見出し、縦罫を挟んで右に短い案内文が並び、その下に電話番号のボタンとメールフォームのボタンが横並びで置かれています。どちらのボタンにもアイコンが付いており、連絡手段の違いが一目で分かります。
背景の写真は石張りの塀や舗装が続く風景で、ここでも施工した空間が画面に残ります。連絡先の案内でありながら、最後まで仕事の中身を見せ続ける作りです。
タイポグラフィとフッターの整理
文字組みは、大きな英字の見出しと小さな和文の見出しを組み合わせる形で統一されています。フッターまで含めて情報の粒度がそろっているため、ページの終わりまで印象が崩れません。
英字見出しと和文サブタイトルの組み合わせ
Service、Our Strengths、Works、FAQ、Contactといった英字の見出しは、丸みのある字形で文字間を広く取って配置されています。その下に「事業内容」「私たちの強み」といった和文が小さく添えられ、意味は日本語が担い、装飾性は英語が担うという役割分担ができています。和文の見出しや小さなラベルにも字間が広めに設定され、全体に落ち着いた印象が生まれます。
フッターは会社情報と関連リンクを左右に分けます
フッターは白い背景で、左に社名ロゴと所在地、電話番号とファクス番号を置き、右には「関連リンク」として建材メーカーのロゴが枠付きのタイルで並びます。ロゴは大きさをそろえて2段に配置され、取り扱う製品の広さが視覚的に伝わります。最下部にはグリーンの帯で著作権表示が置かれ、ページの終わりがはっきり分かります。
画面の右下には、グリーンの丸いボタンでページ上部へ戻る導線が用意されています。縦に長いトップページでも、読み終えた位置からヘッダーの各メニューへすぐに戻れます。
徳島で外構工事の依頼先を探す読者に向けた設計
外構やエクステリアを依頼する側は、仕上がりの好み、対応してもらえる工事の範囲、依頼してからの流れという3点を気にします。このサイトはその3点をそれぞれ別の場所で扱っており、業者を比べるときの情報源として使いやすい構成になっています。
対応できる工事の範囲を早い段階で示します
アルミ製品、ブロック製品、造園工事、石材工事という4つの区分がトップページの上のほうに置かれているため、カーポートのような構造物を探している人も、庭の植栽を相談したい人も、自分の目的に合うかどうかを早く判断できます。事業内容のページではそれぞれの領域がさらに詳しく説明され、カーポートやバルコニー、サンルーム、塀や擁壁、植栽や舗装といった具体的な工事の名前が並びます。
会社概要のページには、設立年や所在地に加えて建設業許可の番号も記載されています。工事を任せる相手を選ぶときに確認したい情報が、一つの表にまとめられています。
依頼から完成までの流れを段階で見せます
施工完了までの流れを紹介するページでは、問い合わせ、現地調査、施工計画と図面の作成、着工、完了と引き渡しという段階が番号付きで並びます。初めて外構工事を頼む人にとって、何が起こるのかを先に把握できることは安心につながります。工程を短い文章で区切って見せる形式は、住宅や建築に関わるサイトで広く応用できます。
まとめ
株式会社トーカンのサイトは、施工した屋外空間の写真を主役に据え、白基調の画面とグリーンの差し色で読みやすさを保ったコーポレートサイトです。写真カードで事業の幅を並列に示し、線画イラストで強みを整理し、各セクションの末尾にボタンを1つだけ置くという設計が、最後の問い合わせまで一本の線でつながっています。
徳島県板野郡上板町に本社を構え、住宅の外構から公共の空間まで手がけてきた会社の姿勢が、派手な演出ではなく素材の写真と余白によって表現されています。外構やエクステリアを紹介するサイトを作るときの見本として、情報の並べ方と色の使い方の両面で参考になります。
実際の画面の質感やスクロールしたときの流れは、公式サイトで見ると理解しやすくなります。徳島でカーポートの設置や外構工事を手がける株式会社トーカンの公式サイトもあわせてご覧ください。
