Web制作 ノウハウ サーバー

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

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

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

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

ポートフォリオの公開方法

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

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

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

  • その場でないとコードの確認が出来ない
  • インターネット上に公開された時に問題ないか確認が出来ない
  • スマホやタブレットでの確認が出来ない
  • サーバーを扱えないと思われるかもしれない

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

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

 

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

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

実務での納品方法は、

  • ファイル納品
  • サーバーにアップ
  • WordPressを本番環境に移行
  • Git納品

などがあります。

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

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

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

  • ブログ
  • ポートフォリオ公開
  • テストサーバー

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

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

テストサーバーとは

テストサーバーとは、本番環境にアップする前の検証用サーバーの事。検証用と言ってもローカル環境と違って本番環境と同じインターネット上に公開するので、テストサーバーで問題が無ければ本番環境に移行し、ちゃんと確認が出来れば納品完了となる事が多いです(テストサーバーはクライアント側で用意されている事もあります)

テストサーバーの作り方については以下の記事を参照下さい。

エックスサーバーでテストサーバーを作る方法

またサーバーの契約方法は以下の記事で詳しく解説しています。

初心者でも10分で出来る!WordPressブログの始め方【丁寧に解説】

 

FTPソフトを使ってサーバーにファイルをアップ

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

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

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

WindowsMac両方使えるFTPソフト「FileZilla」のインストールと接続方法

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

  • サーバーを契約済み
  • FileZillaのインストールと初期設定まで完了

解説はエックスサーバーを使用していると仮定して進めていきます。

また、WordPressの公開方法は後で解説します(これから解説するのはLPなどの静的サイト)

 

サーバーに接続する

初期設定が終わりFileZillaを使ってサーバーに接続するとこのように表示されます。

左側がPC、右側がサーバーになります。

サーバーの黒塗り2つは自分で作成したブログのドメインで、赤枠がエックスサーバーの初期ドメインとなります。

初期ドメインとは

初期ドメインはサーバーを契約したら自動で割り当てられるドメインで、アドレスの末尾は.xsrv.jpとなり.comや.netなど一般的なドメインとは異なるので通常初期ドメインを実運用では使いません。

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

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

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

 

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

先ほどの赤枠(.xsrv.jp)をダブルクリックして開くとこちらの表示になります。

ファイルを入れるのはpublic_htmlの中なので、public_htmlをダブルクリックします。

ここにはすでに3つのディレクトリがありましたが、これはテストサーバーとして使用しているディレクトリです。

もちろんテストサーバーとして使用していなければこの3つはありません。

ここにポートフォリオのファイルを入れるディレクトリを作るので、右クリックしてディレクトリの作成でportfolioというディレクトリを作成します(ディレクトリ名は任意です)

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

このポートフォリオというディレクトリの中身は当然まだ何もありません。

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

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

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

右側のディレクトリがportfolioになっている事を必ず確認しましょう

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

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

 

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

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

URLは何かというと、今回は初期ドメインを使用したのでhttp://○○.xsrv.jp/ファイルをアップしたディレクトリ/となるので、http://○○.xsrv.jp/portfolio/となります。

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

 

WordPressをアップする

先ほどまでの方法は静的サイトの場合で、WordPressの場合はデータベースなどもある為ファイルをアップするだけとはいきません。

簡単にアップする方法はこちらになります。

  1. ローカル環境でWordPress制作
  2. ポートフォリオ用のWordPressをインストール(テストサーバーなど)
  3. ローカル環境のデータをAll-in-One WP Migrationを使ってエクスポート
  4. ポートフォリオ用のWordPressにAll-in-One WP Migrationをインストール
  5. ポートフォリオ用のWordPressにエクスポートしたデータをインポート

まずは以下の記事を参考にテストサーバーを作りましょう。

エックスサーバーでテストサーバーを作る方法

そしてテストサーバーにポートフォリオ用のWordPressをインストールします。

後でもいいですが、データの移行にAll-in-One WP Migrationというプラグインを使うのでインストールしておきましょう。

 

そしてWordPressはローカル環境で作っていると思います。

ローカル環境の構築方法については以下の記事を参照下さい。

WordPressのローカル環境を構築できるLocal by Flywheelの使い方

あとはローカル環境のデータをエクスポートして、テストサーバーにインストールしたポートフォリオ用のWordPressにデータをインポートするだけです。

その方法については以下の記事を参照下さい。

WordPressのデータ移行が簡単に出来るプラグイン「All-in-One WP Migration」の使い方

 

実務ではクライアント側が用意した本番環境やテスト環境に同じようにデータを移行するので、ここで慣れておくといいと思います。

 

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

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

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

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

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

Web制作始める人がWordPressブログを始めた方がいい6つの理由

-Web制作, ノウハウ, サーバー