制作例へ戻る

澄間 / SUMIMA

架空の清掃会社を想定した自主制作です。料金・地域・会社情報は作品内の設定。写真はAI生成のイメージで、施工実績ではありません。見積相談は送信・保存しないデモです。

澄間のトップ画面。店舗とオフィスの清掃案内、明るい室内の写真、サービス・料金・対応地域への入口

概要

地域の小規模な清掃会社から、店舗責任者やオフィス担当者に向けたサイトを依頼される場面を想定。サービスの内容、料金に含む作業、対応地域を5ページに整理し、必要な情報を見つけて相談内容を確かめるまでを制作しました。

担当範囲
主要5ページ、プライバシー案内、404。スマホ対応、FAQ、サービスの選択引き継ぎ、相談の入力チェック・確認・修正。写真調の素材2点を生成。
基本の制作範囲
5ページの原稿整理・デザイン・スマホ対応・入力確認。3Dや映像を使わず、相談に必要な情報を整えました。
支給を想定する資料
サービス内容、料金条件、対応地域、会社情報、ロゴ・写真。今回は架空設定と生成素材で補っています。
追加する場合の候補
施工事例の更新機能、採用ページ、問い合わせの実送信。今回の実装には含めていません。
使用技術
HTML / CSS / JavaScriptNode.js(静的出力)

判断と工夫

知りたい情報から、入り口を分ける。

トップにサービス・料金・対応地域へのリンクを置き、探していることから各ページへ進める構成にしました。清掃の頼み方は定期・単発・入退去の3つで整理しています。

澄間のトップ画面。店舗とオフィスの清掃案内、明るい室内の写真、サービス・料金・対応地域への入口

選んだサービスを、相談に引き継ぐ。

各サービスから相談へ進むと、選んだ内容が入力欄に反映されます。確認から戻って修正しても内容を保持し、最初から入力し直す手間を減らしています。

澄間の見積相談の確認画面。サンプルの施設・地域・希望内容を確認して修正できる

小さな画面でも、読む順番を保つ。

スマホでは見出し・案内・サービスへの入口・写真の順に配置。料金表や相談画面も縦に整理し、文字を縮めずに読めるようにしました。

PC澄間のトップ画面。店舗とオフィスの清掃案内、明るい室内の写真、サービス・料金・対応地域への入口
スマートフォン澄間のスマートフォン画面。見出し、サービスへの入口、オフィスの写真を縦に配置