ウェブサイト / 警備・交通誘導
トワミ警備保障
現場に立つ人を、
正面から見せる。
埼玉の架空の警備会社を題材にした、企業紹介のウェブサイトです。施設警備と交通誘導という二つの業務、教育と資格、料金の目安、採用情報を、対応する地域を絞る方針とともに一つの流れで案内します。
作品を開く架空の事業者を題材にした自主制作です。
発注と応募を、
同じ重さで置く。
現場の発注を検討する担当者と、仕事を探している人の両方が訪れるサイトです。最初の画面に見積り相談と採用情報の2つのボタンを並べ、どちらへも進めるようにしました。
続けて会社の姿勢、二つの業務、三つの約束、対応エリア、24時間の受付と並べます。移動に時間のかかる地域は受けないという方針を先に示し、できる範囲を誤解なく伝えます。
警告ラベルのように、
太い枠で区切る。
白い地に墨色の文字を置き、相談と応募のボタンだけ深い赤茶で示しています。ヘッダーは、緊急連絡と新規のご相談の電話番号を載せた細い帯と、黒と黄の縞のバーの2段にしました。
本文の節は太い枠の情報ブロックにまとめ、黄色の絵記号とステンシル風の見出しの下に黒と黄の縞を付けています。節の間には斜めの縞の帯を挟み、24時間の受付では暗く落とした写真を、カーソルに合わせて動く光が照らします。
採用の相談も、
同じ窓口から。
採用情報から問い合わせへ進むと、相談の種類が「採用について」を選んだ状態で開きます。見積りの相談と応募の相談を、同じフォームで受ける形にしました。
入力を確認する画面では内容をそのままコピーでき、このフォームから送信は行わないと書いています。導入事例のページでは、キーワードで受託事例を絞り込めます。
顔を上に、
言葉を下に。
スマートフォンでも警備員の顔を画面の上側に大きく残し、コピーと2つのボタンを下へ重ねています。ヘッダーの上段は緊急連絡の電話番号だけにし、下段は見積り相談のボタンと開閉式のメニューに絞りました。業務のカードは1列になります。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン