【図解】ポートフォリオサイトの条件・作成から公開までの全手順

コロナ禍での不景気を心配し、副業を始める方が増加しました。未経験からWeb制作に挑戦している人も少なくありません。

しかし、Web制作の1つの壁として、「ポートフォリオサイトの作成と公開」が立ちはだかっています。コーディングだけではなく、要件定義やドメイン・サーバーの知識が必要になるからです。

そのため、最近では、このような悩みが散見されます。

この記事ではこのような悩みを解決します。

この記事では、

• 評価されやすいポートフォリオサイトの条件
• 僕が実際に行ってきたポートフォリオサイトの作成方法
• 公開方法

を丁寧にお伝えします。

この記事を順に追っていけば、あなたも素敵なポートフォリオサイトを作成・公開することができますよ。

どのようなポートフォリオサイトがいいのか

ポートフォリオサイトには満たすべき条件があります。

条件を満たしておらず、粗悪なポートフォリオサイトを提出してしまうとマイナス方向に評価されてしまう可能性があるからです。

この章ではポートフォリオサイトを作成する際に満たすべき条件についてお伝えします。

①デザイン性に優れている

1つ目の条件が「デザイン性に優れていること」です。

現代は副業ブームです。数多くの人がWeb制作を副業として選択し、営業をかけています。

あなたはその中で印象に残る必要があります。

印象に残るためには、やはりデザイン性は重要です。なぜなら、ポートフォリオサイトの第一ん商はその人の第一印象になるからです。

あなた以外の応募者がたくさんいるならば、その第一印象をあげるのは必須ですよね。

デザイン性に優れたポートフォリオサイトを作成しましょう。

②レスポンシブ対応

2つ目の条件が「レスポンシブ対応」です。

レスポンシブ対応とは「端末の画面幅によってデザイン表示を変える対応」のことです。

例えば、スマホとPCではサイトのデザインが変わるのがレスポンシブ対応です。

最近ではほとんどのサイトがレスポンシブ対応です。スマホユーザーの多さを考えると当然の状況ですね。

ポートフォリオサイトはレスポンシブ対応にしましょう。

③頻出スキルが網羅されている

3つ目が「頻出スキルを網羅すること」です。

頻出スキルとはレスポンシブ対応はもちろん、文字のスライドインやよくある質問のアコーディオンなど様々なものがあります。

頻出スキルは、有用なスキルばかりです。そのため、頻出スキルを身につければ、クライアント様の魅力を表現できる幅が増えますよね。

頻出スキルを押さえていることを伝え、魅力を引き出す力があることを伝えてあげましょう。

※差別化できるスキルが使われている

4つ目の条件は「差別化できるスキルが使われていること」です。

こちらは必須ではなく、できれば入れたいものになります。

僕の場合はWordPressテーマ制作スキルが差別化スキルです。あなたの経歴やスキルに合わせて差別化を表現しましょう。

ポートフォリオサイト作成までの全手順

ポートフォリオサイトの作成手順を解説します。

手順①：作成に必要な3つのツールを入手する

①コードエディタ

Webサイトはコードエディタを使って、コーディングをしていきます。そのため、まずコードエディタを入手しましょう。

Microsoft社が無料で配布しているVisual Studio Codeがおすすめです。僕も使用しています。

拡張機能も豊富ですし、使用者が多いので、ネット上の情報が豊富です。コードエディタをまだ入手していない場合には、ぜひダウンロードしましょう。　

②Google Chrome

Google Chromeも入手しましょう。

Google Chromeは2つの理由で必須です。1つ目の理由が「大多数のユーザーと表示を共有できるから」です。GoogleChromeはユーザー数が多いため、その人たちから見た画面は特に完璧にする必要があります。そういった意味で、デザイン性を高めるのに必要です。

2つ目の理由が「ディベロッパーツールが使いやすいから」です。Web制作はディベロッパーツールが必須です。スマホ絡みた画面を表示したり、CSSのエラーを発見したりするためです。

Google Chromeは無料なので、ぜひインストールしておきましょう。

③※AdobeXD／Photoshop

Adobe製品はデザインや動画制作、Web制作でよく使われるツールです。

Web制作の案件ではXDやPhotoshopでつくられたデザインカンプを使用して、コーディングすることが多いです。

必ず必要とまではいいませんが、かなり便利なので、一考の価値ありです。

手順②：優良デザインカンプを入手する

優良デザインカンプを入手しておきましょう。練習をしがてら、優れたポートフォリオサイトを作成することができるからです。

本章では、上で紹介した条件を満たすデザインカンプを2つ紹介します。

優良デザインカンプ①：だんさんカンプ

だんさんカンプとは、Web制作者のだんさん（@dan03301）が作成したデザインカンプです。

難易度が高くなく、初心者でもとっつきやすいデザインカンプになっています。下記のリンク先から閲覧することができますので、ぜひご覧ください。

優良デザインカンプ②：ねこポンさんカンプ

ねこポンさんカンプはwebデザイナーのねこポンさん（@webdesigner_go）が作成したデザインカンプです。

レベルもそれなりに高いですが、ポートフォリオとしての公開が可能で、なおかつ無料なので、おすすめしています。

ご興味のある方はぜひ下のリンク先を見てみましょう。

手順③：コーディングする

入手したデザインカンプをもとにコーディングをおこないます。それがあなたのポートフォリオサイトのひとつになります。

【図解】ポートフォリオサイト公開までの全手順

ポートフォリオサイトをコーディングした後にすべき全手順を図解で解説します。

公開手順①ドメインを購入する

図解を用いて、ドメインの購入方法を解説します。下のボタンからお名前.comのHPを開き、一緒に進めていきましょう。

ドメイン購入①希望のドメイン名を記入し、検索する▼

ドメイン購入②トップドメインも含めて、ドメインを決定する。▼

ドメイン購入③サーバーを「利用しない」を選択し、次に進む▼
※のちほどエックスサーバーを利用するため、推奨されるサーバーは利用しません。

ドメイン購入④個人情報を記入する▼

ドメイン購入⑤クレジットカード情報を入力し、エックスサーバーを指定し、申し込みに進む▼

ドメイン購入⑥「ドメインのみ申し込む」を選択▼

ドメイン購入⑦ドメイン購入完了▼

公開手順②レンタルサーバーを契約する

次にレンタルサーバーと契約します。

ここでは僕が普段使っているおすすめのサーバー「エックスサーバー」の契約方法をお伝えします。

最安値ではないですが、リーズナブルな価格（初期費用3,000円／月額1,100円程度）で、なおかつ、ネット上に情報が大量にあるので、おすすめしています。

下のボタンからエックスサーバーのHPを開き、一緒に進めていきましょう。

サーバー契約①「お申し込みはこちら」を選択▼

サーバー契約②「10日間無料お試し、新規お申込み」を選択▼

サーバー契約③プランは「X10」を選択し、登録に進む▼

サーバー契約④個人情報を記入し、次に進む▼

サーバー契約⑤記入内容を確認し、認証に進む

サーバー契約⑥認証に関する情報を記入▼

サーバー契約⑦確認コードを入力して、完了！そして、次に進む▼

サーバー契約⑧「契約更新・料金支払い」をクリック▼
ポートフォリオサイトとはいえ、10日間では足りないので、本契約をすることをおすすめします。その本契約のためのステップです。

案件中に自分のサーバーで制作物をチェックすることもよくあるので、本契約をして損はないでしょう。

そして、無料期間を過ぎるとせっかくの接続設定やアップロードが無駄になってしまうので、今のうちの支払い設定を済ませてしまうことをおすすめします。

サーバー契約⑨期間を「12ヶ月」に設定し、「支払方法を選択する」で進む▼
※この期間は何ヶ月でもOKです。僕は12ヶ月に設定した上で、毎年更新し続けています。

サーバー契約⑩クレジットカードを選択▼
※クレジットカードでの支払いが便利なためです。

サーバー契約11：クレジットカード情報を入力したらサーバー契約完了です！

公開手順③ドメインとサーバーを接続する

手順③では、お名前.comで購入したドメインと、エックスサーバーを接続します。次の手順で簡単にできますので、一緒にやりましょう！

接続①「サーバー管理」を選択▼

接続②「ドメイン設定」を選択▼

接続③ドメイン名を入力し、確認画面に進む

接続④この画面になれば、接続完了
※ドメイン購入から間もない場合はURLを開いても表示されない可能性があります。ただ、1〜2時間経てばほぼ確実に見れるようになっているので、ご安心ください。

※接続⑤届いたこのメールは絶対に保存する
後で使用しますし、今後もずっと使用します。

公開手順④FTPツールを設定する

FTP設定①届いたメールの中の「FTP情報」の欄を開いておく▼

FTP設定②FTPツールをインストール▼
僕のおすすめのFTPツールはFileZilla（ファイルジラ）です。下記からソフトをダウンロードし、インストールすることができます。

FTP設定③FTPツールを開き、左上のボタンをクリック

FTP設定④「新しいサイト」をクリックし「サイト名をつける」→先程のメールのFTP情報を入力する

これでFTP設定完了！自動的にサーバーに接続され、管理画面が表示されます。

公開手順⑤サーバーにデータをアップロードする

アップロード①ローカル側（左側）で自分のポートフォリオサイトのデータを開く→サーバー側（右側）で購入したドメインを選択

アップロード②「public_html」を選択

アップロード③ポートフォリオサイトのデータをサーバー側にアップロードする※index.htmlは上書きしてOK

アップロード④ブラウザにドメインを入力し、自分のポートフォリオサイトを確認できたらアップロード完了

まとめ

この記事では下記の内容をお伝えしました。

• ポートフォリオサイトの必要条件
• ポートフォリオサイトの作成手順
• おすすめのポートフォリオサイト用デザインカンプ
• ポートフォリオサイトの公開手順

適切なポートフォリオサイトを公開できていると営業難易度が下がるので、案件獲得に大きく近づきます。

ぜひクオリティの高いポートフォリオサイトを公開して、案件獲得に繋げてください。

最後までお読みいただきありがとうございました。