簡単無料ホームページ（hp-ez）の使い方

更新日

簡単無料ホームページ（hp-ez）の使い方について、初心者の方でも分かりやすく解説！

ホームページを作成するのに難しいイメージがあると思うが、最初から理解する必要はない。まずは実際に触ってみて、できるを体感するのが大切。

ちなみにこのコンテンツは、簡単無料ホームページで作成している。

当時の自分に向けて書くつもりで、スマホで始めたい方でも理解できる内容でまとめる。だだ、PCのほうが操作性やデザインの自由度は高い。最初は自由度を追うより、何ができるのか知っていこう。

今の簡単無料ホームページは、機能がかなり充実していてスマホで編集しやすい。

これから始める方に超おすすめ！

 

 

簡単無料ホームページ（hp-ez）とは

簡単無料ホームページ（hp-ez）は、株式会社クリエイティブ・ウェブ・システムズが運営するホームページ制作サービスである。

専門的な知識がない初心者の方でも始めやすく、個人サイトからお店や事業用のホームページまで幅広く作成できる。これからホームページを作りたい人にとって、手軽に始めやすいのが特徴。

 

無料でホームページが作れる

簡単無料ホームページという名前のとおり、無料でホームページを作成できるので、費用ゼロで始められる点は初心者にとって大きなメリットと言える。ただし、無料コースには一部機能に制限があるのだが、初めて利用する方は無料で十分である。

 

SEO対策でもかなり強い

簡単無料ホームページは、SEO対策の面でもかなり強い。

Googleの「PageSpeed Insights」を使い、試しにこのページを分析したところ、画像の通りかなり高い水準の評価となった。

あくまで参考値ではあるものの、SEOを意識した環境を一から構築する場合と、最初からある程度整っている場合とでは大きな違いがある。

もちろん検索順位は記事の内容やGoogleからの評価にも左右される。ただ、ライフログメモ運営者の経験では検索上位に掲載される記事もあり、ほかのサイトと十分に競えるほどの環境だと感じている。

 

セキュリティはバッチリ

セキュリティ対策は基本的に簡単無料ホームページの仕組みで対応。ユーザー側で複雑な設定を行うことはない。

今では当たり前になっている https（SSL/TLS） による暗号化通信も気にせず始められる。

 

スマホでも簡単にできる

ホームページ制作はPCがなければできない時代は終わった。またアプリをインストールする必要もなく、すべてブラウザ上で完結。

これだけでもチャレンジするハードルが下がるね。

 

テンプレートが豊富

HTML、CSS、JavaScriptといったプログラムコードを知らなくても、すでに多くのテンプレートが用意されている。

もちろん、知識があればコードを編集してデザインを変えたり、動きを加えたりできる。

理想なテンプレートを見つけたらすぐに公開！

簡単セットアップからテンプレートを指定すると、このようなテーマにすることも可能。種類が多いのでじっくり考えて選ぶといいだろう。

 

チュートリアル

簡単無料ホームページ（hp-ez）をこれから利用される方に向けて、アカウント開設からホームページを公開するまでのやり方を分かりやすく説明している。

 

アカウント情報

アカウント情報では管理しているホームページや、アカウントの設定・削除、操作履歴などを確認できる。

 

2種類の管理画面

ここで2種類の管理画面（ホームページを管理するツール）について説明する。この記事では主に新管理画面になる。旧管理画面はPC向けの仕様であり、この記事ではあまり触れない。

 

ダッシュボード

管理画面では、ユーザーIDやアドレス、公開設定などの基本情報を確認可能。あわせて、サイト全体のアクセス数が分かるアクセス統計を見たり、編集したページの更新日時や、サービスの新着情報もまとめて確認できる。

 

マイページの追加

画面左上のメニュー（≡）を開いて各種設定や新規ページの追加ができる。

試しに新規ページを追加してみよう！

これで新規のページを作成できる。ページタイプ以外の項目は後からでも変更可能だよ。

また、テンプレートから利用規約やプライバシーポリシーなどの定型文を活用可能。

ページタイプには、フリーページやブログといった「マイページ（コンテンツの主軸）」部分を作成できる。

[作成]を押すと編集画面（エディタ）に移動する。

 

エディタの各種機能

エディタとは、Webサイトに表示される文章や画像を入力・編集する画面である。

いま見ている解説記事は、管理画面のエディタで書かれている内容なんだよね。

実際にエディタで文章を書いてみよう。

PC、スマホでも気軽に入力できる。自分は両方使い分けている！

ここからはエディタの機能について説明していく。

 

ファイルブラウザ

ファイルブラウザでは、動画、画像、PDFなどのファイルをアップロードできる。

いま見ているこの画像も、ファイルブラウザからアップロードしたもの。

 

タグ機能

アップロードした画像をタグ付けすることができる。前に利用した画像をまた使いたいときに、タグでジャンル分けしておくと便利。

これはライフログメモ運営者が広島旅行に行ったときのタグを追加しているが、「いらすとや」「ChatGPT」だけのタグ絞りも可能。個別記事で画像を再利用したいときに向いている。

 

元に戻す・やり直す

元に戻す ⇒ 直前の編集操作を取り消し。

やり直す ⇒ 元に戻した編集操作を、もう一度反映する。

 

URL/リンク（挿入・解除）

URL/リンクは読者を特定のページへ誘導したいときに使える。サイト内の別ページだけでなく、外部サイトへの案内にも利用できる。

例えばライフログメモのトップページのように。

ボタン配置なんかもできちゃう。ぜひ工夫してみて。

ライフログメモのブログページ

もしよかったらブログも読んでどうぞ〜！

 

アンカー

アンカーはいま開いているページ内の指定した箇所へ移動できる機能。

URL/リンクみたいな感じ。（このように使ったりする。）

アンカーで移動先を設定し、リンク設定でそのアンカーを選択して使う。

 

ページ内検索（置換）

ページ内検索を使うとエディタ上で入力した文字を検索して見つけられる。

また、置換にも対応しており、特定の文字列を別の文字列へ置き換えることも可能。

 

ソースコード（HTML）

ソースコード（HTML）ではページの構造を直接編集できる。

HTMLを工夫すると見出しや区切り、配置などのレイアウト表現の幅が広がる。

なお、CSSの編集はこの画面ではできないため、デザインの細かな調整は別の設定で行う。

 

引用

引用は他のウェブサイトなどの文章を引用して紹介したいときに使う。

自分の文章と区別して表示できるため、根拠や参考情報を示したい場面に適している。

デザイン付き引用できるのでとても楽！

- ライフログメモ

 

表

	1月	2月
ライフログメモ支店	3，000	5，000
ライフログ支店	60，000	58，000

表を作成して文字や数字の内容を整理しよう。

 

水平線

水平線でテーマの区切りをつけたいときに使える。

 

段落

ブロックの上下に段落を挿入できる。カーソルを動かさずに段落がほしいときに重宝したいね。

 

絵文字

絵文字を使うことができる。可愛い絵文字なんか使ってみたり。😘

 

YouTube・Mapの挿入

YouTubeの動画、Googleマップを埋め込みできる。

 

ブログ新着記事

ブログの新着記事を挿入できる。

本文の途中でブログ記事を紹介したい場面で使える。

 

スタイル

スタイルの中に見出しやカラフルなボックスなどが含まれている。

見出しは↓こんな感じ。

見出しは大事

見出しを入れるだけで文章が読みやすくなり、内容のまとまりも伝えやすい。

また、見出しは検索エンジン最適化（SEO）の観点でも重要。見出しは飾りではなく、ページ構造を示す役割があるため正しく使い分けよう。

この解説記事のように見出しを整理しておくと、目次でどこに何が書かれているかが一目で分かる。感覚としては本の章立てと同じ。

 

レイアウト

レイアウトでは、文章や画像を組み合わせた配置パターンを本文へ簡単に追加できる。

レイアウト	使い方
ヒーロー帯	ページ先頭で見出しや内容を大きく見せたいとき
画像＋文章の横並び	画像と説明文をセットで見せたいとき
2カラム	2つの情報を左右に分けて見せたいとき
カードグリッド	特徴やサービスなど複数の情報を並べたいとき

一から配置を作る必要がなく、見せたい内容に合ったレイアウトを選ぶだけでページ内の構成を整えられる。

 

フォント

フォントは文字の書体を変えられる機能。

お気に入りのフォントがあればサイト制作の楽しさが増すよ。

 

文字サイズおよび文字関連

その他簡潔にまとめて紹介するが、

エディタ機能を工夫して書くことができる。

 

コメント表示

エディタの右下にコメント表示ボックスがある。

これにチェックを入れるとHTMLのソースコードでコメントを入れた部分が、通常のモードで確認可能。

メモしたいときに活用できるので便利。

 

Enterのb・prタグ

本文の記述は、pタグを基本にすることを推奨したい。

一方で、brタグは改行を入れるためのタグ。段落を作る用途には向いておらず、本文全体をbrタグ中心で構成すると後から調整しづらくなる。

そのため、通常の本文はpタグで構成し、同じ段落内で一時的に改行したい場面だけbrタグを使う形が適切だと思う。

ライフログメモの場合、本文内はpタグでやっている。

 

一般公開して見てもらう

［下書き保存］は自分だけが確認できる状態。まだ誰にも公開されない。

一方で［保存］を押すとその時点の内容が一般公開になる。

公開され続けるのは、最後に［保存］した内容。

［下書き保存］で書き直した内容は、自分だけが見える下書きとして残り、まだ公開されない。

分かりやすく表に示そう！

 

観点	下書き保存	保存
公開されるか	公開されない	公開される
見える人	自分だけ	誰でも見られる
公開ページに反映されるか	反映されない	反映される
公開ページに残る内容	最後に保存した内容のまま	押した時点の内容に更新される
重要ポイント	下書き保存をしても、公開中の記事は非公開に戻らない	保存し直すまで、前回保存した内容が公開され続ける

 

よくある流れ	公開ページの状態	プレビューの状態
① 下書き保存だけする	変わらない（公開されない）	下書きだけ更新される
② 保存して公開する	更新される（一般公開）	公開内容と一致する
③ 公開後に下書き保存で書き直す	変わらない（最後に保存した内容が公開のまま）	新しい内容は下書きとして残る
④ その後に保存する	新しい内容に更新される（一般公開）	公開内容と一致する

 

どのように見えるかは、管理画面の[プレビュー]や、ブラウザのシークレットモードで確認したほうが早いかも。文字で説明されるよりは、実際に見たほうがいいだろう！

 

完璧を目指さないことが大事

「こんな内容でいいのかな」「誰にも見てもらえないかも」とか不安だと思うけど、公開しないことには始まらない。徐々に慣れていく。ま、慣れないんだけど笑

途中で挫折しても、また戻ってくればいいと思う。

最初はブログでただひたすら短い文章を書いて投稿するでも大丈夫。自分の発信したいことを書いていれば、自ずと書きたい内容が出てくる、はず！

操作に慣れてきたり、さらに機能を知りたい方は読み進めてみて。

 

フリーページタイプの機能

マイページの追加で「フリーページ」タイプを選んだ方に、ほかの機能についてもご紹介する。

ページタイプ以外を選んでいる方は少し設定画面が変わる。

 

コンテンツ編集

いま見ているページの文章や画像は、コンテンツ編集のところになる。コンテンツ編集の中にあるエディタは、この内容を編集してページに反映させるための画面と捉えると分かりやすい。

 

HTMLソース

HTMLソースはエディタのソースコード（HTML）と同じ。 HTMLを編集できるだけでなく、コードを整形して読みやすくすることも可能。

HTMLソース上でプレビューに切り替えて、実際の見え方を確認してみよう。

 

機能設定

機能設定では目次(TOC）を設定できる。

このページを訪れたときに目次を見たと思うが、それがこの設定で表示しているものになる。（デザインはCSSで変更してるよ。）

 

ページ設定

ページ設定ではページ名やページのURL、SEO（検索エンジン最適化）などの設定をしよう。また、ページごとにメタタグやCSS（スタイルシート）を適用することも可能。

 

OGP設定：SNS共有の内容も登録しておこう

SNSに共有する内容を設定できる。

各ページタイプごとそれぞれに対して共有する内容を登録しよう。

また、ブログページタイプは個別に作成できる記事（個別記事）があり、記事ごとにOGPを設定できるよ。

SNS設定のボタン表示・OGP基本設定へ

 

 

サイト全体の管理メニュー（各種設定）

ホームページ（ウェブサイト）のデザインや設定について細かく行うことができる。

テンプレートのデザインから少しアクセントを加えたい場合は管理メニュー（各種設定）からやってみよう。

 

ページ編集

追加したページの順番やURL/リンクを変えられる。

不要になったページは削除することも可能。

 

プロフィール編集

プロフィール（自己紹介文）を作成できる。ブログサイトなんかでよく見るよね。

 

デザイン変更

デザイン変更ではホームページを開いたときのデザインを、全体から細かい調整まで編集できる。

テンプレートや簡単セットアップでは、ホームページの全体を変える変更が可能だ。

デザイン変更履歴から以前使用したデザインに戻せるので気軽にデザインを試してみよう！

 

テンプレート

サイト全体の基本デザインを決めることができる。

シンプルなテーマを選ぶるため、まずは見やすさや使いやすさを重視してみよう。

 

簡単セットアップ

簡単セットアップでは、飲食店、美容、教育、ビジネス、スポーツ、個人趣味、コミュニティなど、作りたいホームページの内容に合わせてテーマを選べる。

方向性に合ったデザインを使えるので、最初の設定で悩みにくいのがいい！

ほかのWeb制作サービスでは、有料級と感じるテーマが追加料金なしで使えるのは大きなポイント。見た目を整えるために最初から費用がかかることも少なくないので、ここはかなり使いやすい部分。

最初の段階でコストを抑えつつ、しっかりしたデザインを選べるのは魅力がある。自分でCSSを編集しなくても進めやすく、細かいコードを書かなくていいのはかなり楽。

 

カスタマイズ

ヘッダー、フッター、メニューなどセクションやデザインの設定可能。

セクション設定は共通パーツの管理だよ。

実際に触ってみることをおすすめする。

コンテンツエリアや背景といったデザインも工夫してみよう。

 

モバイル設定

スマホ用の画面でメニューを表示することができる。基本的にメニューは使用しておいて損はないね。

 

スタイルシート（CSS）

スタイルシート（CSS）について説明する。

サイト全体のスタイルシート（CSS）、デザインのところを設定できる。

タグで指定している文字サイズや行間隔のほか、指定したカラーなど、きめ細かなデザインを調整可能である。読者に見やすいデザインを心がけるのも、ホームページ制作の楽しみ方だね！

HTML、CSS、JavaScriptの仕組みを理解できると、ホームページ制作がとても楽しくなってくるよ！

 

サイドメニュー設定

サイドバーに表示するパーツの並び順と表示設定を変えることができる。

 

ブログパーツ設定

サイドメニューに表示する外部パーツやウィジェットを設定できる。自分の場合はPC表示で目次を固定表示してる。（JavaScriptも使ってるよ。）

 

エラーページ設定

存在しないページにアクセスしたときは、404エラーページが表示される。

サイト運営者が公開していないURLを開いた場合が該当。URLを間違えて入力したときに表示される「404 Not Found」もこのエラーの一つ。

一方、サーバー内部で一時的な問題が発生し、ページを正常表示できない場合は、500エラーページが表示される。

エラーページ設定では、このような問題が発生したときに読者へ表示するページを設定可能。

 

サイトアイコン

ホームページにアクセスしたときにアイコンが表示される設定。

 

検索エンジン設定

Googleなどの検索結果に表示するためのサイト全体の設定。個別ページでも同様に設定可能。

 

Google Search Console 認証

Googleサーチコンソールは、Google検索での表示状況を確認できる無料ツール。検索結果での表示回数やクリック数、実際に使われた検索キーワードなどを確認可能。

Googleサーチコンソールを利用するには、最初にGoogle側でサイトの所有権を認証してもらう必要がある。

 

SNS設定

SNS設定は、ホームページをSNSで共有されたときの見え方を整えるもの。

適切に設定すると、リンクを貼った際にタイトルや説明文、サムネイル画像が意図したとおりに表示されやすくなる。

SNS流入（XやLINEからのアクセスすること）を増やすためにも、SNS設定の登録をオススメしたい。

 

アクセスカウンター

ホームページ（ウェブサイト）にアクセスされたカウントをコンテンツに表示できる。

 

アクセス解析

アクセス解析では、アクセスデータから各ページのアクセス数を確認可能。

ブログページタイプであれば、個別記事ごとのアクセスも確認できるため、どの記事が読まれているのかも把握しやすい。

ページが実際に読まれていることが数値で見えるので、更新を続ける実感を持ちやすく、アクセス数が増えてくるとモチベーション向上にもつながる。

Googleアナリティクスと連携すれば、外部ツールからさらに詳しいアクセス状況を確認できる。ただし、アナリティクスは少し高度なツールになるため、初心者には難しく、自分としても扱いにくいと感じる部分がある。

なお、運営者がプレビュー状態で確認しているアクセスは、カウントに加算されないので安心。

状況	訪問者	PV
1人が1ページだけ見た	1	1
1人が3ページ見た	1	3
1人が10ページ見た	1	10
3人がそれぞれ2ページ見た	3	6

またページ別PVで各ページのアクセス状況を確認でき、流入元でどの検索エンジンからアクセスしているかが分かるよ。

 

アクセスデータとGoogleサーチコンソールの数値に大きな差がある場合は、実際の検索流入を確認するため、Googleサーチコンソールのアクセス数を参考にしよう。

 

Googleアナリティクス

Googleアナリティクスを設定すると、アクセスデータをGoogleアナリティクス側でも確認できるようになる。

連携方法は、Googleアナリティクスで測定IDをコピーし、こちらの設定画面に入力して保存するだけ。

 

ネットショップ設定

ネットショップを設定できる。

ホームページ上で商品を販売したい場合に便利で、通販用のページを用意したい方に向いてる。

実店舗の商品をオンラインでも販売したい場合や、オリジナル商品を紹介しながら販売したい方にも活用しやすいだろう。

ホームページを見るだけでなく、そのまま購入につなげやすい点も特徴的だ。

 

AIチャットボット

AIチャットボットは、管理メニュー内の「AIチャットボット」から利用可能。

設定画面には、「FAQ編集」「ボット設定」「テスト」「会話ログ」の項目が用意されている。

公開サイトで訪問者からの質問に答える場面として設定すると便利。よくあるお問い合わせなどの内容を追加しておくと件数を減らせるかも。

画面右下に吹き出しアイコンが表示されている。

これはサイト運営者向けのサポートチャット機能で、簡単無料ホームページについてAIに質問できる。操作方法が分からなかったり、機能について確認したいときに活用しよう。

例えば各機能の使い方を知りたいときや、デザイン面で迷ったときに相談してみたり。ちょっとした疑問をその場で確認しやすいため、困ったときの案内役になるね。

 

アクセス権限

アクセス権限では、ホームページ全体、または特定のページだけを対象にして公開範囲を制限できる。

「誰でも見られる状態にしたくない内容」を扱うときに便利で、会員向けの案内、関係者だけに見せたい情報、限定公開したいページなどに使いやすい。

必要なページだけ制限できるため、公開する内容と非公開にする内容を分けながら運用しやすい点も特徴。

投稿の拒否ではIPアドレスなどを指定して、訪問者からのコメント投稿などをブロックできる。不適切なユーザーや荒らし行為は迷わず拒否しよう！

 

アドバンスト設定

アドバンスト設定では head、HTTPヘッダ、置換を設定可能。

 

head

JavaScript、メタタグ、link要素を設定できる。

Webサイトに動きを付けたいときはJavaScript（例えばこのページでいうと目次の開閉やモバイルメニューを開くときに）を使う。

メタタグはユーザーには直接見えないが、SEO（検索エンジン最適化）や表示の最適化にとても重要な役割である。

link要素は例えばページと外部ファイルを関連づけることができる。

 

HTTPヘッダ

URLごとのステータスコードを変更できる。

主に検索エンジン（Googleなど）へURLの状態を通知するために使用する。

 

置換

文字を別の文字列に置き換えたいときに使える。

例えば、[ 改行 ] という文字列を、エディタの本文に追加すると、HTMLが読み込まれるといったように設定できる。

 

ユーザー管理

掲示板などでユーザーについて管理できる。

 

有料オプション

有料コースでは独自ドメインなどを利用できるほか、無料コースで制限されていた機能が使えるようになる。また、無料コースで表示されていた広告が付かなくなる。

独自ドメインは自分で広告を付けることも可能になる。（Google Adsenseなど。）

 

個人設定

個人設定では、ライトモード/ダークモードの切り替えを含むテーマ設定に加えて、表示設定とプレビュー設定なども調整可能。

メニューを開き、ユーザー > 設定から個人設定に移る。

 

テーマ設定（外観モード）

^PC版

^スマホ版

テーマ設定の外観モードでは「ライト/ダーク/システム設定（OSに合わせる）」を選べる。

気分で切り替えたい場面や目を休めさたいときに重宝するよ。

 

表示設定

表示設定のメニューアイコン表示では、メニューに表示されるアイコンの有無を設定できる。各項目のアイコンがほしいときは有効化しよう。

 

プレビュー設定

プレビュー設定では「プレビューの持続時間」と「スマホではプレビューを同じタブで開く」を設定可能。

アイコンとは別にプレビューの機能についても解説しているのでチェックしてみて！

 

プレビュー持続時間

プレビューの持続時間はデフォルトでは2時間になっている。この持続時間を過ぎると再び管理画面からプレビューボタンを押す必要がある。

ブログ記事の下書き保存（非公開）でサイト運営者は非公開内容を確認可能。

 

スマホではプレビューを同じタブで開く

スマホでプレビューを開くのに、「同じタブで開く」か「新しいタブを開く」かを設定できる。機能を無効にすると新しいタブで開く。同じタブで完結したい場合は有効化しよう。

 

最後に

簡単無料ホームページ（hp-ez）の使い方について解説した。

アカウント開設から機能、設定方法まで一通り画像を見ながらできるようにした。

紹介した一連の操作をやるのに、どのテンプレートを使うか考えたり、何を書けばいいか悩んだり、いろいろあると思う。

まずは自分のホームページが簡単に作れることを感じて、実際にサイト運営できるという体験をしてみてほしい。

そのときはぜひ教えてほしいな。

 

最初は誰の目にもつかないので読まれないし、検索エンジンに登録されてからもかなり厳しい戦いになる。

だからこそ、日頃のブログ発信などの継続が大事になってくる。

読まれるブログはなんだろうと考えたり、ほかの記事を参考にして、アクセス数を増やしていこう。

読まれるとかなり嬉しいし、もっと読まれたいと思うよ。いわゆる承認欲求ってやつだね笑

興味本位で始めた方の中には、すぐに挫折を味わい、やめる方も出てくるだろう。自分もそうだった。

ふとした時に戻ってきたくなるので、できるところまでやり切ろう。

最後にて長々と書いたが、簡単無料ホームページに機能追加や変更点があれば定期的に更新していくよ！

まだまだ足りない説明もあるのでゆっくり書くつもり。また、自分が今までのサイト運営で得た知識や考え方をブログ記事で発信してる。

興味のある方は覗いていってくれると嬉しいな！

ここまで読んでくださり、ありがとうございました。