ホームページを作りたい方(スマートフォン向け)
まずは45秒でサクッと流れチェック!
ホームページ作成の基本的な流れを、45秒の動画でまとめています。
「まず全体のイメージをつかみたい」という方は、ぜひご覧ください。
Step 1 テンプレートを選ぼう
まずはホームページの土台となるテンプレートを選びましょう。
内容や見た目は後から自由に変更できます。
気になるデザインを見つけたら、まずは試してみることから始めましょう!
テンプレート選びはこちらから
❶ 検索で表示された一覧から使いたいテンプレートを選びます。
❷ 編集画面に移動するので、ページタイトルを入力します。
ページタイトルは「ページ情報編集」から変えられるので、仮タイトルでも大丈夫です。
これでページが1つできました。次はStep 2「ページを編集してみよう」へ進みましょう。
Step 2 ページを編集してみよう
実際に文章を入れたり画像を変えていく作業です。
文字を差し替えてみよう
編集したいテキストをタップすると、文字の入力画面が表示されるので、文字を打ち変えて、「保存」ボタンをクリックで完了です。
メイン画像を差し替えてみよう
画面の横幅いっぱいに入っている大きな画像は、基本的に背景画像として挿入されています。
まずはこの画像を変更していきましょう。
❶ 変更したい画像をタップすると、右上に「ブロック操作」が出てくるのでそちらをタップ。
下から三番目「背景設定」をタップします。
❷ 画像の設定ページが開いたら、最下部の「画像をまとめて変更」をタップ。
(PC・タブレットとスマートフォンで表示する画像を別々に変えることもできます)
❸ 上部の「画像を選択してアップロード」をタップ。使用したい画像をスマートフォン内から選択し、アップロードしてください。
❹ アップロードした画像の「この画像を使用する」をタップで、ページに反映されます。
これで、メイン画像の差し替えは完了です!
画像を差し替えてみよう
次はメイン画像以外に入っている画像を変更していきましょう。
❶ 基本的な手順はメイン画像と同じです。
まずは該当の画像をタップしてみましょう。
❷ 上部の「マイライブラリ」をタップ。マイライブラリに移動します。
❸ 上部の「画像を選択してアップロード」をタップ。使用したい画像をスマートフォン内から選択し、アップロードしてください。
❹ アップロードした画像の「この画像を使用する」をタップで、ページに反映されます。
これで、 画像の差し替えは完了です!
ペライチでは、自分で用意する画像の他に、ペライチライブラリ素材(アイコン、ボタン、風景)、ぱくたそ画像(無料)、PIXTA(有料)の素材もご用意しております。用途に合わせてご活用ください。
ブロックを追加してみよう
ブロックは自由に追加・削除・並び替えができます。
❶ まずは、+アイコンをタップし、ブロック一覧を開きます。
❷ 画像赤枠の部分を横にスクロールし、入れたいブロックの種類を選びます。
❸ 入れたいブロックを選択し、下部の「決定」を押すと
❹ ブロックが挿入できます!
ブロックを削除してみよう
削除したいブロックをタップすると、「ブロック操作」が出てきます。
最下部の「ブロックを削除」を選択すると、削除ができます。
間違えて削除してしまった場合は、上部の左矢印をタップしてください。
ブロックを並び替えてみよう
並び替えたいブロックをタップすると、「ブロック操作」が出てきます。
「一つ上に移動」をタップで、該当のブロックが一つ上に移動します。
ほかにも、「一つ下に移動」「一番上に移動」「一番下に移動」もあるので、自由にブロックの位置を変えてみてください。
操作を1つ戻す/操作を1つ進める
上部には「操作を1つ戻す」「操作を1つ進める」ボタンをご用意しています。
間違えてしまった時、修正したい時などにご活用ください。
テキストや画像が入ってページの全体像が見えてきたと思います。
次はデザインを整えて、見やすく印象的なページに仕上げていきましょう。
Step 3「デザインを整えよう」へ進んでください。
Step 3 デザインを整えよう
配色やフォントを整えるだけで、ページ全体の雰囲気がぐっと良くなります。
まずは気になるところから少しずつ変えてみましょう!
テーマを変えてみよう
「テーマ変更」は、ページ全体のデザインを一括で変更できるメニューです。
※ビジネスプラン(プロフェッショナルプラン)、もしくはデザインカスタマイズオプションで利用できます。
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ 「テーマ変更」をタップ。
❸ 各テーマが右に出てくるので、お好きなテーマを選択してください。
❹ 右上の「<」、左上の「メニューを閉じる」をタップし、メニューをすべて閉じると、テーマの変更が確認できます。
色を変えてみよう〜テーマカラー変更〜
「テーマカラー変更」は、ページ全体のカラーを一括で変更できるメニューです。
※ライトプラン以上、もしくはオプション契約で利用できます。
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ 「テーマカラー変更」を選択。
❸ すでに用意されたカラーから、一括で変更が可能です。
色を変えてみよう〜テーマカラーカスタマイズ〜
「テーマカラー変更」には「テーマカラーカスタマイズ」もございます。
メイン・文字色・背景色を選んで自由に配色をカスタマイズできます。
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ 「テーマカラー変更」を選択。
❸ 右の「テーマカラーカスタマイズ」から各色を設定します。
❹ メイン、文字色、背景色を各種選択したら、「設定する」をタップでページに反映されます。細かく配色を決めたい方におすすめです。
フォントを変えてみよう
「フォント変更」は、ページ全体のフォントを一括で変更できるメニューです。
※ライトプラン以上、もしくはオプション契約で利用できます。
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ スクロールし「フォント変更」を選択すると、右にフォント一覧が表示されます。お好きなフォントを選択するだけで、ページに反映されます。
アニメーションを付けてみよう
「アニメーション」は、ページ全体のアニメーションを一括で変更できるメニューです。
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ スクロールし「アニメーション」を選択すると、右にアニメーション一覧が表示されます。お好きなアニメーションを選択し「設定する」をタップすると、ページに反映されます。
設定後、プレビューで確認してみてください。
デザインの調整まで完了しました。ここまでくると、完成がぐっと近づいてきますね。
公開前に一度、全体を見直しておきましょう。Step 4「公開前にチェックしよう」へ進みます。
Step 4 公開前にチェックしよう
公開前に確認しておくべきポイントがあります。 以下を参考に確認してみましょう!
プレビューを使って公開前に確認してみよう
❶ 上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ 「プレビュー」をタップすると、プレビューページが別タブで開きます。プレビュー画面で実際のページの確認ができます。
最終チェックも終われば、いよいよ公開の準備が整いました。
仕上がったページを、世界に向けて届けましょう。Step 5「ホームページを公開しよう」に進んでください。
Step 5 ホームページを公開しよう
URLを設定しよう
❶ URLの設定は「ページ情報編集」から。上部の「メニュー」をタップすると、横からメニューが出てきます。
❷ 「ページ情報編集」をタップすると、すぐに「URL設定」が開きます。
❸ ペライチで作成したホームページは、ペライチのサブドメインを利用すれば無料で公開できます。
実際のURLは以下のような形になり、「.hp.peraichi.com/」の前と後ろに好きな文字列を入れることができます。
「https:// 好きな文字列 .hp.peraichi.com/ 好きな文字列」
❹ 独自のURLを利用したい場合は、カスタムURLを設定します。
ドメインの取得が必要になるため有料になりますが、独自のURLを設定できるので、無料サービスのサブドメインよりも本格的に見え、信頼されやすくなります。また、将来的にサイトをリニューアルしたり、別のサービスに移行する場合でも、同じURLを使い続けられるのでおすすめです。
カスタムURL(独自ドメイン)の設定方法はこちら で説明しています。
「公開」ボタンを押してページを公開してみよう
メニューの「公開する」をタップすると、公開前の確認が出てきます。
下までスクロールし、問題なければ「確認しました」をタップ。これでページ公開が完了です!