「独学でエンジニアになれる！成功の秘訣と実践方法」

Last updated at 2024-08-03Posted at 2024-08-01

はじめに
基礎作り
希少性の高いスキルを身につける
プログラミング以外のスキルを身につける
- Figmaの使い方
- デザインの考え方
挫折しないプログラミング学習法
一般的な学習法の限界
ゴールから逆算する学習法
- 具体的なアクションプラン
最強の学習法
- 具体的な方法
Progate攻略
成果の出るプログラミング学習法
- 模倣学習法
- 模倣学習法の具体的な手順
参考になるポートフォリオ
まとめ

今回は未経験からプログラミングを独学で効率よく学ぶための学習法を紹介します。具体的に説明するので、誰でも実践できます。ちなみに、私は特に良い学歴がないので、学歴が良い人にしかできないわけではありません。よく「プログラミングを学んだら将来性がある」「プログラミングを学んだら稼げる」といった話を聞いたことがあるかもしれませんが、ただプログラミングをがむしゃらに学んでも、稼げるエンジニアにはなれません。稼げない学び方をしていても、一生稼げるようにはならず、残業だらけで疲弊する未来が待っているだけです。

稼げないエンジニアは「作ることが好きだから稼げなくてもいい」と言うかもしれませんが、プログラミングはあくまで稼ぐための手段であり、学ぶこと自体が目的になってしまうのはもったいないと思います。そこで、稼げるようになるための学び方があります。今回は、稼げるエンジニアになるための具体的な方法を紹介します。知っているか知らないかだけなので、知っておくと絶対に良いですよね。この学習法を知ることで、一番効果が出るのはプログラミングをまだ何も学んでいない未経験の人です。最初からこのStepを実践することで、より早く稼げるエンジニアになれるでしょう。もちろん、現役の人でも効果はありますが、未経験の人の方が余計な知識がないので、頭に入りやすいです。私自身も多くの失敗を経験し、最終的には独学のみでエンジニアとして働くことを達成しています。周りのフリーランスの人たちも、100万を超えている人がいますが、順番は違えど同じようなことをしています。共通点は、営業力が全くないことと、学習開始から3年以内であることです。

もしこの記事を見ているあなたが、稼げるエンジニアになりたい、プログラミングを学びたい、せっかく大事な時間を使って勉強するのだから効率よく学びたい、周りと圧倒的な差をつけたいと思っているのであれば、かなり重要な話をしますので、最後まで見てください。

実際に学歴が高いエンジニアは非常に多いですが、学歴や職歴、スキルがまったくない人でもプログラミングはできます。そういったことを知ってほしくて発信を始めました。このチャンネルではプログラミングの学び方や稼ぎ方などを発信しています。プログラミングやエンジニアに興味がある方はフォローしてください。

結論から言いますが、今回は3つのStepに分けて話します。Step1は「基礎作り」、Step2は「希少性の高いスキルを身につけよう」、Step3は「プログラミング以外のスキルを身につけよう」です。ちなみに、私の知る限り、最も稼ぎやすい領域はWeb系もしくはアプリケーション系ですので、そこについてのみお話しします。

「基礎作り」

では、具体的にStep1から始めましょう。基礎というのは、Web系でいくとHTML、CSS、JavaScript、データベース、そしてPHP、Ruby、Pythonのどれか、そしてフレームワークとしてはRuby on Rails、Djangoなどが含まれます。これらのスキルはすべて土台となる基礎です。これらのコンテンツは多くのプログラミングスクールにもありますし、本気で勉強すれば誰でも身につけることができます。最も良いのは、WebサイトやWebサービス、スマホアプリケーションを自分で作ってみることです。自分で何かを作ると、自然にデータベースやデザインなどの設計も学ぶことになります。この設計ができるようになるのが非常に重要です。アイデアを考えてぜひ挑戦してみてください。どうしても思い浮かばないという方は、ChatGPTに質問してください。

以上がStep1です。ここまではおおよそのプログラミングスクールでやっている内容のボリュームです。

「希少性の高いスキルを身につける」

次にStep2、希少性の高いスキルを身につけようです。希少性の高いスキルは、プログラミングスクールなどでは教えていないことが多いです。希少性が高いスキルは、単価も高くなります。単価とはエンジニア1人に対する1ヶ月分の報酬のことです。この言葉を覚えておいてください。エンジニアの単価は幅が非常に大きく、30万のスキルもあれば、50万、100万のスキルもあります。プログラミングスクールで教えられるスキルというのは、大体30万円から50万円くらいの単価のスキルだと思ってください。では、どんなスキルが希少性が高いかというと、時代によって変わりますが、最近ではDynamoDBやKubernetesなどが単価の高いスキルとして挙げられます。

ただし、未経験の方が「希少性の高いスキルを勉強したら良いのか」と思うかもしれませんが、それはちょっと待ってください。希少性の高いスキルを身につけるのは、まず基礎的なスキルを習得してからで大丈夫です。具体的に私の経験を説明しますと、エンジニアを志した当初にSwiftというプログラミング言語を身につけました。SwiftはiPhoneのアプリケーションを作るための言語で、多くの日本製アプリがApp Storeにありました。しかし、Swiftを使った仕事はそれほど多くありませんでした。これならすぐに仕事が取れると思っていましたが、採用はほとんどされませんでした。基礎的なスキルがまったくなかったため、戦力として認められなかったのです。そこで方向転換し、HTML、CSS、JavaScriptなどの基礎的なスキルを身につけることにしました。これらの基礎スキルを身につけることで、すぐに採用されるようになりました。これは私の失敗談ですが、同じような失敗を避けるためにも、基礎スキルを先に身につけることをおすすめします。

ここまでをまとめると、Step1は「基礎スキルを身につける」、Step2は「希少性の高いスキルを身につける」、次にStep3は「プログラミング以外のスキルを身につける」です。

「プログラミング以外のスキルを身につける」

プログラミング以外のスキルを身に付けることで、さらに市場価値が上がります。特にデザイン、マネジメント、設計、コミュニケーションなどのスキルが有効です。ただし、デザインや設計以外のスキルは、個人で身につけるのが少し難しいため、組織の中で磨く必要があります。私の場合はデザインに特化しました。デザインができると、Webサイトやスマホアプリの基礎デザインを自分で作ることができます。完璧なデザインではなくても、簡単なデザインができるだけで役立ちます。デザインツールのおすすめはFigmaです。無料で使えるので、ぜひ試してみてください。

Figma

https://www.figma.com/

非常にわかりやすい動画教材があるので、みなさんの学習の参考として以下の動画をご紹介させていただきます。

Figmaの使い方

https://youtu.be/xZMR-ZNY08c?si=OJG8pg2rjLJMMA41

デザインの考え方

https://youtu.be/zsjXix-SAZs?si=bjGNpmwR28Ezv3HC

以上の3つのStepを踏んだ後に、プラスアルファのノウハウを2つ紹介します。1つは「希少性の高いスキルを複数習得すること」です。例えば、私の場合は、複数のスキルを足し算することで、より多くの仕事を得ることができました。2つ目は「営業力は後回しでOK」とすることです。とにかくスキルを磨くことが大事です。まずスキルを磨くことが重要で、営業力は後回しにしても大丈夫です。最後に復習しましょう。

「基礎作り」

幅広いスキルを身につけてジェネラリストになる。

「希少性の高いスキルを身につける」

レベルの高いスキルを習得してスペシャリストになる。

「プログラミング以外のスキルを身につける」

デザインやマネジメントなど、他のスキルを身につける。

さらに、プラスアルファとして、希少性の高いスキルを複数習得し、営業力は後回しにしてスキルを磨くことが大切です。正直、これらの内容のどれか一つをとっても簡単なことではありませんが、エンジニアを目指すには普通の人の数倍の努力が必要です。私自身も多くの苦労を経験しましたが、明確なスキルがあれば結果も出やすいので、ぜひ挑戦してみてください。

挫折しないプログラミング学習法

ここからは挫折しないプログラミング学習法を紹介します。プログラミング学習において、重要なことをお伝えします。多くの人がプログラミングに挑戦しても、挫折してしまうことがよくあります。特に、覚えることが多すぎてゴールが見えないと感じることが多いでしょう。実際、プログラミング学習の挫折率は9割とも言われています。プログラミングを学ぶ際、時間と労力が無駄になってしまう前に、正しい学習法を身につけることが重要です。

プログラミング学習には、挫折しないための効果的な学習法があります。この記事で紹介する方法を実践すれば、プログラミングの習得速度が格段に上がり、挫折することも少なくなるでしょう。

暗記学習を捨てる

プログラミングにおいて、すべてを暗記するのは現実的ではありません。変数、条件分岐、関数など、多くの要素がありますが、すべてを暗記するのは難しいです。暗記に頼ると、学んだ内容を忘れてしまうことが多いです。プログラミング学習では、暗記よりも実際にコードを書くことが重要です。アウトプットを中心に学ぶことで、学習が効果的に進みます。具体的には、学んだ知識を実際に使ってみることで理解が深まります。インプットよりもアウトプットの割合を増やしましょう。

必要な分だけ学ぶ

学習にはゴールがあります。必要なスキルを身につけるためには、ゴールから逆算して学習を進めることが重要です。例えば、特定のアプリケーションを作りたい場合、そのアプリケーションに必要なスキルだけを学ぶようにします。書籍や教材の全てを学ぶのではなく、目的に必要な部分に絞って学習します。

ゴールから逆算する

プログラミング学習のゴールを設定し、そのゴールに到達するために必要なスキルを見極めることが大切です。例えば、転職を目指す場合、必要なスキルやポートフォリオを明確にし、それに向けた学習を進めます。

これらの方法を実践することで、プログラミング学習が効果的に進み、挫折することが少なくなるでしょう。学習方法を見直し、効率よくスキルを身につけて、プログラミングの成功を目指しましょう。

では次に、プログラミング学習の誤解と正しいアプローチについて解説します。多くの人が成長を感じられずに挫折してしまう理由と、その解決策についてお話しします。

一般的な学習法の限界

「基礎を覚えてひたすらコードを書く」「文法を暗記する」「ポートフォリオを作成する」といった一般的な学習法が、実はあまり効果的ではないことを知っていますか？

ゴールから逆算する学習法

プログラミングを習得するためには、「ゴールから逆算する」学習法が重要です。実際にフリーランスのエンジニアとして成功するために、この方法を取り入れて成果を上げた経験をシェアします。

ゴールから逆算する方法

プログラミング学習での成功の鍵は、具体的なゴール設定にあります。例えば、「エンジニア転職のための評価されるポートフォリオを作る」といった目標を設定し、それに向けた学習を進めることが大切です。

具体的なアクションプラン

ゴール設定: 達成したいゴールを明確に決める
タスクの細分化: ゴール達成に必要なタスクを細かく分ける
細かいタスクから始める: 手をつけやすい小さなタスクから実行する

この方法を実践することで、効率的にプログラミングを学び、挫折することも少なくなるでしょう。基礎から始めるよりも10倍効率が上がるので、ぜひ試してみてください。

プログラミングを始めてから、YouTubeの動画や本、Progateなどで学習しているけれど、なかなか習得できた実感がない、難しいと感じることがあるかもしれません。特に理系でない限り、このような壁にぶつかることはよくあります。この悩みから抜け出せずに学習が続けられないこともありますが、安心してください。プログラミングには「核となる部分」があり、それを理解し実践することでスキルを爆発的に向上させることができます。

最強の学習法

「日常を関数に置き換える」ことが、プログラミング力を爆発的に上げる最強の方法です。関数とは、プログラム内で特定の機能を持つ部品のことです。関数をマスターすれば、ほとんどのプログラミング文法を扱えるようになります。関数はプログラムの核となり、変数や条件分岐、繰り返し処理など、すべての要素とつながっています。

具体的な方法

日常生活の事象を関数に置き換える練習をすることで、プログラミングの理解が深まります。例えば、電車の切符の動きや消費税の計算を関数として考えてみましょう。以下の6つのポイントに留意して実践してみてください。

大量の関数を作成する: 引数や戻り値がなくても良いので、たくさんの関数を作りましょう。
処理が1行のコードでも良い: 短い処理でも問題ありません。
関数名は「動詞+名詞」にする: 例：「Get drink」など。
作成する関数に正解はない: 自分なりの関数を作りましょう。
プログラミング言語は一つに絞る: まずは一つの言語に集中することが大切です。
頭を使い続ける: 常に考えながら関数を作りましょう。

これらを意識して実践することで、プログラミング力は確実に成長します。関数を使いこなすことで、プログラミングの理解が急激に深まります。

例えば、洗濯機の「スタート」ボタンを押したときに回転する動作をJavaScriptでシンプルに表現するためのコード例です。ここでは、HTMLとJavaScriptを使って、ボタンをクリックすることで洗濯機が回転するアニメーションを作成します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>洗濯機のアニメーション</title>
    <style>
        .washing-machine {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            border-radius: 50%;
            position: relative;
            margin: 50px auto;
            border: 5px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .drum {
            width: 60px;
            height: 60px;
            background-color: #bbb;
            border-radius: 50%;
            position: absolute;
        }
        .rotating {
            animation: rotate 2s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="washing-machine">
        <div class="drum"></div>
    </div>
    <button id="startButton">スタート</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.getElementById('startButton').addEventListener('click', function() {
    const drum = document.querySelector('.drum');
    if (drum.classList.contains('rotating')) {
        drum.classList.remove('rotating');
    } else {
        drum.classList.add('rotating');
    }
});

上記のコードの意味について説明します。

HTML: washing-machine クラスの div 要素は洗濯機の外枠を模しており、その中に drum クラスの div 要素が回転するドラム部分を表現しています。スタート ボタンを用意しています。
CSS: drum クラスに回転アニメーションを適用するための rotating クラスを定義しています。@keyframes rotate で回転アニメーションを作成しています。
JavaScript: スタート ボタンがクリックされると、drum 要素に rotating クラスを追加または削除して回転を開始または停止します。

このコードをブラウザで開くと、ボタンを押すと洗濯機のドラムが回転し、もう一度押すと回転が止まります。

Progate攻略

次はProgateの攻略方法について書きます。プログラミング学習を始めるほとんどの人が一番最初に使う学習サービスです。実際、僕もプログラミング学習を決意して、YouTubeを見たりするとまず100%Progateをやれと言われます。でも、実際にやろうとすると、コースが多すぎて何のコースをやったらいいかわからないし、どう進めていけばいいかわからないこともあります。これが本来、プログラミングを楽しく学べるはずのサービスの難点なんですね。結果、挫折してしまうこともあります。

効率的に学習しないと、時間だけが過ぎていくことになります。Progateをすでに使っているけど、レベルばかり上げすぎてゴールが見えない、何周もしているけど成長している実感が湧かないといった悩みが多く届きます。でも、そういった悩みを今回の記事ですべて解決してみせます！僕自身、昔Progateを始めた時は効率的な学習方法が全くわからず、無駄なことを繰り返していました。だから、みんながProgateを迷わずできるように、今回の記事ではProgateを完全に攻略するための情報をまとめました。この記事だけで、学習効率が10倍は上がるはずです。ちなみに、僕に相談してくれた人には必ず今日の話をしますが、100%全員が迷わず進められるようになっています。なので、時間を無駄にしたくない、効率的にプログラミング学習を始めたい、プログラミングを身に付けて人生も変えたいと考えているなら、本当に大事な話をしますので、ぜひ最後まで見ていってください。

コードが書けるようになるには、これは当たり前に聞こえるかもしれませんが、学習と聞くと多くの人が本を読んだり動画を見たりするイメージを持ちます。しかし、プログラミングはそれだけでは不十分です。プログラミングは実践的なスキルであり、ただ本を読むだけでは全く身に付きません。実際にコードを書く体験こそが最も効果的であり、その体験を通じて成長できます。とにかく書いて、書いて、書きまくって、現在の魔法のスキルであるプログラミングをあなたの武器にしていきましょう。

環境構築が不要

環境構築とは、プログラミングを始めるために必要な準備作業のことです。例えば、必要なソフトウェアをインストールしたり、設定を行ったりします。しかし、これが面倒で挫折することもあります。Progateでは、初学者が挫折しないように、環境構築が一切不要です。ネットとパソコンさえあれば、すぐにプログラミングを始められるので、最初に環境構築でつまずかずに済みます。

分かりやすさ

Progateは非常に分かりやすく作られており、難しいことが一切書かれていません。しっかりと文字を読むことさえできれば、挫折することはほぼありません。それでいて、初心者に必要な知識はほとんど網羅されています。プログラミング学習において大事なのは、挫折せずに一歩一歩成長することです。Progateはそのための最適なツールです。

以上がProgateで学習する究極のメリットです。次に、知るだけで学習効率が劇的に上がるポイント5選に進みましょう。

暗記するな

プログラミング学習において、暗記することは効率的ではありません。暗記ではなく、理解を深めることを目指しましょう。記憶のタンスに引き出しを増やすようなイメージで、必要な知識を引き出しやすくすることが重要です。

好き嫌いを判断するツールとして使うべし

プログラミングが自分に合っているかどうかは、実際にやってみないとわかりません。Progateは、環境構築の煩わしさがないため、プログラミングが向いているかどうかを判断するためのツールとして最適です。もし面白いと思えば、そのまま学習を続け、そうでなければ別の道を考えましょう。

分からなくても進む

分からないことがあっても、先に進むことが大切です。理解できないところを深掘りしすぎると、全体の進行が遅くなります。70%程度理解できたら、次に進むようにしましょう。

3周以上するな

同じコースを何周もすることは効率的ではありません。1から2周で十分です。ゴールを見据えて学習し、必要以上に同じ内容を繰り返さないようにしましょう。

ケチるな

Progateには無料のコースと有料のコースがあります。月1000円程度で、1年も続けるわけではありません。安価な費用で多くの情報を得ることができるので、ケチらずに有料コースを利用することをお勧めします。

以上が知るだけで学習効率が劇的に上がるポイント5選でした。ここまでProgateのメリットや効率的な学習方法についてお話ししましたが、次に目的別Progate学習法についてお話ししていきます。

Progate

https://prog-8.com/

成果の出るプログラミング学習法の紹介

次にここからは成果の出るプログラミング学習法を紹介します。これが事実です。ここで話す内容は正直裏技のようなものになるので、悪用厳禁です。

みんなスキルを身につけたい、エンジニアとして転職したい、プログラミングを学んで稼ぎたいと思っているでしょう。興奮してネットを調べてみると、ほぼ間違いなくポートフォリオを作成するという結果にたどり着きませんでしたか？

ポートフォリオというのは、自分で何かしらアプリケーションやサービスを作ること、つまり学習の集大成のことですね。でもみんなこれを見て、こう思いませんか？ハードルが高いと。当然ですよね。まだ言語も何も学んでいない人にとって、自分の手で何かを作るというハードルはあまりにも高すぎます。企画を考えて設計して、画面と機能を作るという工程は初心者には大変すぎます。これを愚直にしてしまうと、最短でも3ヶ月はかかってしまいます。

確かにプログラミングのクリエイティブな仕事にはポートフォリオは必須です。ポートフォリオがないと、あなたがどんなものを作れるかという証明ができません。でも初心者が全くのゼロからアイデアを考えて、本当に何かを作り出せますか？現役で働いているエンジニアたちが全員そんな手間のかかることをしていると思いますか？答えはNOです。実は0からポートフォリオを生み出す必要は全くありません。コードをフリーで作成に長い時間をかける必要もありません。

今回紹介する学習法を実践してもらうと、最短だと1週間、長くても1ヶ月でポートフォリオを完成させることができます。何を作ろうか悩むということもなくなるし、転職や独立したい人にとっては成功する確率を爆発的に上げることにつながります。プログラミングを学んでみたいという人なら、自分で一通り商品やサービスを作れるようになります。

模倣学習法

というわけで、早速結論から言うと、100%成果の出るプログラミング学習法は「模倣学習法」です。もっと簡単に言うなら、すでにある成果物を作り変える学習法になります。え、どういうこと？すでにある成果物って何？作り変えるってどういう意味？と思っているかもしれませんが、みんな知らないだけで、実際とても簡単な方法です。

まず「すでにある成果物」というのは、学習サイトや学習サービス、YouTubeなどに上がっている成果物のことです。例えばこれを見てください。この学習サイトでは画像のようにSNS風のサービスを作成し、用意していますね。この成果物を作り替えて自分のオリジナルにしようというのが、今回僕が言いたいことです。具体的な方法は後で説明します。

いやでも真似するのはちょっと…と思うかもしれませんが、真似することは悪いことではありません。むしろ真似することが、最短で成果を出す最大の秘訣だったりします。完全なゼロからアイデアを考えられる人なんて、そう多くはありませんよね。僕も何かサービスを作る時は必ず別のサービスを参考にします。

模倣学習法のメリット

iPhoneのデザインだって、昔は独自性があって唯一無二だったけど、今はAndroidのデザインもほとんど同じようなものになっていますよね。少し前に流行っていた荒野行動というゲームも、PUBGというゲームの真似でした。真似することで、ある程度洗練されたものを取り込めるんです。実際の商品ですらこれだけ真似しているのに、ポートフォリオはオリジナルでないといけないなんて、そんなわけないと思いませんか？

そしてこの模倣学習法の最大のメリットは、学習しながらなんとポートフォリオも作れるということです。普通だとプログラミングを学んでから、自分でポートフォリオをゼロから考えて作らないといけませんが、模倣学習法を使うと、学びながらポートフォリオも作れます。やることはシンプルで、真似たものを少し作り変えてあげるだけ。挫折することは絶対にありません。どうでしょうか、これなら簡単だと思いませんか？

というわけで、これから具体的な手順を解説していきます。手順は3Stepで大丈夫です。

模倣学習法の具体的な手順

模倣対象選定
実践
UI修正 + 開発背景の明確化

それぞれ深掘りして説明していきます。

1. 模倣対象選定

今回の方法は模倣、つまり真似することから始まるので、まずはその対象を探さないといけないですね。何かの成果物を最終的に作る学習サイトや学習サービスを使って、真似できるようなコースを探してみましょう。

どんなコースを選べばいいですか？そう思っている人は、今あなたが学んでいる言語を、もしくは学びたい言語やフレームワークを基点に考えてもらって大丈夫です。例えば、あなたがPHPをメインで学んでいるとします。ネットで検索すると、こんなコースが出てきましたね。どうやらPHPとLaravel、Vueという3つの技術を使って、最終的には簡易SNSアプリを作るというコースのようです。

他にもこんなコースもありました。これはどうやらPythonとDjangoを使って、ECサイトを作るコースのようです。この2つのコースでは、最終的に簡易SNSアプリやECサイトを作りますが、みんなが模倣対象となるコースを探すときも、必ず同じように何かしらの成果物を最終的に作るコースを選ぶようにしてください。

どこでコースを選べばいいですか？と思う人は、この2つのサイトから探してみてください。これらを使うことで、いくらでも真似できるものが見つかります。今回の例はこれに決めてみましょう。じゃあコースが決まったら次です。

2. 実践

コースを決めたら、早速やり切りましょう。と言っても、やり方はそれぞれのコースで解説してくれているはずなので、あとはひたすらやるだけです。

もしここでつまずきそうになっても、大体のコースでは質問が無制限でできます。なので、わからないことがあっても、コースを作った人にいくらでも質問ができるので、諦めない限りは必ずやり切ることができます。コースをやり切った後は、次のStepに行きます。

3. UI修正 + 開発背景の明確化

UI修正というのは、具体的に言うとフロントエンドを変えるということです。UIとはフロントエンド、つまり見た目のことです。2の実践で作った成果物のデザインを変えていくのが、この3つ目のStepになります。

さすがにデザインまでパクるわけにはいかないと思うので、自分なりに改良してみましょう。あとはこのポートフォリオがどのように役立つかという背景も明確にしておきましょう。学んで作ったことがどのように役立つのか、こうしたらどうなるのかという開発背景も明確にすることで、より深い理解に繋がります。最終的には、この成果物を元に自分のオリジナルとしても使えるようにしておきましょう。もし自分がこれをどのように活用するのかという背景が明確になれば、より良いものが作れるはずです。

参考になるポートフォリオ

では最後に、未経験からエンジニアに転職された3人のポートフォリオをご紹介します。参考事例を検索し、その完成度の高さに驚きました。ぜひご覧ください。

Webエンジニアの参考例

出典：Makoto Hirao

https://hiraomakoto.jp/

このサイトはフロントエンドエンジニアの平尾さんのポートフォリオです。
このサイトの特徴は海外で働くことも前提にしているために英語で書かれています。また、開いたページの一部が隠れていることによってスクロールをしてもらう意図を持たせているなど魅せる工夫を感じさせられます。
全体が黒で統一され、アニメーションがスムーズなことから魅せたい部分が強調されてつつ、UIが整っている良い参考例になります。

バックエンドエンジニアの参考例

出典：HODA Engineering Laboratory（Hodalab）

https://hodalab.com/portfolio/#

このサイトはバックエンドエンジニアのHodaさんによって作成されたサイトです。
基本的なサイトの構成をしており、非常に見やすく作られている特徴があります。所々に遊び心が散りばめられており、Hodaさんの個性が垣間見えます。
シンプルではありますが、更新がしっかりとされており、読み手に必要な情報が伝わる非常に優れた例です。

インフラエンジニアの参考例

出典：chibiharu Information Technology WebSite（chibiharu’lab）

https://chibinfra-techlab.com/

このサイトはインフラ（クラウド）エンジニアのchibiharuさんのポートフォリオです。
白黒基調で余白が多くシンプルなことが特徴です。

この理由としてインフラエンジニアはフロントエンドの経験が浅いからです。しかし、ポートフォリオがない場合に比べてシンプルなビジュアルでもスキルシート、インフラエンジニアとしての実績が視覚的に理解でき非常に好印象が得られます。

このようにインフラエンジニアなどのフロントエンドの経験が浅くてもポートフォリオを作ることの重要性がわかると思います。

まとめ

今回の記事ではエンジニアのポートフォリオの必要性から作成方法まで解説していきました。エンジニアは自分の技術を磨く、相手に技術を見せる両面で自己理解が非常に大切です。そのためにもポートフォリオを作成し、今後の成長、キャリアパスの再考、転職に活かしてください。

この記事が参考になったら、ぜひフォローして、いいねをお願いします！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

「独学でエンジニアになれる！成功の秘訣と実践方法」

目次

「基礎作り」

「希少性の高いスキルを身につける」

「プログラミング以外のスキルを身につける」

Figma

Figmaの使い方

デザインの考え方

「基礎作り」

「希少性の高いスキルを身につける」

「プログラミング以外のスキルを身につける」

挫折しないプログラミング学習法

暗記学習を捨てる

必要な分だけ学ぶ

ゴールから逆算する

一般的な学習法の限界

ゴールから逆算する学習法

ゴールから逆算する方法

具体的なアクションプラン

最強の学習法

具体的な方法

HTML

JavaScript (script.js)

Progate攻略

環境構築が不要

分かりやすさ

暗記するな

好き嫌いを判断するツールとして使うべし

分からなくても進む

3周以上するな

ケチるな

Progate

成果の出るプログラミング学習法の紹介

模倣学習法

模倣学習法のメリット

模倣学習法の具体的な手順

1. 模倣対象選定

2. 実践

3. UI修正 + 開発背景の明確化

参考になるポートフォリオ

Webエンジニアの参考例

バックエンドエンジニアの参考例

インフラエンジニアの参考例

まとめ