ポートフォリオは作ったら人に見せるために公開する必要があります。
公開する方法はいくつかありますが、今回は実務での納品を意識した公開方法を解説していきます。
ポートフォリオの公開方法
まず今回ポートフォリオを公開する方法は、インターネット上に公開するという方法です。
PC上で作成したものはインターネット上にアップロードして公開しないと、営業する際にクライアントに見せる事が出来ません。
PCを持って行って対面で会うのであれば、自分のPCにあるものを見せる事は出来ますが、
- その場でないとコードの確認が出来ない
- インターネット上に公開された時に問題ないか確認が出来ない
- スマホやタブレットでの確認が出来ない
- サーバーを扱えないと思われるかもしれない
など、色々と問題があります。
インターネット上に公開する方法もいくつかありますが、ここではより実務に近いサーバーにアップするという方法を解説していきます。
レンタルサーバーを契約する
サーバーにアップをするという事は、レンタルサーバーを契約しないといけません。
実務での納品方法は、
- ファイル納品
- サーバーにアップ
- WordPressを本番環境に移行
- Git納品
などがあります。
このうち納品方法として最も多いのが2つ目と3つ目になります。
サーバーはよく分からない状態で扱うと事故る可能性大なので、まずは自分でサーバーを契約して色々と使ってみるのがいいと思います（自分のサーバーならいくらでも間違えられるので）
自分のサーバーの使い道は主に以下になります。
- ブログ
- ポートフォリオ公開
- テストサーバー
私も自分で契約したサーバーでこのブログを運営し、ポートフォリオを公開し、テストサーバーとして活用しています。
ブログをやるかどうかは本人次第ですが、ポートフォリオの公開とテストサーバーはほぼ必須なので、Web制作者は自分のサーバーを持つのは必須だと思います。
テストサーバーとは
テストサーバーの作り方については以下の記事を参照下さい。
またサーバーの契約方法は以下の記事で詳しく解説しています。
初心者でも10分で出来る！WordPressブログの始め方【丁寧に解説】
FTPソフトを使ってサーバーにファイルをアップ
サーバーにファイルをアップするのに使うのがFTPソフトになります。
FTPソフトには色々種類がありますが、色々使ったみた結果一番使いやすく今でも使っているのがFileZillaになります。
FileZillaの使い方については以下の記事を参照下さい。
WindowsとMac両方使えるFTPソフト「FileZilla」のインストールと接続方法
これからは以下まで終わっているとして解説していきます。
- サーバーを契約済み
- FileZillaのインストールと初期設定まで完了
解説はエックスサーバーを使用していると仮定して進めていきます。
また、WordPressの公開方法は後で解説します（これから解説するのはLPなどの静的サイト）
サーバーに接続する
初期設定が終わりFileZillaを使ってサーバーに接続するとこのように表示されます。
左側がPC、右側がサーバーになります。
サーバーの黒塗り2つは自分で作成したブログのドメインで、赤枠がエックスサーバーの初期ドメインとなります。
初期ドメインとは
また初期ドメインは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の場合はデータベースなどもある為ファイルをアップするだけとはいきません。
簡単にアップする方法はこちらになります。
- ローカル環境でWordPress制作
- ポートフォリオ用のWordPressをインストール（テストサーバーなど）
- ローカル環境のデータをAll-in-One WP Migrationを使ってエクスポート
- ポートフォリオ用のWordPressにAll-in-One WP Migrationをインストール
- ポートフォリオ用のWordPressにエクスポートしたデータをインポート
まずは以下の記事を参考にテストサーバーを作りましょう。
そしてテストサーバーにポートフォリオ用のWordPressをインストールします。
後でもいいですが、データの移行にAll-in-One WP Migrationというプラグインを使うのでインストールしておきましょう。
そしてWordPressはローカル環境で作っていると思います。
ローカル環境の構築方法については以下の記事を参照下さい。
WordPressのローカル環境を構築できるLocal by Flywheelの使い方
あとはローカル環境のデータをエクスポートして、テストサーバーにインストールしたポートフォリオ用のWordPressにデータをインポートするだけです。
その方法については以下の記事を参照下さい。
WordPressのデータ移行が簡単に出来るプラグイン「All-in-One WP Migration」の使い方
実務ではクライアント側が用意した本番環境やテスト環境に同じようにデータを移行するので、ここで慣れておくといいと思います。
まとめ：ポートフォリオの公開は実務前の練習にもなる！
コーディングやWordPressをローカルで制作しているだけではサーバーに触れる機会はありませんが、実務では自分でサーバーを持っていないと色々と不便です。
なのでポートフォリオを公開する時にサーバーを契約し、静的サイトのアップロードとWordPressの移行の両方を練習しておくといいかと思います。
ただ出来ればWeb制作の勉強を始めたらすぐWordPressでブログを始めた方がいいと思っています。
その理由については以下の記事に書いてあるので、Web制作の勉強が軌道に乗ったと思ったら見て頂きたいと思います。