ホームページの
つくりかた。

誰に、何をしてほしいかを 1 文で決める

最初に書くのは文章ではなく、目的の 1 文です。 「近所に住む人に、電話で予約してほしい」のように、相手と行動をはっきりさせます。

この 1 文が決まると、載せる情報とボタンの文言が自動的に決まります。 決めずに書き始めると、書くことが増え続けて終わりません。

できた目安紙かメモアプリに、相手と行動が入った 1 文が書けている。

載せる情報を集める

ここで集めておくと、あとの手順が「貼るだけ」になります。

• 屋号（正式な表記と、読みがな）
• 住所と、最寄り駅からの道順
• 電話番号と、受けられる時間帯
• 営業時間と定休日
• メニューや料金（税込みか税別かも）
• 問い合わせを受け取るメールアドレス

できた目安上の 6 項目が、1 つのメモにまとまっている。

写真を 10 枚だけ撮る

スマートフォンで十分です。明るい時間に、窓の光が入る向きで撮ります。 外観 2 枚、中の様子 3 枚、商品やサービス 4 枚、人の手元 1 枚を目安にしてください。

ファーストビューとはページを開いてすぐ、スクロールせずに見える範囲のことです。ここに置く 1 枚がいちばん効きます。

撮った写真は、横向き（横長）で撮っておくと使い回しが利きます。

できた目安横長の写真が 10 枚、1 つのフォルダに入っている。

テンプレートを選ぶ

テンプレートとはページの構成と見た目が最初から決まっている「型」です。白紙ではなく、入れ替えるだけの状態から始められます。

テンプレート一覧から、伝えたい空気に近いものを選びます。職種で決まっていないので、 「飲食だからカフェ風」と考えなくて構いません。お客様に持ってほしい印象で選んでください。

できた目安選んだ見本を見て、自分のお客様に見せてもよいと思える。

登録して、自分の専用ページをつくる

画面の右上にある登録を押し、店名・事業名とご担当者名を入れます。押すと、あなた専用のアドレスが 1 本できます。

専用キーとはあなたのページを見分けるための 8 文字です。アドレスの末尾に入っていて、 次からはそのアドレスを開くだけで、同じ下書きの続きから編集できます。

専用キーは紙かメモに控えてください。忘れても、同じ端末ならログインの一覧から選んで入れます。

Google のボタンから登録することもできます。その場合もできるものは同じ専用アドレスで、 違うのは「次に来たときに、キーを覚えていなくても戻れる」ことだけです。 お名前とメールアドレスを Google から受け取りますが、送信先はこの端末の中だけです。

できた目安専用アドレスを別のタブで開くと、自分の編集画面が出る。

編集画面を開く

専用アドレスを開くと、左に部品の一覧、中央にページの実物、右に見た目の設定が出ます。 登録せずに触ってみたいときは編集を試すから入れます（この場合、下書きは端末に 1 つだけです）。

ブロックとは見出し・写真・地図といった、置いて並べられる部品のことです。ブロックを選ぶと、中央の実物に黄緑の枠が出ます。

直した内容は自動で保存されますが、区切りがついたら上の帯の「編集を保存」を押してください。 押すと保存の合図が光ります。やめるときは「← TOPへ戻る」で表に戻れます。

この時点では、まだ誰にも見えていません。壊す心配をせずに触ってください。

できた目安中央のページのどこかを選ぶと、黄緑の枠が出る。

いちばん上の見出しを、自分の言葉にする

見出しとはそのページが何のページかを一言で言う文です。文章の中でいちばん大きく表示されます。

手順 01 で書いた 1 文を、相手に向けた言い方へ直します。 「地域で 30 年の実績」より「駅から歩いて 3 分、予約なしで入れます」のほうが、読んだ人が動けます。

長さは 20 文字前後まで。それより長くなるときは、後半を本文へ移します。

できた目安見出しを読んだ人が、次に何をすればよいか想像できる。

本文を短く書く

1 段落は 3 行まで。伝えたいことが 2 つあるなら、段落を分けます。 読む人はスマートフォンで見ているので、長い塊は飛ばされます。

あおる言い方（「業界最安」「絶対に」など）は使いません。 具体的な事実のほうが、読んだ人の判断材料になります。

できた目安どの段落も 3 行以内で、事実だけが書かれている。

写真を差し替える

写真のブロックを選ぶと、右側に「写真」の枠が出ます。そこへ、手順 03 で撮った写真を フォルダからそのまま引っぱって落とすだけで入ります。携帯・タブレットでは枠を押すと選べます。 いちばん上には、いちばん良く撮れた 1 枚を置きます。

自動の調整とは落とした写真は、その場で長辺 1600px まで小さくし、1 枚あたり数百 KB に軽くしてから入ります。 撮ったままの大きな写真をそのまま置くと、開くのが遅いページになるためです。 元の写真はお手元にそのまま残ります。

縦横比を選ぶと、スマートフォンでの切れ方も同時に決まります。 顔や商品が端に寄っている写真は、切れて消えることがあるので中央寄りのものを選ぶか、 「切り抜きの中心」を上下左右のうち被写体のある側に寄せてください。

複数枚を並べるときは「並べ方」を 12 種から選びます。迷ったら次の 3 つで足ります。 枚数が多いならグリッド、縦長と横長が混ざっているなら石畳、 見せたい 1 枚があるなら主役ひとつ。選び直しても写真は入れ直しになりません。

できた目安ページを上から下まで見て、借り物の写真が 1 枚も残っていない。

写真に説明文を付ける

代替テキストとは写真が表示できなかったときに代わりに読まれる文です。目で見られない人が使う読み上げソフトも、この文を読みます。alt とも呼ばれます。

「写真」「画像1」ではなく、写っているものを書きます。 「木のカウンター席と、窓から入る朝の光」のように、見たままで構いません。

飾りとして置いた図形には、付けなくて構いません。

できた目安内容を伝えている写真すべてに、10 文字以上の説明文が入っている。

配色を選ぶ

用意された組み合わせから選びます。自分で 1 色ずつ決めようとすると、 読めない組み合わせになりやすいためです。

コントラストとは背景と文字の明るさの差です。差が小さいと、明るい屋外では文字が見えなくなります。

迷ったら、白地に濃い文字を選んでください。どの環境でもいちばん読めます。

できた目安スマートフォンの画面を暗くしても、本文が読める。

全体の形をそろえる

右のパネルでいちばん上の「ページ全体の設定」を開くと、角の丸み・余白の量・版面の幅・ ボタンの形・文字の大きさ・見出しの字送りと太さ・罫線・写真の色味を選べます。 ここは 1 か所変えると全ページに同じように効くので、ページごとに直す必要はありません。

版面（はんめん）の幅とは文字や写真が入る中身の横幅です。広いほど 1 行が長くなり、読むときに目が戻りにくくなります。 文章が多いページは狭いほうが読めます。

迷ったら、触るのは 2 つだけで足ります。文章が多いなら版面の幅を「せまい」に、 写真の撮った日がばらばらなら写真の色味を「白黒」に。 この 2 つは、素材の弱さをいちばん目立たなくします。

できた目安設定を変えたあと、ホーム以外のページも開いて、同じ形になっている。

ボタンの行き先を決める

ボタン（CTA）とは読んだ人にしてほしい行動を 1 つだけ置いたものです。電話をかける、予約する、地図を開く、などです。

1 ページに置くボタンは、多くても 2 種類までにします。 選択肢が増えるほど、どれも押されなくなります。

文言は「詳しくはこちら」ではなく「電話で予約する」のように、押したあとに起きることを書きます。

できた目安ボタンを押すと、電話・地図・フォームのいずれかが実際に開く。

スマートフォンの見え方を確かめる

レスポンシブとは画面の幅に合わせて、並びが自動で組み替わるしくみのことです。横に並んでいたものが、縦に積み直されます。

編集画面の表示幅をスマートフォンに切り替えて、上から下まで見ます。 見出しが 4 行以上に折り返していたら、短くします。

横に動かさないと読めない表があれば、項目を減らすか、縦並びに変えます。

できた目安横スクロールをしないで、最後まで読める。

プレビューで通して読む

プレビューとは公開する前に、訪問者と同じ見え方で確かめる画面です。ここで見ている間は、まだ誰にも見えていません。

次の 4 点だけ、声に出して確かめてください。

• 電話番号は合っているか（掛けてみる）
• 営業時間と定休日は最新か
• 住所と地図の場所が一致しているか
• 問い合わせフォームから送って、自分に届くか

できた目安4 点すべてを、実際に試して確かめた。

公開する

公開とは作った内容を、誰でも見られる状態にすることです。押すまでは下書きのままで、外からは見えません。

完璧になってから出そうとすると、いつまでも出ません。 連絡先と営業時間が合っていれば公開してください。文章と写真はあとから何度でも直せます。

編集画面の「公開に進む」を押すと、公開の手順の画面に移ります。押した時点ではまだ外に出ていません。残りは 4 つだけです。 できあがりを見る、携帯の幅で見る、ページの住所を決める、申し込む。

公開したあとは、設定マニュアルへ進みます。ドメインや検索への登録は、公開後に行う作業です。

できた目安公開の手順の 4 つすべてに済みの印が付き、申し込みの控えが出ている。