株式会社ACEのWebサイトは、紺と白を軸にした色数の少ない配色に、英字ラベルと日本語の小見出しを組み合わせた見出しの型を全編で繰り返すことで、専門的な内容でも読み進めやすい画面に整えています。建設現場の業務をデジタル化するという説明の難しいテーマを、写真とテキストの役割分担で解きほぐしている点が見どころです。
ここでは、埼玉県ふじみ野市に事務所を構え、建築・建設会社に向けて業務改善のツール開発やAI導入の支援を行う同社のサイトを、Webデザインの見本として読み解きます。配色、ファーストビュー、写真の扱い、余白、視線誘導、ボタンの形まで、制作の参考になる部分を順番に見ていきます。
紺と淡いグレーに絞った配色が生む落ち着いた第一印象
このサイトの印象を決めているのは、思い切って色数を絞った配色です。濃い紺、淡い紫みを帯びたグレー、白の三色で画面のほとんどを構成し、写真以外の場所には鮮やかな色をほとんど持ち込んでいません。ここではファーストビューの作りと、全体のトーンの支え方に分けて確認します。
ファーストビューは青い写真の上に見出しを重ねています
画面の最上部には、青い服の人物がタブレットを操作し、その周囲にグラフや地図のグラフィックが浮かぶ写真を大きく敷いています。写真の中央には白い文字で日本語の見出しを二行、その下に一段小さな補足を二行重ね、背景との明度差だけで文字を読ませています。
写真の上には縦方向の細い白線が等間隔で引かれ、画面をいくつかの列に区切っています。中央のやや下には縦組みで「Scroll」と記された文字と短い縦線が置かれ、続きが下にあることを控えめに知らせています。
淡い紫グレーが離れたパーツを結び付けています
ヘッダー左端の電話の枠、悩みを並べたパネルのアイコン部分、記事カードの下地、ページ下部の問い合わせ枠など、淡い紫みを帯びたグレーが繰り返し登場します。この一色が画面のあちこちに散らばるパーツを結び付け、縦に長いページ全体へ共通のトーンを与えています。
一方で、メールでの連絡に関わる部分にはより濃い紺を当て、同じ並びの中でも役割の違いが色で分かるようにしています。彩度を抑えたまま濃淡だけで差を作る方法は、堅実さが求められる企業のサイトで扱いやすい手法です。
英字ラベルと日本語小見出しでそろえたセクション設計
情報設計の面で目を引くのは、セクションの入り口を必ず同じ形にそろえている点です。読み手はページを下るほど型に慣れ、いま何の話題を読んでいるのかを迷わず把握できます。ここでは見出しの型と、セクション末尾に置かれた導線に分けて見ていきます。
見出しはラベルと日本語の二段組みで繰り返されます
ABOUT US、SERVICES、WORKS、STAFF、FAQ、CONTENTS、ACCESSと、各セクションの先頭には字間を広くとったセリフ体の英字が中央に置かれ、その真下へ小さな日本語のラベルが添えられます。英字の左右には細い横罫線が伸び、見出しが一本の帯のように画面を横切ります。
英字だけでは意味が伝わりにくい部分を日本語が補い、日本語だけでは単調になりがちな見出しに英字が表情を加えています。同じ型を七回繰り返しているため、装飾を足さなくてもページにリズムが生まれています。
各セクションの終わりに角丸のボタンを一つだけ置いています
どのセクションも、短い説明文の後に細い線で描いた角丸のボタンを中央へ一つだけ置いて締めくくります。トップページでは概要だけを読ませ、詳しく知りたい読み手だけが下層ページへ進む形になっているため、一画面あたりの情報量が膨らみすぎません。
ボタンは面を塗りつぶさず線だけで表現されており、白地の上でも写真の上でも浮きすぎません。ボタンの中の言葉はセクション名と同じ短い語にそろえられ、進んだ先で何が読めるのかが分かるようになっています。
写真とレイアウトを使い分けたコンテンツの見せ方
企業向けサービスの説明は文章が長くなりがちですが、このサイトは見せ方を切り替えることで読みやすさを保っています。悩みの提示、サービスの一覧、担当者の紹介、更新情報の掲示と、内容の性質に合わせてレイアウトを変えている点が参考になります。
課題の提示はチェックマーク付きの横長パネルで並べています
ファーストビューを過ぎた最初のセクションでは、読み手が抱えがちな状況を四つ、横長のパネルに分けて縦に並べています。左端に濃い紫グレーの四角を置いて白抜きのチェックマークを入れ、右側の淡いグレーの帯へ一文ずつ載せる形です。
一枚のパネルに一文だけを載せているため、視線が左のアイコンから右の文へ自然に流れ、四つの内容を短時間で読み比べられます。箇条書きを罫線ではなく面で区切ると、文章量が同じでも圧迫感が下がります。
サービス紹介は三枚のカードを横並びにしています
SERVICESでは、スケジュール管理ツール、工事写真管理アプリ、資料の検索・要約ツールという三つの内容を、同じ大きさのカードで横に並べています。カレンダーや現場、パソコンの写真をそれぞれ背景に敷き、上から暗い半透明の層を重ねて白い文字を読ませる作りです。
カードの内側には少し余白を空けて白い細枠が引かれ、写真とテキストの境目を静かに整えています。三枚とも見出しと二行程度の説明という同じ構成なので、読み手は形式の違いに気を取られず内容だけを比べられます。
人物写真を大きく置いて仕事の様子を見せています
悩みのパネルの下と、STAFFのセクションには、机に向かう様子や屋外で電話をする様子を写した人物写真が大きく配置されています。左右いっぱいに寄せた写真と中央にそろえたテキストが交互に現れ、単調になりがちな縦スクロールに変化を付けています。
建築業界で二十五年の経験を積んだ代表者が担当することを伝える文章と、実際の仕事の様子を写した写真が近い位置に並ぶため、書かれている内容と画面の印象が食い違いません。文章だけで信頼を語らず、写真に一部を担わせる構成になっています。
更新情報は帯と記事カードの二か所で見せています
ファーストビューのすぐ下には、左右に分かれた横長の帯が置かれています。それぞれ濃い色のラベルと、その右に一件分のテキストが並び、右端には続きへ進む小さな矢印が添えられています。
ページの下寄りにあるCONTENTSでは、木目とグリーンを写した明るい背景写真の上に半透明の白いパネルを重ね、その中へ記事のカードを二枚並べています。カードはサムネイル、日付、分類のラベル、見出しという同じ並びで作られ、お知らせやブログの一覧が置かれていることがひと目で分かります。
WORKSでは黒地にチェックマークを描いたイラスト画像、FAQでは水色を背景にした写真というように、セクションごとに写真の色調を変えています。見出しの型は変えずに画像の雰囲気だけを切り替えることで、統一感を保ったまま話題の切り替わりを伝えています。
問い合わせの導線とページ下部の情報整理
連絡手段の見せ方も、このサイトの分かりやすさを支えています。ページの最上部と最下部の両方に同じ二種類の入り口を置き、読み始めでも読み終わりでも同じ操作ができるようにしています。ここではヘッダーと、ページ下部の並びを順に見ていきます。
ヘッダーは連絡先とロゴと説明を左右に振り分けています
画面の左上には、受話器のアイコンと電話番号を載せた枠と、封筒のアイコンとCONTACTの文字を載せた枠が横に並びます。中央には白い四角の中へ社名のロゴを置き、右側には拠点と取り組みを短くまとめた一文と、横線を重ねたメニューのアイコンが配置されています。
左に連絡先、中央にロゴ、右に説明という並びは、視線が左から右へ流れる読み方と無理なくかみ合います。ロゴを白い面で囲んで背景の写真から切り離しているため、下に敷かれた写真の色に関わらず社名がはっきり読み取れます。
ページ下部は地図と二つの問い合わせ枠で締めくくっています
ACCESSのセクションは左右二カラムで構成され、左に見出しと拠点の説明、ピンのアイコンを添えた小さなボタンを置き、右には地図を大きく表示しています。文章では東京都、埼玉県、千葉県、神奈川県への訪問に対応する旨が示され、地図と言葉の両方から所在地を確かめられます。
その下には、電話とメールの問い合わせ枠が画面の左右半分ずつを占めて並びます。左の枠は淡い紫グレーの地に電話番号を大きく字間を広げて置き、右の枠は濃い紺の地にCONTACTの文字を置いて、二つの手段を同じ重みで見せています。
さらに下の帯には主要なページへのリンクが一行に収まり、細い区切り線で仕切られています。最下部は白地に戻り、規約のページへのリンクと著作権表示だけが小さく置かれ、締めくくりまで色数を増やさない姿勢が保たれています。
工事の写真管理アプリのような現場向けツールを伝える画面で意識したいこと
ここまで見てきた作り方は、工事の写真管理アプリのように現場の作業を助けるツールを紹介するサイト全般に応用できます。導入を検討する読み手は日々の業務に追われていることが多いため、短時間で用途を把握できる画面設計が求められます。ここでは言葉と画像の合わせ方、そして疑問への答え方に分けて整理します。
使う場面が浮かぶ言葉と画像をそろえます
機能を列挙するだけでは、現場でどう役立つのかが伝わりにくくなります。撮影や整理といった実際の動作に近い言葉を見出しへ置き、現場やスマートフォンの写真を添えると、読み手は自分の一日の作業に置き換えて考えられます。
株式会社ACEのサイトでも、三枚のカードがツール名と短い説明という同じ形にそろえられ、背景の写真がそれぞれの利用場面を補っています。文字を増やさずに違いを見せる方法として参考になります。
導入前に浮かぶ疑問へ先回りして答えます
現場へ新しい道具を持ち込むときは、使い続けられるのかという不安が先に立ちます。よくある質問を主題ごとにまとめておくと、読み手は自分に近い項目だけを選んで読み進められます。
同社のサイトでは、ツール、AIの活用、SNSの運用という区分で質問がまとめられ、関心のある区分から読み始められる形になっています。導入した企業の声を別のページにまとめている点も、検討材料を探している読み手の助けになります。
まとめ：株式会社ACEのサイトに学ぶ専門サービスの見せ方
株式会社ACEのWebサイトは、紺と淡い紫グレーと白という限られた色数、英字ラベルと日本語小見出しをそろえた見出しの型、セクションごとに一つだけ置く角丸のボタンという三つの決まりごとで、専門的な事業内容を落ち着いた画面にまとめています。装飾を足すのではなく、繰り返しと余白で整えている点が学べます。
写真は現場や人物を大きく見せる場面に絞り、テキストは中央へそろえて短くまとめているため、縦に長いトップページでも読み進める負担が小さくなっています。企業向けのサービスを紹介するコーポレートサイトを設計するときの下敷きとして参考になる構成です。
色の重なり方や余白の取り方、スクロールに合わせた見え方は、実際の画面で確かめると理解が深まります。工事の写真管理アプリなど建設現場向けのツールを紹介する株式会社ACEの公式サイトもあわせてご覧ください。
