Study
2023.02.17(更新)
ポートフォリオを作ろう！デザインや作り方の解説【未経験のwebエンジニア向け】
ポートフォリオを作りたい！
でもどんな内容すればいいのかな？デザインとかどうしよう。。。
こんなお悩みに答えていきます。
本記事の内容
- ポートフォリオの目的や役割の理解
- ポートフォリオの内容を考える
- ポートフォリオサイトを自作するためには？
- ポートフォリオサイト自作のための準備
本記事を対象とする方
- 駆け出しwebエンジニア
- 駆け出しwebデザイナー
- 駆け出しプログラマー
この記事を書いている僕はプログラミング歴1年8ヶ月です。webエンジニアとして”社内転職”に成功しました。
ポートフォリオってなんだ？その目的や役割とは？
結論から言うと作品集および営業資料です。あなた自身の説明書とも言って良いでしょう。
ポートフォリオが必要な人は下記のような方々です。
- ITエンジニア
- webデザイナー
- プログラマー
- コーダー
本来は写真家、アートディレクター、デザイナーなどクリエイターなども含めるべきですが、今回はwebに関わるという観点で絞り込んでいます。上記の方々はいわゆる手に職を持つような方々です。
こういった方々は、ポートフォリオがないと自身のことを正しく理解してもらえません。
自分が今まで携わってきたプロジェクトや制作物を「実績」としてまとめることで、説得力を持ってスキルや経験を相手に伝わるようにしておくのです。
その目的と役割を理解してしっかりと作り込みましょう。
ポートフォリオの内容(必須項目)
ポートフォリオは自分自身の説明書です。説明書にはどんなことが書かれていたら良いでしょうか？
それは自分が書きたいことではなく、相手が知りたい情報です。その必須項目をご紹介します。
その1 自己紹介
自己紹介ではできる限り人物像がわかるように具体的な内容にします。
初めて会う人に、あらかじめ人となりを理解してもらえば話もスムーズですし、お互いにとって無駄な時間がなくなります。
SNSで情報発信をしている方は、アカウントを載せておきましょう。
その2 スキル
自分のスキルを使ってできること、携わってきた分野、使用できるアプリケーション・プログラミング言語等を載せます。
その3 作品および実績
自身の作品や、仕事で携わったプロジェクトの実績など、何かしら形に残ったものを載せます。その際、下記項目を載せると、相手はより具体的にあなたの実績を理解できます。
- プロジェクトの内容
- あなたが担当したパート
- 課題に対する解決方法のアイディア
- 課題解決のために工夫した点
相手はこの内容から、あなたがどんな価値を提供したのかを見てきます。自分のスキルがどのような内容で価値に置き換えられるか、そのあたりを考えましょう。
ポートフォリオサイトを自作しよう
もしあなたがwebの分野でスキルを発揮したいと考えているのであれば、最低限自身のサイトを構築できるようになりましょう。
HTML,CSSだけでもサイトは作れますし、JavaScriptやPHP、WordPressのスキルがあれば、よりリッチなサイトを作れるようになります。
そして、その経験があなたの「実績」にもなります。
不安に思われるかといるかもしれませんが心配入りません。全くプログラミングの経験がない私でも作れるようになったのですから。
そんな私が参考にした、「ポートフォリオをまとめたサイト」があるので紹介します。貪欲に先人達から学びましょう。
ポートフォリオ制作のための準備
web業界を目指していくなら紙媒体のポートフォリオは必要なく、ポートフォリオサイトを準備します。サイトを公開するには、webサーバーというものが必要です。俗にいうレンタルサーバーです。
コストは発生しますが、月々1000~2000円で利用できるので、コストを惜しまずに利用しましょう。この投資は後々に必ず自分の実力として返ってきます。
現在のレンタルサーバーには大きな差がありませんが、オススメはXserverです。
- 端的に使いやすい
- コストパフォーマンスが良い
- カスタマーサービスがしっかりしている
- 困った時の解決方法がググったらすぐ出てくる
特に理由がなければXserverで良いでしょう。
それから、WordPressなどのCMS(コンテンツマネージメントシステム)を利用したい方は、ローカル開発環境というものが必要になります。
いくつか方法があると思いますが、利用者が多いのがMAMPとDockerでして、このどちらかでOKです。利用者が多いので、困った時のネット情報が多いのも特徴です。
MAMPは利用者が多いので、ぜひ使ってみてください。下記サイトからインストール方法を学べます。
私は以前はMAMPを使用していましたが、Dockerに乗り換えました。Dockerローカル開発環境構築についての記事を書いたので下記ご覧ください。初心者の私でもすごく簡単に設定できました。
プログラミングの勉強を始めたばかりで実績がないという方へ
そうは言ってもまだ実績がないんだよなぁ。。。
私もそうでしたが、未経験から始めて、IT企業に就職していない場合、実績がありません。
私は実績を作るために、常連のバーのwebサイトを作ったり、娘のためにタイピングのアプリケーションを作ったりしました。
近くに何か作れる環境があれば、それを利用するのが一番ですが、そうでない場合は、色んなサイト模写をしまくるのという手法もあります。「Webサイト 模写」でググると色々出てきますので、自身に合ったものを選んでチャレンジしてみください。
また、twitterを眺めていると、架空サイトを制作して、それを実績としてポートフォリオに乗せている方もいらっしゃいます。それも一つの方法だと思います。
ちなみに、当サイトはWordPressを利用して作っておりますが、デザインはかなりシンプルで、JavaScriptをほぼ使っておりません
WordPressチャレンジへの入り口として、模写するにはちょうど良いかもしれませんね。
今回のまとめ
今回はwebの分野で活躍したいと考えている方向けのポートフォリオを作る方法をご紹介しました。 最後までお読み頂きありがとうございました。
ポートフォリオの目的を理解する
ポートフォリオの内容は、自分の書きたいことではなく、相手が知りたいことを書く
レンタルサーバーやローカル開発を用いて、ポートフォリオサイトを自作する
実績がない場合は、模写や架空サイト制作を行う
