HOW TO USE

HPYourselfの使い方
完全ガイド

登録不要・完全無料。ブロックを並べるだけでお店のホームページが作れます。このページを読めば今日中にサイトが完成します。

エディターを開く(無料)
ブロックを追加
内容を編集
保存・書き出し
サーバーに公開
1

エディターを開く

登録不要・インストール不要

HPYourselfはブラウザ上で動くので、インストール不要です。エディターを開くをクリックするだけで今すぐ始められます。

EDITOR LAYOUT

左パネル:ブロック一覧・設定

ヘッダー(編集中)
テキスト
写真ギャラリー
ボタン
プレビュー(右側)

← 左:ブロックの設定パネル

右:リアルタイムプレビュー →

自動保存されます作業内容はブラウザに自動保存されます。誤って閉じてしまっても次回開いたときに続きから作業できます。
2

ページを追加・管理する

トップページ・メニューページ・アクセスページなど

左パネルの上部にページ一覧があります。「+ページを追加」ボタンで新しいページを追加できます。

1
ページ一覧から編集するページを選ぶ

「トップ」「メニュー」「アクセス」など、編集したいページをクリックします。

2
ページ名・スラッグを設定する

ページ名はナビゲーションに表示される名前です。スラッグはURLになります(例:about → about.html)。

3
ページの背景色・最大幅を設定する

ページ全体の背景色とコンテンツの最大幅を設定できます。通常は1200pxがおすすめです。

3

ブロックを追加する

パーツを組み合わせてページを作る

HPYourselfはブロックを積み重ねてページを作ります。左パネルのブロック一覧から追加したいブロックをクリックするだけです。

ヘッダー
大きな画像とキャッチコピーのトップ部分
テキスト
お店の説明文・こだわりなど
写真ギャラリー
複数の写真をグリッド表示
Googleマップ
住所を入力すると地図を表示
営業時間
曜日ごとの営業時間を表示
メニュー表
料理・商品のメニューを一覧表示
ボタン
予約・お問い合わせなどのリンクボタン
SNSリンク
Instagram・X・LINEなどのアイコン
商品カード
商品名・価格・購入ボタンのカード
ブロックは何個でも追加できます同じブロックを複数追加することもできます。例えばテキストブロックを2つ追加して、異なる内容を書くことができます。
4

ブロックを編集する

クリックして設定パネルを開く

プレビュー上のブロックをクリックすると、左パネルに設定パネルが表示されます。テキスト・画像・色などを自由に変更できます。

1
プレビューのブロックをクリック

右側のプレビュー画面でブロックをクリックすると、左パネルにそのブロックの設定が表示されます。

2
テキスト・画像・色を変更する

左パネルの入力欄に内容を入力すると、右のプレビューにリアルタイムで反映されます。

3
ブロックの順番を変更する

左パネルのブロック名の横にある ↑↓ ボタンで順番を変更できます。プレビュー上でのホバーボタンでも操作できます。

4
ブロックを削除する

左パネルのブロック名の横にある ✕ ボタン、またはプレビュー上のホバーボタンの ✕ で削除できます。

Ctrl+Zで元に戻せます間違えて削除しても Ctrl+Z(Mac: ⌘+Z)で元に戻せます。最大50ステップまで戻ることができます。
5

ナビ・フッターを設定する

サイト全体のデザインを統一する

左パネルの「共通項目設定」タブからナビゲーション(上部メニュー)とフッター(下部)のデザインを設定できます。

1
ロゴ・サイト名を設定する

ナビゲーションに表示するロゴ画像またはテキストを設定します。

2
ナビの背景色・文字色を変更する

ブランドカラーに合わせた色に変更できます。プリセット(A〜F)から選ぶこともできます。

3
SEO設定をする

サイト名・説明文・OGP画像を設定するとGoogle検索やSNSシェア時の表示が改善されます。

6

保存・書き出しをする

HTMLまたはWordPressテーマとしてダウンロード

作業内容は自動保存されますが、ファイルとして書き出すことでサーバーに公開できます。

1
「HTMLをダウンロード」を押す

そのままサーバーにアップロードして使えるHTMLファイル一式がZIPでダウンロードされます。

2
「WordPressテーマをダウンロード」を押す

WordPressに適用できるテーマファイルがZIPでダウンロードされます。

ブラウザの自動保存とダウンロードは別物ですブラウザの自動保存はブラウザを閉じても残りますが、パソコンを変えると使えません。定期的にJSONファイルとして保存しておくことをおすすめします。
JSONファイルでバックアップする「プロジェクトを保存」を押すとJSONファイルがダウンロードされます。これを保管しておけばいつでも同じ状態から作業を再開できます。
Q

よくある質問

はい、HPYourself自体は完全無料です。ただしサイトを公開するにはサーバーとドメインが必要で、月額約1,000円程度のコストがかかります。
エディターはPC・タブレット向けに最適化されています。スマホでは画面が小さく操作しにくい部分があります。最初の制作はPCで行い、スマホでは公開後のサイト確認に使うことをおすすめします。
ギャラリーブロックやヘッダーブロックでは「画像をアップロード」ボタンからパソコン内の画像を選択できます。または画像のURLを入力することもできます。
xserverなどのレンタルサーバーにアップロードして公開します。詳しい手順は公開手順ガイドをご覧ください。
更新が少ないサイト(お店の基本情報のみ)はHTML版がシンプルで管理しやすいです。ブログを書いたり頻繁に更新するサイトはWordPress版がおすすめです。
はい、テンプレートマーケットプレイスで無料テンプレートを配布しています。気に入ったデザインをダウンロードして、自分のサイトに読み込んで使えます。

さっそく作ってみよう

登録不要・完全無料。今すぐエディターを開いて、
5分後には最初のページができあがります。

無料でサイトを作る