ポートフォリオサイトの作り方！プログラミング初心者向けに徹底解説

前職は銀行で５年勤務、現在はフリーランスエンジニアのきたしょーです。

• Twitterフォロワー2万人
• 最高月収1,500万円

• ポートフォリオサイトってなに？ 
• ポートフォリオサイトの作り方が知りたい
• ポートフォリオサイトに載せるべき情報は？

と疑問を抱えている方の悩みを解決できる記事を書きました。

本記事を読めば、プログラミング初心者向けのポートフォリオサイトの作り方が完璧に理解できます。

記事を書いてるぼくはWEB制作上場企業に常駐勤務しながら、WEB制作で月100万円以上稼いだ経験がある現役フリーランスエンジニアです。

実際にぼくは本記事で解説している作成手順に沿ってポートフォリオサイトを制作し、お客様に営業して案件を獲得してきました。

本記事では、実際にぼくが作ったポートフォリオサイトの制作過程を解説しながら、初心者向けにポートフォリオサイトの作り方を解説していきます。

これからポートフォリオサイトを作ろうと思っているプログラミング初心者の方はぜひ最後まで読んでみてください。

▼本記事で解説するポートフォリオサイト▼

 

▼無料登録&アンケート回答で豪華特典アリ▼

ポートフォリオサイトとは？

ポートフォリオサイトとは、自分自身のプロフィールや制作実績を掲載したサイトのことを指します。

断言しますが、ポートフォリオサイトは絶対に作っておいた方がいいです。

なぜなら、エンジニアにとってポートフォリオサイトはスキル証明書の役割を果たすから。

例えば、あなたが仕事を発注するお客様だとして、以下の１と２ではどっちに仕事を依頼したいと思いますか？

1. 「プログラミング毎日10時間勉強してます！仕事ください！」とお願いしてくる人
2. 「私の制作実績はこちらです。これくらいなら１ヶ月で作れます」とだけ言う人

おそらく、ほとんどの人が２に仕事を依頼すると思います。

つまり、エンジニアがプログラミングを知らない人からの信頼を勝ち取るためには、過去の制作実績を見せるしかないんですよね。

ゆえに、これからプログラミングを仕事にしたい方にとって、ポートフォリオサイトは必要不可欠なのです。

ポートフォリオサイトの作り方９ステップ

では、早速プログラミング初心者向けにポートフォリオサイトの作り方を解説していきます。

今回は実際にぼくが制作したポートフォリオサイトを例に説明していきますね。

１：目的を明確にする

まずはポートフォリオサイトを作る目的を明確にします。

目的によってサイトの作り込み具合いや内容が変わります。

例えば、以下のイメージです。

今回、ぼくがポートフォリオサイトを制作した背景は以下です。

目的次第でサイトの構成や載せるべき情報は変わりますので、まずは何のためにポートフォリオサイトを作るのかを明確にしてくださいね。

２：参考サイトを決める

ポートフォリオサイトを作る目的が決まったら、次は参考にするサイトを決めます。

正直、プログラミング初心者がゼロからサイトを作るのは至難の技です。

仮にコーディングができたとしても、デザインに関してはこれまでに経験がなければ、手も足も出ません。

デザイン素人は潔く「こんなサイトが作りたい…！」と思えるサイトを真似した方が早いです。

「えぇ、他人が作ったサイトを真似してもいいの？」と思われるかもしれません。

ですが、多くの現役デザイナーやエンジニアは参考サイトを決めてからサイト制作しています。

当然ですが、丸パクリはダメですよ。

• 配色を真似する
• 構成を参考にする
• 配置を真似する

こんな感じで要所要所を参考にしながらサイトを作る分には全然OKです。

３：掲載したい情報を洗い出す

参考にしたいサイトが決まったら、次はポートフォリオサイトに掲載する情報を洗い出します。

上記５つがあれば、内容としては十分ですね。

今回、ぼくが制作したポートフォリオサイトは商品やサービスの販売が最大の目的だったので、上記５つに加えてService（自社の商品やサービス）を追加しました。

本ポートフォリオサイトについては後ほど解説するワイヤーフレーム工程からデザイナーに外注しました。

デザインの仕事をお願いするにあたり必要な情報として以下をデザイナーに伝えました。

ポートフォリオサイトを作る段階でデザインを外注する人はほぼいないと思いますが、参考までにどうぞ。

４：サイトマップを作る

ポートフォリオサイトに載せる情報を洗い出したら、次はサイトマップを作ります。

サイトマップ参考例（画像をタップするとWeb幹事のサイトマップダウンロードページに飛びます）

ページ数が複数になるサイトの場合はできるだけサイトマップを作った方がいいです。

おそらく、初心者の方が最初に作るのはLPような１枚もののサイトだと思いますので、本工程は省略してOKですよ。

５：ワイヤーフレームを作る

サイトマップができたら、次はワイヤーフレームを作ります。

現役のデザイナーやエンジニアは制作ツールを利用してワイヤーフレームを作る人が多いですが、デザイン未経験者であれば、まずは紙に手書きすればOK。

今回、ぼくのポートフォリオサイトのワイヤーフレームはデザイナーが作ってくれました。

ポートフォリオサイトのワイヤーフレームはお客様に見せるものではありません。

なので、完成後のサイトがどんなレイアウトになるのか自分なりにイメージできれば、ザザザーっと紙に殴り書きする感じでも大丈夫です。

６：デザインカンプを作る

ワイヤーフレームが出来上がったら、次はPhotoshopやIllustratorなどのAdobeツールでデザインカンプを作ります。

正直、デザイン素人がAdobeでデザインカンプを作るのは難易度が相当高いので、本工程は省略してOKです。

ぼくのポートフォリオサイトのデザインカンプはこちらです。

PC版

SP版

デザイン未経験者は紙に手書きしたワイヤーフレームを見ながら、そのままコーディングしちゃってください。

７：コーディングする

デザインが完成したら、コーディングしていきます。

ポートフォリオサイトのデザインカンプがない人がほとんどだと思いますので、ワイヤーフレームを見ながら自由気ままにコーディングしていく感じでOKです。

今回、ぼくのポートフォリオサイトでは、お問い合わせフォームはPHPとJavaScriptで、ハンバーガーメニューはCSSとJavaScriptで実装しています。

お問い合わせフォームの実装が難しい場合は、Googleフォームなどを利用するといいでしょう。

コードに絶対的な正解はありませんので、最初は分からなくてもいいので、必死にググりながらコードを書いてみてください。

８：システムを構築する

コーディングが終わったら、次はWordPressでシステムを構築していきます。

ほぼ機能がない１枚もののポートフォリオサイトの場合は、WordPressを使う必要はないので、本工程も省略してOKです。

ぼくのポートフォリオサイトもWordPressは使用せずに静的サイトとしてサーバーにそのままアップしています。

９：サーバーにアップロードする

コーディングやWordPressでのシステム構築が終わったら、ポートフォリオサイトをサーバーにアップロードします。

具体的には、サイトのネット上の住所となるドメインを取得し、サイトを表示するために必要な情報を格納しておくサーバーを取得します。

そして、FTPソフトを使用してサーバーにサイトのファイル群をアップロードすれば、ポートフォリオサイトの完成です。

▼本記事で解説したポートフォリオサイト▼

ポートフォリオサイト制作を目標にプログラミング学習しよう

ポートフォリオサイトを作る際には、ぜひ本記事を参考にしてみてください。

プログラミングはサイトを作ることを目標に学習した方が圧倒的にスキルアップが早いです。

ぼくの経験上、分からないながらも必死にググりながらコードを書いていく過程が一番成長するんですよね。

プログラミング初心者はまずポートフォリオサイトを作ることを目標に学習していきましょう。

ポートフォリオサイトを作る際には、また本記事を読み返してもらえると嬉しいです。

• プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する！

2019-02-06

プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】

2019-09-21

WEBサイト制作案件の受注から納品までの流れ【フリーランス&副業向け】

2019-10-14