安謙産業株式会社の公式サイトは、建物の解体と産業廃棄物の収集運搬という現場の仕事を、大きな写真と縦一列の素直な流れで伝えるコーポレートサイトです。凝った演出を積み重ねるのではなく、現場で撮影した写真の面積を広く取り、説明の文章は短く添える構成にしているため、何を手がけている会社なのかが最初の画面から伝わります。
この記事では、岐阜県羽島市に本社を置く安謙産業株式会社のサイトを題材に、配色やファーストビュー、情報設計、UI/UXの観点からデザインを読み解きます。解体や産廃の収集運搬のように、仕事の中身が外から見えにくい業種のサイトを考えている方にとって、参考にできる工夫が多く含まれています。
ファーストビューは社名の視認性と現場の空気で組み立てられています
このサイトのファーストビューは、「どこの会社か」と「何をしている会社か」の二点だけに役割を絞っています。飾りの多いキャッチコピーを重ねず、社名の帯と一枚の現場写真という二段構えで、訪問した直後の理解をつくっている点が特徴です。ここでは、その二段構えを支える色づかいと写真選びを見ていきます。
淡い黄色の帯と青いロゴマークで社名を際立たせています
画面の最上部には濃紺の細い線が引かれ、その下の白い余白に右寄せでグローバルナビが並びます。ナビの項目は縦線で区切られ、文字サイズも控えめに抑えられているため、視線は止まりすぎずに下へ流れていきます。
続く帯は角の丸い淡い黄色で塗られ、中央に青い円形のロゴマークと、黒く太い書体の社名が置かれています。淡い黄色は面積が広くても目に刺さらず、黒い文字と青いロゴを引き立てる下地として働きます。社名を画像のように大きく扱う手法は、社名そのものを覚えてもらいたい会社のサイトで効果を発揮します。
空を見上げた現場写真が業種を一目で説明しています
ヒーロー部分には、青空を背景に高所作業車のアームと鉄骨の構造物を見上げた写真が全幅で配置されています。空の青が画面の大半を占めるため写真としての情報量は多くありませんが、そのぶん機材の赤いアームと鉄骨のシルエットが際立ちます。
写真の上に文字を重ねず、画像だけで見せているので、業種の説明を読む前に「高い場所や大きな構造物を扱う仕事」という印象が先に届きます。ロゴ帯の黄色と空の青が隣り合うことで、色のコントラストも自然に生まれています。
「ここがポイント！」のグリッドが強みを整理しています
ファーストビューの直後には、赤い文字の見出し「ここがポイント！」が置かれ、会社の特徴が四つにまとめられています。訪問者が最初に知りたい「何ができる会社か」に対して、写真つきで短く答える設計です。ここでは並べ方と文章量の抑え方に注目します。
2列2段のグリッドで項目を四つに絞り込んでいます
四つの項目は2列2段のグリッドで配置され、それぞれ写真の下に見出しと二行程度の説明文が続きます。内容は解体と改修およびアスベストの調査と除去、付帯工事への対応、現場管理の体制、社内教育の取り組みで構成されています。
数を四つに絞っているため、スクロールを一度止めるだけで全体を見渡せます。強みを十個並べるよりも、写真を添えて四つに絞るほうが記憶に残りやすく、この判断はページ全体の軽さにもつながっています。
写真と短い文章の組み合わせで読む負担を下げています
各項目の説明文は簡潔で、読点でつないだ長い文章にはなっていません。見出しの先頭に中黒を置いて箇条書きのように見せているため、拾い読みでも内容をつかめます。
写真は実際の作業風景や社用車、重機を写したもので、素材集の画像では出せない具体性があります。文字で説明しきれない部分を写真に任せる考え方は、現場仕事を扱うサイト全般に応用できます。
背景色の切り替えでセクションの区切りを示しています
このサイトは一枚の長いページに情報をまとめる構成ですが、読み進めても現在地を見失いにくく作られています。背景色と見出し色のルールが最後まで崩れないためです。ここでは色によるリズムのつくり方を確認します。
赤い見出しがページ全体の目印になっています
セクションの見出しは、ポイント紹介、ご挨拶、サービスのご案内、会社概要、お問い合わせ、最新情報のいずれも赤系の色で中央にそろえられています。色と位置をそろえることで、スクロール中でも見出しを見落としにくくなります。
本文は落ち着いた濃いグレーで組まれているため、赤の見出しだけが浮き上がって見えます。使う色を絞り、強調色を見出しに限定する運用は、情報量が多いページほど効果を発揮します。
白と淡い水色を交互に敷いて場面を切り替えています
セクションの背景は、白と淡い水色が交互に切り替わります。ご挨拶とお問い合わせの領域が淡い水色、ポイント紹介やサービス紹介、会社概要が白という配分で、太い区切り線を引かなくても場面の変わり目が分かります。
水色は青いロゴマークと同系統の色なので、全体のトーンからも外れません。線を多用せずに背景色で区切る方法は、縦に長いページを軽く見せる手段として有効です。
ご挨拶とサービス紹介では見せ方の狙いを変えています
会社の姿勢を伝えるご挨拶と、仕事の内容を伝えるサービス紹介では、レイアウトの目的が分けられています。前者は文章を落ち着いて読ませるための構成、後者は写真を主役にして視線を動かすための構成です。順番に見ていきます。
ご挨拶は白いパネルと大きなロゴの対比で見せています
ご挨拶の領域では、淡い水色の背景の左側に白いパネルを置いて挨拶文を収め、右側に円形のロゴマークを大きく配置しています。ロゴを画面からはみ出すほど大きく扱っているため、文章量のわりに堅苦しく見えません。
文中では社名の由来が中央ぞろえで数行に分けて示され、安全と安心、謙虚にあたる語だけが青い太字で強調されています。長い文章の中に短い縦の塊を差し込むことで、読み手の視線がいったん止まる作りです。文末には代表取締役の浅野 徹様の名前が右寄せで置かれ、挨拶文としての体裁が整えられています。
サービス紹介は写真とテキストを左右交互に入れ替えています
サービスのご案内では、総合建物解体業と産業廃棄物収集運搬業、機械器具設置および土木工事全般という三つの事業が縦に並びます。一つ目は写真が左でテキストが右、二つ目は逆というように、左右の配置を交互に入れ替えている点が特徴です。
同じ形の箱が続くと読み飛ばされやすくなりますが、配置を交互にすると視線が左右に振られ、次の項目へ自然に移動します。項目の間には細い破線が引かれ、区切りが分かるようにも配慮されています。写真は解体中の建物、荷台を上げた回収用トラック、鉄筋を組んだ基礎の工事など、それぞれの事業の内容がそのまま写ったものが選ばれています。
会社概要と問い合わせの領域は確認しやすさを優先しています
写真で見せる部分が続いた後半には、情報を正確に確かめるための領域が用意されています。装飾よりも読み取りやすさを優先した作りで、依頼先を検討している訪問者に向いた設計です。表組みと連絡先の並べ方を見ていきます。
2列の表で項目名と内容を整理しています
会社概要は、左の列に項目名、右の列に内容を置いた表でまとめられています。左の列にはごく薄いクリーム色が敷かれ、右の列の白と区別されているため、行数が多くても視線が迷いません。電話番号とファクス番号だけが赤い太字になっており、連絡先を探しやすくしています。営業時間や定休日、業務内容までを一枚の表で確認できます。
表の最終行には、建設業の許可番号と、産業廃棄物収集運搬業の許可証へのリンクが並びます。許可証は愛知県、岐阜県、三重県のそれぞれについて用意され、別のウィンドウでPDFが開くと注記されています。裏づけとなる書類にその場でたどり着ける状態は、説明の文章よりも安心につながる部分です。
問い合わせの領域は文字情報を素直に並べています
お問い合わせの領域では、社名、電話番号、受付時間、定休日、住所、メールアドレスがテキストで縦に並びます。入力フォームを置かず、電話とメールで受け付ける形を素直に示した構成です。
最後に相談を促す短い一文とスタッフからの言葉が添えられ、事務的になりすぎない印象を残しています。連絡手段を一か所にまとめておくと、ページを行き来せずに問い合わせへ進めます。
長いページを回遊しやすくするUIの工夫を確認します
一枚のページが長くなるほど、読み手は現在位置を見失いやすくなります。このサイトでは、戻るための操作とページ内の入口を複数用意することで、その弱点を補っています。画面で確認できる要素を挙げます。
各セクションの末尾に「ページトップに戻る」を置いています
ご挨拶、サービスのご案内、会社概要、最新情報といった区切りごとに、右寄せでグレーの「ページトップに戻る」ボタンが繰り返し配置されています。上向きの矢印が添えられているため、押したときの動きが直感的に分かります。
常時表示の丸いボタンを画面の隅に固定する方法もありますが、区切りごとに置く形なら写真の邪魔をしません。縦に長いページで、読み終えた区切りごとに戻る手段を用意する考え方は取り入れやすい工夫です。
グローバルナビとフッターの二か所から入れます
ページ上部のグローバルナビには、ご挨拶、サービスのご案内、会社概要、お問い合わせの四項目が並びます。同じ項目はフッターにも二列で置かれ、最後まで読んだ後に別のセクションへ戻れます。
フッターの背景はクリーム色で、その下に濃紺の帯を敷いて著作権表示を白抜きで見せています。ヘッダー最上部の濃紺と呼応する配色になっており、ページの始まりと終わりが視覚的に閉じられています。フッターにはインスタグラムへのリンクも置かれ、写真で日々の様子を見せる導線が用意されています。
更新履歴の並べ方が会社の歩みを示しています
ページの終盤には、日付と更新内容を並べた最新情報のリストがあります。一行ごとに細い罫線で区切られ、日付が左端にそろえられているため、時系列を追いやすい形式です。ここでは掲載の意図を読み取ります。
許可の取得を時系列で確認できます
リストには、会社の設立や建設業の許可証の取得、収集運搬業の許可証を県ごとに取得したことが並んでいます。日付が添えられているので、どの段階でどの許可を得たのかが一目で分かります。
お知らせ欄を近況の告知だけに使わず、事業の節目を残す場所として運用している点が参考になります。更新が滞っているように見えるのを防ぐ意味でも、こうした記録を残す使い方は有効です。
解体や産廃の収集運搬を扱うサイトで参考になる考え方をまとめます
ここまで見てきた工夫は、同じ業種のサイトを検討するときにも応用できます。実務の中身が外から見えにくい業種では、何を写真で見せ、何を文字で残すかの切り分けが読みやすさを左右します。一般的な観点を二つ挙げます。
許可に関する情報へたどり着けるようにしておきます
建物の解体や産業廃棄物の収集運搬は、行政の許可を受けて行う仕事です。依頼を検討する側は、どの許可を持っているのかを確かめたいと考えます。会社概要の中に許可番号や許可証への導線を置いておくと、問い合わせをする前に自分で確認できます。
掲載するときは、番号を並べるだけでなく書類そのものを開ける形にしたほうが納得を得やすくなります。開き方をあらかじめ注記しておくと、リンクを押したときの動きも予想しやすくなります。
現場写真を主役に置いて仕事の様子を伝えます
解体や収集運搬の仕事は、完成した建物を見せる業種とは違い、作業の過程そのものが仕事ぶりを語ります。重機の扱い方、現場の整い方、車両の状態といった要素は、文章よりも写真のほうが早く伝わります。
そのため写真は素材集ではなく自社の現場で撮ったものを使い、説明文は写真から分からない部分だけに絞るのが効果的です。安謙産業株式会社のサイトは、この配分を最後まで守っている点で参考になります。
まとめ：写真と素直な構成で事業内容を伝えるサイトです
安謙産業株式会社の公式サイトは、社名を大きく見せる帯、現場写真を主役にしたヒーローとサービス紹介、赤い見出しと背景色の切り替えによる区切り、そして表で整理した会社概要という要素が、一貫したルールでまとまっています。装飾を増やさずに情報を積み上げる構成は、事業の内容を正確に伝えたい会社のサイトづくりで参考になります。
岐阜県羽島市に本社を置き、建物の解体から産業廃棄物の収集運搬、機械器具設置や土木工事まで手がける会社の姿勢が、写真と短い文章の積み重ねから読み取れます。デザインの見本としても、事業内容の確認先としても見どころのあるサイトです。
画面の構成や現場写真の使い方は、羽島市で産廃の収集運搬業者としての取り組みを紹介する安謙産業株式会社の公式サイトでご確認いただけます。
