ホームページ編集・修正の方法を初心者向けに解説【ソフトの紹介も】

業者が作成したホームページを自分で編集したい方に向けて、編集・修正方法を初心者でも大丈夫なように丁寧に解説します。

業者に編集を頼むと高額な費用が掛かってしまうこともあるので、この記事を参考に自分で編集するやり方を押さえていただけると幸いです。

ただ、ホームページの作りによってはやはり専門知識が必要になるパターンも多いので、そんなときにおすすめのホームページ作成ソフトも併せてご紹介します。

\誰でも簡単にホームページを作成・編集できるサービス/

目次
  1. ホームページを自分で編集・修正する方法
  2. 初心者の方はホームページ編集ソフトを使うのもおすすめ
  3. ホームページの編集・修正を業者に依頼する費用
  4. まとめ

ホームページを自分で編集・修正する方法

ホームページを編集・修正する方法としては、主に以下の3つのパターンがあります。


素のHTMLで構築されている場合
制作時に以下のCMSやホームページ作成ソフトを使う取り決めをしていなかった場合は、これに該当する可能性が高いです。
CMSで構築されている場合
制作時に「WordPress」や「Movable Type」などのCMS(コンテンツ管理システム)を使う取り決めをしていた場合はこれに該当します。
ホームページ作成ソフトで構築されている場合
制作時に「Wix」「ペライチ」「ジンドゥー」などのホームページ作成ソフトを使う取り決めをしていた場合はこれに該当します。

以下でそれぞれ解説します。

素のHTMLで構築されたページをFTPソフトで編集する場合

ホームページがツールなどを使わずにHTMLの直接的な記述のみで構築されているパターンです。

これは3つのパターンの中でもっとも編集や修正のハードルが高く、専門知識が必要です。

技術的な理解が浅い状態でおこなうとホームページのデータが消えてしまうリスクもありますので、慎重に対応されることを推奨します。

補足

専門知識が無い場合、無理に既存のホームページを編集しようとするよりも、ホームページ作成ソフトで作り直した方が、将来的な更新なども簡単にできるようになり、結果的にメリットが大きくなる可能性があります。

ソフトでのHP作成に興味がある方は初心者の方はホームページ編集ソフトを使うのもおすすめの章をご覧ください。

このパターンのHPの編集・修正の手順は以下の通りです。

FTPソフトを準備する

ホームページのデータはサーバーという仕組みの中に保存されています。

したがって、ホームページを編集・修正するときは、サーバーにログインしてページのデータにアクセスすることになります。

そのために必要になるのがFTPという仕組みです。

FTPを使うことで、サーバーとあなたのコンピューターを接続して、データをやり取りできるようになります。

dummyimg

※ 実際には、セキュリティを担保するために、FTPから派生したFTPSやSFTPという仕組みを使うことが多いですが、この記事では議論が複雑になることを避けるために、それらの派生形も含めてFTPと表します。

FTPを扱うソフトは様々ありますが、代表的なものとしてはFileZillaやFFFTP(Windowsのみ)などが挙げられます。

いずれも無料で使うことができる便利なソフトです。

今回は、WindowsでもMacでも利用できるFileZillaを使って解説を進めていきます。

まず、FileZillaの公式サイトにアクセスしてください。

FileZilla 公式サイト

英語なのでとっつきづらく見えますが、このページではFileZillaをダウンロードするだけなので、難しいことはおこないません。

FileZillaの公式サイトにアクセスすると、以下の画面が表示されますので、"Download FileZilla Client"のボタンをクリックしてください。

Download FileZilla Client

すると以下のページに移動しますので、"Download FileZilla Client"のボタンをクリックしてください。

Download FileZilla Client

※ Windowsをお使いの場合は、"Mac OS"でなく"Windows"と表示されます。

以下のポップアップが表示されるので、"Download"をクリックしてください。

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で管理しているページは、新着情報などの日々更新していくコンテンツなら「投稿」、会社概要などの更新があまり無いコンテンツなら「固定ページ」で作られているのが基本です。

編集したいページの性質を考えて、どちらかから該当するページを探してください。

WordPressの管理画面

該当ページを見つけたら、クリックして編集画面を開きます。

内容を編集・修正し、公開する

自由に文字情報や画像を編集して、完了したら右上の「更新」ボタンをクリックします。

「更新」ボタンをクリック

これで編集内容がページに反映されます。

公開する前にプレビューを確認したい場合は、更新ボタンの隣にある「プレビュー」をクリックしてください。

ホームページ作成ソフトで構築されている場合

ホームページ作成ソフトで構築されている場合は、FTPなどの専門的な技術を使う必要が無く、編集可能なすべての領域を管理画面から編集・修正・更新できます

例えば、誰でも簡単にホームページを作れる「とりあえずHP」なら、以下の動画のように編集も手軽におこなえます。

初心者の方はホームページ編集ソフトを使うのもおすすめ

ここまで解説してきた通り、ホームページを編集するには専門知識が必要な場合が多く、また、初心者が無理に触るとデータが消えてしまうなどのリスクもあるため、ハードルが高いです。

予算に余裕がある場合は、業者に依頼して編集してもらうことも選択肢に入るでしょう。

業者に依頼する場合の費用は次の章で解説します(ホームページの編集・修正を業者に依頼する費用)。

一方で、その場合は編集のたびに数万円以上の費用がかかってしまう可能性が高いため、いっそのことホームページ作成ソフトで作り直してしまうことも考えられます。

最初に作り直す手間はかかりますが、一度やってしまえばそれ以降は自分でいつでも簡単にホームページを編集・修正・更新することができ、中長期で見れば金銭面でも手間の面でも利点は大きいです。

以下は、初心者の方におすすめのホームページ作成ソフトをいくつか比較した表です。

サービス名月額費用特徴
とりあえずHP2,970円とにかく操作が簡単で、パソコンに不慣れな方でも安心
ジンドゥー4,110円(ジンドゥークリエイター SEO PLUS)クールでスタイリッシュなデザインに強い
ペライチ3,278円(ビジネスプラン)ページ数が少ないホームページにピッタリ
WIX2,659円(VIP)外国産のサービスで、海外で強い人気心

とりあえずHPはとにかく簡単さにこだわったソフトなので、興味がある方は下の画像から公式サイトをご覧ください。

簡単に自分で作れるホームページ作成ソフト

ホームページの編集・修正を業者に依頼する費用

ホームページの編集・修正を業者に依頼するときにかかる費用は、当然ですが内容によって異なります。

あくまでも目安ですが、例えば下記のような金額帯が相場だと言えるでしょう。

編集内容費用の目安
文言変更(1p)数千円
デザイン変更(1p)数万円 ~ 20万円
プログラミングを伴う変更(1箇所)数万円 ~ 50万円

また、同じ編集内容でも依頼先の業者のタイプによっても金額が変わってきます。

以下は、ホームページの更新や運用を依頼した場合の月額費用の目安を、業者のタイプ別に整理した表です。

単発で編集を依頼する場合にこの費用がそのまま当てはまるわけではありませんが、業者のタイプごとに費用がどれくらい変わってくるのかを知る上では参考になる情報です。

HP制作業者3万円 ~
広告代理店・コンサル会社10万円 ~
個人(フリーランス)1万円 ~
クラウドソーシング数千円 ~
HP作成ソフト2,000円 ~

業者ごとの費用の違いについては下記の記事で解説しているので、併せてチェックしてみてください。

まとめ

ホームページを編集・修正する方法について解説してきました。

自分で編集することに自信が無い方は、簡単ホームページ作成ソフトの「とりあえずHP」で自作することも選択肢に入ると思います。

無料でホームページ作成を試すことができますので、興味がある方は公式サイトをぜひチェックしてみてください。

気軽につくれる、素敵なホームページ「とりあえずHP」

とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。

簡単に自分で作れるホームページ作成ソフト

無料お試しはこちら

2万人以上が使う簡単ホームページ作成ソフト

無料お試しはこちら

無料オンラインサポート実施中

\まずは、どんなサービスか知りたい/

とりあえずHPサービス説明

無料サービス説明・申込

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

PAGE TOP