この記事には2024年の作成時と2026年の更新時の画面が含まれます。現在は画面の配置や表示文が異なる場合があります。操作する項目の名前を確認しながら進めてください。無料公開・お試しの条件は2026年10月1日に確認しました。料金や各プランの対象機能は変わることがあるため、申し込み前に公式サイトの最新条件を確認してください。

お店(イベント)のホームページが欲しいけど、プロに頼むと高いだろうし、自分で作るのは難しそう、そんなふうに悩んでいませんか?

そこで便利なのが、専門知識不要で簡単にホームページを作れる「ペライチ」。

なにが便利なのか知りたい、使い方がイマイチわからない人へ向けて、使い方やホームページを作るときのコツを解説します。

1.ペライチとは?何ができる?

ペライチで作成したホームページ例

ペライチなら、専門知識なしで、クリックでの操作でホームページを作成することができます。

ペライチのホームページ作成画面

このようなホームページ作成画面で、クリックして文章編集して…とサクサクと作っていくことができます。

ペライチのホームページ作成画面のブロック

ホームページ上のパーツはいろいろ用意されており、クリックで選んで挿入するだけです。

ペライチのホームページ作成画面の文章入力

テキストも、通常のパソコンでのキーボード入力ができれば、簡単に編集できます。

ペライチのホームページ作成画面のスマホプレビュー

もちろん、パソコン用だけでなく、スマホ表示用のホームページも同時に完成できます。(別途作る必要はありません)

縦にスクロールしていくだけのホームページであれば、とても簡単に作成できます。(もちろん、複数ページのWebサイトを作成することもできます)

他にも、契約プランによりますが、以下のような機能を簡単に付け加えることもできます。

  1. 決済機能 オンラインショップやイベントチケット販売などで便利。
  2. 予約システム・顧客管理 サロンのコース予約や、打ち合わせ予約などで便利。
  3. SNS連携 ホームページ上にSNSの内容を埋め込んで表示できるので、お知らせとして活用可能。
  4. フォーム シンプルな問い合わせから資料請求まで、幅広いフォームを簡単設置。

他にもいろいろありますが、よく使われる必要な機能はこのあたりでしょうか。

これらを難しいコードを書くことなく、簡単な操作だけで作成できるのは、とても便利ですね。他サービスを導入する必要がないのも助かります。

ただし、継続して公開するには有料プランが必要

前は無料プランがあり、機能は制限されつつも無料でホームページ作成・公開も可能でした。

現在のフリープランではホームページを公開できません。無料お試し期間中は公開できますが、期間終了後も公開を続けるには有料プランの契約が必要です。

ペライチの有料プラン一覧

プランごとに使える機能が異なっています。なお、最初の1ヶ月間は無料でお試しすることも可能です。

Wixは無料プランでもホームページを公開できます。予約やオンライン決済などは、利用したい機能に対応したプランを確認してください。有料プランを比較するときは、契約期間・料金・必要な機能をそろえて確認しましょう。

2.ペライチでのホームページの作り方

ペライチでのホームページの作り方は、おおまかに以下のような流れです。

  1. 会員登録する
  2. テンプレートを編集、またはイチからページデザインを作成
  3. 少しだけ設定をしてページを公開

ひとつずつ解説していきます。よければこの公式サイトから無料会員登録をして、画面を見ながらいっしょに操作してみてくださいね。

2-1.会員登録の方法

まずはこちらのペライチ公式サイトへアクセスします。

ペライチで会員登録

するとこのような画面が開くので、「自分で作成する」をクリックします。

Googleアカウントを選択

使いたいメールアドレスとパスワード、電話番号を入力し、「無料会員登録」をクリックします。Googleアカウントで登録する方法もあります。必要な情報は登録画面の案内に従って入力してください。

アカウントを選ぶ

Googleアカウントで登録する場合は、使用するGoogleアカウントを選択します。

ペライチにログインする

「次へ」をクリックしましょう。

ペライチのホーム画面が開けた

これでペライチのホーム画面を開くことができました(なにかポップアップ画面が出た場合は閉じて大丈夫です)。ここからホームページ作成をしていきます。

ページの作成や操作の確認は無料でできます。無料お試し期間中は公開もできますが、期間終了後も公開を続けるには有料プランを申し込む必要があります。

とりあえず、まずは使ってみて操作感を確認しましょう。ここからペライチの使い方を解説していきます。

2-2.ホームページの作り方(テンプレート編集)

それでは、実際にホームページを作ってみましょう。

まずはより初心者向けな、テンプレートを使ってホームページを作る方法として、テンプレートの開き方を解説します。

ペライチでページを作成をクリック

まずは新規でページを作成しましょう。「ページを作成」をクリックします。

ペライチ内のカテゴリーが表示されているので選択して検索

テンプレートが表示されますが、左側のメニューでカテゴリーで絞り込みができます。例えばイベント系のテンプレートを探したかったら、「イベント」にチェックを入れ、「検索」をクリックしましょう。

プレビューを見るを選択

いいテンプレートが見つかったら、クリックしてプレビューを表示させましょう。

ペライチのテンプレートが表示される

このように、プレビューが表示され、実際にどのように見えるかを確認できます。(下にスクロールできます)

パソコン版またはスマホ版などプレビューサイズを変更できる

上のアイコンをクリックすると、タブレット画面やスマホ画面でホームページを表示する際の様子も確認できます。

使うをクリックする

よさそうだったら、右上の「使う」をクリックします。

ペライチで作りたいホームページのタイトルを入力

すると、ホームページのタイトル入力画面になります。後から変更できるので、とりあえずのものでも大丈夫です。入力後は「ページ作成を始める」をクリックしましょう。

ペライチのホームページ編集画面で、テンプレートを開けた

このように、ホームページのテンプレートをペライチの編集画面で開くことができました。

テンプレート上のパーツをクリックして編集したり、新しく必要なパーツを追加したりしながら、ホームページを作っていきます。

編集を終わるときは保存をクリック

なお、編集を終わるときは、左側にある「保存」をクリックしましょう。

マイページに戻る、ペライチの管理画面に戻る

左上の「マイページへ戻る」をクリックすると、ペライチの管理画面に戻ることができます。

ペライチの管理画面で作業途中のホームページはこのように表示される

管理画面では、編集途中のホームページはこのように表示されます。

編集を再開したい場合はここをクリック

編集を再開したい場合は、ここをクリックしましょう。

2-3.ホームページの作り方(イチから自分で作成)

ペライチで用意されたテンプレートを使用してもよいですが、もちろん真っ白なページにイチから作成することも可能です。(そのほうが楽な場合もあります…)

具体的な編集方法とあわせて、解説していきますね。

ペライチで作ったホームページの完成

今回は例として、「犬連れで参加できる、愛犬&飼い主向けのイベント」のホームページを作成したいと思います(すべて実在しません)。よければ一緒に操作して、一度自分で作ってみましょう。

ホームページ作成の前準備

ざっくりでいいので、あらかじめ以下の2点を考えておきます。

  1. 何の情報を入れるか
  2. どういう順番で並べるか

「何の情報を入れるか」は、例えば、イベント開催のお知らせホームページであれば、「開催日時」「場所」「イベント内容」「アクセス」「よくあるお問い合わせ」などですね。もちろん後から追加もできますが、どんな内容のホームページにするのかを考えておきます。

ホームページ作成の素案

こんなかんじでざっくりと、「何の情報」を「どういう順番」にするか書き出します。紙にボールペンとかで殴り書きしてもOKです。

あとでいくらでも修正できるので、ここではざっくりで大丈夫です。決まったら、さっそくペライチで作成していきましょう。

ホームページを新規作成する

まずは新規ページを作成します。

の管理画面でページの作成をクリック

マイページトップで、「ページを作成」をクリックします。

白紙から作成するをクリック

テンプレートの一覧が表示されますが、気にせず右側の「白紙からページを作成」をクリックします。

ホームページタイトルを入れて、ページ作成を始めるをクリック

するとホームページタイトルの入力欄が出るので、とりあえず入力しましょう。後から変更もできます。

ペライチのホームページ作成画面が開いた

ペライチのホームページ編集画面が開きました。ここからホームページを作成していきます。

3.ペライチのホームページ編集画面の操作方法

3-1.ざっくりと画面の説明

ペライチの編集画面では左にメニューがある

ペライチの編集画面では、左側にメニューがあります。

よく使うのは4つです。

まずは保存ボタンですね。ときどきクリックして、作業状態を保存しておきましょう。

ホームページが実際にどんなふうに見えるかどうか、確認するときにはプレビューを使います。

一つ前の操作に戻したり進めたりする

操作を間違えたときは、ここから操作をひとつ戻すことも、すすめることもできます。

パソコン画面用やスマホ画面用に切り替えできる

編集画面上でも、画面サイズの表示切り替えができます。

左のメニューでよく触るのはこの4つですね。他は必要に応じて使うので、とりあえず4つ覚えておけばOKです。

ブロックを追加する

右側では、ここからブロックを追加します。ペライチの「ブロック」とは、ホームページのパーツのことです。

ペライチのブロックはカテゴリーごとに分かれている

ブロックは一覧で確認でき、左側にカテゴリーのメニューがあります。

スマホで見たときのブロックなどもここで切り替えできる

ブロックの一覧でも、画面サイズの切り替えができます。「スマホではどのように見えるのか」をブロックを選ぶ時点で確認できるのは嬉しいですね。

3-2.おすすめの手順

ホームページ作成では、分野にもよりますが、スマホユーザーが多いのでスマホ画面向けを優先して作るのがおすすめです。

なので、基本はスマホサイズでホームページを作成していき、ついでに「パソコンからどう見えるか」を確認して、おかしかったら調整するのがよいかと思います。

また、色などをあまり細かく調整できないので、先に文章+画像の骨組みを作り、あとから色などのデザインを変更するのがおすすめです。

3-3.ブロックを追加して骨組みを作る

それでは、ホームページを作っていきましょう。

ペライチで作ったホームページの完成

「犬連れで参加できる、愛犬&飼い主向けのイベント」のホームページを作っていきたいと思います。

一緒に操作する上で、画像があったほうがやりやすいと思うので、よければこちらのgoogleドライブから画像をダウンロードしてご使用ください。

ヘッダーを作る

ヘッダーはこの部分

まずはヘッダーと呼ばれる一番上の部分を作ります。

ブロックを追加する

プラスマークをクリックして、ブロックを追加します。

ペライチでヘッダーを追加していく

左のカテゴリーが「ヘッダー/メニュー」になっているのを確認し、スマホ優先で作りたいので、上のタブでスマホ表示に切り替えます。

下手のブロックを選んだら決定をクリック

好きなヘッダー(今回は左画像+右メニュー(上部固定))をクリックし、下の「決定」をクリックします。

ちなみに「上部固定」というのは、スクロールしたときに上部に表示され続けるようにする設定です。

スマホ表示に切り替えてみる

デフォルト状態のヘッダーが追加されたので、左メニューでスマホ表示に切り替えて確認しましょう。ちなみにスマホだと横幅が狭いので、メニューは折りたたまれます。

ロゴ画像をクリック

続いて、デフォルトの画像を、自分で用意したヘッダー画像に変更します。画像部分をクリックしましょう。

マイライブラリをクリック

左側に、自分で用意した画像を保存できる「マイライブラリ」があるので、クリックします。

画像を選択してアップロードをクリック

「画像を選択してアップロード」をクリックします。

パソコンのフォルダが開くので、アップロードしたい画像を選択し、「開く」をクリックします。

画像を使用するをクリック

画像が加わっているので、「画像を使用する」をクリックします。

ヘッダーの画像を変更できた

ヘッダー画像が差し替わりました。

右側の「メニューの内容」は、最後に編集します。とりあえずはそのままにしておきましょう。

画像を挿入する

ペライチでトップ画像を挿入する

続いて、Canvaで作成したトップ画像を挿入します。

Canvaは、最近とても勢いのある無料でも使えるデザインツールです。いろんな便利な機能があり、会社の資料作成から教育現場、デザイナーさんまで、幅広い分野で使われています。

画像ブロックを追加する

では、トップ画像を追加する場所(ヘッダーの下)のプラスマークをクリックしてブロックを追加していきます。

画像を選択して決定をクリック

左側のカテゴリーで「画像/動画」をクリックし、「画像(横幅フルサイズ)」を選択したら、下の「決定」をクリックします。

横幅フルサイズなら、表示画面のサイズが大きくなってもサイズを調節して画面幅いっぱいに広げてくれます。普通の「画像」のブロックの場合、横幅が画像幅を超えると、余白ができてしまうので、「横幅フルサイズ」が基本的にはおすすめです。

デフォルト画像を変更する

デフォルトの画像を差し替えたいので、画像をクリックしましょう。

MyLibraryから画像をアップロード選択する

画像の追加方法はヘッダーの時と同じです。マイライブラリからアップロードを選択し、アップした画像をクリックしてホームページ上へ追加します。

ペライチでファーストビューの画像を設定できた

このようにトップ画像を追加できました。

文章を挿入する

ペライチで文章を挿入する

続いて、この部分のような「文章のみ」を挿入してみたいと思います。

テキストのブロックを追加する

まずは文章を挿入したいところのプラスマークをクリックします。

「文章」のカテゴリからテキストのみを選ぶ

左のカテゴリで「文章」をクリックし、「テキストのみ」を選択したら、下の「決定」をクリックします。。

テキストが挿入された

デフォルトのテキストが挿入されました。クリックして編集していきましょう。

クリックして編集、上にメニューがある

上部に文字編集のメニューがあります。「中央揃え」や「フォントサイズ」などはここから変更できます。

テキストを編集したら決定をクリック

文章をクリックして編集し、中央揃えにしたら、「保存」をクリックします。

うまく中央揃えできないときは、一度テキスト全体を選択して、そのうえで中央揃えしてみてくださいね。

テキストが挿入された

このようにテキストが挿入できました。

枠付きテキストを挿入する

ペライチには「枠付き」や「ノート」など、装飾つきの文章ブロックが複数あります。今回は「枠付き」を使ってみましょう。

枠付きテキストを挿入してみる

こんなかんじの、枠線で囲まれたテキストです。(枠線の色はあとで変更できます)

文章カテゴリの枠付きテキストを選択

他のブロック同様、挿入したい場所のプラスマークをクリックしたら、「文章」カテゴリの「枠付き」を選択し、決定をクリックします。

ボタンを消す

余計な「ボタン」があるので、これを削除しましょう。「ボタン」の右側の赤いバツをクリックすれば、削除できます。

このように、複数のパーツ(枠+見出し+本文+ボタン、など)で作られているブロックは、不要なパーツのみを削除してアレンジすることも可能です。

見出しを編集

さて、ボタンを消せたので、上の「見出し」をクリックして編集します。

テキストの内容を編集する

テキストを変更して中央揃えし、保存をクリックします。

下のテキストも同様に編集

見出し部分を変更できたので、下のテキストも同様にクリックして変更します。

枠付きのテキストができた

このようにスッキリ仕上がりました。

ちなみに、ペライチの決済機能を活用して、ここに「チケット購入」などのボタンを置くことも可能です。

区切り線を挿入する

ペライチの区切り線

続いて、このような「区切り線」を挿入してみたいと思います。

区切り線もブロックのひとつなので、プラスマークをクリックして追加します。

ブロックの中に区切り線がある

ブロックのカテゴリの中に「区切り」があるので、それをクリックすると「区切り線」の一覧が表示されます。(今回はドット線を選びました)

区切り線を挿入できた

区切り線を挿入できました。(色はあとで変えます)

「タイトル+画像+説明」を挿入する

画像とテキストのセットを挿入する

続いて、このような文字と画像のセットを挿入してみましょう。

スマホ表示だと、縦並びになる

ちなみにスマホ表示では、幅が狭いため、横並びのものは縦並びに変更されるようになっています。

カテゴリから画像・文章の画像比率固定を選択

プラスマークをクリックしてブロックを追加し、「文章+画像(画像比率固定)」のカテゴリから「上画像(3列/丸)」を選びましょう。

なお、画像比率固定ではない「文章+画像(複数)」というものもありますが、比率固定がおすすめです。固定でない場合、画像が変に引き伸ばされてしまったり、変なふうになってしまったりすることがあるので、固定にしておきましょう。

画像・文章ブロックが挿入できた

ブロックが挿入できましたね。これを編集していきます。

右上のバツでボタンを消す

まず、下のボタンがいらないので、マウスをのせたときに右上に表示されるバツをクリックして削除します。

あとはテキストと画像を入れていく

あとは、これまでやったように、画像をアップロードして挿入、見出し・小見出し・本文のテキストを編集していけばOKです。

画像の切り抜きがずれる

ただ、画像の形によってはこのように、挿入時に変な切り抜きになってしまうことがあります。なのでこれをクリックして、修正しましょう。

比率固定で正円を選択

クリックするとこのような画面になるので、「比率を固定する」→「正円」をクリックします。

拡大率を調節

するとこのように、円の中に長方形の画像が表示されます。右側の「画像の拡大率」を、青い丸を左右に動かして調節しましょう。

いいかんじに拡大してドラッグして調節

拡大率を上げて、表示させたい部分を円の中におさめ、画像をクリックしたまま動かして位置を微調整します。最後に「保存」をクリックしましょう。

きれいに切り抜けた

いいかんじに円の形で切り抜けましたね。

このように画像はペライチ上で切り抜くことができるので、元の画像データはそのままの形で大丈夫なことがほとんどです。

Q&Aコーナーを作る

折りたたみ可能なよくある質問を挿入

続いて、「よくある質問」などをのせるQ&Aを挿入してみましょう。回答は折りたたみできます。

よくある質問Q&Aは、箇条書き・リストの中

ブロックを追加し、「箇条書き・リスト」のカテゴリから「よくある質問(折りたたみ)」を選択します。

Q&Aが挿入された

デフォルト状態の「よくある質問」が挿入できました。あとは、見出しや各テキストをクリックして編集すればOKです。

質問を消したい場合はバツで削除

なお、デフォルトは質問が3つ分になっていますが、右上のバツ印で削除して減らすこともできます。

質問を追加したい場合は下のプラスマーク

逆に、もっと増やしたい場合は、下のプラスマークをクリックすれば追加できます。

アクセス・地図を挿入する

ペライチで地図を挿入する

続いて、会場へのアクセスをのせたいと思います。地図をCanvaで作成して画像にし、詳細を文章で添えます。

文章+カードのブロックを使用

ブロックは、「文章+画像」のカテゴリ内の「文章カード+画像」を使います。

文章+カードが挿入された

スマホ表示ではこんなかんじで、ブロックが挿入されました。あとは画像をアップロードして挿入し、文章を編集するだけなのですが…

上に画像がかぶっていて見出しが編集できない

見出しに画像が被っていて、見出しをクリックしようとしても、画像がクリックされてしまうんですね。

パソコン表示にすると編集できる

解決方法は簡単で、パソコン表示に切り替えてからテキスト編集するだけです。画像の場所が変わって、被らないので見出しをクリックできます。

こんなかんじで、パーツが被って目的のものが選択できないときは、スマホ表示とパソコン表示を切り替えると解決することが多いです。

テキストが変なところで改行されてしまう

さらに、この「まだ余白があるのに変なところで改行されてしまう問題」も解決方法があります。できればちゃんと1行で表示したいですよね。

テキストの後ろに空白スペースを入れる

テキストの編集時、改行されてしまう文章の後ろにスペースを適当にいくつか打ちます。

変な改行がされなくなった

それだけで、文章カードの範囲が広がって、ちゃんと1行で表示されるようになりました。

Googleマップの埋め込みも可能

なお、Googleマップを埋め込むことも可能です。ブロックで「地図」のカテゴリがあり、テキストとセットで挿入することもできます。

文章と横並びなどもできる

こんなかんじで、テキストとGoogleマップを並べて表示することもできます。

住所を入れて地図を更新

マップをクリックして、表示させたい住所を打ち込み、「地図を更新する」をクリックすれば、任意の場所を表示できます。

同じブロックを追加する

ペライチで同じブロックを追加したい

「上下に同じ区切り線を配置したい」など、同じブロックを使うなら複製するのが早いです。(探すの大変ですよね)

ペライチでブロックを複製する

まず、増やしたいブロックにマウスをのせると「ブロックを一つ下に複製」のボタンが表示されるので、そこをクリックします。

ブロックを下に移動

するとすぐ下にブロックが複製されます。複製されたブロックの「ブロックを一つ下に移動」をクリックします。

同じブロックを簡単に追加できた

「区切り」「区切り」「アクセス」だった順番が、「区切り」「アクセス」「区切り」になり、簡単に同じブロックを上下に配置できました。

商品一覧のような画像・説明文のセットを複数挿入

商品画像と商品説明の一覧をペライチで挿入

続いて、こんなかんじの「8つの画像とその説明のセットをキレイに整列したもの」を挿入します。

文章と画像のブロックを選択する

ブロックを追加して、「文章+画像(画像比率固定)」の中から「上画像・4列」を選びます。

文章と画像のブロックが挿入された

画像とその説明のパーツが4つ整列されたブロックが、挿入されました。

プラスマークをクリックしてパーツを複製する

全部で8つにしたいので、プラスマークをクリックして追加していきます。(追加した分もキレイに自動で整列されます)

全部で8つにできた

全部で8つにできました。あとは不要なボタンなどを削除して、画像をアップロードして挿入、テキストを編集すればOKです。

画像の切り抜きの調節方法

画像の形によっては位置がずれるので、先ほど正円で切り抜いたときのように、「正方形」をクリックしてから拡大率などをいじって位置を調節しましょう。

ちなみにスマホ表示の場合、縦1列に並んで表示されます。

問い合わせフォームを作成する

ペライチで問い合わせフォームを作る

続いて、このような問い合わせフォームを作成しましょう。

なお、ペライチの問い合わせフォームは有料プランのみ使用可能です。一番安いライトプランでも大丈夫です。

ペライチで問い合わせフォームのブロックを追加

問い合わせフォームのブロックは、カテゴリを下にスクロールすると出てくる「フォーム」です。いろいろありますが「白紙から作成」をクリックすればOKです。

フォームをクリックして編集

するとこのようなパーツが挿入されるので、クリックすれば編集画面が開きます。

テンプレートをとりあえず追加

今回は、「イベントに関するお客さんからの問い合わせ」を想定しているので、「お問い合わせ→個人向け」をクリックし、「このテンプレートでフォーム内容を作成」をクリックします。

クリックしてテンプレートを編集

フォームのテンプレートが挿入されました。これをクリックして、さらに編集していきます。

フォームの詳細を編集していく

このようなフォーム編集画面が開くので、タイトルや、必要に応じて説明文を入力します。

フォームの項目は削除・追加できる

下にスクロールすると各項目の編集ができます。右上のバツで項目を削除、間のプラスマークで項目を追加できます。

各項目の詳細も設定できる

さらに各項目をクリックすれば、項目の「入力必須かどうか」などの詳細も設定できます。

フォームの設定メニューから編集

左側のメニューでは、フォームのその他の設定が可能です。

ペライチのフォームのセキュリテイ設定

例えば「セキュリティ設定」なら、よくみる「私はロボットではありません」を設置できます。

ペライチのフォーム送信後画面の設定

お客さんが問い合わせを送信した後に画面に表示されるメッセージも、編集できます。返信がいつ頃になるかなど、記載できて助かりますね。

一番下の保存ボタンを忘れずに

いろいろと変更できますが、必ず一番下までスクロールして「保存」ボタンをクリックするのを忘れないようにご注意を!

ペライチで問い合わせフォームを設置できた

さて、このようにシンプルな問い合わせフォームにしてみましたが、いいかんじに設置できました。

ペライチ問い合わせフォームのスマホ版表示

なお、スマホ表示ではこんなかんじです。(「ロボットではありません」の存在感がちょっとありすぎますが…。)

一番下のコピーライトの編集

ペライチでコピーライトを設定

最後に、一番下のCopyrightを編集しておきます。(デフォルトでメールアドレスになっていると思います)

サイト名や団体名などにする

イベント名や、運営者名にしておくとよいでしょう。(書かないからといって著作権が保護されない、といったことはありませんのでご安心ください)

メニューの編集

文章とテキストの骨組みができたら、一番最初にヘッダーに追加したまま放っておいたメニューの編集を行います。

ペライチでヘッダーのメニュー編集をする

メニュー名のところがデフォルトなので編集して、お客さんがメニュー名をクリックしたら各項目へ飛べるようにします。まずはヘッダーをクリックしましょう。

メニューの編集を開く

メニューの編集が開きます。色や文字サイズ、位置や区切り線の有無なども選択できます。必要に応じて後で変更するので、とりあえずそのままでよいです。

メニュー名と、リンク先を選択

下にスクロールするとメニュー名を入れる「テキスト」欄があるので、そこにメニュー名を入れ、下にあるリンク先を開いて選びます。

リンク名は「ブロックを並べた順」になっています。ブロック名しか記載されていないので、実際のページでプレビューを開いて見比べながら選択していくとやりやすいです。

メニューの追加や削除もできる

メニューは足りなければ下のプラスマークで追加できますし、多ければ右上のバツで削除もできます。

保存をクリック

編集が完了したら、一番下の「保存」をクリックします。

メニューが完成した

メニュー名が表示され、各項目へジャンプできるようになりました。(プレビューで、実際にちゃんと飛べるか確認してみましょう)

メニューの間の縦線はこんなかんじ

ちなみに、メニューの区切りで「縦線」をチェックすると、こんなかんじになります。

メニューが多い場合は、縦線があったほうが見やすいかもしれませんね。

ペライチでのメニューのスマホ表示

ちなみに、スマホ表示の場合、普段は折りたたまれていてクリックすると上からニョキッと展開されます。

3-4.背景や色、フォントなど、全体的なデザインを変更

背景については色を変更するだけでなく、写真を設定することもできます。

文字については、有料プランなら一番安い「ライトプラン」でも、フォント(文字の種類)も色もサイズも変えることができます。が、フォントを変更すると太字にできないのと、通常の操作では一部分のみのフォント変更はできないので、そこだけ注意しましょう。

ホームページデザインは左メニューから行う

ホームページの全体的なデザインの変更は、左メニューから行っていきます。

テーマカラーを変更する

まず、テーマカラーを設定します。テーマカラーとは、メイン+背景+文字の色のことです。

ペライチのメインカラーはこの部分

ちなみに、「メイン」はこういう線の色ですね。

テーマカラーの変更をクリック

まず、左メニューで「テーマカラー変更」をクリックします。

設定するをクリックしてカラーを変更

するとテーマカラーカスタマイズが開くので、ひとつずつ設定します。まずは「メイン」の横の「選択する」をクリックしましょう。

ホームページのカラーを選択する

ここで色を選びます。パレットからでもいいですし、①を動かしてだいたいの色を、②を動かして明暗を設定するのがおすすめです。もしくはカラーコードのコピペも可能です。決まったら「決定」をクリックします。

「カラーコード」とは、色を表現する文字列です。「カラーコード 一覧」などで検索すると調べることができます。

文字と背景の色は、十分なコントラストがあり読みやすい組み合わせを選びましょう。

ホームページのカラーを「設定する」をクリック

さて、文字色と背景色も同様に設定したら、下にある「設定する」のボタンをクリックします。

ホームページの色が変わった

これでホームページの全体の色を一気に変更できました。

個別で背景を変更する(背景を写真にする)

ヘッダーの色だけ変える

画像との繋がりでやや色的にぼんやりしているので、もう少しハッキリさせるためにヘッダーの色だけ変更したいと思います。クリックしましょう。

クリックして色を選んだら下にスクロール

ヘッダーの色はパレットから選ぶことしかできないので、色をクリックします。そうしたら下にスクロールして…

保存をクリック

「保存」をクリックします。

ペライチでヘッダーの色が変わった

ヘッダーの色が変わりました。

なお、ヘッダーだけでなく各ブロックごと個別で色を変更することも可能です。

ペライチで背景の設定を変更する

背景を変更したいブロックの「背景設定」をクリックします。

変更するをクリック

色のみ変更したい場合は、背景色の設定の「選択する」をクリックします。

背景の色を変更できる

するとカラーパレットが表示されるので、クリックして色を選び、「決定」→「保存する」で変更できます。

背景に画像を設定することも可能です。

クリックして背景画像をアップロードし、画像を設定

背景設定をクリックしたら、左の「マイライブラリ」をクリックし、画像をアップロード後、使用したい画像をクリックします。

背景画像の位置も調節できる

すると画像が背景に設定されます。表示位置を調節したい場合は、「背景位置」をクリックします。

ドラッグして移動したり、拡大して背景画像の場所を調節する

このようなメニューが開くので、画像を移動させたり拡大・縮小したりして、表示位置を調節しましょう。最後に「修正完了」をクリックすればOKです。

スマホ画面もパソコン画面も同じ背景

なお、背景設定時はスマホ・PCともに同じ背景画像が設定されます。

スマホ表示とPC表示で、背景画像に別のものを使いたい場面は多々出てくると思います。

表示設定を切り替えてから背景画像を変更する

そんなときは、「画面表示切り替え」をクリックして画面表示をPC(またはスマホ)にした後、背景画像を設定し直します。

パソコン画面のみ背景画像が変わった

そうすると、スマホとPCで背景画像を異なる画像に設定できます。

フォントを変更する

続いて、フォントを変更していきましょう。デフォルトのままでもよいですが、フォントを変えると雰囲気がガラッと変わります。

ペライチでフォントを変更していく

左メニューの「フォント変更」をクリックすると、フォントメニューが開きます。

フォントをクリックするだけで、フォントが適用される

フォント名をクリックして変更し、適用されたことを確認します。変更後は、編集画面左上の「保存する」をクリックして保存しましょう。

なお、ペライチでは、基本的には部分的なフォントの変更はできないようになっています。全体のフォントが変更されてしまうので、読みづらさに注意してください。

また、太字変更はデフォルトのフォントのみ可能です。フォントを変更した場合は、クリックでの太字変更はできなくなります。

そんなときは、一度保存してからマイページに戻って、再度ページを編集するようにしましょう。一度ページ編集を開き直すだけで、治ることがあります。

ペライチでフォント変更が反映されない場合はページを複製してから編集する

当時は、マイページトップの「メニュー」から「ページを複製」して編集し直す方法で改善することもありました。これは当時の回避例です。

複製して試す場合も、元のページは残したまま、表示とリンクを確認しましょう。改善しない場合は、公式サポートへ確認してください。

アニメーションをつける

ペライチでは、ページ全体にアニメーションをつけることもできます。スクロールしたときにふわっと表示させたりするやつですね。

ペライチでアニメーションをつける

左メニューで「アニメーション」をクリックして、開いたメニューからアニメーションを選びます。「設定する」をクリックして完了です。

プレビューでスクロールしてアニメーションを確認

編集画面ではアニメーションは見れないので、プレビューを開いてスクロールし、実際のアニメーションを確認しましょう。

3-5.ペライチで作ったホームページの完成

ペライチで作ったホームページの完成

ペライチで、ホームページのデザインを作ることができました!

これでデザインは完成しましたが、今のままでは自分でしか見れません。「公開」して、他の人がネット上で見れる状態にしていきましょう。

4.ペライチで作ったページを公開する方法

ホームページが完成したら、公開するための作業をしていきます。本来であればサーバーを借りてドメインを取得して…といろいろ手続きが必要ですが、ペライチなら簡単な操作だけで公開可能です。

そのまま「公開する」のボタンを押してもよいのですが、その前に少しだけ設定をしていきましょう。

ページ情報編集をクリックする

まず、編集画面の左にある「ページ情報編集」をクリックします。

ドメインを入力する

「ドメイン」というのは、ホームページの住所のようなものです。ここに好きな文字列(会社名やイベント名など)を入れましょう。

ペライチのサブドメインURLには、追加のドメイン取得料がかかりません。ただし、継続公開にはプラン料金が必要です。URLに「peraichi」を含めたくない場合は、独自ドメインの取得・更新費用と、対応プランを確認しましょう。

ドメインを取得することも可能

有料の独自ドメインは、ペライチ内でも取得することができます。

独自ドメインの取得・更新費用や支払周期は、提供元と契約期間によって異なります。ドメインの追加費用を抑えたい場合は、ペライチのサブドメインURLも選択肢です。(ちなみにサルワカでは、ムームードメイン さんを使っています)

ホームページの情報を入力する

続いて下にスクロールして、ページのタイトルと説明文を入力します。

小さいアイコンを作成して、アップロード

さらに下にスクロールし、「ファビコン」と呼ばれるアイコンを設定しましょう。サイズは48px四方が推奨されています。

今回はサクッとCanvaで作成しました。

保存するをクリックして、ページ情報を保存する

そうしたら、下の「保存する」をクリックして完了です。

SNSでシェアされたときの設定をする

余裕があれば、左側のメニューから「OGP」の設定をしましょう。SNSでシェアされたときの表示方法を設定できます。

既に入力した内容を反映すればOK

SNSでシェアされたときに表示される画像ですが、もし何か新しい画像を使う場合は「アップロード」、ホームページ上の画像を使う場合は「マイライブラリ」で選択します。他は「ページのものを反映」するボタンをクリックしていけばOKです。

反映をクリック

下にスクロールしていき、「ページのものを反映」するボタンを押しつつ、「OGP type」の欄に 「website」と入力しましょう。

保存をクリック

あとは、1番下の「保存」をクリックすればOKです。

ページ情報の確認ができる

マイページのトップに戻って、「ページの基本設定」から「基本情報チェックリスト」をクリックしてみましょう。

ページ情報で編集すべき進捗がわかる

ホームページを公開する上で、必要な設定がされているかどうか確認できます。公開すれば100%になるので、80%になっていればOKです。

マイページからプレビューを開くこともできる

戻って、マイページからもプレビューが確認できるので、最終チェックしておきましょう。

ペライチでホームページを公開する

最後に、「メニュー」から「公開する」をクリックします。

公開するをクリック

確認が表示されるので「公開する」をクリックしましょう。

公開された状態は上で確認

戻ったマイページで、ここが公開中になっていれば完了です。お疲れ様でした!

5.料金プランはどれがおすすめ?

「とにかくホームページがあればいい!」というのであれば、ライトプランが選択肢です。

ただ、サロンの経営者さんなど、ホームページ内で予約機能を使いたい等あれば、ビジネスプラン以上を確認しましょう。

もし、デザインの細部(余白など)を調整したい場合は、CSSを編集しなければならず、これは専門知識が必要です。この場合も、ビジネスプラン以上にする必要があります。

具体的な料金プランや各プランでできることは、こちらの公式ページに詳しく記載されています。

もしくは、無料プランでもホームページを公開できる「Wix」もおすすめです。

6.プランの継続方法・解約方法

無料お試し中に気に入ったら、手動で有料プランに切り替える必要があります(こちらからプラン選択できます)

名称は「お試しビジネスプラン」ですが、現在はプロフェッショナルプラン相当の機能を1カ月間試せます。ただし、タグ埋め込み機能は対象外です。有料プランに申し込まなければ自動で課金されず、終了後はフリープランへ切り替わります。継続する場合は、必要な機能に応じてライトプランなどを選べます。

無料お試しから切り替わるときは手動で操作が必要ですが、手動でプラン選択したあとは自動更新となるので注意してくださいね。

ペライチの解約方法

有料プランが不要になった場合は、契約情報から解約手続きを行います。以下は記事作成時の画面です。現在の画面に表示される案内と、契約終了日を確認して進めてください。

右上から契約情報を確認

右上のアイコンをクリックし、「ご契約情報」をクリックします。

解約はこちら、をクリック

「プラン契約・お支払情報」の下の「プランの解約についてはこちらから」をクリックします。

解約をクリック

契約中のものの一覧が表示されるので、右端の「解約」をクリックします。

プラン変更のすすめなどが表示

プラン変更のおすすめなどが表示されますが、下へスクロールします。

下にスクロールしてできなくなることを確認

解約後どうなるかの説明が表示されるので、読んでみて問題なければ下へスクロールします。

解約するをクリックしてペライチの有料プランを解約

一番下の「解約する」をクリックします。

解約しましたが表示されれば解約完了

手続き後は画面の完了表示だけでなく、登録メールアドレスに解約完了メールが届いたことも確認してください。届かない場合は手続きが完了していない可能性があるため、契約状況を確認しましょう。

解約してもすぐに使えなくなるわけではなく、もともとの契約期限までは使える状態になっています。

ペライチの有料プランを解約できた

「いつまで使えるか」は「ご契約情報」のプラン情報で確認できます。契約期間途中に解約しても日割り返金はありません。終了後、作成したページは非公開の状態で残ります。ペライチで取得した独自ドメインは有料プランとは別契約なので、不要な場合は別途、自動更新を停止してください。

まとめ

ペライチなら、簡単な操作でホームページを作って公開することができます。

なるべく安くホームページを作りたいのであれば、無料で試すことができるので、ぜひ試してみてくださいね。