Coding
独学 ポートフォリオ制作までの一年間の記録
Coding
この記事は〜分で読めます。
2025年からWeb制作学習をスタートし、2026年5月にポートフォリオサイトを完成。
知識０の状態からポートフォリオサイトを作成するまでの学習方法をまとめました。
１−０ まずは情報収集
プログラミング言語にはたくさんの種類があります。
プログラミング言語の正確な数を特定するのは非常に難しいのですが、一般的には「数千から数万種類」存在すると言われています。
| Web制作 (HP/WP) | HTML/CSS, PHP, JavaScript |
| Webサービス開発 | TypeScript, Ruby, Go, Python |
| AI・機械学習 | Python, R |
| スマホアプリ | Dart, Swift, Kotlin |
| ゲーム開発 | C# (Unity), C++ (Unreal Engine) |
プログラミング初心者からすると何が何だかさっぱりわかりません。
そこで、まずはWeb制作に必要な言語を調べるところから。
当時は、AIを使う習慣がなかったので無料かつ学習しやすいYoutubeで調べました。
私が参考にしたのはこちらの動画です。
自分が欲しかったWeb制作に必要な言語、学習手順まで大まかにまとめてくれています。
この動画では、
- HTML / CSSを学ぶ (サイトに文字を表示したり、文字の大きさや色を変えたりする言語）
- ノーコードでサイトを制作する（プログラミング言語がわからない人でもサイトを制作できるアプリのようなものがあります。）
- 環境構築する（プログラミング言語を扱うためのツールなどを用意）
- Progate 道場コースに挑戦する (プログラミング言語学習ツール)
- JavaScript / jQueryを学ぶ （HTML / CSSだけではできないアニメーションなどを追加する言語）
- サイトを写経する (既にあるサイトのコードを真似して再現する）
- ポートフォリオサイトを作る
- Sassを学習する (手順１で学習したCSSの入力時間を短縮するためのサポート言語)
- デザインカンプをコーディングする (サイト制作の際はいきなりコードを書くのではなく、大まかなデザインを先に作ります。
- PHP SQLを学ぶ(ここまでに学習したHTML / CSS / JavaScript / jQuery だけでもサイトは作れるのですが、この後必要になるWordPressというツールを扱うための事前学習です）
- WordPress自作テーマを学ぶ
- WordPress既存テーマを学ぶ
WordPressとはノーコードでサイトの制作、更新をするためのツールです。
手順１１の自作テーマは自分でコードを書いてサイトを作り、それを更新しやすくするために用いますが、１２の既存テーマは元から用意された枠の中でサイトを作り、記事を投稿、更新したりできます。
有名どころだと、Cocoonという既存テーマがあります。
よく使われている既存テーマなのでこういうサイトを多分みたことがあると思います。
これが元から用意された枠組みでこれを自分で更新、カスタマイズしていくのが既存テーマを用いたサイト制作になります。
この学習手順をもとに学習を進めていくのですが、実際に私が行った手順の詳細は
- HTMLの基礎をYoutubeで学習する。
- CSSの基礎をYoutubeで学習する。
- HTMLとCSSのみで作成されたサイトの模写コーディングを複数行う（コードを書くことをコーディングと言います。）
- JavaScriptの基礎をYoutubeで学習する。
- jQueryの基礎をYoutubeで学習する。
- HTML CSS JavaScript jQueryで作成されたサイトの模写コーディングを複数行う
- Sassの基礎をYoutubdeで学習する。
- 手順３と６で行ったCSSのコードをSassを用いて書き直す
- SQLの基礎をYoutubeで学習する
- PHPの基礎をYoutubeで学習する
- ここまで学習した言語を全て用いた掲示板(2ちゃんねるのようなもの）やクイズサイトを作る（この辺りで学習にAIを活用し始めます。）
- WordPressの基礎(既存テーマ）を本で学ぶ（YoutubeやAIでよかったと思いますが、図書館に行くようになり、そこにあったWordPress初心者本を使いました。）
- WordPressの自作テーマを本で学ぶ(【改訂第3版】WordPress 仕事の現場でサッと使える デザイン教科書 [WordPress 6.x対応版] これも図書館にあったものですが、コーディングしたサイトを自作テーマにするための基礎が学べるのでおすすめです。）
- Figmaの基礎をYoutubeで学習する
- Affinityの基礎をYoutubeで学習する
のように、ほぼYoutubeで学びました。（全て無料です。）
冒頭の動画を参考にしながら最速でゴール（実際の案件を受注すること）に辿り着くように調べていたら手順は若干変わりました。
大まかに手順をまとめたので次は手順の詳細をまとめます。
１ HTMLの基礎をYoutubeで学習する。
誰でもそうですが、最初はプログラミング言語とは何か、HTMLとは何かというような段階でした。
そこで見つけたのがTechAcademy様のHTML入門講座でした。
1章ごとに短くまとめられているのでストレスなく隙間時間でも学習できます。
私はとにかく、この動画を参考に手を動かすという方法で２〜３週はこの再生リストを再生したと思います。
そうしてHTMLの基礎を叩き込んだ後に、全く同じ方法でCSSの基礎を叩き込みます。
２ CSSの基礎をYoutubeで学習する。
こちらもHTML同様TechAchademy様のCSS入門講座です。
HTML/CSSの基礎はTechAcademy様の動画をもとに学習させていただきました。
３ HTMLとCSSのみで作成されたサイトの模写コーディングを複数行う
手順２までで、英会話でいう挨拶レベル程度は学べたと思います。
ただ、実際のサイトはもっといろんなタグやプロパティ（英単語のようなもの）を扱うのでここから語彙力を高めていきます。
とはいえ、ここからは漫画やアニメなどで見るハッキングをするシーンのようなかっこいい画面で学習することになるのでワクワクすると思います。
まずコーディングを行うために必要なツールがコードエディタ（プログラミング言語を理解してくれるツール）でした。
コードエディタにもたくさん種類がありますが、最も使われているのがVs Code(Visual Studio Code)です。
設定など細かく説明するとたくさんありますが、この段階ではコーディングが行えればそれでいいので、
私はこちらの動画を参考にインストールしました。
ともすた様の動画はこれから何度も活用させていただきます。
そして、本題の模写コーディングは、
【模写コーディング】おすすめの練習サイト【入門編～上級編】
https://code-jump.com/coding-recommend
こちらのサイトを参考に進めていきます。
- 【①：入門編】ウォーミングアップ用の模写サイト
- 【②：初級編】簡単なHTMLとCSSでできるLPの模写サイト
- 【③：中級編】複数ページの模写サイト
- 【④：上級編】2カラムレイアウトの模写サイト
- 【⑤：応用編】jQueryを使用した動きのある模写サイト
- 【⑥：実践編】実案件をモデルにした仮想案件にチャレンジ！
上記の入門編〜上級編までのサイトのコードをひたすら真似してVsCodeにコーディングしていく形です。
応用編〜はこの後JavaScript jQueryを学習後に取り組みます。
実際に模写コーディングを行う際はSafariでもChromeからでもコードを見ることができるのですが、Safariは設定が必要なのでChromeがおすすめです。
サイト上を右クリックして「検証」を選択します。
すると、このような画面が開かれ、コードを見ることができます。
HTMLコードは赤線で囲っている枠の中に、
CSSコードはソースという画面から選択して一気に見ることもできますし、HTMLコードの各要素を選択するとスタイルという項目にその要素に適用されているCSSコードを個別に見ることもできます。
これらのコードを模写しながら学習を進めていくのですが、先ほども言ったように、動画で学んだのは基礎ですので、知らないコードがたくさん出てくると思います。
初めて見るコード、わからないコードが出てきたらAIに「このコードの意味を教えて」と質問して自分で扱えるコードの数を増やしていくようなイメージです。
模写コーディングは一回で終えるのではなく、複数回行います。
１回目は知らないコードだらけなので時間がかかりますが、
２回目以降は理解できていないコード、思い出せないコードだけを調べていくので回数を重ねるごとにスピードはどんどん上がっていきます。
これを初級編から上級編まで全て行いましょう。
気づいたらスラスラコードが書けるようになっているはずです。
ここまでで静的なサイト（ただ閲覧するだけのサイト）は作れるようになりました。
４ JavaScriptの基礎をYoutubeで学習する
次は動的なサイト（閲覧側のクリックなどのアクションをきっかけに変化するサイト）を作るための学習です。
JavaScriptの基礎を学べば、 スライドショー、ハンバーガーメニュー、スクロール連動エフェクトの実装など今まで作ったサイトに動きをつけることができます。
JavaScriptは、現代のWeb開発において「最も汎用性が高い言語」の一つです。もともとはブラウザに動きをつけるための言語でしたが、現在はサーバー、アプリ、AIなど、あらゆる分野で活用されています。
ですのでWeb制作だけでなく将来役立つ可能性大な言語になります。
私が学習に使ったのはお馴染みTechAcademy様のはじめてのJavaScriptシリーズです。
５ jQueryの基礎をYoutubeで学習する
jQueryとはJavaScriptのライブラリの一つで、JavaScriptを短く早く書くためのものです。
画像を自動で横にスライドさせるSlickスライダーなどもこのjQueryで書かれています。
JavaScriptを簡易的に扱えるようになるため今後のWeb制作に大きく役立ちます。
６ HTML CSS JavaScript jQueryで作成されたサイトの模写コーディングを複数行う
ここまででHTML CSS JavaScript jQueryの４つの言語を学びました。
短期間で来れた人は大丈夫だと思いますが、時間をかけてここまできた場合、最初に学んだHTML CSSを忘れかけている人もいると思います。
なので、手順４で扱った模写コーディングの応用編でこれまで学んだ言語を総復習しましょう。
実践編に関しては必要があると感じたら挑戦してみてください。
私はお金をかける余裕がなかったため、スルーしました。
【模写コーディング】おすすめの練習サイト【入門編～上級編】
https://code-jump.com/coding-recommend
検証ツールは、Chromeからサイトにアクセスし、右クリック->「検証」で開くことができましたね。
では、JavaScript jQueryのコードはどこで見るかというと、
CSS同様ソースという項目に「~~.js」というファイルがあるのでこれをクリックします。
簡単なアニメーションの実装なので、思ったより短いコードが表示されると思います。
そのコードがHTML / CSSコードを自動的に書き換えることでサイトに動きをつけることができます。
手順４同様、何度も繰り返しコーディングをし、その都度理解できていないコードは調べるようにします。
「~~.js」というファイルに書かれたコードがHTML CSSのコードとどのように関わっているかしっかり理解しましょう。
７ Sassの基礎をYoutubdeで学習する。
SassとはCSSを早く簡単に書くためのプリプロセッサーです。
標準的なCSSは、シンプルで分かりやすい反面、大規模なサイト制作では「同じ色を何度も書くのが面倒」「コードが長くなって管理しにくい」という課題があります。
プリプロセッサーを使うと、通常のCSSにはない「便利な機能」を使って効率的にコーディングし、最終的にブラウザが読み込める「普通のCSS」へ自動書き出し（コンパイル）することができます。
ものすごく簡単にいうとJavaScriptとjQueryの関係に似たようなものです。
異なる点はSCSSをもとにCSSコードを機械が書き直してくれるという点です。
header {~~~ : ~~~;}
header nav {~~~: ~~~;}
header div {~~~: ~~~;}
と何度もheaderという文字を入力してその後にnavやdivをしていして書いてきたと思いますが、Sassを用いると
header {
~~~: ~~~;
nav {~~~: ~~~:}
div {~~~: ~~~;}
}
このように書くことができます。このコードを上記の様なCSSコードに書き直してくれる機能があるので、コーディングのスピードアップができます。
小さい規模のサイトを模写してきたのでわざわざ学習するほどのものか？と思うかもしれませんが、扱うサイトの規模が大きくなるにつれて、コーディング時間が短縮できるようになるので是非、学習しましょう。
CSSのコードを理解していれば学習コストはそれほど高くないです。
私がSassを学習に使用したのはともすた様の次の動画シリーズです。
ここでSassの基礎を学んだら実際にSassを使うことに慣れていきましょう。
８ 手順３と６で行ったCSSのコードをSassを用いて書き直す
手順３と６で扱ったサイトのCSSコードをSassを使って書き直します。
Sassに関しては何度も繰り返さなくても初級編から応用編まで一周すれば十分過ぎるほどです。
一番難易度の高い応用編だけでも足りるかもしれませんが、私は一周しました。
９ SQLの基礎をYoutubeで学習する
ここまできたらWordPressまであとちょっとです。
今までのステップでは、誰が閲覧しても同じサイトを制作してきましたが、SQLとPHPを学ぶことで
「サイトの閲覧者によって表示する内容を変える」といったことができるようになります。
Amazonをイメージするとわかりやすいです。
Amazonにはたくさんの商品のデータが登録されており、おすすめ商品などそれぞれのユーザーに合わせた情報が表示されています。また、会員登録、ログイン、ショッピングカートに入れる、購入するなどユーザーが行えるアクションはたくさんあります。
この商品データや会員情報を保管しておくためのものがデータベースです。
このデータベースを操作するための言語がSQLで、データベースから情報を取得しユーザーに表示するための言語がPHPです。
ややこしいかもしれませんが、
SQLはプログラミング言語ではなく、データベースを操作する言語（情報を登録するなど）
PHPはその登録された情報をユーザーに表示させるための言語
これくらいに理解していれば学習していくうちに違いがわかると思います。
ですので、先にSQLを学習してからPHPを学習するのがいいと思います。
私はともすた様のDB + SQL入門シリーズで学習しました。
環境構築まで教えてくれるのでおすすめです。
１０ PHPの基礎をYoutubeで学習する
SQLでデータベースの操作を学んだらPHPまでセットで学びます。
SQLを学習したことでデータベースを操作するための言語という意味がわかったと思います。
PHPは学習したデータベースを実際にWeb制作で使うための言語になります。
PHPの学習に使用したのはプログラミングアカデミー様のPHPシリーズです。総集編もあるのでまとまった時間がある人はそちらでもいいかもしれませんが、内容は特に変わりません。
１１ ここまで学習した言語を全て用いた掲示板やクイズサイトを作る
PHPとSQLの基礎を学んだので、実際に使ってみようと思ったのですが、これまでのように模写コーディングに適したサイトが見つかりませんでした。
模写するためには検証ツールで閲覧できるソースコードと違い、データベースにアクセスしてデータベースの構造や会員情報などを閲覧する必要があります。（もちろん、そんなことは不正アクセスになるためできません。）
なので、生成AI（Geminiがおすすめ）を使用してログイン機能を合わせた掲示板とクイズサイトを作成しました。
Geminiに「ログイン機能のある簡単な掲示板のコードを作成して」と頼むとスラスラとコードを書いてくれます。
この手順１１は、後々WordPressで自作テーマを扱う際に、WordPressが目に見えないところでどのような動きをしているのかイメージしやすくするために行います。
WordPressのサイトに記事を投稿するための画面です。
この編集画面に記事を書いて公開するとサイトにこの記事が表示されるのですが、ざっくり流れを説明すると
WordPressはこの記事のタイトル、本文、サムネイル画像など、他にもたくさんの種類の情報をデータベースに一度保存します。
そこに保存したデータを取り出してサイトに表示する。
自作テーマではPHPコードで the_title(); と書くだけでこの投稿のタイトルだけを表示したり、サムネイル画像だけを表示するなどが可能なわけですが、このコードを実行した後のWordPressが裏側で何を行なっているのかイメージできるようになります。
なので、「裏側なんか知るか」という方は飛ばしても問題ないかもしれません。
今までなんとなく使っていたログイン機能や掲示板やSNSの投稿と表示の流れなど興味がある人はぜひチャレンジしてみてください。
１２ WordPressの基礎(既存テーマ）を本で学ぶ
みなさん、お待ちかねのWordPressです。
世界中に存在するすべてのWebサイトのうち、約43%〜45% がWordPressで構築されています。
- 全Webサイトの約3枚に1枚以上がWordPressで作られている計算になります。
- この数字には、個人ブログから「NASA」や「ホワイトハウス」のような政府機関、さらに「ディズニー」などの大企業の公式サイトまで含まれています。
WordPressのような「サイトを管理するシステム」のことをCMSと言います。
Shopifyは聞いたことがあるかもしれませんが、これもCMSに分類されます。
CMSを使っているサイトだけに絞ると、その割合はさらに跳ね上がります。
- CMS市場におけるシェアは約60%〜65% に達しています。
- 2位以下のShopifyやWixといった競合サービスに圧倒的な差をつけており、実質的に「Web制作の標準インフラ」といえる状態です。
ですので、これからサイトを制作したいという人もWordPressを使ったサイトを作る確率がものすごく高いわけですね。つまりWeb制作において必須なスキルになると思ってください。
冒頭でも説明した通り、WordPressはコードがわからない人でもサイトを公開できるように既存テーマというものが存在します。
ここまで学習してきた方は既存テーマじゃなくて自作テーマを学びたいと思うかもしれませんが、いきなり自作テーマ学習に取り掛かると覚えることが多過ぎるので、まずはWordPressの操作方法を学ぶつもりで取り組んでください。
私はWordPressに関しては本で学習したのでおすすめのYoutube動画はありませんが、実際に学習に使用した本を載せておきます。
WordPressの基礎と基本操作を学べればいいので、本に従って一周したら次の自作テーマ学習に取り掛かって大丈夫です。
１３ WordPressの自作テーマを本で学ぶ
続いて、WordPress自作テーマ学習です。
既存テーマとは違い皆さんが今まで学習してきたようにコーディングしたサイトをテーマ化してWordPressで管理するための学習です。その名の通りテーマを自作するわけです。
HTMLサイトをWordPressのテーマにするためには様々なルールがあり、新しくWordPress専用の関数なども学ばないといけません。(とは言っても簡単なPHPコードなのでご安心を)
自作テーマはカスタマイズも自由自在なのですが、自分でコードを書くだけではなくプラグインといったWordPress内のアプリのようなものを使って簡単にカスタムすることもできます。
それらを学ぶために私が使用したのが次の本です。
この本で自作テーマの基本的な部分がだいたい学習できると思います。
１４ Figmaの基礎をYoutubeで学習する
手順１３まででWordPressを用いたサイトを自力で作れるようになったところで、
「さっそくポートフォリオサイトを作ろう！」と意気込んでいましたが、肝心なデザインをどうするかを忘れていました。
今まで模写コーディングをした以降、簡単な掲示板、クイズサイトは作りましたが、デザインには特に拘らずにここまできたのでデザインについて調べます。
デザインカンプ作成に使うツールにもAdobe製品など色々あるのですが、今はFigmaを使うことが多いです。
理由は「一つのデザインプロジェクトを多人数で共有しそのプロジェクト内にコメントを残して他のメンバーに知らせる」などできることがとても多いです。
なのでこれから学習する方はFigmaを使うのをお勧めします。（基本的な機能は完全無料で公式サイトからインストールできます。）
私が学習に使用したのはあやか様の二つの動画です。
まずは基本操作を学ぶために模写デザインしているのを真似します。
多少説明が抜けている部分もあるのでわからないときはAIに相談しましょう。
そして、絶対にやっておいて欲しいのがオートレイアウトの学習です。
オートレイアウトとは複数の要素をFigmaがある程度自動でレイアウトしてくれる機能です。
CSSのflexboxのようなイメージでサイト全体をPCサイズからスマホサイズにしても綺麗にまとまるように調整してくれます。
私はこれをやらずにポートフォリオサイトのデザインカンプを作成してしまったため、レスポンシブの段階で大きくつまずきました。
これでポートフォリオサイトの大まかなデザインは作れるようになったと思います。
１５ Affinityの基礎をYoutubeで学習する
次に必要になるのが画像編集ツールです。
主流はAdobe製品のPhotoshopやIllustlatorなどの有名なツールなのですが、サブスクリプション制で結構な金額になります。
なので対抗馬としてAffinity製品というものがあるのですが、比較するとこんな感じです。
| ソフト名 | Adobeのライバル | Web制作（Nagataさん）での主な用途 |
|---|---|---|
| Designer (買い切り 10,400円） | Illustrator 3,280円/月 (年間プラン) | 和の装飾パーツ、ロゴ、アイコン、図解制作 |
| Photo (買い切り 10,400円） | Photoshop 3,280円/月 (年間プラン) | 写真の明るさ調整、合成、背景画像のテクスチャ加工 |
| Publisher (買い切り 10,400円） | InDesign 3,280円/月 (年間プラン) | ポートフォリオの構成案、パンフレット制作 |
このように結構コストがかかります。
ですが、AffinityがDesigner, Photo, Publisherの３つの機能をまとめたAffinityというツールを2025年10月末に完全無料化しました。
現在は誰でも無償でプロ版の全機能を利用できるという、クリエイティブ業界でも非常に大きな変化が起きています。
Affinityは公式サイトのダウンロードページからインストールできます。
https://www.affinity.studio/ja_jp/download
これらのツールに関しては主流がAdobe製品にはなるので、どちらがおすすめとは言えないのですが、まずは無料で編集を学びたいという方はAffinityを使ってみてください。
私の場合はフリー画像や画像生成AI(Canvaがおすすめ)で生成した画像のテイストをポートフォリオサイトに合わせたものに変えたり、画像がら使いたい部分だけを切り抜いて透過画像やwebpに変換するために使っています。
AffinityはAdobe製品と違って使い方などの動画が少ないのが問題ではあるのですが、
AIに質問するとある程度答えてくれるので今のところは困っていません。
切り抜きに関してはCanvaデザイナー Sayaka様の切り抜き法５選という動画を使用して学びました。
特にチャンネルを利用した切り抜きは繊細な切り抜きが必要な場合などに役立つのでぜひ習得しておいてください。
当サイトのサイトロゴやSNSのプロフィール画像などもAffinityを使って制作したものです。
１６ ポートフォリオサイト制作へ
ここまで学習すればあなたのイメージするサイトは作ることができると思います。
ぜひ、ポートフォリオサイトを作ってみてください。
あとはポートフォリオサイトを作って案件を受注するだけと言いたいですが、まだ経験が足りない部分が大きいです。
単純なデザイン力に関してもそうですが、デザインからサイトのWordPress化までにどれくらいの制作期間がかかるのか、UI / UXデザインなどもそうですし、SEOやセキュリティ対策などあげればキリがありません。
今ポートフォリオサイトを完成させてすぐにこの学習記録をまとめています。
次は、ポートフォリオサイト制作で得た学習記録、その次はまた別の方法で得た学習記録などを上げていくつもりです。
とにかく何かを制作して、知識や経験を得る。これを繰り返していけば案件受注に辿り着けると思います。
ぜひ皆さんもここで諦めずに、挑戦し続けてください。
