料金のページは、チャットでお話しした通り入れてあります。目安の表と「詳しくはお見積もりで」の一文だけの作りなので、実際の料金と多少ずれても直しやすいはずです。

見出しは、ご参考のサイトと同じく明朝体です。あのサイトの落ち着きは、紺色よりもこの書体が作っています。差し色だけは、ご参考の青ではなく緑にしました。「無料相談」のボタンにだけ使って、そこが目に入るようにするためです。ボタンは上部・中ほど・最後の3か所に、同じ言葉で置いています(最後だけは紺の地の上なので白にしました)。読んでいる途中で「ちょっと聞いてみようかな」と思ったときに、探さなくて済む位置です。なお「初回相談は無料」は仮に入れた文です。実際の運用に合わせて直します。

「選ばれる理由」と実績の数字の枠も入れました。ご参考のサイトを改めて見直したところ、信頼の土台になっているのは事業内容の一覧ではなく、この2つと代表の方のお写真でした。数字は仮ですので、経験年数や件数をお聞かせください。

残りの4ページは、事務所案内(代表のご挨拶とお写真)、業務内容、料金のご案内、お問い合わせフォームを考えています。ご参考のサイトにあった代表挨拶は、事務所案内のページに入れる想定です。

写真は減らしました。最上部の1枚だけが雰囲気づくりで、業務内容は写真の代わりに簡単な図記号にしています。というのも、この種のページで一番効くのは加藤様ご自身と事務所の実際のお写真で、素材写真をいくら並べてもその代わりにはならないからです。事務所案内に枠を空けてあります。ご用意が難しければ、そこは商用利用できる素材で埋めます。

ご参考のサイトを丸ごと真似たのではなく、要素ごとに分けて見ています。左がご参考のサイト(トップと事業内容のページ)の骨組み、右がこの試作の骨組みです。番号の説明は下にあります。

• 1受け継ぐ明朝体の見出しと、写真1枚の静かな入り口。あのサイトの落ち着いた印象はここで決まっているので、そのまま使いました。
• 2受け継ぐ「選ばれる理由」を3つ、番号で並べる形。ご参考のサイトでは、ここに実績の件数が入って信頼の土台になっています。加藤様の数字に差し替える前提で枠を用意しました。
• 3変える番号つきの一覧は残し、分け方を「会社ごと」から「お客様の種類ごと」にしました。ご参考先は複数の法人を持つグループなので会社ごとの並びに意味がありますが、1つの事務所では、読む側が自分の項目を探しやすい「法人・事業主/個人」の分け方の方が合います。ご参考のサイトのメニューにも同じ分け方がありました。
• 4受け継ぐ代表の方のお写真で信頼を作る構成。ご参考のサイトは代表挨拶にお写真と署名を置いています。試作では事務所案内にその枠を空けてあり、実際のお写真が入ると一番効く場所です。ご挨拶の文章は、5ページ構成の事務所案内ページに入れます。
• 5変える差し色を青から緑にしました。紺に青を重ねると「相談する」ボタンが背景に溶けるので、ボタンだけ別の色にして、3か所で同じ緑を使っています。
• 6足す料金の目安。ご参考のサイトにはありません。チャットでお話しした通り、目安の表と「詳しくはお見積もりで」の一文だけの作りにしています。