【自主制作デモ】改修前・改修後の比較

今のサイトを活かして、トップページを見やすく直した例

架空の書道教室のトップページを題材に、改修前と改修後を作りました。改修後は、書道教室の大きな団体のサイトで使われている組み方（縦書きの明朝の見出し・角を大きく丸めた写真・3段のステップ・写真付きのコース・料金のカードと比較表・大きな英字を添えた声の欄・写真の帯・開閉する質問欄）を、この教室の情報に当てはめたものです。載せている中身は改修前と同じで、増やしたのは並べ方と導線だけです。

想定した依頼スマホで見づらい／問い合わせが来ない

触っていないものテーマ本体・既存プラグイン・URL

やったこと並べ替え・導線づくり・テーマ追記CSS

想定作業量トップ1ページで2〜4日

ごあいさつ

このたびは当教室のホームページをご覧いただきまして誠にありがとうございます。当教室は昭和より地域の皆様に支えられ、書に親しむ場を提供してまいりました。書道は単に文字を美しく書くための技術ではなく、心を落ち着け、自分自身と向き合う時間でもあります。初心者の方からご経験のある方まで、一人ひとりの目標に合わせて丁寧に指導いたしますので、まずはお気軽にお問い合わせください。なお、体験のお申し込みにつきましては、お電話またはメールにて承っております。詳しくは下記をご覧ください。教室の様子はブログにて随時更新しておりますので、あわせてご覧いただけますと幸いです。

大人クラス	月謝 5,000円（月3回）
子どもクラス	月謝 4,000円（月3回）
入会金	3,000円
用具代	実費

大人クラス

月謝 5,000円（月3回）

子どもクラス

月謝 4,000円（月3回）

入会金

3,000円

用具代

実費

どこを、なぜ変えたか

見た目を新しくすることが目的ではありません。「体験に申し込む」という一つの行動にたどり着けるように、順番と導線を組み直しています。教室・料金・場所といった中身は改修前と同じで、足したのは、いただいた声とよくある質問の欄です。

01いちばん上で「誰向けの教室か」を言い切った

改修前「ごあいさつ」から始まり、教室の特徴が7行目まで出てこない

改修後「はじめての一枚を、この教室で。」を最上部に置き、すぐ下に「はじめて筆を持つ方がいちばん多い教室です」と続けた

初めて訪れた方が最初に知りたいのは、あいさつではなく「自分が行っていい場所かどうか」です。あいさつ文は残したうえで、下のほうへ移しました。

02次にすることを1つに絞った

改修前電話・メール・ブログ・リンクなど、押せる場所が8か所に分散

改修後「体験に申し込む」を主にし、電話番号は「教室の場所と時間」の欄に残した

選択肢が多いほど、どれも選ばれにくくなります。電話をなくしたわけではなく、順位を下げただけです。電話のほうが好きな方は、これまでどおり掛けられます。

03長い1段落を、見出しつきの短い塊に分けた

改修前あいさつ文が約300字の1段落。スマホでは画面いっぱいの文字の壁になる

改修後「教室について」「コース」「料金」「よくある質問」「場所と時間」の見出しで区切った

文章を削ったのではなく、区切って見出しを付けただけです。読み手は必要な箇所だけを拾って読めるようになります。

04料金を、探さなくても見える位置に出した

改修前ページ中ほどの表。スマホでは横にはみ出す

改修後料金のカードと比較表を並べ、追加費用がないことも書いた

問い合わせの前にいちばん確認される情報です。ここが分からないと、問い合わせずに離れてしまいます。

05古い更新履歴を下へ移した

改修前最新の更新が2019年。トップページの下部に表示されている

改修後「お知らせ」として日付・種類の札・題の行に整え、ページの下のほうへ移した

何年も止まった更新日が最初に目に入ると、「今もやっているのか」と気になります。消すのではなく下へ移し、更新を再開すれば新しい順に並ぶ形で残しました。

06文字の大きさと行間をスマホ基準に直した

改修前本文12〜13px。指で拡大しないと読めない

改修後本文を読みやすい大きさに広げ、行間も空けた

追記するCSSだけで直せる範囲です。テーマ本体のファイルは書き換えていないため、テーマの更新で消えることはありません。

既存サイトを直すときに守っていること

テーマ本体のファイルは書き換えません。追記用のCSSと、必要な場合のみ子テーマで対応します。テーマを更新したときに変更が消えてしまうためです。
追記するCSSには接頭辞を付けて、あとから全部戻せる形にします。「元に戻したい」と言われたときに、追記部分だけを外せば済む状態にしておきます。
URLは変えません。やむを得ず変える場合は、事前にお伝えして転送の設定をセットで行います。
既存のプラグインの挙動には手を入れません。ご依頼の範囲外で何かが動かなくなることを避けるためです。
作業前に、いまの状態のバックアップを取ります。取得したことと、戻し方をご報告します。
変更した箇所は一覧でお渡しします。あとから別の方が触るときに、どこが追記部分かが分かるようにしておきます。