SITE PRODUCTION

店舗サイトの制作

業種が違えば、来る人の目的も決め方も変わります。色を変えただけのテンプレではなく、グリッド・書体・情報の密度・主役の導線から作り分けています。以下の4本は、そのために作った架空店舗のサンプルです。フォームはすべて実際に動きます。

4つの型

文言はすべてデータに置く
料金・口コミ・FAQ・フォームの項目まで、1つのファイルにまとめています。実案件ではそこを差し替えるだけで納品できる状態にしています。
日本語の重さを設計する
日本語のWebフォントは1書体で100KBを超えます。見出しに出る文字だけを取り出して subset し、本文は端末のフォントに任せることで、4本すべてでモバイルの Lighthouse 95以上を保っています。
検証は仕組みで回す
横スクロールの有無、フォームの必須・形式エラー、送信の完了まで、スクリプトで毎回確認しています。スクリーンショットも1コマンドで再生成できます。
他人の資産を混ぜない
口コミはすべて書き下ろし、写真はCC0のものだけを使い、地図は実在地点を指さない略図にしています。実案件でも同じ線を引きます。

業種と、いま困っていることをお知らせください。作れるかどうかも含めて正直にお答えします。

4本とも架空の店舗です。実在する事業者ではありません。屋号・住所・電話番号・料金・口コミは、このサンプルのために作成したものです。掲載の電話番号は実際には使われていない番号帯を用いています。