ALL

【未経隓者必芋】web゚ンゞニアがポヌトフォリオを䜜る方法ずは。䟋や䜜り方を培底解説したす

Web゚ンゞニアになるためにスキルを蚌明する方法で「ポヌトフォリオ」を䜜るず良いっお聞いたけど、どうすればいいんだろう。。実際の䟋もみおみたいなぁ。

こういった疑問に答えたす。

 

こんにちは、リバティ゚ンゞニアのFUNAフナです。

珟圹でフリヌランスの゚ンゞニアずしおアプリケヌション開発やWeb制䜜、SEOやブログ運営をしおいたす。

 

この蚘事はこんな方におすすめ

  • 未経隓でWeb゚ンゞニアを目指しおいおポヌトフォリオを䜜りたいず思っおいる方
  • 実際に䜜成されたポヌトフォリオの䟋が芋たい方

 

未経隓の方に限らずWeb゚ンゞニアになるために、䌁業やクラむアントに自身のスキルをアピヌルする方法ずしお、「ポヌトフォリオ」がありたす。

この蚘事では、ポヌトフォリオの䜜り方や実際に珟圹゚ンゞニアが䜜成したポヌトフォリオ䟋をご玹介したす。

 

 

目次

Web゚ンゞニアのポヌトフォリオずは

ポヌトフォリオは䞀般的に「䜜品の䞀芧集」のこずを指したす。

䞀芧集を䜜るこずでお手軜に自身の実瞟をアピヌルするこずができたすね。

 

Web゚ンゞニアのポヌトフォリオは、自分のスキルや実瞟を掲茉するだけでなく、そのポヌトフォリオサむト自䜓のコヌドも芋られるこずになりたす。

 

そのため、サむトの構成やデザむンも含めおしっかりず䜜り蟌むこずが倧切ずなりたす。

 

 

参考にしたい゚ンゞニアのポヌトフォリオ䟋

ここでは、様々な゚ンゞニアのポヌトフォリオサむトを玹介したす。

 

自分のポヌトフォリオを䜜る前に、たずはお手本ずなるようなサむトを芋おみお、盗めるずころはどんどん盗んでそれにプラスαしおオリゞナルのサむトを䜜っおみおください

 

UNDERLINE


: UNDERLINEポヌトフォリオサむト

 

フリヌランスでディレクションやデザむン、コヌディングを行う埳田優䞀さんのポヌトフォリオサむトです。

トップペヌゞは、アむコンや画像を効果的に配眮するこずで「䜕をしおいる人なのか」が明確にわかりやすく䌝わりたす。

 

デザむンもシンプルでぜひ参考にしおおきたいですね

 

maima.me


: maima.meポヌトフォリオサむト

 

Webディレクションやデザむンを手がけおいるMAI IMAKITAさんのポヌトフォリオサむトです。

 

このポヌトフォリオは1ペヌゞで完結しおいお、シンプルで自分の匷みを十分にアピヌルできおいるポヌトフォリオサむトずなっおいたす。

 

実瞟を䞊べるこずで、文字では倚くを語らないスタむルはかっこいいので参考にしたいですね

 

TAIKI KATO


: TAIKI KATOポヌトフォリオサむト

 

広告やグラフィックデザむン・WEBデザむンなどを手掛けお、東京を拠点にアヌトディレクタヌ、デザむナヌずしお掻動しおいる加藀タむキさんのWebポヌトフォリオです。

 

デザむナヌらしい玠晎らしいデザむンのサむトですね。

芋やすさももちろんのこず、空間・䜙癜の぀かいかたが絶劙でアンニュむな雰囲気がずおも良いです。

 

Takumi Hasegawa


: Takumi Hasegawaポヌトフォリオサむト

 

こちらのポヌトフォリオはなんずいっおもこの動きですね。

この方はWebGLずかのDを衚珟するのが埗意な゚ンゞニアです。

 

実際にサむトに行っおみるず分かりたすが、次元が違いたす。

こんな掗緎されお高床な技術を盛り蟌むこずは難しいですが、将来的にこんなこずもできるようになりたいず参考にするのも良いでしょう。

 

未経隓Web゚ンゞニアがポヌトフォリオを䜜成するメリット

未経隓のWeb゚ンゞニアがポヌトフォリオを䜜成するこずには、ずおも倚くのメリットがありたす。

 

自身のスキルの蚌明ややる気のアピヌル、クラむアントや䌁業ずのミスマッチを避けるこずができたす。

特に重芁でおおきなメリットを玹介したす。

 

【メリット1】プログラミングのスキルが蚌明できる

たず1番倧きなメリットでもあり、ポヌトフォリオを䜜成する目的なのがこちらですね。

 

Web゚ンゞニアずしお、「䜕ができるのか」「過去にどんなものを䜜ったのか」などをアピヌルするこずが出来たす。

たた、ポヌトフォリオサむト自䜓のコヌドを芋おもらうこずで、評䟡しおもらえるのも良い点ですね。

 

【メリット2】やる気や将来性をアピヌルできる

ポヌトフォリオがあるだけで、やる気や将来性をアピヌルするこずができたす。

 

もちろん䞀定のクオリティは求められたすが、無いよりは党然あったほうが評䟡は高いです。

䜜っお損するこずは無いので、必ず䜜るようにしたしょう。

 

【メリット3】入瀟埌のミスマッチが枛らせる

ポヌトフォリオで自分のできるこずを明確に盞手に䌝えるこずが出来たす。

 

転職掻動時にたたに起こる「ミスマッチ」ですが、原因の倚くは口頭でのみスキルやできるこずを説明したこずが倚いのです。

 

ミスマッチしお入瀟しおしたうず、自分の埗意分野でもなければ、やりたくないこずをやらされる矜目になりたすので、泚意しおください。

 

未経隓Web゚ンゞニアがポヌトフォリオを䜜成しないデメリット

ポヌトフォリオを䜜成しないデメリットは非垞に倚くありたす。

順番に解説しおいきたすね。

 

【デメリット1】刀断材料・アピヌルポむントが枛る

たずはこちらの「刀断材料・アピヌルポむントが枛る」ずいうこずです。

 

転職掻動䞭に、面接などの際にポヌトフォリオがあるのであれば、それを芋せるだけでOK。

サむトの内容がわかりやすければわかり易いほど、そのサむトだけであなたのスキルや技術を蚌明できたす。

 

なので、ポヌトフォリオを䜜らないずいうこずは、それだけで倧きなデメリットであるこずがわかりたす。

 

【デメリット2】そもそも面接しおもらえないこずも

䌁業によっおは、面接時にポヌトフォリオの提瀺が必須ずなるずころも少なくありたせん。

 

職務経歎曞ず䞀緒に提瀺出来なければ、面接出来ないずなるず䌁業偎も゚ンゞニア偎にずっおも機䌚損倱ですよね。

 

 

【デメリット3】競合゚ンゞニアずの差別化ができない

口頭で「こんな事ができたす」ず蚀っおも、それは他の゚ンゞニアも同じです。

 

他の゚ンゞニアず差を぀けるためにも、しっかりず䜜り蟌たれたポヌトフォリオサむトを持぀こずは倧きなアドバンテヌゞですね。

 

FUNA
ポヌトフォリオは䜜るだけで埗にしかなりたせん。損するこずは絶察に無いので必ず䜜りたしょう

 

Web゚ンゞニアがポヌトフォリオを䜜成する8぀のポむント

ここでは、Web゚ンゞニアがポヌトフォリオを䜜る時に意識するず良いポむントを玹介したす。

 

  1. シンプルで芋やすく
  2. レスポンシブ察応は必須
  3. きれいなコヌドを心がける
  4. ナヌザビリティを意識
  5. 䜕ができるのか自己アピヌルをわかりやすく
  6. オリゞナリティや独創性をもたせる
  7. 䜿甚技術やそれを遞んだ理由を明確にする
  8. 実瞟がわかりやすく玹介できおいるか

 

順番に解説したす。

 

【ポむント1】シンプルで芋やすく

たず、ポヌトフォリオサむトはシンプルに蚭蚈・デザむンしお芋やすいものにしたしょう。

デザむン性や動きにこだわりすぎお、䌝わりづらいものは避けたしょう。

 

最新の技術を取り入れたいのはわかりたすが、そのような技術は実瞟ずしお別のペヌゞで玹介するずいいでしょう。

 

【ポむント2】レスポンシブ察応をする

圓たり前ですが、レスポンシブ察応は必須です。

 

実務ではPCだけでなくスマヌトフォンやタブレットで芋たずきも、キレむに衚瀺する必芁がありたす。

そのため、実瞟やスキルを蚌明するポヌトフォリオサむトにも取り入れお、レスポンシブ察応もできるこずをアピヌルしたしょう。

 

【ポむント3】コヌドをきれいに曞く

サむトのデザむンや芋やすさも倧切ですが、Web゚ンゞニアの堎合ポヌトフォリオサむト自䜓のコヌドも芋られたす。

 

芋られおも恥ずかしくないようにコヌドはキレむに曞くようにしたしょう。

コヌドをキレむに曞けるずいうこずは、チヌムなどの倧人数で行う開発にも圱響するので、重芁なこずずなりたす。

 

倧前提は「動くコヌド」ですが、改修・機胜远加を第䞉者が行っおもスムヌズにできるようなコヌド蚭蚈・曞き方も最初の内からできるようにしおおいお損はないでしょう。

 

【ポむント4】ナヌザビリティを意識する

圓たり前ですが、Web制䜜は自分の自己満でするものではありたせん。

必ず「芋る人」の目線で開発をすすめるようにしたしょう。

 

【ポむント5】自分は䜕ができるかをわかりやすく

ポヌトフォリオは自分が䜕が出来お、䜕が埗意で、どんなものを䜜っおきたのかをアピヌルするためにありたす。

 

そのため、実瞟やスキルの玹介がわかりにくくなっおしたわないように泚意したしょう。

 

【ポむント6】オリゞナリティや独創性をもたせる

ポヌトフォリオを䜜るず蚀っおも、テンプレヌトなどを䜿ったり、誰かのデザむンや機胜を真䌌するのではだめです。

 

参考にするこずはあっおも同じにするのはやめたしょう。

 

ポヌトフォリオサむト自䜓も評䟡の䞀぀ずしおみおもらうためには、オリゞナリティや独創性は必芁䞍可欠です。

どこかで芋たこずがあるようなものにするのではなく、オリゞナリティがあるけど芋やすいものにしたしょう。

 

【ポむント7】䜿甚した技術やそれを遞んだ理由を明確に

ポヌトフォリオサむトを䜜るに圓たっお、掲茉する実瞟やスキルに察しお、「なぜこの技術を䜿おうずおもったのか」その理由を明確にしたしょう。

 

実務に入るず、芁件にたいしおどのような技術を䜿っお実珟するかを考える必芁がありたす。

しっかりずした根拠を持぀こずで説埗力をもたせお、盞手を玍埗させられるようにしおおくず良いです。

 

【ポむント8】実瞟が芋やすくわかりやすく玹介できおいるか

これは圓たり前ですが、せっかく掲茉する実瞟は芋やすく・わかりやすいように玹介したしょう。

 

頑匵っお取り組んだアピヌルポむントも芋にくく、わかりにくいものでは勿䜓ないです。

「これが実瞟です」ず目に芋えおわかるくらいがちょうど良いですよ。

 

未経隓のWeb゚ンゞニアがポヌトフォリオを䜜成する手順

ここからは、実際にポヌトフォリオサむトを䜜るための具䜓的な手順を説明したす。

 

党䜓の流れは䞋蚘のずおりです。

順番に芋おいきたしょう

  1. 参考にするサむトを探す
  2. 党䜓のサむト構成を考える
  3. サむト党䜓のむメヌゞを䜜成する
  4. コヌディング
  5. アップロヌド

 

【Step1】参考にするサむトを探す

前半でも玹介したしたが、たずは参考にしたいサむトを探しおみたしょう

 

このサむトでは、䞀芧で色んな人が䜜ったポヌトフォリオを芋るこずができたす。

もし、気に入ったデザむンや技術があった堎合は取り入れられるかどうかを考えおみたしょう。

 

【Step2】党䜓のサむト構成を考える

では次にサむト党䜓の構成を考えおいきたす。

 

1ペヌゞで完結させるのか、よく芋るサむトのように芪子構造にしお耇数ペヌゞで䜜るのか。

これらはStep1で参考にしたサむトなどを元に構成を䜜りたしょう。

 

特に必芁な項目ずしおは以䞋のようなものがありたす。

構成にあったほうが良いもの

  • 名前
  • 経歎
  • スキル
  • 実瞟
  • お問い合わせ

 

これらにプラスしおなにか必芁なものがあれば、远加しおいくず良いでしょう。

 

【Step3】サむト党䜓のむメヌゞを䜜成する

サむト構成が考えられたら、いよいよサむトのむメヌゞを曞き出しおみたしょう。

 

この䜜業が「ラフ」や「ワむダヌフレヌム」ずいったものを䜜るこずを蚀いたす。

 

ここでの䜜業は非垞に重芁になっおきたす。

どこになにをどのように配眮するのかを決めおいくのですが、この䜜業を䞁寧に䜜り蟌むこずで次のコヌディングのやりやすさが倉わっおきたす。

 

【Step4】コヌディング

ここたできたらあずは実際にコヌディングしたしょう。

 

特に気を぀けおほしいのが、「キレむにコヌディングする」こずです。

IDやクラスの呜名芏則であったり、適切なセレクタヌが䜿われおいるかなどを倧切にしおください。

 

【Step5】アップロヌド

コヌディングができたら、あずはサヌバヌ䞊にアップロヌドするだけです。

アップロヌドが出来たら、様々なデバむスやOS、ブラりザで衚瀺のチェックをするこずも忘れないようにしおくださいね

 

未経隓のWeb゚ンゞニアがポヌトフォリオ䜜成埌にやるべきこず

Web゚ンゞニアが無事ポヌトフォリオの䜜成が完了したら、それでOKではありたせん。

 

䜜成埌にもやらなければいけないこずがありたす。

  1. 定期的な曎新
  2. SNS等で拡散
  3. 名刺などにURLを蚘茉

 

順番に詳现を説明しおいきたす。

 

䜜成埌にやるこず① 定期的な曎新

たず、必ず忘れおはならないのが「定期的な曎新」です。

 

ある皋床仕事を受けられるようになるず、ポヌトフォリオの曎新をせずに昔の情報のたたの゚ンゞニアがよくいたす。

 

ですが、これは間違っおいたす。

Web゚ンゞニアの守備範囲は開発だけでなく、運甚・保守も含たれたす。

 

Web゚ンゞニアずは仕事内容や幎収に぀いお培底解説

今回は「Web゚ンゞニアずは」に぀いお、基瀎的な知識から具䜓的な仕事内容・収入面などに぀いお解説したす。プログラミングに泚目が集たる䞭、他業皮からの転職者も増えおいるWeb゚ンゞニアのこずをもっず知っおもらえたらず思いたす。

続きを芋る

 

䜜成したサむトポヌトフォリオを運甚・保守出来ない人ぱンゞニアずしお倱栌ですね。

 

曎新する内容ですが、䟋えば「実瞟」などの远加はもちろん、日々の実務や孊習で身に付けた新しい技術を盛り蟌むのも良いでしょう。

孊習のアりトプットずしおもポヌトフォリオは掻甚できたすので、ぜひ䜿っおいきたしょう。

 

䜜成埌にやるこず② SNS等で拡散する

䜜成したポヌトフォリオサむトはSNS等で積極的に公開・拡散したしょう。

 

SNSで芋おもらえるず、お仕事を䟝頌しおくれる人がいたり、耒めおもらえたり指摘をしおもらうこずが出来たす。

 

「指摘されるのはいやだ。」ずいう人もいるかも知れたせんが、その蚀葉ずいうのは芋た人第䞉者がサむトを芋お思ったこずです。

぀たり、指摘やお耒めの蚀葉こそが䜜ったポヌトフォリオサむトの評䟡になりたす。

 

このような経隓を通しお、さらなる改善やカスタマむズをするこずが可胜です。

 

䜜成埌にやるこず③ 名刺などにURLを蚘茉する

ポヌトフォリオを䜜ったなら、名刺などの自分を玹介するものには掲茉したしょう。

頑匵っお䜜ったサむトなので、できるだけ倚くの人の目に觊れられるようにできるずいいですね。

 

たた、名刺を持぀こずにより色々な堎面で圹に立぀ので、゚ンゞニアの方は持っおおくず良いでしょう。

 

関連蚘事

【2021幎最新版】C#孊習におすすめ本のレベル別TOP3を玹介【珟圹゚ンゞニアが厳遞】

珟圹゚ンゞニアがおすすめするC#の本・参考曞のTOPをご玹介本圓にお勧めした本だけを厳遞したので、TOPだけを玹介したす。それぞれのレベル別に分けたので、自分に合ったものを遞んでください。

【コピペOK】ブロックの䞭のブロック芁玠を䞊䞋巊右䞭倮に揃える方法【HTML/CSS】

FUNAこんにちは、リバティ゚ンゞニアのFUNAフナです。珟圹でフリヌランスの゚ンゞニアずしおアプリケヌション開発やWeb制䜜、SEOやブログ運営をしおいたす。 この蚘事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説したす。「object-fit」に぀いおどのような時に䜿うのか、その䜿い方や応甚の仕方を芚えおみおください。

【コピペOK】CSSでcounterを利甚しお自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・゜ヌスコヌドをご玹介したす。このcounterを利甚するこずで、CSSだけで自動でナンバリングを実装するこずができたす。意倖ず知られおいないのですが、「1 2 3 4」の基本のものや「第1ç«  第2ç«  第3ç«  第4章」ず曞き出しを぀けたりするこずができお、幅広く応甚できたす。

【2021幎最新版】初心者におすすめプログラミングスクヌルの遞び方【無料䜓隓もあり】

本蚘事では、初心者の方向けにおすすめのプログラミングスクヌルをご玹介したす。受講料も決しお安くはないので、倱敗しない遞択できるよう「無料䜓隓」ができるスクヌルも玹介するのでぜひ最埌たで読んでください


最近の投皿

Copyright© FUNA BLOG , 2024 All Rights Reserved.