株式会社 創技建の公式サイトは、黒と白だけで画面全体を組み立て、施工写真の色を主役に据えたコーポレートサイトです。鳥取市を拠点に外構工事・エクステリア工事・基礎工事を手がける会社の姿勢を、装飾を足すのではなく、広い余白と明朝体の見出しで静かに伝えています。
この記事では、Webデザインの見本を探している方に向けて、配色・タイポグラフィ・レイアウト・導線設計を、実際の画面から読み取れる範囲で整理します。工事や施工を扱う会社のサイトを落ち着いたトーンでまとめたい場合に、参考にしやすい作りです。
黒と白だけで組み立てたトーン＆マナー
このサイトの第一印象を決めているのは、彩度を抑えたモノトーンの設計です。背景は黒か白のどちらかに絞られ、文字も白と黒が中心で、画面の中に色数を増やす要素をほとんど置いていません。その結果、写真や余白のわずかな差が際立ち、全体に引き締まった空気が生まれています。
ファーストビューは白抜きの欧文コピーと現場写真
最上部は、白抜きの大きなセリフ体で「CREATE THE FUTURE」と置き、その下に日本語のコピーと取り扱う工事の種類を小さく添える二段構えです。背景にはモノクロに調整した施工中の写真が敷かれ、左側は黒へなだらかに溶け込むため、文字が写真に負けずに読み取れます。
写真の中では職人が身をかがめて手元の作業に向き合っており、完成した外観ではなく作業そのものを最初に見せる選び方になっています。人物の視線と体の向きが画面の下方向へ流れるので、そのまま次のセクションへ目線が送られる点も理にかなっています。
黒と白のセクションを交互に重ねるリズム
ページを下へ進むと、黒地の更新情報、白地の会社概要、黒地の問いかけ、白地の施工事例、黒地のフッターという順で、背景色が交互に切り替わります。区切り線や装飾で仕切るのではなく、地の色を反転させることでセクションの境目を示す組み立てです。
この方法は、縦に長い一枚のトップページの中で、どこまでが一つの話題なのかを直感的に伝えられます。黒が続きすぎないように白い面が挟まるので、重さも出すぎず、最後まで読み進めやすい流れになっています。
施工写真だけに色を置いた事例セクション
モノトーンで統一した画面の中で、唯一まとまった色が現れるのが施工事例のセクションです。色を我慢した画面設計の効果がもっとも分かりやすく表れている部分で、並んだ写真が自然と視線を集めます。
三列のカードを反復して工事の種類を並べる
施工事例は、外構工事・エクステリア工事・基礎工事の三つを横並びのカードで見せています。どのカードも、写真、見出し、中黒付きの箇条書き、短い説明文、ボタンという同じ順序で構成され、要素の高さもそろえられています。
並べ方をそろえると、読者は各カードを同じ手順で読み進められるため、三つの違いを見比べやすくなります。箇条書きは工事の名称だけを短く並べ、説明文も二行に収めてあるので、視線が横方向に移っても情報量に差が出ません。
淡いグレーの面が写真を引き締める
三列のカードは、白い背景の上に敷かれた淡いグレーの面の中に収められています。白背景に写真を直接置くよりも、いったんグレーの台に載せたほうが、写真の明るい部分と地色が混ざらず、輪郭がはっきりと見えます。
ボタンは黒く塗りつぶし、白抜きの文字を入れた形です。周囲がグレーの面であるぶん、黒いボタンだけが強いコントラストを持ち、次に押す場所が迷わず分かる配置になっています。
見出しとボタンに一貫した型を持たせた画面設計
このサイトは、セクションごとに見せ方を変えるのではなく、同じ型を繰り返すことで統一感を作っています。型が決まっていると、読者は初めて見るセクションでも構造を予測でき、内容そのものの理解に集中できます。
欧文と和文と細い罫線を組み合わせた見出し
各セクションの見出しは、大きな欧文をセリフ体で置き、その右隣に日本語の小さな見出しを添え、下に細い横罫を一本引く形でそろえられています。ABOUTには会社概要、WORKSには施工事例というように、欧文だけでは伝わりにくい内容を和文が補う関係になっています。
罫線は見出しの幅より少し長く伸ばしてあり、線の細さも一定なので、装飾というより文章の区切り記号として働いています。フッターの小見出しにも同じ短い下線が使われており、細部までルールが守られています。
方向を示す記号を添えたボタン
ページ内のボタンは、細い枠線に文字を置いた形と、黒く塗りつぶした形の二種類に整理されています。黒地のセクションでは白い枠線のボタン、写真を並べたグレーの面では黒いボタンというように、背景に応じて使い分けられています。
いずれのボタンにも文字の後ろに小さな山形の記号が添えられ、押した先へ進むという動きが視覚的に示されています。角は丸めずに直角のまま残されており、明朝体の見出しと同じく硬質な印象を保っています。
読者の関心から施工事例へつなぐ情報設計
トップページは、会社の説明を長く続けるのではなく、読者側の関心を先に置いてから施工事例へ渡す流れで組まれています。訪問した人が、自分に関係のあるサイトかどうかを早い段階で判断できる構成です。
最初に置かれた更新情報の一覧
ファーストビューの直後には更新情報の一覧が置かれ、一件ごとに日付、種類を示す枠線付きのラベル、見出し、右端のサムネイル画像が横一列に並びます。行と行の間は細い罫線で区切られ、日付の列と本文の列の間にも縦の線が入るため、視線が迷いません。
ラベルの枠線には黄緑がかった細い線が使われ、白と黒だけの画面にごくわずかな色味を足しています。一覧の下には続きへ進むボタンが中央に置かれ、更新の履歴をまとめて確認できるようになっています。
グローバルナビゲーションとページ構成
画面上部には、TOP、SERVICE、ABOUT、CONTACT、NEWS、FAQという六つの項目が横一列に並びます。項目名を欧文の大文字にそろえ、間隔を広めに取っているため、黒い帯の上でも一つひとつが読み取りやすくなっています。
下層には、事業内容や会社案内、問い合わせフォーム、よくある質問に加えて、外構工事・エクステリア工事・基礎工事それぞれの施工一覧ページが用意されています。トップページのカードから該当するページへ直接進める形です。
問いかけのセクションから事例への流れ
会社概要の後には、黒地の上で読者の困りごとを問いかけるセクションが置かれています。チェック記号を先頭に付けた短い箇条書きが縦に並び、カーポートの見た目や変形地への対応、引き渡し後の対応といった関心事が拾い上げられています。
右側には、うつむいて座る人物が灰色の立体イラストで描かれ、写真を使わずに悩んでいる状態を表現しています。モノトーンの方針を崩さずに感情を伝えられるため、黒い背景から浮かずになじんでいます。読み終えた先には詳細ページへのボタンが置かれ、そのまま施工事例のセクションへと視線が続きます。
会社情報と問い合わせ導線のまとめ方
ページの最後は、黒地のフッターに情報を集約する形で締めくくられています。縦の細い罫線で三つの列に分け、それぞれの列が担う役割をはっきりと分けている点が特徴です。
線画のアイコンを添えた会社情報
中央の列では、所在地、電話番号、営業時間、定休日が縦に並び、それぞれの左側に地図ピンや受話器、時計、カレンダーの線画アイコンが添えられています。アイコンは白い細線だけで描かれ、文字と同じ太さの印象にそろえてあります。
左の列にはヘッダーと同じロゴが再び置かれ、その下に事業の領域と設計から施工までを一貫して担う姿勢を示す二行の文が続きます。ページの最上部と最下部で同じロゴを見せることで、長いスクロールの終わりに社名を印象づける作りです。
問い合わせとInstagramへの出口
右の列は問い合わせの案内で、封筒のアイコンを添えた枠線ボタンからフォームへ進めます。フォームのページでは、氏名や連絡先に加えて、相談したい工事の種類を選ぶ項目が用意されており、何を書けばよいか迷いにくい構成になっています。
その下にはInstagramのアイコンとテキストリンクが並び、施工の様子を発信している場所へも出口が設けられています。また、画面の右側にはチャット形式の相談ウィンドウが開いた状態で表示され、用意された選択肢から相談を始められるようになっています。
鳥取市で外構・エクステリア・基礎工事を手がける創技建
ここまで見てきたとおり、このサイトはモノトーンの画面と明朝体の見出しで落ち着いた印象を作り、色を施工写真だけに集中させることで、工事の仕上がりを主役に据えたデザインでした。装飾を増やさず、情報の並べ方と余白の取り方で伝えている点が、同じ業種のサイトを考えるうえでの見本になります。
運営しているのは、鳥取県鳥取市賀露町南に事務所を構える株式会社 創技建です。会社概要のページでは2021年の創設と記され、代表取締役の野藤 大輝様が、一人ひとりの要望に寄り添った丁寧な施工を心掛ける姿勢を挨拶文で述べています。従業員は8名、平均年齢は27歳と紹介されています。
手がけているのは、土間コンクリートや芝張り、ブロックやタイル、インターロッキングといった外構の工事に加え、カーポートやフェンス、物置、ウッドデッキやテラスなどのエクステリア工事です。さらに、住宅やガレージ、物置の基礎工事にも対応し、3DCADで完成イメージを事前に確認できる進め方を強みとして挙げています。対応する地域は、鳥取市を中心とした鳥取県内の各地と記載されています。
モノトーンでまとめたサイトの作り方や、施工事例の見せ方を実際の画面で確かめたい方は、鳥取市でガレージの基礎工事まで手がける創技建の公式サイトをご覧ください。
