WEBプログラマーを目指すなら、学習した内容を使って作品を作ることが大事です。
HTML/CSSやJavaScriptを学んでも、実際に作ったものがないと、どのくらい理解できているのか分かりにくいです。
ポートフォリオに載せる作品は、最初から難しいものでなくても大丈夫です。
この記事では、WEBプログラマー初心者向けに、ポートフォリオに載せやすい作品例をまとめます。
ポートフォリオとは
ポートフォリオとは、自分が作った作品や学習内容をまとめたものです。
WEBプログラマーを目指す場合は、自分で作ったWebサイトやWebアプリを掲載します。
たとえば、自己紹介サイト、架空の店舗サイト、JavaScriptのミニアプリなどがポートフォリオになります。
ただ作品を並べるだけでなく、何を使って作ったのか、どこを工夫したのかも書いておくと分かりやすくなります。
最初からすごい作品を作らなくていい
初心者のうちは、最初から本格的なWebアプリを作ろうとしなくて大丈夫です。
いきなり大きなものを作ろうとすると、HTML、CSS、JavaScript、デザイン、レスポンシブ対応など、考えることが多くなります。
まずは小さく作って、少しずつ機能を足す方が進めやすいです。
大事なのは、完成させることと、自分で説明できることです。
作品例1：自己紹介サイト
最初の作品として作りやすいのは、自己紹介サイトです。
自己紹介サイトでは、HTML/CSSの基本を練習できます。
- 名前またはニックネーム
- 簡単なプロフィール
- 学習中の言語
- 作ったもの
- GitHubやSNSへのリンク
最初は1ページだけでも十分です。
慣れてきたら、プロフィール画像やカード型のデザインを追加すると、見た目も整えやすくなります。
作品例2：架空のカフェサイト
HTML/CSSの練習として、架空のカフェサイトも作りやすいです。
実在するお店でなくても、練習用として自分で設定を作れば大丈夫です。
- トップページ
- メニュー紹介
- 店舗情報
- アクセス情報
- お問い合わせリンク
カフェサイトは画像、見出し、文章、ボタン、レイアウトの練習に向いています。
1ページ構成でも作れるので、初心者でも取り組みやすいです。
作品例3：ランディングページ
ランディングページとは、商品やサービスを紹介する1枚のページです。
LPと呼ばれることもあります。
WEB制作では、ランディングページの制作案件もあります。
初心者の練習として作るなら、架空の商品やサービスで作ると分かりやすいです。
- サービスの紹介
- 特徴
- 料金
- 利用の流れ
- 申し込みボタン
LPを作ると、見出し、ボタン、余白、セクション分けの練習になります。
作品例4：ToDoリスト
JavaScriptを学び始めたら、ToDoリストを作るのもおすすめです。
ToDoリストでは、入力フォーム、ボタン、リスト表示、削除機能などを練習できます。
- タスクを入力する
- 追加ボタンを押す
- 一覧に表示する
- 完了したタスクを削除する
JavaScriptのDOM操作やイベント処理を学ぶ練習に向いています。
最初は保存機能なしで作り、慣れたらlocalStorageで保存できるようにすると発展させやすいです。
作品例5：電卓アプリ
電卓アプリも、JavaScriptの練習として作りやすい作品です。
数字ボタン、演算子、計算結果の表示などを作ることで、条件分岐や関数の練習になります。
- 数字ボタンを作る
- 足し算、引き算、掛け算、割り算を作る
- 計算結果を表示する
- クリアボタンを作る
見た目はシンプルで大丈夫です。
まずは計算できることを目標にして、あとからデザインを整えると進めやすいです。
作品例6：天気アプリ
JavaScriptに少し慣れてきたら、天気アプリも練習になります。
天気アプリでは、APIを使って外部のデータを取得する練習ができます。
APIとは、別のサービスからデータを受け取るための仕組みです。
初心者には少し難しめですが、Webアプリらしい作品にしやすいです。
- 都市名を入力する
- 天気情報を取得する
- 気温や天気を表示する
- エラー時の表示を作る
HTML/CSSだけでなく、JavaScriptの非同期処理を学ぶきっかけにもなります。
作品例7：WordPressのブログカスタマイズ
WordPressを学ぶなら、自分のブログをカスタマイズすることも作品になります。
たとえば、テーマの設定、固定ページ、プロフィールページ、メニュー、サイドバーなどを整えるだけでも学習になります。
- トップページを整える
- プロフィールページを作る
- メニューを作る
- お問い合わせページを作る
- CSSで見た目を調整する
WordPressの操作に慣れておくと、ブログ運営だけでなくWeb制作の学習にもつながります。
ポートフォリオに載せるときに書くこと
作品をポートフォリオに載せるときは、作品名だけでなく説明も書きます。
次の内容を入れると分かりやすいです。
- 作品名
- 作った目的
- 使用した技術
- 工夫した点
- 難しかった点
- GitHubのURL
- 公開ページのURL
ただ「作りました」と書くだけより、何を考えて作ったのかが分かる方が伝わりやすいです。
初心者が避けたい作品
初心者のうちは、最初から大きすぎる作品は避けた方が進めやすいです。
たとえば、ログイン機能付きのSNS、予約システム、大規模なECサイトなどは、考えることが多くなります。
もちろん最終的には作れるようになると良いですが、最初の作品としては重いです。
まずは1ページのサイトや小さなJavaScriptアプリから始める方が完成させやすいです。
作品は完成させることが大事
ポートフォリオに載せる作品では、完成度も大事ですが、まず完成させることが大事です。
途中で止まった作品ばかりだと、自分でも何を学んだのか分かりにくくなります。
小さくても完成した作品を増やす方が、学習の記録として残しやすいです。
完成後に少しずつ改善していけば、作品としても見せやすくなります。
まとめ
WEBプログラマー初心者がポートフォリオに載せる作品は、最初から難しいものでなくて大丈夫です。
自己紹介サイト、架空のカフェサイト、ランディングページ、ToDoリストなど、小さな作品から始めると進めやすいです。
大事なのは、作品を完成させて、使用した技術や工夫した点を説明できるようにすることです。
まずは1つ、HTML/CSSで自己紹介ページを作るところから始めてみましょう。
