PROGRAMMING

【完全ガイド】Webエンジニアのポートフォリオの作り方

ポートフォリオの作り方

この記事は、Webエンジニアのポートフォリオの作り方について網羅しています。

もし、あなたがWebエンジニアを目指していて、ポートフォリオ作成に困っているなら、きっと役に立つかと思います。

簡単な自己紹介

  • プログラミング学習をはじめて約1年で月20万達成
  • 普段はWeb制作のフロントエンドのお仕事をしています

それでは、解説していきます。

Webエンジニアのポートフォリオの作り方

ポートフォリオの作り方のトップ

Webエンジニアのポートフォリオの作り方は、3つあります。

  • 有料ツールを使う
  • Google ドライブにまとめる
  • ポートフォリオサイトを作る

1つずつ見ていきます。

有料ツールを使う

個人的に、有料ツールを使うのが一番いいと思います。

お金はかかりますが、速攻で見栄えのいいポートフォリオを作ることができます。

自分が使っているのは、foriioというサービスです。

foriioのトップページ

おしゃれで、自己紹介や作品の詳細も記入できるのでおすすめです。

Google ドライブにまとめる

無料がいいという方は、Google ドライブにまとめるのがいいです。

自分も最初は、Google ドライブにまとめていました。

やり方は簡単で、まずは作ったサイトをGoFullPageでスクリーンショットを取ります。

その後、Googleドライブにその画像をアップロードし、ファイルに名前をつけます。

Googleドライブのポートフォリオ

これで終わりです。

ただ、この方法だと結構見た目がシンプルですし、自己紹介なども書けません。

ポートフォリオサイトを作る

時間はかかりますが、自分でポートフォリオサイトを作るのもありです。

自分で作ると言っても、アイディアが浮かばないという方は、以下のサイトを参考にするのがいいです。

MUUUUU.ORG

MUUUUU.ORGは、シンプルで洗練されたデザインが掲載されています。

MUUUUU.ORGのトップページ

CHOICELY

CHOICELYは、デザイナーやイラストレーターなどのポートフォリオサイトをまとめられていて、美しいレイアウトのサイトが掲載されています。

choicelyのポートフォリオ

S5-Style

S5-Styleは、ハイクオリティなサイトのリンクをまとめられています。

s5-styleのポートフォリオ

Webエンジニアのポートフォリオに載せるべきもの

ポートフォリオに載せるべきもの

Webエンジニアの場合、ポートフォリオに載せるべきものは以下の通りです。

  • 模写
  • 自作したサービス
  • 実案件で作成したもの

順番に見ていきます。

模写

模写とは、すでに作られているサイトを真似しながらコーディングしていくものです。

プログラミング初心者の方は、模写をポートフォリオに載せるのがいいと思います。

模写のやり方は、Webの神様の動画がわかりやすいかと思います。

自分が、プログラミング初心者の時に、出会いたかった、、笑

自作したサービス

ここはかなり難易度は高いですが、少数でもいいので使われるサービスを作れたら、強力な実績になります。

仮に使われないサービスでも、勉強になりますし、一応実績にはなるので作って損はないです。

いきなり複雑なサービスを作るのは難しいと思うので、「自分が現在悩んでいること」で、「一つのことを解決するサービス」を作るのがいいです。

自分の場合、色選びに困ってたので、RandomColorというものを作りました。

RandomColorのトップページ

しかし、これは失敗しました。

なぜなら、もうすでに色のサービスはたくさん作られていたからです。

カラーサイトのまとめ

これらのサイトに勝つのは、結構厳しいです。

なので、これから作る方がいましたら、以下の点を注意してください。

  • 作る前にしっかりリサーチをする
  • 競合に勝てそうかどうか確認する

自分は、しっかりリサーチをせず作ったので失敗しました。

実案件で作成したもの

実案件で作成したものを、ポートフォリオに載せるには、事前にクライアントに実績公開しても大丈夫か聞いておきましょう。

ポートフォリオと一緒に出したほうがいいもの

ポートフォリオと一緒に出すべきもの

Webデザイナーなら、作った画像やイラストをまとめるだけでいいかも知れません。

しかし、Webエンジニアの場合は、コーディングがメインなので、それに加え以下の2つのものを出すと、更に評価が上がります。

  • Githubでソースコードを公開する
  • 作ったサイトをネットに公開する

順番に見ていきます。

Githubでソースコードを公開する

Githubにソースコードを公開することで、自分が作ったサイトの内部コードを、相手に見せることができます。

内部コードを見せる理由は、写真だけだときちんとコーディングされているかどうか、わからないからです。

ソースコードなしの場合

見た目はいいけど、「タグや構造」がおかしいというのは結構あったりします。

なので、ポートフォリオと一緒にソースコードも見せることで、「外部も内部もしっかりしている」ということを相手に伝えることができます。

ソースコードありの場合

Githubにソースコードを公開するやり方は、まずGithubのサイトにアクセスしSignupのボタンをクリックします。

githubのトップページ

アカウントを作りログインします。

githubのサインアップページ

「Your repositories」をクリックします。

githubのリポジトリ

「New」をクリックします。

Githubの新しいリポジトリを作る

Ownerは自分にします。

残りは、以下の設定にして「Create repository」をクリックします。

GithubのCreate repositoryページ

「uploading an existing file」をクリックします。

Githubにファイルアップページのリンクページ

以下の構造のフォルダを作り、ドラッグアンドドロップします。

「site1」「site2」「site3」には、自分が作ったファイルを入れてください。

ソースコードのフォルダー構造

アップロード完了したら以下の写真のようにして「Commit changes」を押します。

Githubのコミットチェンジ

これで完了です。

ポートフォリオと一緒に出す時は、「source-code」のURLを送ればオッケイです。

githubのソースコードのurl

注意点

当然ですが、実案件のファイルをGithubにアップロードするのはやめたほうがいいです。

実案件の場合は、DropBoxなどに管理しておいて、必要な時にzipファイルで送るのがいいと思います。

作ったサイトをネットに公開する

ネットに公開することで、しっかりサイトが稼働しているかどうか、相手に確認してもらうことができます。

ネットに公開する方法は、2点あります。

  • 自分のサイトに公開する
  • Githubで公開する

また、Githubがでてきたよ、、と思った方がいるかもです。

Githubは、ソースコードを公開できるだけではなく、サイトを公開できたり色々なことができます。

しかし、おすすめは「自分のサーバーに公開する」なので、先にこっちを説明します。

自分のサイトに公開する

今後、Webエンジニアとして生きていくなら、自分のサイトを持っておくことを強くおすすめします。

なぜかというと、サイトはコーディングをしただけでは作れません。

コーディングしただけだとサイトは作れない

サイトを作るには、コーディングした後に、サーバードメインを借りて、ネットに公開し、ユーザーが使えるようにしなければいけません。

コーディングしてからサイトをユーザーが使えるようにする流れ

ここまでの流れは、Web制作をするなら知っておきたいです。

自分のサイトを作ると、その流れを学ぶことができます。

やり方は、こちらのローカル環境で作成したポートフォリオサイトの公開方法がわかりやすいかと思います。

Githubで公開する

どうしても無料で公開したい!という方は、しまぶーさんの動画を見てください。

Githubでソースコードを公開した方は、すぐ公開できると思います。

ポートフォリオは未経験でも重要?

未経験でもポートフォリオは重要?

ポートフォリオは、未経験のエンジニア、実務経験があるエンジニア関係なく重要です。

理由は、ポートフォリオがないとその人のスキルを把握できないからです。

ポートフォリオなしの場合

それに比べて、ポートフォリオを公開している人は、自分のスキルをしっかり伝えることができます。

ポートフォリオがある場合

なので、ポートフォリオを用意せず、「実務経験が豊富です」や「この言語得意です」と言ったところで、自分を信頼してもらえず採用されません。

ポートフォリオは、自分を信頼してもらい採用してもらうのに、必須なアイテムなのです。

エンジニアとして働こう

エンジニアとして働こう

ポートフォリオを作れたと思いますので、エンジニアとして働く方法を紹介します。

エンジニアの働き方は、2種類あります。

  • 会社で働く
  • フリーランスになる

会社で働く

会社で働く方法は、マナブさんの「Web制作会社の転職ガイド」がわかりやすいかと思います。

自分も未経験でしたが、独学してポートフォリオを作り、アルバイトという形でWeb制作会社に入ることができました。

その後、正社員にならない?と提案をいただけたので、再現性は高いと思います。

フリーランスになる

自分は、フリーランスエンジニアが案件を獲得するには?【8つの方法があります】という記事を書きました。

8つの方法は、下記のとおりです。

  • 友人、知人、家族などに声をかけてみる
  • クラウドソーシングで営業する
  • 企業に営業する
  • SNSやブログなどから受注する
  • コミュニティに入る
  • エージェントを使う
  • 営業パートナーに営業してもらう
  • 交流会やイベントに参加する

詳しく知りたい方は、記事を読んで見てください。

行動しよう

ポートフォリオの作り方の結論

今回は、Webエンジニアのポートフォリオの作り方について解説しました。

この記事を読んで終わりだと意味がないので、しっかり行動しましょう。

もし、参考になりましたら、下記のSNSボタンからシェアしていただくと嬉しいです。

それでは、また!

-PROGRAMMING
-

© 2021 ryujiblog Powered by AFFINGER5