ホームページ編集・修正の方法を初心者向けに解説【ソフトの紹介も】
- 「ホームページを編集・修正する時はいつも業者に頼んでいるから、お金も時間もかかってる…」
- 「自分で編集できればいいけど、やり方がよくわからない」
上記のようなお悩み、感じていませんか？
ホームページを運営していると、新しいお知らせを投稿したり、古くなってしまった情報を更新したり、ページに手を加えたい場面は日々発生しますよね。
そんなときに、自分で編集できたらいいなと思いつつも、「専門的で難しそうだし…」とハードルを感じてしまうのはよくある話です。
そこでこの記事では、自分でホームページを編集する方法を初心者向けに解説します。この記事を読むことで、「全部を業者に頼んでいる状態」から前進していただけるように、丁寧に説明していきます。
「そんな選択肢があるの？」と思われた方は、ぜひ「初心者の方はホームページ編集ソフトを使うのもおすすめ」の章まで読み進めてみてください！
目次
ホームページを自分で編集・修正する方法
ホームページを編集・修正する方法は、そのホームページがどのように作られているかによって異なります。具体的には、主に以下の3つのパターンがあります。
- 素のHTMLで構築されている場合
- 制作時に以下のCMSやホームページ作成ソフトを使う取り決めをしていなかった場合は、これに該当する可能性が高いです。
- CMSで構築されている場合
- 制作時に「WordPress」や「Movable Type」などのCMS（コンテンツ管理システム）を使う取り決めをしていた場合はこれに該当します。
- ホームページ作成ソフトで構築されている場合
- 制作時に「Wix」「ペライチ」「ジンドゥー」などのホームページ作成ソフトを使う取り決めをしていた場合はこれに該当します。
以下でそれぞれ解説します。
素のHTMLで構築されたページをFTPソフトで編集する場合
ホームページがツールなどを使わずにHTMLの直接的な記述のみで構築されているパターンです。
これは3つのパターンの中でもっとも編集や修正のハードルが高く、専門知識が必要です。
技術的な理解が浅い状態でおこなうとホームページのデータが消えてしまうリスクもありますので、慎重に対応されることを推奨します。
簡単操作で自由に編集できるようにするには？
このように専門性の高い方法でホームページが作られている場合は、冒頭でも触れましたが「初心者向けのホームページ作成ソフト」で作り直してしまう選択肢もあります。
「自分で作り直すなんて、今あるものを編集するより難しいのでは？」とお感じになると思いますが、実はそうではありません。豊富に用意されたテンプレートからデザインを選ぶだけで、誰でも簡単に作ることができます。
そうすれば自分で自由に編集することもできるようになりますので、ぜひ検討してみてください。初心者向けソフトについては初心者の方はホームページ編集ソフトを使うのもおすすめの章で詳しく解説します。
素のHTMLで作られたHPの編集・修正の手順は以下の通りです。
FTPソフトを準備する
ホームページのデータはサーバーという仕組みの中に保存されています。
したがって、ホームページを編集・修正するときは、サーバーにログインしてページのデータにアクセスすることになります。
そのために必要になるのがFTPという仕組みです。
FTPを使うことで、サーバーとあなたのコンピューターを接続して、データをやり取りできるようになります。
※ 実際には、セキュリティを担保するために、FTPから派生したFTPSやSFTPという仕組みを使うことが多いですが、この記事では議論が複雑になることを避けるために、それらの派生形も含めてFTPと表します。
FTPを扱うソフトは様々ありますが、代表的なものとしてはFileZillaやFFFTP（Windowsのみ）などが挙げられます。
いずれも無料で使うことができる便利なソフトです。
今回は、WindowsでもMacでも利用できるFileZillaを使って解説を進めていきます。
まず、FileZillaの公式サイトにアクセスしてください。
英語なのでとっつきづらく見えますが、このページではFileZillaをダウンロードするだけなので、難しいことはおこないません。
FileZillaの公式サイトにアクセスすると、以下の画面が表示されますので、”Download FileZilla Client”のボタンをクリックしてください。
すると以下のページに移動しますので、”Download FileZilla Client”のボタンをクリックしてください。
※ Windowsをお使いの場合は、”Mac OS”でなく”Windows”と表示されます。
以下のポップアップが表示されるので、”Download”をクリックしてください。
ダウンロードされるFileZillaのデータを開けば、FTPの準備は完了です。
FTPでサーバーにアクセスする
FileZillaを開くと以下の画像のような画面が表示されます。
まずはサーバーに接続する必要があるため、画面左上のアイコンから「サイトマネージャー」を開いてください。
すると以下の画像のような画面が開きますので、「新しいサイト」ボタンをクリックし、右側の入力欄から接続先のサーバーの情報を入力してください。
サーバーの接続情報は、ホームページを作成した業者に確認すると教えてくれるはずです。
もし、ご利用されているサーバーを把握していて、自分で接続情報を調べたい場合は、下記のヘルプページなどをご覧ください。
- エックスサーバー
- FTPソフトの設定 | レンタルサーバーならエックスサーバー
- さくらのレンタルサーバ
- FTPソフトの一般的な設定 – さくらのサポート情報
- mixhost
- FTPソフトの設定方法 – mixhost ヘルプ＆サポート
- ConoHa WING
- FTPソフトを設定する｜ConoHa WINGサポート
上記以外のサーバーを使われている場合は、「◯◯（サーバー会社名） FTP」などで検索するとヘルプページが見つかると思います。
入力が完了した後に「接続」ボタンを押すと、ホームページがアップロードされているサーバーに接続することができます。
接続できると、FileZillaの画面の右側にある「リモートサイト」のエリアにサーバー内のデータが表示されます。
- ローカルサイト
- ご自身のパソコン内のデータが表示されるエリア
- リモートサイト
- 接続先のサーバー内のデータが表示されるエリア
該当するHTMLファイルをダウンロードして編集する
サーバーにアクセスできたら、編集したいHTMLファイルをご自身のパソコンにダウンロードしてください。
FTPで繋ぎながらサーバーのデータを直接編集することもできますが、ミスがあった場合にデータが壊れてしまったり、公開されているホームページの表示に問題が生じたりする危険性があるため、パソコンの中にダウンロードしたファイルを編集することを推奨します。
どのファイルが編集したいページのものかを判断するにはホームページ制作の知見が必要ですが、基本的にはファイル名が中身の内容を表すものになっていることが多いです。
そのため、例えば会社概要ページであれば”company.html”や”about.html”などの名前になっている可能性が高いので、これをヒントに探してみるとよいでしょう。
ダウンロードできたら、テキストエディタ（HTMLなどのテキストデータを編集するソフト。Windowsの「メモ帳」も該当する）でファイルを開き編集します。
HTMLを編集するには専門知識が必要ですが、基本的な部分は下記の記事で初心者向けに解説しているので、参考にしてみてください。
サーバーに再度アップロードする
編集が完了したらファイルをサーバーにアップロードします。
先ほど解説した通り、FileZillaの画面構成は、左の「ローカルサイト」がご自身のパソコン、右の「リモートサイト」がサーバー、という形式になっています。
そのため、「ローカルサイトのエリアの中から該当するファイルを選択し、ドラッグ&ドロップでリモートサイトのエリアに移動」すれば、ご自身のパソコン上で編集したHTMLファイルをサーバーにアップできます。
この時、ファイルをアップロードする場所は元ファイルがあった場所と同じである必要があるのでご注意ください。
また、同じ場所に同名のファイルをアップロードしようとすると、以下の画像のようなメッセージが表示されます。
今回はホームページを編集・修正したいので、新しいファイルで上書きする必要があります。
そのため、「上書き」にチェックが入った状態で「OK」をクリックしてください。
注意
編集する前のファイルも別途ダウンロードして残しておくことが推奨です。そうすることで、万一編集したあとにホームページがおかしくなってしまっても、編集前のファイルを再度アップロードすることで元に戻すことができます。
ファイルをアップロードできたら、公開されているホームページの内容も更新されているかを確認しましょう。
CMSで構築されている場合
WordPressなどのCMS（コンテンツ管理システム）でホームページが構築されている場合も、根本的な構造の部分から編集をしたい場合は上述（FTPソフトを準備する）のようにFTPによるサーバーへのアクセスが必要です。
ただし、CMSを使っている場合、ホームページの中で編集する必要が生じる可能性が高い箇所については、CMSの管理画面から編集できるようになっていることが一般的です。
管理画面からの編集であれば、該当するページの編集画面から文言などを変更して「公開」や「更新」などのボタンを押すだけでおこなうことができます。
CMSとしてはWordPressのシェアが圧倒的に高く、あなたのホームページにも使われている可能性が高いため、以下ではこれを使った編集方法を解説します。
該当するページの編集画面を開く
WordPressで管理しているページは、新着情報などの日々更新していくコンテンツなら「投稿」、会社概要などの更新があまり無いコンテンツなら「固定ページ」で作られているのが基本です。
編集したいページの性質を考えて、どちらかから該当するページを探してください。
該当ページを見つけたら、クリックして編集画面を開きます。
内容を編集・修正し、公開する
自由に文字情報や画像を編集して、完了したら右上の「更新」ボタンをクリックします。
これで編集内容がページに反映されます。
公開する前にプレビューを確認したい場合は、更新ボタンの隣にある「プレビュー」をクリックしてください。
ホームページ作成ソフトで構築されている場合
ホームページ作成ソフトで構築されている場合は、FTPなどの専門的な技術を使う必要が無く、編集可能なすべての領域を管理画面から編集・修正・更新できます。
例えば、誰でも簡単にホームページを作れる「とりあえずHP」なら、以下の動画のように編集も手軽におこなえます。
初心者の方はホームページ編集ソフトを使うのもおすすめ
ここまで解説してきた通り、ホームページを編集するには専門知識が必要な場合が多く、また、初心者が無理に触るとデータが消えてしまうなどのリスクもあるため、ハードルが高いです。予算に余裕がある場合は、業者に依頼して編集してもらうことも選択肢に入るでしょう。
業者に依頼する場合の費用は次の章で解説します（ホームページの編集・修正を業者に依頼する費用）。
一方で、その場合は編集のたびに数万円以上の費用がかかってしまう可能性が高いため、いっそのことホームページ作成ソフトで作り直してしまうことも考えられます。
最初に作り直す手間はかかりますが、一度やってしまえばそれ以降は自分でいつでも簡単にホームページを編集・修正・更新することができ、中長期で見れば金銭面でも手間の面でも利点は大きいです。
以下は、初心者の方におすすめのホームページ作成ソフトをいくつか比較した表です。
| サービス名 | 月額費用 | 特徴 |
|---|---|---|
| とりあえずHP | 2,970円 | とにかく操作が簡単で、パソコンに不慣れな方でも安心 |
| ジンドゥー | 4,110円（ジンドゥークリエイター SEO PLUS） | クールでスタイリッシュなデザインに強い |
| ペライチ | 3,278円（ビジネスプラン） | ページ数が少ないホームページにピッタリ |
| WIX | 2,659円（VIP） | 外国産のサービスで、海外で強い人気心 |
とりあえずHPはとにかく簡単さにこだわったソフトなので、興味がある方は公式サイトをご覧ください。
ホームページの編集・修正を業者に依頼する費用
ホームページの編集・修正を業者に依頼するときにかかる費用は、当然ですが内容によって異なります。
あくまでも目安ですが、例えば下記のような金額帯が相場だと言えるでしょう。
| 編集内容 | 費用の目安 |
|---|---|
| 文言変更（1p） | 数千円 |
| デザイン変更（1p） | 数万円 ~ 20万円 |
| プログラミングを伴う変更（1箇所） | 数万円 ~ 50万円 |
また、同じ編集内容でも依頼先の業者のタイプによっても金額が変わってきます。
以下は、ホームページの更新や運用を依頼した場合の月額費用の目安を、業者のタイプ別に整理した表です。
単発で編集を依頼する場合にこの費用がそのまま当てはまるわけではありませんが、業者のタイプごとに費用がどれくらい変わってくるのかを知る上では参考になる情報です。
| HP制作業者 | 3万円 ~ |
| 広告代理店・コンサル会社 | 10万円 ~ |
| 個人（フリーランス） | 1万円 ~ |
| クラウドソーシング | 数千円 ~ |
| HP作成ソフト | 2,000円 ~ |
業者ごとの費用の違いについては下記の記事で解説しているので、併せてチェックしてみてください。
まとめ
ホームページを編集・修正する方法について解説してきました。
自分で編集することに自信が無い方は、簡単ホームページ作成ソフトの「とりあえずHP」を使うことも選択肢に入ると思います。
今なら無料でお試し可能なので、興味がある方は公式サイトをチェックしてみてください。
気軽につくれる、素敵なホームページ「とりあえずHP」
とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。
＼ 知識ゼロでも自分で編集できるHPソフト ／