Web制作初心者に向けてポートフォリオ作成手順を解説する


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

Web制作の学習を終えて、営業を開始する前にポートフォリオを作りましょう。
ここでのポートフォリオとは、あなたの実績やスキルを証明するものですね。

僕もポートフォリオを作ってから、それを引っさげてクラウドソーシングやWeb制作会社に営業を開始しました。

就職活動をする時にも使えますし、フリーランスとして活動するには必須のアイテムですね。
そこで今回は「Web制作初心者に向けてポートフォリオ作成手順」を解説したいと思います。

もし、「成果物がないよ!」と言った方はポートフォリオに掲載可能のデザインデータを販売していますので、ぜひご利用くださいm(__)m

>>ポートフォリオに掲載可能のXDカンプデータを作成しました

Web制作初心者に向けてポートフォリオ作成手順を解説する

  • 構成を決める
  • デザインを作る
  • コーディングする
  • 公開する

大まかに上記のステップで進めていきます。

構成を決める

相手は何が知りたいのか

まずは、ポートフォリサイトに何を載せるのかを決めましょう。

  • 自己紹介
  • スキル
  • できること
  • 成果物
  • 価格目安
  • お問い合わせ

だいたい上記の項目を取り入れると十分かなと思います。
順番はお好みでどうぞ。

ポートフォリオサイトは履歴書名刺のような役割もできますので、相手は自分のどんな情報がほしいのかを考えて決めると親切ですね。

デザインを作る

さっそくコーディングするのはナンセンス

ポートフォリオに載せる項目を決めたら、次にデザインを決めましょう。

ですが、デザインを決める前に、コーディングを始めるのはオススメしません。
途中でごちゃごちゃになったり、不具合が出やすくなってしまいます。

サイト作成に慣れている人でもサクッとデザインを決めてからコーディングを始めるので、僕たちはしっかりデザインしてから始めましょう。

ポートフォリオ デザイン手書き

紙やノートに手書きで十分ですよ。

サクッとラフ案を作って、横にクラス名をメモしておくとコーディングがしやすくなりオススメです。

デザインツールを使っておくのもあり

どうせなら、このタイミングでデザインツールに触れておくのはオススメです。

実務ではデザインツールを使いますので、今のうちに慣れておきましょう。

オススメは無料で使えるAdobe XDです。
使い方は下記の記事の解説がわかりやすいです。

>>実務で活かせる!Adobe XDの基本と「プロトタイプ」機能の使い方

コーディングする

分からないことは調べながら

デザインがある程度決まったら、さっそくコーディングを開始しましょう。

コードの綺麗さとかは気にしなくていいので、はじめての自分の作品を作り上げることに全力を注ぎます。

おそらく全然わからないことが出てくるかと思いますが、がんばって調べて解決を目指してみてください。
その問題を解決できた時、かなりのレベルが上がっています。

基礎学習の時とはマジでレべチ。

どうしても表現が無理そうなら、デザインの方を変更しましょう。

完成するのが最優先事項です。

公開する

最後の難関

見事ポートフォリオが完成したら、サイト実際に公開してみましょう。

GitHubで公開してもいいですが、ドメインを取得してサーバを借りて公開する方法をオススメします。
この経験をしておくと、今後かなり有利になりますよ。

サイトの公開方法は、下記のサイトでわかりやすく解説されていますので、ぜひ参考にしてくださいm(__)m

>>【初心者必見!】ホームページ公開の流れと公開前に準備しておきたいこと

ポートフォリオを作ったら営業しよう

ポートフォリオを作成し公開まですればかなりの勉強になりますが、そこで終わったらもったいないです。

がんばって作ったポートフォリオを引っさげて、クラウドソーシングやWeb制作会社に営業をして、月5万円を目指しましょう。

後は行動力が物を言いますので、めげずにひたすら営業をしまくって仕事を獲得してください。
そして、その実績をポートフォリオに掲載し、そのポートフォリオでまた営業をしまくります。

これを繰り返すことで、いつの間にか営業をしなくても、紹介から仕事がどんどん来る状況も夢ではありません!

Web制作で稼ぐ大きな一歩を踏み出したあなたは、上位数%の逸材ですので、あとは更なる行動あるのみです。