【実務未経験へ】作ったWebサイトをネットに公開するには?

FTP
当サイトはアフィリエイト広告を利用しています

当サイトは、記事内にアフィリエイト広告を掲載しています。消費者庁が、2023年10月1日から施行した景品表示法の規制対象にならないよう、配慮して記事を作成しています。

Webサイト公開は、
ファイルをサーバーに置いて
誰でも見られるURLにする

だけ!

無料も有料もあるので、
目的に合わせて選べばOK!

「作ったHTML、どうやってネットに載せるの?」
「無料じゃダメ? レンタルサーバーってお金かかる?」

このような疑問を持つ方、多いんじゃないでしょうか。


そこで、この記事では、

  • Webサイトを誰でも見れるようにしたい!
  • ポートフォリオを見せてほしいと言われた…!

という方が、「どうやって公開するのか」理解できるように解説します!

彩兎ありす

最高におしゃれなサイトが完成です!
今すぐ世界中の人に見せたい!

ぱそみみ先生

まだ手元のパソコンの中ですから!(笑)
ネットに置かないと誰も見られません

亜富院ルナ

パソコンを抱えて見せるわけにも
いかないので置き場所を探します

ネットで見られる仕組みとは?

必要なのは「家と住所」だけ

Webサイトの公開に必要なのは、たった2つ。

  • サーバー:家のようなもの
  • ドメイン:住所のようなもの
Webサイトの公開に必要なものは「土地と住所」

これさえあれば、誰でも見られる状態になります。

ちなみに、なぜ家に例えているのかというと、「借りる」必要があるからです。
自分で家を建てるのが大変なように、「サーバーを借りる」のが主流です。

なぜ、サーバーを借りるのか?

お金を払ってまで、なぜサーバーを借りるのか?
それは、「データを他人に見せることができないから」です。

パソコンを使っていないときには、電源をオフにしますよね。

パソコン内のファイルをサーバーへ1

そんな状態では、他のパソコンから見ることができません。

そこで、サーバーを借ります。
すると、24時間365日、電源が付いた状態です。

パソコン内のファイルをサーバーへ2

このように、常に多くのパソコンと接続できる場所に、データを置くことができます。
これが、サーバーを借りるメリットの1つです。

亜富院ルナ

仕組みは分かりましたが
毎月の維持費が気になります

ぱそみみ先生

実はタダで使えるツールもあるんです!
用途に合わせて賢く選べますよ

彩兎ありす

タダという言葉を聞いた瞬間
急にやる気が湧いてきました!

無料と有料、どっちがいい?

趣味なら、無料ツールで十分

とはいえ、いきなり有料のものに手を出すのは、リスクがあります。
なので、最初のうちは、無料ツールを使うのがおすすめです。

最近の流行りだと、「Github Pages」「Vercel」辺りを使う人が多いです。

Webサイト公開用の無料ツール

2つの違いは、

  • GitHub Pages → Git や GitHub も、一緒に練習したい人向け
  • Vercel → フォルダを置いて、すぐに公開したい人向け

です。

実務なら、有料サーバーが安全

一方で、

  • 「副業・本業でビジネスを始めたい」
  • 「複数ページのサイトを作りたい」

という場合は、有料サーバーを使うのが安全です。
最安で選ぶなら、「ConoHa WING 」「ロリポップ!」がよく使われます。

Webサイト公開用の有料サーバー

2つの違いは、

  • ConoHa WING → コスパよく、WordPress をやりたい人向け
  • ロリポップ! → 月数百円、とにかく費用を安くしたい人向け

です。

「無料と有料」の比較表

ザックリとわかったところで、詳しい比較に入りましょう。

項目無料ツール有料サーバー
費用◎完全無料◯月500円〜1,000円ほど
手軽さ◎すぐ公開できる△契約や設定が必要
URL△サービスの借り物◎自由な独自ドメイン
WordPress✕動かない (HTMLのみ)◎快適に動く
実務の信用△練習用に見えやすい◎堂々と見せられる
おすすめ用途趣味・学習・動作確認ビジネス・ポートフォリオ

といった感じで、目的に合わせて選ぶのがベストです。

彩兎ありす

練習とか難しいことは抜きにして
1ミリも苦労せず秒で公開したいです!

ぱそみみ先生

清々しいほど正直ですね!(笑)
それなら迷わず置くだけのツールですよ

亜富院ルナ

楽をしたいという執念だけは
すでにプロ並みの風格ですね

公開までの2ステップ

データをサーバーに移動するには?

無料ツールの場合、画面上で操作していくことで、公開することができます。
一方、有料サーバーの場合、自力でサーバーに移動する必要があります。

そこで登場するのが、「FTPソフト」です。
これは、宅配便のように「データを移動する」無料アプリです。

FTPソフトでサーバーにアップロードできる

詳しくは、↓の記事に書いています。

移動するのに「アプリを入れる必要がある」のを覚えておきましょう。

① FTPソフトでファイルを移動

では、どんな感じで使っていくのか?
そのイメージを付けるために図解します。

まず、「FTPソフト」の画面は、2つに分かれています。
左側がパソコン側、右側がサーバー側です。

FTPソフトがどんなものなのか図解1

やることは、シンプル。
データを引っ張って、左から右に動かすだけです。

FTPソフトがどんなものなのか図解2

イメージとしては、こんな感じです。

実際の画面はこちら。

FTP ファイル移動前の画面

このような画面で、左から右に移動します。

FTP ファイル移動している図

データがコピーされて、サーバーに移動されます。

FTP ファイル移動後の画面

実際には、ログインなどの操作があるので、そこら辺に慣れる必要はあります…。
ただ、イメージとして「こんな感じ」と覚えると良いと思います。

② PCとスマホで表示を確認する

公開した後に大事なのが、「ちゃんと見えるか確認する」ことです。
これをやらずに、ミスることが(多々)あります。

簡単な方法としては、同じURLに違う端末でアクセスすることです。

PCとスマホで表示を確認する

スマホでやるメリットとしては、「キャッシュが残らない」ことです。
パソコンに残ったデータなどが関係なくなるので、フレッシュな状態になります。

人間ではなくパソコンが「古いデータを見ていた…」ということが稀によくあります。
その対策として、スマホで見るのは、結構大事です。

彩兎ありす

スマホで開いたら『見つかりません』
って出て心臓が止まりました…!

ぱそみみ先生

ただの打ち間違いですから!(笑)
コピペで送れば一発で開けますよ

亜富院ルナ

長い英数字を手打ちするなんて
ある意味すごい勇気ですね

まとめ

まずは無料のもので試してみる

公開するために、必要なものは次のようになります。

  • 無料ツールの場合
    • サーバー(基本はサービスに登録すればOK)
  • 有料サーバーの場合
    • サーバー|データを置く場所
    • ドメイン|サーバーの住所
    • FTPソフト|データを移動するアプリ

無料の場合、FTPソフトを入れなくても、何とかなる場合も多いです。
なので、「無料ツール → 有料のサーバー」の流れがおすすめです。

まずは無料のもので公開してみる

とはいえ、知識として「FTPソフトの仕組み」を知っておいて、損はないはずです。

彩兎ありす

左から右にマウスを動かしたら
机の端っこから落ちそうになりました!

ぱそみみ先生

机の上が散らかりすぎです!(笑)
まずはマウスの通り道を片付けましょう

亜富院ルナ

ファイルの引っ越しをする前に
お部屋の片付けから始めましょうか…

この記事を書いた人
うさくら

普段は、デザイン・プログラミング・イラストなど、色々なものづくりをしています。初心者に教えたりもするWebサイト制作の人。

昔から独学で学ぶことが多く、無料の動画やWebサイトに助けられて受験を乗り越えたりスキルアップしてきました。自分がこれまで見ていたような「お金が無くても学べるコンテンツ」で、誰かのお役に立てれば幸いです。

スキルアップし続けたい人は、ぜひ一緒に学んでいきましょう!