【フリーランス】リモートに強いエージェント5社
フリーランスエージェントのおすすめ30社をランキング 気になる1位は?
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

未経験エンジニアがポートフォリオを作る上で必要なこと・やってはいけないこと

本ページにはプロモーションが含まれます

Web転職する
Webエンジニアとして転職したいけどポートフォリオは作るべきかな?
作る上でのポイントって何かな?

という人へ向けてWebエンジニアがポートフォリオを作るときに気を付けるべきことを書いていきます。

 

ちなみに現在フリーランスエンジニアである私は、

  • Web企業に転職経験が3回(ポートフォリオ作成3回)
  • 面接官をしたり志望者のポートフォリオを見る機会が多かった

という経験があるので、その経験も踏まえて解説していきます。

 

この記事では以下のことがわかります。

  • エンジニアがポートフォリオを作るべき理由
  • 未経験エンジニアがポートフォリオでやってはいけないこと
  • ポートフォリオの作り方・手順
  • ポートフォリオ作成時の注意点

 

※基本的にWebデザイナー、コーダー、フロントエンドエンジニア向けですが、ポートフォリオサイトにWebサービス・Webアプリを載せたいサーバーサイドエンジニアにも読んでいただきたい内容になっています。

※ポートフォリオと実績は分けて考えましょう。この記事でお伝えするポートフォリオは実績を載せた自己紹介サイトのことです。

 

▼月額5,280円で挫折しないスクールはこちら▼

【無料も】本気のパソコン塾の評判・口コミを徹底解説!メリット・デメリットや特徴
この記事では現在話題沸騰中のプログラミングスクール「本気のパソコン塾」の評判を解説します。 本気のパソコン塾の特徴・学べること・評判・料金についても解説します。

▼Twitterで人気爆発!未経験から副業・フリーランスになりたい人向けスクール▼

【2023】デイトラの良い・悪い評判!勉強時間は?【副業したい人におすすめの理由】
デイトラの良い評判・悪い評判が知りたい! 上記のような方に向けてデイトラの良い評判、悪い評判、特徴、副業したい人におすすめの理由をご紹介します。

エンジニアがポートフォリオを作るべき理由

転職サイトによっては、スキルなどを羅列して入力するのみなところもありますが、実際の面接になるとポートフォリオを求められます。

 

またポートフォリオではなく実績を挙げてほしいという企業もあったりしますが、ポートフォリオさえ作っておけば転職エージェントや転職サイト上でURLを渡すだけなのでお互い楽ですよね。

 

また、履歴書と違って、他の会社にも使い回せるので一回作ってしまえば効率的ですよね。

 

あとは仕事をする上での必要になる技術情報は基本的にそのポートフォリオで全て分かるのでポートフォリオは作るべきです。

 

エンジニアがポートフォリオを作るべき理由まとめ

  • 企業に求められるから
  • 見せるのが楽・見るのが楽
  • 作っておいた方が使い回せて効率的
  • ポートフォリオで技術力がわかる

Webエンジニアならこんなポートフォリオはやめよう

ここからが本題ですが、意外とポートフォリオに関して認識が間違ってる方が多いかもしれません。

未経験エンジニアがポートフォリオを作る上でやってはいけないことを解説します。

1.レベルの高いポートフォリオを目指さない

レベルの高いポートフォリオとはどんなものかというと下記のようなポートフォリオです。

 

 

上記のようなかっこいいサイトを作りたいのはわかります。

 

しかしこれを目指してしまうとまず完成しません

 

例えばあなたが、そろそろ転職しよう、とか独学から未経験エンジニアとして就職しようと考えているなら難易度の高いポートフォリオに使う時間はないのが実情ではないでしょうか。

 

上記のようなポートフォリオを作る方は、多くは経験値の高いフリーランスです。

 

自己ブランディングとして価値の高いポートフォリオを作ってるわけで、目的としてやや違いがあるのです。

 

そのため転職・就職にはそういった難易度の高いポートフォリオは不要で、ポートフォリオに意気込み過ぎて時間を使ってしまいなかなか転職できないというのは本末転倒になってしまいます

 

まずはポートフォリオをシンプルな形で作り、企業に応募→面接というスピード感は意識する必要があります。

 

  • 転職が目的なら難易度の高いものを目指さない
  • ポートフォリオ自体に時間をかけ過ぎてしまい転職できないのは本末転倒

2.凝った演出は必要なし

未経験の時は、ポートフォリオ上で凝った演出は必要ありません。

なぜかと言うと凝れば凝るほど学習コストが高くなり、完成に至ることが困難になるからです。

 

また、未経験の時は、その演出がユーザーのストレスになっていないかがまだわからない場合が多いです。(自分もそうでした!)

 

そのため、自分のやりたいことを詰め込んでしまってユーザーのストレスを生んでしまうポートフォリオが出来上がってしまう可能性があります

 

例えばモーダルウィンドウで実績を紹介するなどです。モーダルウィンドウを挟んでしまうと、面接官としては実績ページを見るまでに以下のように一つアクションが増えてしまいます。

 

ポートフォリオページ表示

案件一覧

リンクで実績ページ

 

ポートフォリオページ表示

案件一覧

モーダルウィンドウで案件の詳細(アクションが一つ多い)

リンクで実績ページ

そのためモーダルウィンドウはない方がいいというのがポートフォリオを見る側の率直な意見です。

 

とはいえ、モーダルウィンドウは、まだそこまで手間ではないです。

ここで言いたいことは常に見る側にとってどうか?を考えることが重要ということです。

 

  • スプラッシュアニメーション(ページ表示前のアニメーション)
  • スクロールジャック(ユーザーがスクロールを操作できない)
  • 不必要なトグル

 

などはない方が、見る側を考慮してると言えます。

 

インタラクティブな動きを使ったサイトが得意だから、まだ実績がなくてそこまで時間をかけず作れるからやりたい

 

ということであれば、例えばスプラッシュアニメーションなどはスキップボタンを付けるなどアクセシビリティ(※誰でもどんな環境でもアクセスしやすいという考え方)の考慮が必要になります

 

  • ユーザビリティ性がない凝った演出はいらない
  • もし挑戦したいことがあれば見る側に立ってストレスにならないか考えよう

 

この辺はとてもうまく作られてるポートフォリオを記事にしましたので、気になる方は参照ください。

 

【未経験Webエンジニア必見】俊逸過ぎるポートフォリオまとめ・解説
この記事では、Twitterでお見かけした俊逸過ぎるポートフォリオを2つ取り上げたいと思います。 またコーディングの技術だけではなくデザイン性も優れているのでWebデザイナーの方も必見です。 この記事を読むことで優れたポートフォリオを見ることができます、参考にしたい時、実装方法の調べ方を解説します。

 

3.見にくい、崩れ、アクションが多い

また文字量が多すぎたり実績数が多すぎるのは注意です。

なぜなら面接官やポートフォリオを見るエンジニアは他の業務がある中、複数のポートフォリオを見るため時間をあまりかけたくないというのが本音です。

 

多いに越したことはないと思うかもしれませんが、厳しい言い方をさせてもらうなら低品質の実績が多数あるより、ちゃんと作り上げた実績が1,2~3件ある方がいいです。

 

そのため無駄な文言や自身のある実績のみに絞るなどの気遣いが必要です。

 

初心者の方は、特に崩れに注意しましょう。

 

IEは気にしなくていいですが、特にタブレット幅やスマホ幅はブラウザ上のdeveloper tool上での確認で良いので崩れのないようにしておきましょう。

 

実機で見る人はほぼいないので特別見る必要はないと考えてよいです。

 

アクションが多いのは、モーダルでも言いましたがユーザーの手間を生んでしまいます。
そのため、不必要なページのリンクなどは極力減らすといいです。

  • 文字量が多い、実績数が多すぎ→全部読みません。基本的に見るのは2、3サイト
  • レスポンシブデザインの場合はdeveloper toolで確認する
  • 不必要なリンクをなくす

4.やたら重い

画像などは実例紹介で必要になるかと思いますが、軽量化してページスピードを速くするのもポイントです。

 

厳密に何秒以内!とは言いませんが、実際に自分で客観的に見て、遅いなと感じない程度であればOKです。

 

軽量化ツールはWebでもサービスがありますので、忘れずに利用しましょう。
https://tinypng.com/

 

また古いjQueryなどのライブラリのバージョンを使っていたり、使用していないファイルのパスの読み込みはなくすようにしましょう。

 

5.不必要なことを載せる

下記は、とある転職サイトに「○○をポートフォリオに載せるべき」という記事がありましたが、バットパターンかと思います。。

 

何個か挙げてみます。

プログラミング手法の紹介をしよう

プログラミング手法の紹介をしよう
プログラミングの手法にはいくつかありますが、自分の得意なプログラミング手法、自分の製作スタイル、仕事の進め方を紹介しましょう。

 

プログラミング手法というのが良くわかりませんが、もしかしたら環境構築の話かもしれません。
それならまだ良しですが、仕事の進め方などは必要ありません

 

必要最低限、でも必要なことは載せるという考えです。

 

載せても良いこと

  • 使用してるエディタ
  • 使用してるバージョン管理ツール

将来の方向性を紹介しよう

将来の方向性を紹介しよう
今後自分はプログラマーとして今後どういった仕事をやっていきたいのか?目標を書きましょう。

 

目標…。読みません。。面接のとき聞かれるのでその時答えましょう。

ただ、心がけてることなどはプロフィールにそっと添える感じで書いてもOKです。

プロフィールにそっと添える例

”セマンティクスなコーディングを心がけています。”

WEBポートフォリオと紙ベースのもの両方を用意しよう
就職、転職を目的とするプログラマーのポートフォリオは紙媒体のものとWEBポートフォリの両方を用意しましょう。紙媒体のポートフォリオが有効となるのは主に採用面接の時です。

 

紙…まじですかっ。

印刷会社のデザイナーじゃないので、必要ありません。

なんならPCも必要ありません。(企業側で用意している為。ノートPCお持ちの方は持っていった方が無難&やる気アピールにはなります)

 

話は逸れましたが、面接時はスーツでなく私服で大丈夫です。

 

こんなポートフォリオはやめよう、まとめ

  1. レベルの高いポートフォリオを目指さない
  2. 凝った演出は必要なし
  3. 見にくい、崩れ、アクションが多い
  4. やたら重い
  5. 不必要なことを載せる

どういうポートフォリオをWebエンジニアは作るべきか

まずは、ポートフォリオについてやらない方がいいことを書きました。

次にどういうポートフォリオを作るべきかということを書いていきます。

 

ポートフォリオの目的を考えることが必要です。

つまり目的はユーザー視点でシンプルに実績を見せることに尽きます。

 

以下の情報を載せるといいでしょう。

1.自己紹介

 

簡単な自己紹介は必要です。ただ自己紹介も長すぎても読む気はしませんので100文字前後で良いです。
自己紹介に上げるべき事柄は以下です。

 

・名前、年齢
・経験
・スキル
・趣味

ここで、なぜ趣味かというと面接で割と盛り上がったりするからです。

自分も何度か経験ありますが、面接ではスキル面以外で面接官との共通点を見つけられると印象が強くなりますので、おすすめします。

2.案件実績

案件実績の一覧を見せます。

 

  • サムネイル画像
  • 制作時期、期間
  • 担当した技術

 

をそれぞれ書きます。デザインとしては3~4カラムのカード型が一般的です。

 

ここで注意すべき点は、見せたいものから実績を挙げていくことです。

もちろん面接官は上から順に見ます。

 

しかし全て見るわけではありませんので、一番見せたい実例を著中に入れられてしまっては見られないこともありえるからです。

 

面接を何回か受けると良くわかりますが、

 

一番自慢できる仕事はなんでしたか?
一番大変だった案件はなんですか?

 

という風に1番を聞いてきます。

なぜなら私が見る側でもそうでしたが一つ見れば大体わかりますし、一人に時間もそんなにかけれられないので数はあまり重要視されないのです。

 

発信力

ここ数年で必要とされるのがこの発信力です。自分も2018年に久しぶりに面接を数か所受けてみて明らかに発信力が重要視されてるなと感じました。

主に下記です。

  • twitter
  • ブログ
  • github
  • qiita

 

面接で恐らくアウトプットはされていますか?という旨の質問が7、8割の確率でされます。
その時に口頭でもいって尚且つ証拠を見せられると他の人と差別化できます。

 

つまりポートフォリオ自体に力を入れるのではなく、実績や日々の発信力に力を入れることがエンジニアのポートフォリオは重要です。

 

ただ未経験のうちは、Twitterに力を入れすぎて本命であるプログラミングがおろそかにならないように注意しましょう。

 

なので発信力は必須ではありません。

 

▼【リスクなし】最強の無料プログラミングスクールはこちら▼

無料で転職可能なプログラミングスクール6つ(10万円で始めるプログラミング)
無料のプログラミングスクールないかな? 10万円以内でプログラミングを始めたい! この記事では上記のような方に向けて、10万円以内で始められるおすすめのプログラミングスクールを紹介します。

ポートフォリオ作成時の注意点:転職活動がバレる!?

実務経験がある方に限りますが、案件実績の本番のリンクをはるときは注意が必要です。

 

もし実際のサイトを実績と載せていた場合、アナリティクスなどでリンク元としてポートフォリオが転職前の会社にばれてしまうからです。

自分が初心者の頃これをやって社長に転職活動がばれてしまったのは今となってはいい思い出です。。

 

なので、実績リンクの貼り方としては

 

・そもそもリンクを貼らない(検索してもらう)
・google検索した時のリンクをはる
・ポートフォリオサイトドメイン配下に実績を持ってくる

 

というやり方であれば、ポートフォリオがばれることはありません。

今後、2、3社目に転職する際は必要となるので覚えておきましょう。

 

高評価続々!ポートフォリオの作成サポート付きのスクール

【無料も】本気のパソコン塾の評判・口コミを徹底解説!メリット・デメリットや特徴
この記事では現在話題沸騰中のプログラミングスクール「本気のパソコン塾」の評判を解説します。 本気のパソコン塾の特徴・学べること・評判・料金についても解説します。

まとめ:ポートフォリオを作る上で気にするべきたった一つのこと

Webエンジニアがポートフォリオを作る上で気にするべきたった一つのことはユーザー視点、つまり面接官のことを考えることです。

決して独りよがりの作品にしてはいけません。

これは今後も必要な考え方になります。

 

また、Webページの性質としてユーザビリティやアクセシビリティを重んじている為、それができていないポートフォリオ=Webをわかっていないと判断されてしまうことも考慮しなければなりません。

 

ただ、最近学習したことをポートフォリオに取り入れるというのはいい意味で勉強となりますのでどんどん取り入れましょう。

その時でも上記のことは意識して作れるとベストです。

 

ポートフォリオを作る上で以上のことが参考になれば幸いです。

実績を作りたい方におすすめのnoteはこちら

そんなこと言っても実績がない!という人はまずは実績を作るべき。

トレンドをおさえたコーポレートサイトの作り方を14記事にわたって解説しました↓

14日後にコーダーになるネコ|hoshi|note
14日で1サイト作れるnoteのまとめです。 HTML、CSS、JSが学べます。 サイトを作成をする上での考え方、コードすべてを画像付きで解説しています。 photoshopなしでも大丈夫、ポートフォリオに乗せれる実績が作れます。 最終的にはwordpress化もしていますので、こちらを実績に仕事を取ることも可能です。

 

また、「教えたい人」と「学びたい人」のスキルプラットフォーム「MENTA」でメンターやってます。

今なら質問回数無制限です!

就職サポートがある月額5,280円のプログラミングスクール

本気のパソコン塾でフロントエンドを学ぶのもおすすめです。

以下特徴があります。

  1. 低額で定額の料金設定
  2. 動画解説と質問サポート付き
  3. 日々の進捗をサポーターが一緒に管理
  4. 就職サポートあり
【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する ポートフォリオ作成の手順
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました