Squareオンラインビジネスのアカウントを登録し、ホームページを作る段階となったとき、「どこから手をつければいいのか分からない」と感じる方も多いと思います。
そこでこの記事では、Squareで無料ホームページを作る流れを、実際にサイトを作った手順に沿って紹介します。
画像付きで詳しく解説しているので、ぜひ参考にしてください。
なお、Squareアカウントの作成方法や無料プランの始め方は、先に公開しているこちらの記事で紹介しています。
まずは登録をして、実際の画面を見ながら手を動かしてみてください。
Squareでホームページを作る前に、まずページ構成を決める
ホームページを作るときは、いきなり画像や文章を入れ始めるよりも、先にページ構成を決めておきます。
- ホームページに必要なページを決める
- ページのレイアウトを決める
- 画像や文章など、素材を用意する
それぞれ説明していきます。
①必要なページを決める
必要となるページを決めておきます。
- トップページ
- 会社概要
- サービス案内
- お知らせ
- お問い合わせ
など。
数に限りはありませんが、多いとページを作る手間が増えるので、最初は必要最小限でいいと思います。
②ページのレイアウトを決める
各ページのレイアウトを決めておきます。
ページのどこに何を置き、どんなデザインにするかを、手書きでもいいので作っておきましょう。
③画像や文章など、素材を用意する
②で決めたページのレイアウトにあわせて、画像や動画、文章などの素材を準備しておきます。
画像や動画は、できれば自社で撮影したものがあるのがベストですが、用意できない場合は素材サイトを利用してもOKです。
文章は手書きでも良いですが、Wordやメモなどに打ち込んでおくことがおすすめです。
そうすることで、ホームページ制作のときにコピペができるので、入力の手間を省くことができます。
この3つの作業は、必ず事前に行いましょう。とても大切な部分です。
【参考】今回解説するホームページの構成と各ページに実際に入れた内容
今回は、次の5ページ構成で作成しました。
- ホーム
- メインビジュアル
- コンセプト
- メニュー紹介
- 強み
- プロフィール
- お問い合わせ導線
- メニュー
- メニュー一覧
- 施術の流れ
- よくある質問
- お問い合わせ導線
- サロン案内
- 店舗住所
- 営業時間
- 地図
- お知らせ
- お問い合わせ
この内容に沿って、Squareでホームページを作る手順を紹介していきます。
Squareオンラインビジネスの登録がまだの人は、こちらの記事を参考に登録をすませてください。
▶ Squareオンラインビジネスの始め方｜アカウント作成から無料プラン選択まで
Squareでホームページを作る手順｜初期設定
ここからは、実際にわたしがSquareでホームページを作った順番で紹介していきます。
やり方や入力については、あくまでも一例として参考にしてください。
それでは、まずは初期設定の手順を紹介します。
まずは、用意されている無料テーマの中からベースになるデザインを選びます。
今回は、下画像の無料テーマを選びました。
（テーマは後から変更できるので、何を選んでもOKです）
無料テーマを選ぶまでの流れについては、こちらの記事を参考にしてください。
▶Squareオンラインビジネスの始め方｜アカウント作成から無料プラン選択まで
Squareではモバイル表示が意識されていますが、実際に作業する時はデスクトップ表示の方が全体を見やすいため、デスクトップの表示にします。
基本の作業はデスクトップ表示で進めて、区切りごとにモバイル表示を確認しましょう。
今回は、初期状態である［HOME］以外に、次の4ページを追加します。
- メニュー
- サロン案内
- お知らせ
- お問い合わせ
以下、追加手順になります。
①画面左メニュー内の［HOME］→［ページを追加する］の順にクリックします。
②［空白のページ］をクリックし、「メニュー」と入力したら［追加］をクリックします。
③続いて、［さらに表示］をクリックし、［企業情報］を追加します。
④同じ流れで、［記事の一覧］と［お問い合わせ］を追加します。
①［企業情報］の［…］をクリック→［ページ設定を表示］をクリックします。
②ページの設定画面が表示されるので、ページ名とURLを変更しましょう。
（ここでは例として、ページ名を「サロン案内」、ページURLを「access」と入力しています。）
これを先にやっておくと、ヘッダーやフッターのメニュー表示が、自分の希望のメニュー表示になります。また、URLでも何のページかが分かるようになります。
ここまでが初期設定に当たる部分です。
他にもやれることはありますが、まずはここまでやっておけば大丈夫だと思います。
続いて、各ページの編集をしていきます。
Squareでホームページを作る手順｜トップページ
トップページは、あらかじめ作っておいたレイアウトをもとに、最初にブロックだけ全部置いてから中身を入れる方法が理想です。
しかし、わたしの場合は、上から順番に作りながら整えていきました。
各エリアでは、作り方手順に加え、基本的な操作方法や、便利なやり方などを紹介しています。
また、ポイントや注意点なども記載しています。
まずは、どんなトップページか見た見たい方はこちらからどうぞ。
▶ Squareで作成したサンプルのトップページ
メインビジュアルを変更する｜トップ画面画像の変更方法
最初から入っている画像とテキストを、自分が用意した画像とテキストに変更します。
ここでは、トップ画面画像の変更方法が分かります。
初期状態のメイン画像をクリックし、左のメニューに表示された［ごみ箱のマーク］をクリックし削除します。
①左メニューに表示されている［画像を追加］をクリックします。
②画像を追加画面が表示されるので、アップロードした画像を選択→［完了］をクリックします。
［編集］ボタンから、画像の編集をすることができます。
変更したい見出しの文字をクリックし、文章を変更します。
Squareでは基本的に、「編集したい個所をクリック」→「クリックした箇所がメニューに表示」という仕組みになっています。
色の変更や見出し以外のテキストの追加も可能です。
ボタン部分をクリックし、左メニューの［ボタン］のチェックをオフにします。
わたしはとりあえずボタンリンクは非表示にしましたが、必要な場合はそのままでOKです。
必要な人は、移動してもらいたいリンクを追加してください。
完成したら、必ずスマホ表示での確認をしてから［完了］をしましょう。
スマホ画面での表示の確認は、これ以降も都度行ってください。
コンセプトエリアを作る｜セクション追加の基本
コンセプトのセクションは、初期に入っていたセクションを削除してから、新たに［テキストと画像］セクションを追加しました。
ここでは、セクション追加の基本が分かります。
①初期状態のセクションをクリックし、左のメニューの下に表示される［セクションを削除］をクリックします。
②「このセクションを削除してもよろしいですか？後でいつでも追加できます。」と表示されるので、［削除］をクリックします。
①左メニューから、［セクションを追加］をクリックします。
②続いて、左メニューから［テキストと画像］をクリックし、お好みの表示スタイルを選択します。
（ここでは左に画像、右にテキストが表示されるスタイルを選択しています。）
②画像エリアをクリック→［画像を追加］から、画像を追加します。
③次に、テキストエリアをクリックして、テキストを入力します。
編集したい個所のテキストエリアをクリックし、左メニューから文字の大きさや太字、色の変更などができます。
メニュー紹介エリアを作る｜グループの追加とボックスを3列にする方法
メニュー紹介のセクションは、［テキストと画像］セクションを追加しました。
ここでは、グループの追加とボックスを3列にする方法が分かります。
①左メニューに表示されている［画像を追加］をクリックします。
（ここでは画像が2つ横並びになっている表示スタイルを選択しています。）
②今回は3つのメニューを並べたいので、左メニューから［グループを追加する］をクリックします。
③左メニューの下の方、デスクトップの列で［3］を選択します。すると、画像が3つ並んだ表示スタイルに変更になります。
追加したセクションに、セクションタイトルを表示します。
①左メニューのコンテンツ下の、［セクションタイトル］をオンにします。
②セクションタイトルが表示されたら、お好みのテキストに変更します。
画像エリアをクリック→［画像を追加］から、画像を追加します。
［画像を編集］から、追加した画像の形を変えることができます。
ここでは、1：1の正方形から、4：3の横長の形に変えています。
左メニューの［カラースタイル］から、セクションエリアの色を変更することもできます。
上のセクションと、下のセクションで、色のメリハリをつけたいときに使うと便利です。
強みエリアを作る｜セクションの複製で時短
強みエリアは、［テキストと画像］セクションを3つ追加しました。
ここでは、セクションの複製で時短にする方法が分かります。
コンセプトエリアと同様のやり方で、左メニューから［テキストと画像］をクリックし、お好みの表示スタイルを選択し、画像を追加します。
（ここでは左に画像、右にテキストが表示されるスタイルを選択しています。）
「Quality 1」の部分は、タグラインをオンにして入力しています。
3つのボックスを縦に並べて入力するイメージです。
①複製したいセクションをクリックすると、メニューのセクションがグレイアウトになります。
②グレイアウトになったセクション名の［…］をクリック→［複製］をクリックします。
複製して画像とテキストを入れ替えたセクションは、レイアウトの変更が可能です。
ここでは、画像を右に、テキストが左になるレイアウトをクリックしてレイアウトを変更しています。
複製ではなく、グループの追加を利用した場合は、レイアウトの変更はできません。
①3つ目のセクションも、2つ目と同様に複製をします。
②画像とテキストを入れ替えます。
③レイアウトを変更します。
同じものを作成したい場合は、複製をして中身を入れ替える方法を使うと時短にもなるし、失敗も少なくなります。
プロフィールエリアを作る｜背景に画像を追加
プロフィールエリアは、［テキスト］セクションを追加し、背景に画像を追加しました。
ここでは、背景に画像を追加する方法が分かります。
左メニューから［テキスト］をクリックし、お好みの表示スタイルを選択します。
タイトルや説明文など、テキストを入力します。
必要のない項目は、左メニューからオフにして非表示にできます。
左メニューの［背景］から画像を追加します。
詳しい画像の追加方法は、「4-1 メインビジュアルを変更する」で説明しています。
お問い合わせエリアを作る｜ボタンリンクを追加
お問い合わせエリアは、［ボタン］セクションを追加しました。
ここでは、ボタンリンクの追加方法が分かります。
左メニューから［ボタン］をクリックし、お好みの表示スタイルを選択します。
タイトルや説明文など、テキストを入力します。
（入力箇所は、次のSTEP3の画像を参照ください。）
①セクションのボタンをクリックし、左メニューの［リンクを追加］をクリックします。
②リンクを追加画面が表示されるので、リンク先を「標準ページ」、ページを「お問い合わせ」にし、［保存］をクリックします。
この設定で、ボタンを押すと「お問い合わせ」ページに移動するようになります。
メニューページは、トップページと同様に、「画像とテキスト」「テキスト」「ボタン」セクションで作成しています。
こちらのページを参考にしてください。
▶ Squareで作成したサンプルのメニューページ
Squareでホームページを作る手順｜アクセスページ
サロン案内（店舗情報・アクセス）ページには、テンポの所在地や営業時間、アクセスマップを表示することができます。
Square登録時に、情報を入力してあれば、とても簡単に設定することができます。
サロン案内ページはこちらから確認できます。
▶ Squareで作成したサンプルのサロン案内ページ
作成手順を解説していきます。
①左メニューのページ検索から［サロン案内］をクリックします。
②［セクションを追加］をクリックします。
①左メニューを下の方へスクロールし、［店舗と営業時間］をクリックします。
②あらかじめ登録してある店舗と営業時間に加え、自動的にマップも表示されます。
レイアウトや色など、カスタマイズすることもできます。
Squareでホームページを作る手順｜お問い合わせページ
お問い合わせページは、初期設定で［お問い合わせ］ページを追加した時点で、Squareオンラインビジネスの標準のお問い合わせページが自動で追加されます。
なので、標準以外の質問を追加するだけでOKです。
サロン案内ページはこちらから確認できます。
▶ Squareで作成したサンプルのお問い合わせページ
作成手順を解説していきます。
①［お問い合わせ］ページを開き、すでにある標準のお問い合わせセクションをクリックします。
②左メニューの質問から、［質問を追加］をクリックして、お問い合わせの際に必要な項目を追加しましょう。
レイアウトや色など、カスタマイズすることもできます。
Squareでホームページを作る手順｜お知らせ（ブログ）ページ
お知らせは、Square標準のブログ機能を使います。
サロン案内ページはこちらから確認できます。
▶ Squareで作成したサンプルのお知らせページ
作成手順を解説していきます。
①検索メニューから［記事］を選択します。
②記事一覧ページがが表示されるので、必要であれば、記事バナーを設定しましょう。
（ここでは、記事バナーのチェックをオフにし、非表示にしています。）
レイアウトや色など、カスタマイズすることもできます。
①検索メニューボックスをクリックし、メニュー一番下の［記事を追加］をクリックします。
［記事］→［記事の一覧］→［新規記事の作成］からでも記事の追加ができます。
②タイトルを入力し、メニューから編集をします。
③画像を追加します。
④画像下に、テキストを入力し、最後に［完了］をクリックします。
Squareでホームページ｜サイトデザインの変更方法
サイトデザインでは、色や見出しのフォントなど、ホームページ全体の雰囲気を変更することができます。
最初に全体のデザインを決めた方がよい場合もありますが、今回は、画像や文章を入れてからの方が完成イメージをつかみやすかったため、デザインの調整は最後に行いました。
ただし、最後に設定を行うと多少デザインが崩れてしまいますので、デザイン崩れを最小限にしたい人は、最初に設定するのがおすすめです。
作成手順を解説していきます。
①左メニューの［サイトデザイン］をクリックします。
②サイトのスタイルから［サイトのスタイルを変更］をクリックします。
③お好みのスタイルをクリックします。
新しいサイトスタイルを選択すると、現在設定されているデザインがまるごと変更になるのでご注意ください。
①左メニューの［ロゴ］をクリックで、ロゴ画像を追加することができます。
②追加したロゴ画像は、［サイズを編集］からサイズ調整ができます。
その他に色やフォント、リンクボタンの角なども、カスタマイズすることができます。
Squareでホームページ｜カート・検索アイコンを消す方法
カートのアイコンや、検索アイコンは、以下の手順で非表示にできます。
手順を解説していきます。
※ヘッダーは、どのページからでも編集可能です。
①左メニューの下の方の［アイコン］をクリックします。
②［カートのアイコン］［検索アイコン］のチェクをオフにすると、非表示になります。
Squareでホームページを公開する方法
ホームページが完成したら、公開をしましょう。
今回はホームページ作成後に公開設定をしましたが、仮公開として、最初に公開してもOKです。
手順を解説していきます。
①ドメインを設定するという画面が開いたら、［Squareのサブドメインを使う］をクリックします。
②「https://〇〇〇 square.site」 の「〇〇〇」部分に、お好きなドメインを入力し、［変更］をクリックします。
③サイトが公開されます。
Squareでホームページを作ってみた感想
実際にSquareでサイトを制作してみて感じた、率直な感想は次の通りです。
- 慣れるまでが少しハードル 詳細な解説記事が少ないため最初は戸惑うかもしれませんが、一度操作に慣れてしまえば難しくはありません。
- 「型」が決まれば制作はスムーズ 事前にページ構成や素材（画像・文章）を準備しておけば、操作自体は迷いにくく、1日ほどで形にすることができました。
- 初心者に優しい操作感 決められた枠組みに要素を当てはめていくスタイルなので、デザインに自信がない初心者の方でも進めやすいサービスだと感じます。
Squareでホームページを作るときの最低限のチェックポイント
制作を終えてから「こんなはずじゃなかった」とならないための、最低限のチェックポイントは次の通りです。
- 必ずモバイル表示を確認する PCでの作業が中心になりますが、ユーザーの多くはスマホで閲覧します。最後に必ずモバイル画面での見え方をチェックしましょう。
- WordPressほどの自由度はない 文字を好きな位置に配置するといった細かなカスタマイズには限界があります。「シンプルに、効率よく」作るためのツールと割り切ることが大切です。
- ドメインの所有権を理解しておく 無料プランの場合、ドメインはあくまでSquare所有のサブドメインになる点には留意が必要です。
まとめ：まずは形にしてみよう
Squareは、まずはコストをかけずにスモールステップでホームページを持ちたい方に最適なツールです。
完璧を目指して止まってしまうより、「まずは作ってみて、公開してから少しずつ修正していく」。
この進め方が、挫折せずに形にする一番の近道だと感じました。
WordPressのような細かい自由度はありませんが、完全無料でここまで形にできるのは大きなメリットです。
ぜひ挑戦してみてください。
