【初心者向け】Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法

ポートフォリオ作ったけどどうやって公開すればいいの？

ポートフォリオは作ったら人に見せるためにインターネット上に公開する必要があります。

公開する方法はいくつかありますが、今回は実務での納品を意識したFTPソフトを使った公開方法を解説していきます。

ポートフォリオサイトの公開方法について

ポートフォリオサイトの公開方法ですが、実績を並べるだけであればポートフォリオ作成サービスを利用する方法もあります。

実務で『実績掲載OK』と言われたサイトのみ載せ、そこにアクセスすれば自分で作成したサイトが見れるので、実績がたまってきたらこの方法でも良いかも知れません。

ただし最初は載せられるものが『スクールの課題で出された架空サイト』や『自作したポートフォリオサイト』だと思います。

その場合は自分で契約したレンタルサーバーにファイルをアップロードしたり、WordPressであればWordPressをインストールする必要もあります。

レンタルサーバーのファイルマネージャーを使えば、FTPソフトを使わずにファイルをアップロードすることも可能です。

『Conoha WING』と『エックスサーバー』についてはFTPソフトを使わずにポートフォリオサイトをアップロードする方法を以下の記事で解説しています。

しかし、実務での納品方法には以下のような種類があります。

このうち、納品方法として最も多いのが2つ目と3つ目になります。

サーバーはよく分からない状態で扱うと事故る可能性大なので、まずは自分でサーバーを契約して色々と使ってみるといいと思います（自分のサーバーならいくらでも間違えられるので）

自分のサーバーの使い道は主に以下になります。

私も自分で契約したサーバーでこのブログを運営し、ポートフォリオサイトを公開し、テストサーバーとして活用しています。

ブログをやるかどうかは本人次第ですが、ポートフォリオサイトの公開とテストサーバーはほぼ必須なので、Web制作者は自分のサーバーを持つのは必須だと思います。

テストサーバーについても先ほどご紹介した以下の記事を見れば分かると思います。

また、おすすめのレンタルサーバーについては以下の記事で詳しく解説しています。

そこで今回はレンタルサーバーのファイルマネージャーではなく、実務を想定したFTPソフトを使ったファイルのアップロードと公開方法について解説していきます。

Web制作案件での納品を意識したFTPソフトを使用したポートフォリオサイトの公開方法

まず今回ポートフォリオサイトを公開する方法は、インターネット上に公開するという方法です。

PC上で作成したものはインターネット上にアップロードして公開しないと、営業する際にクライアントに見せる事が出来ません。

PCを持って行って対面で会うのであれば、自分のPCにあるものを見せる事は出来ますが、

など、色々と問題があります。

インターネット上に公開する方法もいくつかありますが、ここではより実務に近い『FTPソフトを使ってサーバーにアップ』という方法を解説していきます。

レンタルサーバーを契約する

サーバーにアップをするという事は、レンタルサーバーを契約しないといけません。

FTPソフト自体はサーバーを契約しなくても使えますが『アップするサーバーは自分で契約したレンタルサーバー』なので、当然契約する必要があります。

レンタルサーバーは携帯会社や電力会社と同じでいろいろと種類があり、初心者はどれにしていいか分からないと思います。

そこでおすすめのレンタルサーバーを3つ厳選して以下の記事にまとめているので、ぜひ参考にしてみて下さい。

この記事内にそれぞれのレンタルサーバーでの契約方法の記事も載せているので、その記事を参考に契約を進めれば簡単に出来ます。

FTPソフトを使う

サーバーにファイルをアップするのに必要なのがFTPソフトになります。

FTPソフトには色々種類がありますが、色々使ってみた結果一番使いやすく今でも使っているのが『FileZilla』になります。

『FileZilla』の使い方については以下の記事を参照下さい。

これからは以下まで終わっているとして解説していきます。

サーバーに接続する

『FileZilla』でインストールが終わったらサーバーに接続します（サーバーへの接続方法は先ほどご紹介した記事に書いています）

最初だけ『エックスサーバー』と『Conoha WING』で見てみます。

また、どちらも左側がPC、右側がサーバーになります。

エックスサーバー

エックスサーバーに接続するとこちらが表示されます。

FileZilla：エックスサーバーのサーバーに接続

そして次は初期ドメインである『○○.xsrv.jp』を開きます。

また初期ドメインはGoogleアドセンスを利用出来ないので、ブログで稼ぐつもりであればブログとしての利用も選択肢から外れます。

それでは初期ドメインは何に使うのかというと、テストサーバーやポートフォリオサイトのアップ先として使えます。

ということで、この初期ドメインの中にポートフォリオのファイルをアップしていきます。

そして『○○.xsrv.jp』を開くとこちらが表示されます。

FileZilla：エックスサーバーのサーバーに接続

そして『public_html』を開きます。

FileZilla：エックスサーバーのサーバーに接続

エックスサーバーではここにファイルをアップロードしていきます。

いま表示されている『index.html』と『default_page.png』はデフォルトで用意されているファイルで削除しても大丈夫です。

詳しくはこちらの記事に書いていますが、削除したら戻せないので気になる人はダウンロードしておきましょう。

Conoha WING

Conoha WINGに接続したら『public_html』を開きます。

FileZilla：Conoha WINGのサーバーに接続

そして次は初期ドメインである『○○.conohawing.com』を開きます。

FileZilla：Conoha WING（初期ドメイン）

ポートフォリオサイトやテストサーバーとして独自ドメインではなく初期ドメインを使う理由は、エックスサーバーの時と同じです。

そしてこちらが初期ドメインのディレクトリです。

FileZilla：Conoha WING（初期ドメイン）

『error』というディレクトリがありますが、これはファイルが何も無い時に表示されるエラーページ用なので気にしなくてOKです。

Conoha WINGではここにファイルをアップロードしていきます。

初期ドメインの中にポートフォリオのファイルをアップロードする

それではファイルをアップロードしていきます。

ここからはConoha WINGにサーバーを繋いだ状態で解説していきますが、やることはエックスサーバーも同じです。

まずポートフォリオのファイルを入れるディレクトリを作るので、右クリックして『ディレクトリの作成』で『portfolio』というディレクトリを作成します（フォルダごとアップロードするのであればこの作業は不要）

FileZilla：ディレクトリの作成

作成するとこのようになります。

FileZilla：ディレクトリの作成

この『portfolio』というディレクトリの中身は当然まだ何もありません。

ここにポートフォリオのファイルをドラッグ＆ドロップでアップロードしていきます。

もしくは左のPC側からアップしたいファイルを選択して右クリックします（複数選択可能）

FileZilla：ファイルのアップロード

そしてアップロードをクリックすると右側で選択されているディレクトリにファイルがアップされます。

このように右側にファイルがあればアップロード完了です。

FileZilla：ファイルのアップロード完了

もし不要なファイルがあれば右側でファイルを選択して右クリックし、削除すればOKです。

FileZilla：ファイルの削除

同じようにすれば複数のサイトをアップロード出来ます。

ポートフォリオサイトにアクセスしてみる

それでは実際に公開されているか確認してみます。

と、ここで、

URLってどれ？？

と思うかも知れません。

URLは何かというと、今回は初期ドメインを使用したので以下のようになります。

【エックスサーバーの場合】
http://○○.xsrv.jp/ファイルをアップしたディレクトリ名/

【Conoha WINGの場合】
http://○○.conohawing.com/ファイルをアップしたディレクトリ名/

※ ○○は初期ドメイン名

つまり今回の例で言えばディレクトリ名は『portfolio』なので、以下のようになります。

【エックスサーバーの場合】
http://○○.xsrv.jp/portfolio/

【Conoha WINGの場合】
http://○○.conohawing.com/portfolio/

このURLにアクセスすればポートフォリオが見れるはずです（ファイルの構成として一般的な『index.html』が入ってる場合）

まとめ：ポートフォリオの公開は実務前の練習にもなる！

コーディングやWordPressをローカルで制作しているだけではサーバーに触れる機会はありませんが、実務では自分でサーバーを持っていないと色々と不便です。

なのでポートフォリオを公開する時にサーバーを契約し、静的サイトのアップロードとWordPressの移行の両方を練習しておくといいかと思います。

ただ出来ればWeb制作の勉強を始めたらすぐWordPressでブログを始めた方がいいと思っています。

その理由については以下の記事に書いてあるので、Web制作の勉強が軌道に乗ったと思ったら見て頂ければと思います。

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら