自主制作デモ 制作見本として自分で作った架空の教室サイトです。改修前・改修後とも自作で、実在のサイトを勝手に作り替えたものではありません。 ← デモ一覧へ
BEFORE / AFTER

既存サイトを「壊さずに直す」と、どこがどう変わるか

架空の書道教室のトップページを題材に、改修前と改修後を同じ内容で作りました。デザインを一新するのではなく、載っている情報はそのままに、順番と見せ方だけを変えた場合にどうなるかをご覧いただけます。

想定した依頼スマホで見づらい/問い合わせが来ない
触っていないものテーマ本体・既存プラグイン・URL
やったこと情報の並べ替えと追記CSS
想定作業量1ページあたり半日〜1日
https://example.invalid/(架空サイト・改修前) BEFORE
みどり書道教室

ごあいさつ

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

教室のご案内

・大人クラス/子どもクラスがございます。
・毛筆、硬筆どちらも対応しております。
・見学はいつでも可能です。

料金について

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

アクセス

◯◯市△△町1-2-3(デモ用のダミー住所)
駐車場3台分ございます。

お問い合わせ:00-0000-0000(受付 平日10時〜17時)
メール:デモ用のダミー

更新履歴

2019.04.01 ホームページを更新しました
2018.09.10 夏期休講のお知らせ
2018.04.02 新年度の受付を開始しました

Copyright みどり書道教室(架空) All Rights Reserved.
https://example.invalid/(架空サイト・改修後) AFTER
みどり書道教室体験のお申し込み
◯◯市の書道教室 / 見学・体験 受付中

はじめて筆を持つ方が、
いちばん多い教室です。

大人クラスの約7割が未経験からの入会です(架空の設定です)。まずは1回、道具の持ち方から体験してみてください。手ぶらでお越しいただけます。

体験を申し込む(1回 1,000円)料金を見る

2つのクラスがあります

大人クラス月3回・1回90分月 5,000円
子どもクラス月3回・1回60分月 4,000円

入会金 3,000円/用具は実費です。追加の費用はいただきません。

はじめての方へ

道具は教室でお貸しします。毛筆と硬筆のどちらから始めるかは、体験のときにご相談ください。見学だけでも構いません。

教室の場所と時間

住所◯◯市△△町1-2-3(デモ用のダミー住所)
駐車場3台分あります
開講日火・木・土(時間はクラスにより異なります)
お電話00-0000-0000(平日10時〜17時)
まずは1回、体験してみてください 持ち物はありません。お申し込みから3日以内にご連絡します。 体験を申し込む
みどり書道教室(架空)/ 教室案内・講師紹介・料金・アクセス・お問い合わせ

どこを、なぜ変えたか

見た目を新しくすることが目的ではありません。「体験に申し込む」という一つの行動にたどり着けるように、順番と表現だけを変えています。載せている情報は改修前とほぼ同じです。

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

改修前「ごあいさつ」から始まり、教室の特徴が7行目まで出てこない
改修後「はじめて筆を持つ方がいちばん多い教室です」を最上部に置いた

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

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

改修前電話・メール・ブログ・リンクなど、押せる場所が8か所に分散
改修後「体験を申し込む」を主にし、電話番号はその下に添えた

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

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

改修前あいさつ文が約300字の1段落。スマホでは画面いっぱいの文字の壁になる
改修後「クラス」「はじめての方へ」「場所と時間」の3つに分けた

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

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

改修前ページ中ほどの表。スマホでは横にはみ出す
改修後クラスの紹介と同じ場所に金額を並べ、追加費用がないことも書いた

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

05古い更新履歴を下げた

改修前最新の更新が2019年。トップページの下部に表示されている
改修後更新履歴の枠は残し、トップからは外した

何年も止まった更新日が見えていると、「今もやっているのか」という不安につながります。消すのではなく、更新を再開できる形で残しました。

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

改修前本文12〜13px。指で拡大しないと読めない
改修後本文を読みやすい大きさに広げ、行間も空けた

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

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

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