【未経験者向け】Webデザイナーのポートフォリオサイトって、どうやって作ったらいいの？【HTML・CSSテンプレート付き】

職業訓練校やスクールを卒業した後、就職活動が待っていますね。

未経験からウェブ業界に足を踏み入れる場合、重要なのは「私はこれまでここまで学んできて、こんなスキルを持っています」という情報を視覚的に示すこと、つまりポートフォリオサイトが必要です。
就職活動のためのポートフォリオサイトには、具体的に何を掲載すべきでしょうか。

就職活動を目的とした、ポートフォリオサイトの作成についてご紹介いたします。
ひな形も記事の最後でダウンロードできるのでご活用ください。

何をポートフォリオに書けばいいのか、書き方

自己紹介

まずはあなたの自己紹介を書いてください。

面接に行くということは、先方からすると「来週からは隣の席で働くかもしれない人」と会うということ。未来の同僚や上司に、自分を選んでもらうということです。

未来の同僚や上司に「私はこんな人間なんです」となるべく伝わるものがいいでしょう。あなたが大切にしている考え方や働く上でのポリシーなど、伝えたいことがあれば書いてかまいません（ただし、ネガティブな情報は不要です。例：残業は絶対にしない主義です、勉強中でまだなにもできません、など、雇用主を戸惑わせることは、ポートフォリオサイトでは書きません。）

職業訓練生は、自己紹介文の内容をキャリアコンサルタントの先生に相談して、プロフィール文をブラッシュアップしてください。

自己紹介は簡潔すぎないように気をつけましょう。

あなたの強みはなんですか？
このポートフォリオサイトで、誰に何を伝えたいですか？

趣味や興味のあることなどを書いてもかまいません。
あなたのパーソナリティがしっかり感じ取れる文章を練りましょう。
過去の経歴がウェブ業界と関係ないと思っても、しっかり説明してください。
あなたの人生のストーリーテリングです、きっと魅力が詰まっています。

絶対に書いてほしいことは、なぜWebデザイナーになりたいのか・大変な勉強を毎日頑張っている理由は？
100万回見たのは「以前からWebデザインに興味があったから」という文章ですが、これだけだと面接側は「みんなと同じ」文章にしか見えません。なぜ、の部分を深堀りして、言語化してみましょう。

スキル・勉強したこと

学んだ内容や習得したアプリケーションについて説明しましょう。★★★★★の評価ではなく、自分のスキルや能力を具体的に伝える方が良いでしょう。どのような作業をどれくらいの時間でこなせるかも記載し、制作物との関連性を示すことが大切です。

学習した書籍なども挙げることで、情報追求能力も伝わります。

作ったもの

作成したものは、すべて掲載してください。
学習初期に制作した作品については、後にリデザインしたバージョンも一緒に掲載すると良いでしょう。制作当初と現在での視点の変化や、制作スピードの向上など、具体的な成長を言語化して伝えることで、あなたの進化や今後のポテンシャルが伝わります。

多くの求職者のポートフォリオを見ると、作品の数が圧倒的に少ない傾向がみられます。
未経験者としては、作品の量でアピールするしかないのですから、作品数が少なければ競争に参加することすら難しくなります。

ポートフォリオサイトの参考と、テンプレート

ポートフォリオサイトはご自身でコーディングするのが望ましいです、しかしスクールの別課題などでどうしてもいま0から作り上げている余裕がないという人のためにポートフォリオサイトのHTML CSS のひな形をご用意しました。

これを元に、ブラッシュアップしてポートフォリオサイトを完成させてください。
とくに職業訓練生はポートフォリオサイトをひとまず完成させて、とにかく一日も早く就職活動を開始することがたいせつです。

下記よりダウンロードしてアレンジしてみてください。
コピペばかりするのではなくて、コードをしっかり確認して意図を読み解きましょう。

Googleフォントなどでアレンジすると、より素敵になりますので、がんばってくださいね。