ホームページが「垢抜けない」の犯人は、たぶん手書き文字です

ある幼稚園のホームページを10ページぶん作って、自分たちで3回ボツにしました。

1回目は「垢抜けてない」。直して出して、2回目も「垢抜けてない」。3回目も同じでした。困ったのは、どこが悪いのかを誰もうまく言えなかったことです。色が変なわけでもなく、文字が読めないわけでもない。ただ、参考にしていた他の幼稚園のサイトと並べると、明らかに見劣りする。

そこで、「垢抜けない」の中身を全部書き出すことにしました。感覚で直しても永遠に終わらないと分かったからです。出てきた項目は22個ありました。そのうち、うちのページに一番効いていた3つを書きます。

手書きの文字を、全部の見出しに使っていました

これが最大の犯人でした。

幼稚園なのでやわらかい雰囲気にしたくて、見出しという見出しを手書き風のフォントにしていました。ついでにマスキングテープの飾りを貼り、写真をポラロイド風の枠に入れ、線もクレヨン風にしました。かわいくなるはずでした。

出来上がったものは、文化祭のポスターでした。

手書き風のフォントは、少しだけ使うと「人の手が入っている」感じが出ます。でも全面に使うと、素人が一生懸命作った印象になります。今は、手書きの要素はサイト全体で1〜2箇所までと決めています。うちの場合はロゴと、トップ画面の写真の上に載せた白い星の線画だけにしました。それ以外の見出し・ナビ・本文は、まるっとした読みやすい書体でそろえて、太さの差だけで大事さの順番をつけています。

マスキングテープとポラロイド枠は全部やめました。あれは10年ほど前の手作りブログの記号で、今つけると年代がそのまま出ます。

写真を、小さい枠に閉じ込めていました

2つめは写真の扱いです。ポラロイド枠に入れていたということは、写真を小さくしていたということでもありました。

直したあとは、枠を外して大きくしました。各ページの主役になる写真は横幅700ピクセル以上、トップ画面は画面いっぱいに写真を敷いて、文字はその上に載せる。それだけで別のサイトになりました。

もうひとつ、地味ですが効いたのが写真の明るさをそろえたことです。撮った時期も天気もバラバラの写真をそのまま並べると、暗い一枚が混ざるだけで全体が野暮ったくなります。全部の写真を同じ設定で明るさと色味を調整してから使うようにしました。この作業は目立ちませんが、やる前とやった後の差は大きいです。

いちばん効いたのは、自分で合格を出すのをやめたことです

3つめは、作り方ではなく決め方の話です。

3回ボツになった原因は、作った本人が「まあ、いいだろう」と判断していたことでした。自分で作ったものは、直した箇所ばかり見てしまいます。言われたところを直して、直したから良くなったはずだと思い込む。この繰り返しでは垢抜けには一生届きませんでした。

今は、出していいかどうかを作った本人以外が判定しています。判定のやり方は決めてあって、22項目を一つずつ見て、1個でも引っかかったら出しません。スマホとパソコンは別々に判定します。

この仕組みにしてから、同じページが1回で通りました。作り方を変えたのではなく、合格の出し方を変えただけです。

自分のサイトで試せること

お金も道具もいらない方法をひとつ。

自分のお店のホームページのスクリーンショットを撮って、25パーセントくらいに縮めてください。次に、いいなと思っている同業のサイトも同じように縮めて、横に並べます。

細かい文字は読めなくなります。それでいいんです。この状態で残るのは、写真の大きさ、余白の取り方、色の数といった、遠目で効いてくる要素だけです。並べたときに自分のほうが「ごちゃっとして見える」なら、たいてい原因は、色を使いすぎているか、要素に枠線をつけすぎているか、写真が小さいかのどれかです。

この並べ方は、直す前と直したあとの比較にも使えます。うちはこれを出す前に必ずやっています。

この22項目は、うちが世に出す前に必ず通している社内の物差しです。お店の業種や年齢層によって、当てはまらない項目もあります。ちなみに、幼稚園のページで唯一やめなかった手書きの装飾は、ロゴでした。あれだけは園の持ちものなので、こちらの都合で整えるものではないと考えています。