Web制作のポートフォリオを作りたいけど、どうしたらいいんだろう
サーバーとか用意した方がいいのかな
デザインはどうすればいいんだろう
そもそもポートフォリに何を載せたらいいんだろう
実績がなくて、載せられるサイトないよ…
こんな悩みに解説します。
この記事を読むと、
それでは、早速解説していきます。
改めてポートフォリオが必須な理由
Web制作で案件を取ったり、転職する場合にはポートフォリオが必須です。
もちろん求められないこともありますが、
自分がどのくらいできるかを口で説明するより、圧倒的に伝えることができます。
相手もポートフォリオを見てスキルレベルを判断することができます。
ポートフォリオはとても簡単に作成することができるので、
いつでもアピールできるように作成しておきましょう。
ポートフォリオの作り方
ポートフォリオの作成方法に決まりはないので、
作品を載せて、しっかりアピールできるのならなんでもいいです。
ポートフォリオの作成方法
・自分でデザイン、コーディングして作成する
・テンプレートを使用して作成する
・ポートフォリオサイトを活用する
・Wordpressテーマを使用して作成
自分でデザイン、コーディングして作成する
デザイナーの場合には、自分でデザインして作成した方がいいです。
デザインもアピールポイントの１つです。
テンプレートを使用して作成する
Web上にあるHTMLテンプレートを活用してポートフォリオを作成します。
デザイナーではなく、コーダーやプログラマー、フロントエンドエンジニアなどを志望している場合には、
デザインは必要ありません。
テンプレートを使って、サクッとポートフォリオを作成してしまいましょう。
ポートフォリオサイトを活用する
Web上には、ポートフォリオサイトがたくさんあります。
サーバーを取得する必要がないので、
ポートフォリオ作成にお金と時間をかけたくない方は活用してもいいでしょう。
【ポートフォリオサイト】
・RESUME
・MATCHBOX
・FORMAT
WordPressテーマを使用して作成
WordPressサイト制作、WPエンジニアを志望している方は、
WordPressテーマを活用するのもいいです。
WordPressを使えることがアピールできます。
【ポートフォリオWordpressテーマ(レスポンシブ対応)】
・Portfolio
・Sydney
・Fukasawa
ここでは、テンプレートを活用してポートフォリオを作成する方法を詳しく解説していきます。
テンプレートを活用してポートフォリオを作成する方法
ポートフォリオ作成の流れ
- テンプレートを決める
- ポートフォリオ設計（内容や配置を決める）
- テーマをカスタマイズする
- サーバーにアップロードして公開する
テンプレートを決める
web上には、おしゃれなHTMLテンプレートがたくさんあります。
無料のものもたくさんありますし、有料でクオリティが高いものもあります。
無料の場合には、クレジット表記が必要な場合が多いですが、
特に気にならなければ無料のもので全然いいです。
【おすすめ無料HTMLテンプレートサイト】
TEMPLATE PARTY
HTML5 UP
Start Bootstrap
ポートフォリオ設計
次にポートフォリオの設計を行います。
テンプレートのデザインに合わせて、掲載したいことを載せていきます。
【ポートフォリオに載せる内容】
＜名前＞
本名を載せたくない場合には無理にはとは言わないですが、
英語表記でも載せた方がいいです。誰のポートフォリオかわからないです。
＜肩書き＞
肩書きという堅苦しい感じでなくていいのですが、
何をしている人か書くといいです。
（例：webデザイナー、webディベロッパー、プログラマーなど）
＜スキル＞
何がどのくらいできるか細かく載せてもいいですし、
どんなスキルがあるのかをざっと書くのでもいいです。
書いておくことで、何ができるか伝えられます。
（例：HTML/CSS, Javascript, WordPressなど）
（例：HTML★★★★★ CSS★★★★★ JS★★★★☆）
＜作品＞
これまでの実績を載せていきます。
案件対応経験がない人は、これまで作成したサイトを載せましょう。
※サイトを模写したものは、著作権問題になるので載せないようにしましょう。
掲載可能なデザインカンプからコーディングしたものや、自分でデザインしてコーディングしたものなどを載せます。
各作品には、制作時のポイントや作品の説明を添えます。
【フリーランス】Web知識がない方にアピールする作品の説明
サイトを持ちたいという方目線の制作ポイントを添えます。
※用語はわかりやすい言葉を使うようにします。（レスポンシブデザイン→スマホ表示）
（例：サイトを訪れたユーザーが、すぐに予約できるよう、電話発信ボタンと予約フォームボタンを画面下に固定して表示しています）
【転職】Web業界の方にアピールする作品の説明
Web業界へ入ったら活かせる・役に立てるポイントをアピールします。
（例：ユーザーの目を引くようにメインビジュアルにパララックスを使用しました）
（例：お問い合わせフォームでは、カレンダーで日にちを予約できる予約システムや、郵便番号で住所の自動入力システムを入れ、ユーザーがストレスなく予約できるようにしています）
・フリーランスとして、クライアント獲得のためのポートフォリオ
・転職するためのポートフォリオ
など用途に合わせて作品のアピール説明文は書きます。
両方兼用として使う場合には、
専門用語でなく分かりやすい言葉を使いつつ、
ユーザー目線でサイト制作をしたことをしっかり説明していきましょう。
＜メッセージ＞
サイト制作や仕事に対する想いを数行にまとめて載せます。
どんな想いでサイト制作をしているかや、自分のポリシーなどを書きましょう。
（例：Webサイト制作を通じて、さまざまな想いを表現できればと思っています）
＜（趣味）＞
これは必須ではないのですが、ポートフォリオを通じてあなたの人柄や人物像をイメージしてもらえるように書いておくといいです。
少しでも共通点があれば、親しみがわきます。
＜（連絡先）＞
連絡先はEmailアドレスか、twitterを載せるのがいいです。
※ココナラを使用して受注を考えている人は連絡先は掲載しないようにしましょう。
（ココナラはサイト外での連絡を禁止しています）
テンプレートに当てはめられない場合は、
HTML/CSSをカスタマイズしてコンテンツを増やします。
オリジナルでカードやスライダーを追加したりするのいいですね。
スライダーが作成できるアピールにもなります。
テンプレートをカスタマイズする
設計ができたら、テンプレートをカスタマイズします。
ダウンロードしたHTMLやCSSを自由に書き加えてカスタマイズしていきます。
CSSは分からなくならないように、
別のスタイルシートを作成して管理してもいいですし、
テンプレートのスタイルシートに分かりやすく書くでもOKです。
サーバーにアップロードして公開する
ポートフォリオが完成したら、
いよいよサーバーにアップロードします。
サーバーをまだ契約していない方はまずサーバーとドメインの取得をしましょう。
おすすめのサーバー
エックスサーバー
ConoHa WING
さくらのレンタルサーバー
※サーバーとドメインは有料です。（サーバー年5~6千円、ドメイン年数百円〜程度です）
web制作者として、サーバー取得は必須ですので取得しましょう。
まとめ
ポートフォリオを持っていると、
いつでも自分のスキルをアピールできるので便利です。
相手もあなたがどんなことができるか分かります。
ポートフォリオ自体作成するのも簡単です。
ぜひ作成してみてください。