見本のカタログ12 のテーマから選ぶ
ホームページの見た目は、12 のテーマから選べます。同じ店の内容を、テーマだけ替えて並べました。気に入ったテーマは、ヒアリングのフォームで選べます(お任せなら、業種に合うものを選びます)。
店名・料金・写真はすべて架空の見本です。実在のお店・人物とは関係ありません。写真は入っていません(写真の場所は色と図形で置き換えています)。
- 見比べる:下の 12 の見本を開いて、スマホで見てください。
- 選ぶ:ヒアリングのフォームで、テーマを 2 つまで選びます。迷ったら業種のおすすめから。
- お店の色に合わせる:ロゴや内装の色があれば、差し色を合わせます。文字の読みやすさ(背景との明るさの差 4.5:1 以上)は測り直します。
12 のテーマ
どれも同じ架空の喫茶店「喫茶 ひより」です。文面と部品は同じで、色・書体・角の丸み・余白・見せ方だけを替えています。上の絵を押すと、スマホでもパソコンでも見られる見本ページが開きます。
-
余白と一枚
- 静か
- 広い余白
- 1 枚が主役
向く店:写真館・美容室・設計事務所・ギャラリー・セレクトの店
- 地
#ffffff - 面
#f7f7f5 - 文字
#1a1a1a - 主
#1a1a1a - 差し色
#3a3a38
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:主役の 1 枚を大きく置き、文字は小さく少なくする。
写真の使い方
写真は 1 枚を大きく。色を抑え、空間や物を主役にする。写真が無い間は、色面の図形で置き換える。
-
白の静けさ
- 品のよい
- 落ち着き
- 明朝の見出し
向く店:美容室・まつげ・エステ・宿・ブライダル
- 地
#f7f4ef - 面
#ede7de - 文字
#2b2722 - 主
#2b2722 - 差し色
#5b4a3a
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:明朝・本文:ゴシック
見せ方:見出しだけを明朝にし、生成りの白と焦げ茶の 2 色でまとめる。
写真の使い方
明るく、やわらかい光。手元や空間の一部を近くから写す。
-
紙とインク
- 雑誌のよう
- 2 色刷り
- 大きな見出し
向く店:カフェ・パン屋・古書と雑貨・工房・写真家
- 地
#f3ede3 - 面
#e9e1d3 - 文字
#1f2b25 - 主
#1f2b25 - 差し色
#9a3b22
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:明朝・本文:ゴシック
見せ方:見出しを画面いっぱいの図にし、端で切れた朱の円を置く。
写真の使い方
写真が少なくても成り立つ。あれば色を落として、文字と重ねずに置く。
-
自然素材の温もり
- 木と土
- あたたかい
- 手ざわり
向く店:カフェ・パン屋・整体・花屋・量り売り
- 地
#f6f1e7 - 面
#ece3d3 - 文字
#3a2f25 - 主
#3a2f25 - 差し色
#a4502e
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:明朝・本文:ゴシック
見せ方:地と同じ色の濃淡で、大きな波を敷く。
写真の使い方
自然光で少しあたたかく。木の机・器・植物・作る手元。
-
やわらかな透明感
- やさしい
- 清潔
- はじめてでも安心
向く店:まつげ・眉・ネイル・エステ・小さな美容室
- 地
#fffcfb - 面
#f8eeec - 文字
#3a2c2e - 主
#3a2c2e - 差し色
#9e4a5a
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:最初の画面の 1 面だけに、淡いグラデーションを敷く。
写真の使い方
明るく、やわらかい光。白い余白を広めに取り、手元を近くから。
-
ちいさな森
- 楽しい
- 親しみ
- 丸い文字
向く店:子ども向けの教室・トリミング・おやつの店・学童
- 地
#fff9ef - 面
#fcefd9 - 文字
#3b2e22 - 主
#3b2e22 - 差し色
#b8430e
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:丸ゴシック・本文:ゴシック
見せ方:丸ゴシックの見出しと、ずらした影の太いふち。
写真の使い方
明るく、人より物や手元を。子どもの顔は載せない前提で組む。
-
色面ポップ
- 元気
- 一度で覚える
- はっきり
向く店:ラーメン・定食・キッチンカー・ネイル・ダンス教室
- 地
#ffd60a - 面
#fff7cc - 文字
#141414 - 主
#141414 - 差し色
#141414
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:黄色 1 色を画面いっぱいに塗り、極太の見出しを置く。
写真の使い方
明るく、色を濃く。料理や道具を真上から大きく。
-
実直な力強さ
- 頼れる
- 太い文字
- 紺と橙
向く店:パーソナルジム・修理・リフォーム・整備・引っ越し
- 地
#ffffff - 面
#eef1f5 - 文字
#14213d - 主
#14213d - 差し色
#f08a24
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:見出しを太いゴシックで言い切り、下に橙の太い線を引く。
写真の使い方
現場や道具を、明るくはっきり。人物は作業中の手元や後ろ姿。
-
誠実な信頼
- 誠実
- 事実を先に
- 紺
向く店:整体・鍼灸・学習塾・保険や住まいの相談
- 地
#ffffff - 面
#f2f5f9 - 文字
#1b2a41 - 主
#1b2a41 - 差し色
#1f4e8c
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:明朝・本文:ゴシック
見せ方:飾りを足さず、事実と読みやすさをそろえる。
写真の使い方
明るく自然な表情。施術や相談の場面は、許可を取った人だけ。
-
明快ユニバーサル
- 迷わない
- 大きな文字
- 高齢の方にも
向く店:整骨院・訪問のサービス・地域の教室・介護の事業所
- 地
#ffffff - 面
#f2f6fc - 文字
#1a1a1a - 主
#1a1a1a - 差し色
#0050b3
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:はっきりした書体と、押しやすい大きなボタン。
写真の使い方
建物の入口や受付など、来る前に知りたい所を写す。
-
和紙と墨
- 和の趣
- 品よく
- 縦書き
向く店:和菓子・日本茶・着付け・和食・鍼灸・旅館
- 地
#f7f3ea - 面
#ede6d6 - 文字
#262220 - 主
#262220 - 差し色
#b23a26
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:明朝・本文:明朝
見せ方:明朝の縦書きの見出しと、朱の差し色(パソコンの画面)。
写真の使い方
落ち着いた光。器・季節の物・手仕事を、余白と一緒に。
-
先進プロダクト
- 新しい
- すっきり
- 青
向く店:オンライン教室・予約制のジム・出張の設定や修理・小さな IT の相談
- 地
#ffffff - 面
#f3f5f8 - 文字
#0f172a - 主
#0f172a - 差し色
#0b57d0
見出し あア亜 Aa本文の文字。料金と時間を先に。見出し:ゴシック・本文:ゴシック
見せ方:最初の画面だけに、差し色の淡いグラデーションを敷く。
写真の使い方
画面や道具を正面から。白い背景で、影を少なく。
業種ごとのおすすめ
迷ったときの目安です。左から順に、合いやすいと考えるテーマです(好みで選んでかまいません)。
- まつげ・眉やわらかな透明感白の静けさ余白と一枚
- ネイルやわらかな透明感色面ポップ白の静けさ
- 美容室白の静けさ余白と一枚やわらかな透明感
- トリミングちいさな森自然素材の温もりやわらかな透明感
- パーソナルジム実直な力強さ先進プロダクト誠実な信頼
- 整体・リラクゼーション誠実な信頼自然素材の温もり明快ユニバーサル
- レッスン・教室ちいさな森明快ユニバーサル色面ポップ
- 写真撮影余白と一枚紙とインク白の静けさ
- 飲食自然素材の温もり紙とインク色面ポップ
- 和菓子・日本茶・着付け和紙と墨白の静けさ紙とインク
- 修理・リフォーム・出張のサービス実直な力強さ先進プロダクト明快ユニバーサル
- 学習塾・個別指導誠実な信頼明快ユニバーサル先進プロダクト
業種ごとの見本(動く部品つき)
業種ごとの中身の見本です。メニューを選ぶと合計と時間が出るなど、実際に触れます。見た目は上の 12 のテーマに替えられます。
-
まつげ・眉サロン
eyelash & brow みずいろ(架空)
はじめてのまつげパーマは、料金と所要時間を先に見せる。
動く部品:メニューを選ぶと、料金の合計と所要時間が出ます。
店名・料金・写真はすべて架空の見本です。
-
ネイル
ネイルサロン つむぎ(架空)
爪の状態を見てから決める、1席だけのサロン。
動く部品:メニューを選ぶと、料金の合計と所要時間が出ます。
店名・料金・写真はすべて架空の見本です。
-
美容室
hair & care ひより(架空)
席は少なく、髪と頭皮をじっくり見る小さな美容室。
動く部品:メニューを選ぶと合計と所要時間が出ます。よくある質問・地図・プライバシーのページ付き。
店名・料金・写真はすべて架空の見本です。
-
トリミング
トリミングサロン ぽかぽか(架空)
はじめて預ける子も、1頭ずつ、待たせずに。
動く部品:犬の大きさとコースを選ぶと、料金と時間の目安が出ます。
店名・料金・写真はすべて架空の見本です。
-
パーソナルジム
パーソナルジム ととのい(架空)
体験の後に、入会を勧めない個室ジム。
動く部品:目的と通える回数を選ぶと、回数券の目安が出ます。
店名・料金・写真はすべて架空の見本です。
-
写真館(個人カメラマン)
写真室 ひなた(架空)
ふだんの顔を、そのまま残す出張撮影。
動く部品:人数と撮影の長さを選ぶと、プランの目安が出ます。
店名・料金・写真はすべて架空の見本です。
-
教室
ピアノ教室 ことのは(架空)
楽譜が読めなくても、最初の1曲から弾ける教室。
動く部品:年代とレッスンの長さを選ぶと、月謝の目安が出ます。
店名・料金・写真はすべて架空の見本です。
-
飲食・カフェ
こまど珈琲(架空)
路地の小窓から、焙煎の香り。
動く部品:トップ・メニュー・店舗情報の3ページを、リンクで行き来できます。
店名・料金・写真はすべて架空の見本です。