ACRISは、愛知県安城市和泉町に拠点を置く株式会社ACRISの公式サイトです。LANやサーバーといったIT環境の構築、防犯カメラの設計から施工、ドローンによる空撮という3つの分野の事業を、1つのサイトの中で整理して紹介しています。
この記事では、ACRISのサイトをWebデザインの見本として取り上げ、配色やファーストビュー、カード型のレイアウト、下層ページの情報設計を順に読み解きます。複数の事業を持つ会社のサイトづくりを考えている方や、建設現場の防犯カメラに関する情報の見せ方を知りたい方の参考になる内容です。
ACRISのサイトの全体像
ACRISのサイトは、HOME・防犯カメラ・会社概要・お問合せの4ページで構成されています。ページ数を絞り、トップページで事業の全体像を見せたうえで、防犯カメラだけを専用の下層ページで掘り下げる作りになっているのが特徴です。
運営する株式会社ACRISは2002年10月に設立された会社で、代表は杉浦 康正様です。会社概要のページでは、AIの活用などで業務の効率化を進める企業が増えるなか、どのツールをどう使えば成果につながるのかを顧客と一緒に検証し、構築から運営まで一貫して支えたいという代表の考えが語られています。
トップページは、上から順にヘッダー、メインビジュアル、会社の想い、IT事業を紹介する4枚のカード、防犯セキュリティー、ドローンサービス、フッターと並びます。縦にスクロールするだけで会社の事業がひと通り把握できる、シンプルな縦長の構成です。
白と青紫を軸にした配色とトーン＆マナー
ACRISのサイトの配色は、白を基調に、ロゴと同じ系統の青紫をページ全体に行き渡らせているのが大きな特徴です。そこへ鮮やかな青のフッターと、要所だけに置いた黄色のアクセントを組み合わせ、IT企業らしい落ち着きと見やすさを両立させています。
ロゴの色を写真やラインにも展開
左上のロゴは、小さな正方形を組み合わせた幾何学的なマークと社名の文字で構成され、藍色に近い青紫で描かれています。トップページのIT事業のカードでは、LANケーブルやハードディスクなどの写真に同じ系統の淡い青紫をかぶせ、項目の下線や矢印のアイコンも濃い紺色でそろえています。
写真の色味をロゴに合わせて統一しているため、題材の異なる写真を4枚並べても散らかった印象になりません。ブランドカラーをロゴだけで終わらせず、写真や細かなラインにまで溶け込ませる手法は、テイストの異なる写真を組み合わせるサイトで参考になります。
黄色で現在地と送信を示す
グローバルナビゲーションでは、表示中のページの項目だけが黄色の文字に変わります。トップページではHOMEが、会社概要のページでは会社概要が黄色になり、いまどのページを見ているのかがひと目でわかります。
同じ黄色は、お問合せフォームの送信ボタンにも使われています。青系でまとめた画面の中で、反対色に近い黄色を限られた場所だけに使うことで、現在地と最後の操作という大切なポイントが自然に目に入る設計です。
鮮やかな青のフッターで締めくくる
各ページの最下部には、鮮やかな青を全面に敷いたフッターが配置されています。白い背景が続く本文から色面が大きく切り替わるため、ページの終わりと連絡先の情報がはっきり区切られます。
フッターの文字は白で統一され、社名や所在地には等幅風のすっきりとした書体が使われています。本文とは異なる書体を選ぶことで、連絡先のまとまりが1つのブロックとして認識しやすくなっています。
ファーストビューとヘッダーの設計
トップページのファーストビューは、白いヘッダーと大きな写真の2段で構成されています。文字を重ねない写真と、必要な情報を集めたヘッダーとで役割がはっきり分かれており、最初の画面から会社の姿勢と連絡手段の両方が伝わります。
点検や検討を連想させるメインビジュアル
メインビジュアルには、木目の机に置かれたクリップボードと虫眼鏡の写真が使われています。紙面にはチェックマークの入った四角が縦に並び、虫眼鏡が大きく写り込んでいるため、課題を一つずつ確かめながら検討していく様子を連想させます。
写真の上にキャッチコピーを載せず、左右にわずかな余白を残して配置している点も特徴です。すぐ下の想いのセクションで、IT環境のあり方を顧客と一緒に考えるという会社の姿勢を言葉で補っており、写真と文章が順番に意味をつないでいく構成になっています。
電話番号を大きく示すヘッダー
ヘッダーの右上には、電話での問い合わせを案内する文字と電話番号が青で配置され、番号の数字は大きく太い書体で強調されています。その下にメニューが並び、HOMEなどの英字は字間を広く取った細身の書体で表示されています。
ヘッダーの下端には薄い影が付けられ、下に続く写真との境界がくっきりと分かれています。ロゴ、連絡先、メニューという訪問者が最初に探す要素を白い帯の中にまとめることで、迷いにくい画面になっています。
想いのセクションに見る余白とタイポグラフィ
メインビジュアルの下には、会社の考え方を伝える想いのセクションがあります。ここでは装飾をほとんど使わず、余白と文字の大きさの差だけで情報の優先順位を表現しています。
中央に小さく置かれたラベルの下に、2行に分けた大きめの見出しが続き、その下に小さな文字の説明文が中央揃えで並びます。見出しも説明文もグレーの文字でまとめられているため、黒い文字よりも柔らかい印象になり、考え方を静かに語りかけるようなトーンが生まれています。
説明文では、変化の激しいIT業界で何を選べば業務の効率化や事業の拡大につながるのかという問いかけと、AIの活用も含めて顧客ごとに最適な選択を支えたいという思いがつづられています。上下にたっぷりと余白を取っているため、短い文章でも読み飛ばされにくく、次のカードへの区切りとしても機能しています。
IT事業を4枚のカードで整理するレイアウト
想いのセクションの次には、IT関連の事業を4つに分けた縦長のカードが横一列に並びます。複数のサービスを持つ会社が情報を整理する方法として、ACRISのサイトの中でも特に参考になる部分です。
分野名と具体的な項目の2層構造
カードの上部には、LAN、INFRASTRUCTURE、導入補助、データ復旧という分野名が白い文字で大きく配置されています。その下には、LANの構築や工場・倉庫への設置、建築・建設の現場での埋設、VPNの構築、UTMの設計、サーバーの構築、DXモデルの構築、AIの導入補助、SSDやRAIDの復旧といった具体的な項目が並びます。
大きな分野名で全体をつかみ、具体的な項目で内容を確かめるという2段階の読み方ができるため、専門用語の多い分野でも内容を把握しやすくなっています。
写真と矢印のアイコンで統一感を出す
カードの背景には、それぞれの分野を表す写真が使われています。LANのカードには色とりどりのケーブル、インフラのカードにはネットワークのアイコンとビル群、導入補助のカードにはAIやDXの文字をあしらったグラフィック、データ復旧のカードには内部が見えるハードディスクが配置されています。
各項目の右端には丸い矢印のアイコンが付き、項目ごとに細い紺色の下線が引かれています。4枚とも角を丸めた同じ形のカードにそろえ、写真の色味も統一しているため、内容の異なるサービスが1つの会社の事業としてまとまって見えます。
防犯セキュリティーとドローンサービスの見せ方
IT事業のカードに続いて、防犯カメラとドローンの2つの事業が紹介されています。どちらも見出し、短い説明文、3枚の写真という同じ型でまとめられ、背景色を変えることで事業の切り替わりを表現しています。
グレーの帯で区切った防犯セキュリティー
防犯セキュリティーのセクションは、薄いグレーを横幅いっぱいに敷いた帯の中に配置されています。白い背景が続くページの中で色面が変わるため、IT事業とは別の分野に移ったことが直感的に伝わります。
説明文では、さまざまなカメラの中から状況に合う組み合わせを提案し、設計から設置、施工までを通して手がけることが示されています。その下には角を丸めて白く縁取った写真が3枚並び、棚や荷物が並ぶ倉庫のような屋内の天井に取り付けられたドーム型カメラ、ドーム型カメラの接写、白い筒形のカメラが写っています。形の異なるカメラを写真で並べることで、幅広い機種から提案する姿勢が文章を読まなくても伝わります。
写真の並びで用途を伝えるドローンサービス
ドローンサービスのセクションは再び白い背景に戻り、空撮が身近なものになったことと、さまざまな場所での空撮に対応することを短い文章で伝えています。見出しは防犯セキュリティーと同じくらいの大きさと書体でそろえられ、ページ全体のリズムが保たれています。
3枚の写真は、空を飛ぶドローン、草地で三脚に据えた測量機器とドローン、上空から見下ろした田畑や街並みという順に並んでいます。機体、現場での使用、撮影された景色という流れで写真を置くことで、ドローンで何ができるのかを左から右へ目で追いながら理解できる構成です。
用途別に整理された防犯カメラのページ
メニューから進める防犯カメラのページは、設置する場所と目的を起点に情報を整理しているのが特徴です。防犯カメラの導入を検討している読者が、自分の状況に当てはめながら読み進めやすい構成になっています。
紺色の見出し帯を持つ3枚のカード
ページの冒頭には、用途別に防犯カメラの活用法を紹介する3枚の白いカードが、薄いグレーの背景の上に並んでいます。各カードの上部には紺色の帯があり、アイコンと白い太字の見出しで、建設中・建築中の現場、作業エリアでの事故防止、バックヤード作業・事故監視という3つの場面が示されています。
カードの中は、場面の説明、監視する対象を並べた箇条書き、推奨する機器の組み合わせという3段で構成されています。最後の推奨構成だけがオレンジの太字で書かれているため、ざっと眺めただけでも各場面で何を組み合わせればよいのかが目に留まります。
場面ごとに書き分けられた監視のポイント
建設現場のカードでは、人のいない夜間や休日が多い現場を想定し、ゲートを出入りする車両の確認、資材置場や重機の盗難対策、仮設事務所まわりの防犯、離れた場所からの状況確認などが挙げられています。屋外に対応したカメラに、夜間の撮影や遠隔での監視、録画の仕組みを組み合わせる構成が推奨されています。
作業エリアのカードでは、防犯にとどまらず、安全ルールの確認や事故の検証、立入禁止区域の監視、作業の進み具合の遠隔確認といった現場管理への活用が紹介されています。バックヤードのカードでは、商品の搬入口や納品エリア、在庫を管理する場所、金庫などの重要な物品の周辺を見守り、内部の不正やトラブルが起きたときの確認に役立てる考え方が示され、映像を見られる人を適切に管理することにまで触れています。
4種類のカメラを並べて比較する構成
続くセクションでは、ドーム型、ボックス型、バレット型、360度型という4種類のカメラが横一列に並び、グレーの背景に置いた製品写真の下に特徴の説明が添えられています。同じ大きさの枠で4つをそろえているため、形の違いを見比べながら読み進められます。
説明によると、ドーム型は圧迫感が少なく、どちらを向いて撮っているのかがわかりにくいことが抑止につながり、丸い形のためいたずらにも強いとされています。ボックス型は存在がはっきり見えることで心理的な抑止力を持ち、撮影範囲を絞って遠くを細かく捉える役割に向いています。バレット型は防水のケースや赤外線のLEDが一体になっていて夜間の撮影に強く、360度型は天井の中央に付けることで周囲を切れ目なく見渡せると紹介されています。
会社概要とお問合せのページの作り
会社概要とお問合せの2ページは、どちらも上部に写真を大きく敷いたタイトル部分を置き、その下に情報を整理して並べる共通の型で作られています。トップページとは異なる写真を使いながらも、ページ名を写真の中央に重ねる点がそろえられています。
細い罫線でまとめた会社概要
会社概要のページでは、ノートパソコンに向かう人物と、色鉛筆を立てたペン立てを写した写真の上に、ページ名が中央に配置されています。その下で代表の想いが大きなグレーの見出しと本文で語られ、さらに下の表で名称、代表者、メールアドレス、設立年月、所在地、電話番号、FAX番号が整理されています。
表は太い枠を使わず、項目ごとに細い横線を引くだけのすっきりとした作りです。左に項目名、右に内容を置いた2列の構成で、行の間隔を広めに取っているため、必要な情報を落ち着いて確認できます。
黄色の送信ボタンが目立つお問合せフォーム
お問合せのページでは、モノクロ調のキーボードを斜めから写した写真の上に、日本語と英語のページ名が白い文字で重ねられています。フォームには会社名、姓、名、メールアドレス、電話番号、質問内容を選ぶプルダウン、質問内容の入力欄が縦一列に並び、必須の項目には印が付いています。
入力欄の下には利用規約への同意を確認するチェックボックスがあり、最後に横長の黄色い送信ボタンが置かれています。会社名を最初に尋ね、電話番号の欄だけを任意にした項目の並びは、入力の負担を抑えながら必要な情報を集める工夫として参考になります。
全ページ共通のフッターの導線
どのページも、青いフッターに会社名、所在地、電話番号、受付時間、お問合せフォームへのボタンがまとめられています。電話番号は受話器のアイコンと並べて大きく太い書体で表示され、受付時間は9時から18時と明記されています。
その下の白い長方形のボタンは、青い背景の上で強いコントラストを生み、どのページを読み終えても問い合わせへ進みやすい導線になっています。ヘッダーの電話番号とあわせて、ページの上端と下端の両方に連絡手段を置いている点は、問い合わせを重視するサイトで取り入れやすい工夫です。
建設現場や倉庫の防犯カメラを考えるときの視点
ここからは、ACRISのサイトで示されている用途別の整理を手がかりに、防犯カメラを検討するときに押さえておきたい一般的な視点をまとめます。愛知で防犯カメラの相談先を探している方も、サイトを見比べる際の判断材料として参考にしてください。
建設現場では無人の時間帯を前提に考える
建設現場は、作業を終えた夜間や休日に人がいなくなる時間が長く、資材や重機が屋外に置かれたままになることも少なくありません。そのため、雨風に耐えられる屋外向けのカメラかどうか、暗い時間帯でも映像を残せるかどうかが検討の出発点になります。
現場が事務所から離れている場合は、映像を遠隔で確認できるかどうかも大切な要素です。防犯だけでなく作業の安全確認や事故の検証にも映像を生かせるため、撮影したい範囲と目的を先に整理しておくと、カメラの台数や向きを決めやすくなります。
倉庫では出入口と保管エリアを分けて考える
倉庫の防犯カメラでは、荷物の搬入口や人の出入りがある場所と、在庫を保管しているエリアとで求められる役割が異なります。出入口では通過する人や車両をはっきり記録できること、保管エリアでは広い範囲を見渡せることが重視されます。
天井の高い広い空間では1台で周囲を見渡せるタイプのカメラが候補になり、特定の場所を細かく確認したい場合は撮影範囲を絞ったカメラが向いています。録画した映像を誰が見られるのかを決めておくことも、内部の管理体制を整えるうえで欠かせません。
ACRISのサイトから学べるデザインのポイント
ACRISのサイトは、白と青紫を基調にした配色、ロゴの色に合わせて統一した写真、黄色で現在地と送信を示すアクセントによって、IT企業らしい落ち着いたトーンを保っています。4枚のカードで事業を整理し、背景色の切り替えで防犯カメラやドローンの分野を区切る構成は、複数の事業を1つのサイトで紹介したい会社にとって参考になる手法です。
防犯カメラのページでは、設置場所ごとに監視のポイントと推奨する機器の組み合わせを示し、カメラの種類も写真付きで比較できるようにしています。建設現場やバックヤードなど、自分の状況に近い場面から読み進められる情報設計は、専門性の高い商材を扱うサイトづくりのヒントになります。
配色やカードの使い方、場面別の情報整理を実際の画面で確かめたい方は、倉庫の防犯カメラを考えるときにも参考になるACRISの公式サイトをご覧ください。
