APOLLONは、長崎県諫早市多良見町に拠点を置き、外構工事とエクステリア工事を手がけている会社です。公式サイトは白地に朱色寄りのオレンジと淡いピーチ色を重ねた暖かな配色で、硬い印象になりがちな工事会社のサイトを、住まいの話題として親しみやすく見せています。
本記事では、このサイトのファーストビュー、配色、写真の扱い、動画やブログの見せ方、問い合わせまでの導線を順に分析します。諫早市で外構工事の依頼先を探している方や、住宅系のWebデザインの参考例を集めている方に向けて、画面から読み取れる工夫を具体的に整理しました。
結論：家のかたちと暖色でまとめた、やわらかな外構工事サイトです
結論から述べると、APOLLONのサイトは「家のシルエット」を繰り返し使うモチーフと、オレンジとピーチの2色に絞った配色によって、全体に一貫した温かみを持たせています。外構という専門的な分野を扱いながら、見る人が構えずに読み進められる雰囲気づくりに成功しています。
もう一つの特徴は、問い合わせの入口を目に付く位置に置きつつ、各セクションの終わりに詳細ページへのボタンを用意している点です。トップページが目次の役割を果たし、関心を持った項目から下層へ進める構成になっています。以下では、その具体的な設計を要素ごとに見ていきます。
ファーストビューは写真とずらして重ねたコピーで印象を作ります
ファーストビューでは、大きな建築写真と日本語のキャッチコピーを重ね合わせ、サイトの世界観を最初の画面で伝えています。ここでは、写真とコピーの重ね方、問い合わせのバッジ、ヘッダーの情報配置の3つに分けて解説します。
写真と白い余白をまたぐコピーの配置
画面の左側およそ3分の2には、芝生の庭と大きなガラス窓を備えた白い住宅の写真が配置されています。写真の右側は白い余白と縦長のピーチ色の帯に分かれており、写真を画面いっぱいに広げない構成が落ち着いた余裕を感じさせます。
キャッチコピーの「暮らしに寄り添う」「やさしい住まいへ」は、淡い色の帯の上に字間を大きく広げて置かれています。2行目を右へずらし、写真と余白の境界をまたがせているため、視線が左上から右下へ自然に流れます。1行目の上には「CREATING THE IDEAL HOME」という英字が淡い色で重ねられ、主張しすぎない装飾として奥行きを加えています。
吹き出し型のオレンジの問い合わせバッジ
コピーの右上には、封筒のアイコンと点線を組み合わせたオレンジ色の円形バッジがあり、「お問い合わせはこちら」の文字が白い太字で記されています。左下に向けて小さなしっぽが付いた吹き出しの形をしているため、写真の住まいが語りかけているような親しみやすさが生まれています。
淡い色が中心のファーストビューの中で、このバッジだけが濃いオレンジで塗られているため、最初に目に入る要素として働いています。装飾とボタンの役割を兼ねた見せ方で、住宅系のサイトで取り入れやすい手法です。
ヘッダーに並ぶロゴ・電話番号・メニュー
ヘッダーの左端には「APOLLON」のロゴがあり、頭文字の「A」だけをオレンジにして、残りの文字を濃いグレーで組んでいます。ブランドカラーをロゴの一文字に集約することで、サイト全体の配色ルールを冒頭で示しています。
右側には電話番号が大きめの数字で表示され、その隣に角の丸いオレンジのボタンが並びます。その下には、ホーム、当社の強み、サービス内容、施工実績、よくある質問など9項目のメニューが、字間を広げた文字で静かに整列しています。さらにファーストビューの右下には、電話番号と営業時間、定休日、紙飛行機のアイコンを添えた問い合わせボタンをひとまとめにしたバーも見えます。
配色とタイポグラフィは「暖かさ」と「読みやすさ」を両立しています
サイト全体の色は、白、朱色寄りのオレンジ、淡いピーチ色、濃いグレーの文字色でほぼ構成されています。色数を絞ったうえで役割を明確に分けている点が、このサイトのまとまりを支えています。
オレンジはボタンと見出しに限定した差し色
画面から色を拾うと、ボタンやバッジのオレンジは#F6622B前後、背景に使われるピーチ色は#FCF0E7前後の値でした。オレンジは問い合わせボタン、各セクションの「〇〇へ」ボタン、見出しの下の短い線、一部の見出し文字、ブログの日付などに使われ、押せる場所や区切りを示す差し色として一貫しています。
ピーチ色は「ご紹介」「サービス内容」「よくある質問」の背景やフッターの背景に広く敷かれ、白いセクションと交互に現れます。白とピーチが切り替わることで、縦に長いトップページでも内容の区切りが自然に伝わります。
字間を広げた細身のゴシック体
見出しには線の細いゴシック体が使われ、字間を広めに取って配置されています。「ご紹介」「アニメーション」「施工実績」などの中央揃えの見出しには、その下に短いオレンジの線と小さな説明文が添えられ、見出し・線・説明文の3段の組み合わせがページ全体で繰り返されています。
一方で「当社の強み」「サービス内容」「コラム」といった左揃えの見出しは、文字そのものをオレンジにして強調しています。中央揃えと左揃えで見出しの装飾を変えているため、単調にならずにリズムが生まれています。本文は行間を広めに取った小さめの文字で、落ち着いて読める組み方です。
家のかたちに切り抜いた写真が、外構工事のイメージを伝えます
写真の扱いは、このサイトのデザインで最も個性が表れている部分です。完成後の暮らしを想像させる写真と、実際の工事を伝える写真を場面ごとに使い分けています。
三角屋根のシルエットで写真をトリミング
「当社の強み」と「代表あいさつ」のセクションでは、写真の上辺を三角屋根の形に切り抜き、家のシルエットとして見せています。右側の文章エリアも同じ屋根形のピーチ色のグラデーションで囲まれており、左右に2軒の家が並んでいるような構図です。
「当社の強み」の写真は、木目の軒天に照明がともる夕景の玄関まわりで、照らされた床面が外構の完成イメージを印象的に伝えています。「代表あいさつ」では、ウッドデッキのある庭で書類を手に指さす人物の写真が使われ、打ち合わせの場面を想像させます。「サービス内容」と「よくある質問」でも同じ屋根形の切り抜きが繰り返され、2枚の写真を上下にずらして並べることで画面に動きを加えています。
施工実績は現場の写真を横一列で紹介
「施工実績」のセクションでは、フェンス、門扉、芝生の庭とウッドデッキなどを写した写真が横一列に並び、それぞれの下に「リフォーム」「新築外構工事」といった工事の区分が添えられています。写真の列の左右の端には、小さなオレンジの矢印が表示されています。
ファーストビューなどの洗練された建築写真に対し、この欄はサイトが実際に手がけた工事として紹介している写真で構成されています。雰囲気を伝える写真と実例を伝える写真を役割で分けることで、見た目の印象と具体性の両方を確保しています。
アニメーション動画とブログで情報を届ける構成です
トップページの中盤には、動画、ブログ、コラムという性格の異なる情報発信の欄がまとまっています。いずれも大きな埋め込みやカード型の一覧で整理され、文字情報だけに頼らない見せ方が工夫されています。
漫画風のアニメーション動画を大きく掲載
「アニメーション」のセクションには、YouTubeの動画が大きく1本、その下に小さく2本並べて埋め込まれています。サムネイルは漫画風のイラストで描かれ、上下に緑、オレンジ、青の帯を配して、動画ごとのテーマがひと目でわかるようになっています。
大きな動画のサムネイルでは、カーポートと駐車場をあわせて計画する話題が取り上げられ、暑さや雨の日の乗り降りに悩む人物と、完成したカーポートを前に笑顔を見せる2人が対比的に描かれています。工事前後の変化を物語として伝える手法は、外構工事の効果をイメージしにくい読み手にとって理解の助けになります。動画の下には「もっと見る」と書かれたオレンジのボタンが置かれています。
ぼかし背景のブログとカード型のコラム
「ブログ」のセクションでは、住宅の写真を大きくぼかして背景に敷き、その上に白いカードを2列2段で並べています。カードには影が付けられ、オレンジの日付と記事タイトルが収まっているため、背景の写真と記事の情報がはっきり分かれて読めます。一覧には、カーポートの施工例や大村市で行った外構工事を紹介する記事が並んでいます。
「コラム」のセクションはレイアウトを変え、左に見出しと説明文、右に3枚のカードを並べる構成です。中央のカードだけ背景がピーチ色になっており、各カードの右下にはオレンジの丸い矢印アイコンが配置されています。同じ記事一覧でもブログとコラムで見せ方を変えることで、スクロールしても飽きにくい流れになっています。
視線誘導と導線は各セクションの「次の一歩」まで設計されています
このサイトの導線は、読み終えた位置から問い合わせや詳細ページへ移れるように組み立てられています。ボタンのデザインを統一していることが、迷いにくい操作感につながっています。
角の丸いオレンジのボタンで統一
「当社の強みへ」「ブログへ」「施工実績へ」「当社の特徴へ」「会社概要へ」など、各セクションの締めくくりには角の丸いオレンジのボタンが置かれています。形と色がすべてそろっているため、読み手は一度覚えた見た目を手がかりに、関心のある項目の詳細ページへ進めます。
ボタンの位置も、中央揃えのセクションでは中央に、左右に分かれたセクションでは文章側の下にと、レイアウトに合わせて調整されています。文章を読み終えたところにちょうどボタンがあるため、視線の流れを途切れさせません。
写真と重なる「当社の特徴」と地図付きの会社概要
終盤の「当社の特徴」では、テラスのある住宅の写真を横幅いっぱいに敷き、その下端にピーチ色のボックスを重ねています。ボックスの上下には細い線が引かれ、冒頭の「ご紹介」と同じ枠の形を使うことで、ページの前半と後半が呼応するようにまとめています。
「会社概要」のセクションでは、社名をオレンジで示したあとに、電話番号、所在地、営業時間、定休日を細い罫線で区切った表で掲載し、その下にGoogleマップを大きく埋め込んでいます。フッターはピーチ色の背景に各ページへのリンクを横に並べ、中央にロゴを置いたすっきりとした構成です。
外構工事の会社サイトで参考にしたいポイント
APOLLONのサイトからは、外構工事やエクステリア工事を扱う会社がWebサイトを作る際に応用できる工夫がいくつも読み取れます。特に参考になる点を整理します。
- 業種と結び付く家のシルエットを写真の切り抜きに使い、サイト全体の印象をそろえています。
- 差し色をオレンジ1色に絞り、ボタンや見出しの線など操作する場所と区切りにだけ使っています。
- 雰囲気を伝える建築写真と、実際の施工写真を役割で分けて配置しています。
- 工事前後の変化を漫画風の動画で見せ、完成後の暮らしを想像しやすくしています。
- 各セクションの最後に同じ形のボタンを置き、詳細ページへの入口をそろえています。
外構工事は、完成するまで仕上がりを想像しにくい分野です。カーポートや駐車場のように毎日の使い勝手に関わる工事では、車の出し入れや雨の日の動き方までイメージできる情報が求められます。写真、動画、記事を組み合わせて多角的に伝えるこのサイトの構成は、諫早市や大村市で外構工事を検討する読み手の関心にも沿ったものといえます。
APOLLONの紹介とまとめ
APOLLONは、長崎県諫早市多良見町佐瀬に拠点を置き、外構工事とエクステリア工事を請け負っている会社です。サイトでは、多良見町を拠点に県南地区からの依頼を受けていることが案内されており、相談から計画、施工までを一貫して担う姿勢が示されています。特徴のページには外構工事、エクステリア、駐車場、フェンス、庭の各項目があり、個人のお客様だけでなく法人からの相談も歓迎しています。
駐車場のページでは、カーポートを設置する際に駐車場全体の配置もあわせて考え、屋根や柱の位置、玄関までの歩く距離まで踏まえて計画する考え方が紹介されています。ブログでは、大村市で設置したY型のカーポートや、後方に柱を設けたカーポートの施工例も取り上げられています。営業時間は8:00～19:00で年中無休と案内されており、運営者情報には代表として前田 鉄郎様の名前が記されています。
家のかたちを生かした写真の切り抜き、暖色で統一した配色、動画を交えた情報発信によって、住まいに寄り添う雰囲気を画面全体で表現したサイトです。住宅や外構に関わる業種のWebデザインを探している方にとって、配色と写真の使い方の好例として参考になります。
