このサイトを作り直した話

エレノアのサイトを作り直しました。1ページに全部を詰めた LP の形から、サービス・料金・つくったもの・ブログ・会社概要に分けたホームページの形にしています。見た目を変えただけではなく、「読みやすいか」「迷わずにたどり着けるか」「作り直しても壊れないか」を、機械で確かめられる形にしたのが今回の中心です。

読みやすさは、手本と数字で決める

読みやすさを「なんとなく」で決めると、人によって判断が割れます。今回は、デジタル庁デザインシステムを手本にしました。行政のサイトのための仕組みですが、民間のサイトでも無料で使えます。

決めたことは、たとえば次のとおりです。

• 1. 本文の文字は 16〜17px、行の間隔は文字の大きさの 1.7 倍
• 2. 1行の長さは全角で 40 字前後まで
• 3. 文字と背景の明るさの比は、文字の大きさにかかわらず 4.5 対 1 以上
• 4. いま操作している場所は、黄色と黒の二重の枠で示す
• 5. 押せるボタンは高さ 44px 以上

3 は、色を決めるたびに計算しています。ブランドの色（バイオレット）も、グラデーションの端の色も、白い文字を載せたときに 4.5 対 1 を下回らないことを、公開の前に機械で確かめます。

迷わない導線は、選択肢を減らすことから

前のサイトは、1ページにすべてを載せていたので、料金を探すにも下へ長く送る必要がありました。今回はメニューをページの名前そのままの5つ（サービス・料金・つくったもの・ブログ・会社概要）に絞り、右端に「お問い合わせ」を置いています。

もうひとつ意識したのは、1画面の中で一番目立つボタンを1つにすることです。「料金とプランを見る」「相談する」のように、押した先が分かる言葉にしています。

URL を1つも変えずに引っ越す

このサイトの URL は、思っているより多くの場所から直接リンクされています。お支払いが終わったあとに開く画面、アプリストアの掲載情報、配布済みのアプリの設定画面などです。URL が1つでも変わると、その先でリンク切れが起きます。しかも、配布済みのアプリの中のリンクは、あとから直せません。

そこで、作り直す前に「外から参照されている URL」を洗い出し、一覧にしました。公開のたびに、その一覧のページが全部そろっているかを機械で確かめ、1つでも欠けていたら公開しないようにしています。

配信の仕組みも、このタイミングで Cloudflare に移しました。以前は GitHub Pages で配信していましたが、GitHub Pages の規約は、商取引を主な目的とするサイトの無料の配信先として使うことを認めていません。料金表とお支払いの画面を持つこのサイトには合わないと判断しました。

料金は1か所から

料金は、このサイトの料金表のほかに、特定商取引法に基づく表示やお支払いの画面にも出てきます。それぞれに手で書くと、いつかどこか1か所だけが古くなります。

料金は1か所のデータにまとめ、そこから各ページの表示をつくっています。このサイトに写すのは、公開してよい項目（名前・金額・納期・含まれるもの）だけです。元のデータとずれていないかは、機械で突き合わせています。

お店のサイトにも同じ考え方を

今回の作り直しでやったことは、お店や会社のサイトでもそのまま役に立ちます。

• 読みやすさを数字で決めて、公開の前に確かめる
• 外からリンクされている URL を守る
• 同じ情報を何か所にも手で書かない

サイトの引っ越しや、予約・問い合わせまわりの仕組みのご相談も、フルオーダーでお受けしています。