ペライチスタートガイド

まずはホームページを作りたい方

このガイドでは、ペライチの基本的な使い方をご紹介しています。
手順にそって一緒に作業を進めてみてください。もし途中でわからないことがあれば、いつでもこのガイドを見返してご確認いただけます。

ホームページを作りたい方(スマートフォン向け)

まずは45秒でサクッと流れチェック!

ホームページ作成の基本的な流れを、45秒の動画でまとめています。
「まず全体のイメージをつかみたい」という方は、ぜひご覧ください。

Step 1 テンプレートを選ぼう

まずはホームページの土台となるテンプレートを選びましょう。
内容や見た目は後から自由に変更できます。
気になるデザインを見つけたら、まずは試してみることから始めましょう!
テンプレート選びはこちらから

検索で表示された一覧から使いたいテンプレートを選びます。
sp_1-1.gif

編集画面に移動するので、ページタイトルを入力します。
ページタイトルは「ページ情報編集」から変えられるので、仮タイトルでも大丈夫です。
sp_2-2.gif

これでページが1つできました。次はStep 2「ページを編集してみよう」へ進みましょう。

Step 2 ページを編集してみよう

実際に文章を入れたり画像を変えていく作業です。

文字を差し替えてみよう

編集したいテキストをタップすると、文字の入力画面が表示されるので、文字を打ち変えて、「保存」ボタンをクリックで完了です。
sp_3.gif

メイン画像を差し替えてみよう

画面の横幅いっぱいに入っている大きな画像は、基本的に背景画像として挿入されています。
まずはこの画像を変更していきましょう。

変更したい画像をタップすると、右上に「ブロック操作」が出てくるのでそちらをタップ。
下から三番目「背景設定」をタップします。
Group 527.png

画像の設定ページが開いたら、最下部の「画像をまとめて変更」をタップ。
(PC・タブレットとスマートフォンで表示する画像を別々に変えることもできます)
Group 528.png

上部の「画像を選択してアップロード」をタップ。使用したい画像をスマートフォン内から選択し、アップロードしてください。
sp_4.gif

アップロードした画像の「この画像を使用する」をタップで、ページに反映されます。
これで、メイン画像の差し替えは完了です!
sp_5.gif

画像を差し替えてみよう

次はメイン画像以外に入っている画像を変更していきましょう。

基本的な手順はメイン画像と同じです。
まずは該当の画像をタップしてみましょう。
Group 551.png

上部の「マイライブラリ」をタップ。マイライブラリに移動します。
Group 552.png

上部の「画像を選択してアップロード」をタップ。使用したい画像をスマートフォン内から選択し、アップロードしてください。
Group-555.gif

アップロードした画像の「この画像を使用する」をタップで、ページに反映されます。
これで、 画像の差し替えは完了です!Group-558.gif

ペライチでは、自分で用意する画像の他に、ペライチライブラリ素材(アイコン、ボタン、風景)、ぱくたそ画像(無料)、PIXTA(有料)の素材もご用意しております。用途に合わせてご活用ください。
 

ブロックを追加してみよう

ブロックは自由に追加・削除・並び替えができます。
まずは、+アイコンをタップし、ブロック一覧を開きます。
Group 560.png

画像赤枠の部分を横にスクロールし、入れたいブロックの種類を選びます。
Group 561.png

入れたいブロックを選択し、下部の「決定」を押すと
Group 562.png

ブロックが挿入できます!
Group 563.png

ブロックを削除してみよう

削除したいブロックをタップすると、「ブロック操作」が出てきます。
最下部の「ブロックを削除」を選択すると、削除ができます。
Group 564.png

間違えて削除してしまった場合は、上部の左矢印をタップしてください。
Group 565.png

ブロックを並び替えてみよう

並び替えたいブロックをタップすると、「ブロック操作」が出てきます。
「一つ上に移動」をタップで、該当のブロックが一つ上に移動します。
Group 566.png

ほかにも、「一つ下に移動」「一番上に移動」「一番下に移動」もあるので、自由にブロックの位置を変えてみてください。
Group 567.png

操作を1つ戻す/操作を1つ進める

上部には「操作を1つ戻す」「操作を1つ進める」ボタンをご用意しています。
間違えてしまった時、修正したい時などにご活用ください。
Group 571.png

テキストや画像が入ってページの全体像が見えてきたと思います。 
次はデザインを整えて、見やすく印象的なページに仕上げていきましょう。 
Step 3「デザインを整えよう」へ進んでください。

Step 3 デザインを整えよう

配色やフォントを整えるだけで、ページ全体の雰囲気がぐっと良くなります。
まずは気になるところから少しずつ変えてみましょう!

テーマを変えてみよう

「テーマ変更」は、ページ全体のデザインを一括で変更できるメニューです。
ビジネスプラン(プロフェッショナルプラン)、もしくはデザインカスタマイズオプションで利用できます。

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

「テーマ変更」をタップ。
Group 573.png

各テーマが右に出てくるので、お好きなテーマを選択してください。
Group 574.png

右上の「<」、左上の「メニューを閉じる」をタップし、メニューをすべて閉じると、テーマの変更が確認できます。
Group-572-3.gif
 

色を変えてみよう〜テーマカラー変更〜

「テーマカラー変更」は、ページ全体のカラーを一括で変更できるメニューです。
ライトプラン以上、もしくはオプション契約で利用できます。

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

「テーマカラー変更」を選択。
Group 578.png

すでに用意されたカラーから、一括で変更が可能です。
Group 579.png
 

色を変えてみよう〜テーマカラーカスタマイズ〜

「テーマカラー変更」には「テーマカラーカスタマイズ」もございます。
メイン・文字色・背景色を選んで自由に配色をカスタマイズできます。

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

「テーマカラー変更」を選択。
Group 578.png

右の「テーマカラーカスタマイズ」から各色を設定します。
Group 5799.png

メイン、文字色、背景色を各種選択したら、「設定する」をタップでページに反映されます。細かく配色を決めたい方におすすめです。
Group-582.gif
 

フォントを変えてみよう

「フォント変更」は、ページ全体のフォントを一括で変更できるメニューです。
ライトプラン以上、もしくはオプション契約で利用できます。

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

スクロールし「フォント変更」を選択すると、右にフォント一覧が表示されます。お好きなフォントを選択するだけで、ページに反映されます。
Group 600.png
 

アニメーションを付けてみよう

「アニメーション」は、ページ全体のアニメーションを一括で変更できるメニューです。

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

スクロールし「アニメーション」を選択すると、右にアニメーション一覧が表示されます。お好きなアニメーションを選択し「設定する」をタップすると、ページに反映されます。
設定後、プレビューで確認してみてください。
Group 601.png

デザインの調整まで完了しました。ここまでくると、完成がぐっと近づいてきますね。
公開前に一度、全体を見直しておきましょう。Step 4「公開前にチェックしよう」へ進みます。

 

Step 4 公開前にチェックしよう

公開前に確認しておくべきポイントがあります。 以下を参考に確認してみましょう!

プレビューを使って公開前に確認してみよう

上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

「プレビュー」をタップすると、プレビューページが別タブで開きます。プレビュー画面で実際のページの確認ができます。
Group 602.png

最終チェックも終われば、いよいよ公開の準備が整いました。
仕上がったページを、世界に向けて届けましょう。Step 5「ホームページを公開しよう」に進んでください。

Step 5 ホームページを公開しよう

URLを設定しよう

URLの設定は「ページ情報編集」から。上部の「メニュー」をタップすると、横からメニューが出てきます。
Group-572-1.gif

「ページ情報編集」をタップすると、すぐに「URL設定」が開きます。
Group-603.gif

ペライチで作成したホームページは、ペライチのサブドメインを利用すれば無料で公開できます。
実際のURLは以下のような形になり、「.hp.peraichi.com/」の前と後ろに好きな文字列を入れることができます。
「https:// 好きな文字列 .hp.peraichi.com/ 好きな文字列」
Group 605.png

独自のURLを利用したい場合は、カスタムURLを設定します。
ドメインの取得が必要になるため有料になりますが、独自のURLを設定できるので、無料サービスのサブドメインよりも本格的に見え、信頼されやすくなります。また、将来的にサイトをリニューアルしたり、別のサービスに移行する場合でも、同じURLを使い続けられるのでおすすめです。
カスタムURL(独自ドメイン)の設定方法はこちら で説明しています。
Group 606.png

「公開」ボタンを押してページを公開してみよう

メニューの「公開する」をタップすると、公開前の確認が出てきます。
下までスクロールし、問題なければ「確認しました」をタップ。これでページ公開が完了です!

Group-607.gif