ポートフォリオで示す「考える力」：HTML/CSS/JSプロジェクトにおける設計の見せ方
はじめに
未経験から新しい分野へのキャリアチェンジを目指す際、職務経験の不足は大きな壁となり得ます。しかし、ポートフォリオを通じて、これまでの学習で培った技術スキルだけでなく、それらを活用して何を考え、どのように形にしたのか、という「考える力」を示すことができれば、採用担当者に強い印象を与えることが可能となります。
特にプロジェクトやアウトプットを中心としたポートフォリオにおいては、単に完成した成果物を見せるだけでなく、その背景にあるプロセス、とりわけプロジェクトの「設計」段階での思考を示すことが非常に重要です。この段階での思考プロセスは、未経験者にとって最もアピールできるポテンシャルの源泉となり得ます。
本記事では、HTML、CSS、JavaScriptといった基礎的なスキルセットを持つ方が、ポートフォリオでどのようにプロジェクトの「設計」を見せ、「考える力」を効果的にアピールできるのかについて解説します。
プロジェクトにおける「設計」とは何か？なぜポートフォリオで重要なのか？
プロジェクトにおける「設計」とは、単にコードを書く前に行うワイヤーフレーム作成やデザインカンプ作成だけを指すものではありません。プロジェクトの目的や要件を明確にし、それを実現するための機能、情報構成、ユーザーインターフェース、技術的なアプローチなどを具体的に検討し、構造化していく一連の思考プロセスを指します。
具体的には、以下のような要素が含まれます。
- 要件定義: 何を作るのか、その目的は何か、誰がどのように利用するのか、必須機能は何かなどを明確にする。
- 情報設計: ユーザーが必要とする情報は何で、それらをどのように整理し、構造化するかを検討する。
- UI/UX設計: ユーザーがスムーズに目的を達成するために、どのような画面構成や操作性にするかを検討する。ワイヤーフレームや簡単な画面遷移図などを作成することもあります。
- 技術選定/構成検討: 実現したい機能に対して、どのような技術要素（HTMLの特定のタグ、CSSのレイアウト手法、JavaScriptの記述方法やライブラリなど）を選択するか、全体のコード構成をどうするかなどを検討する。
なぜ、この「設計」プロセスをポートフォリオで見せることが重要なのでしょうか。未経験者の場合、高度な技術スキルや大規模な開発経験を示すことは難しいかもしれません。しかし、採用担当者は技術スキルだけでなく、候補者が持つ「ポテンシャル」を重視しています。「ポテンシャル」とは、未知の課題に対する問題解決能力、論理的思考力、計画性、そして学習意欲などを指します。
設計プロセスを丁寧に示すことは、これらのポテンシャルを具体的に伝える有効な手段となります。
- 問題解決能力: ユーザーの課題やプロジェクトの目的に対して、どのような解決策を考えたのか。
- 論理的思考力: なぜその機能が必要なのか、なぜその構成にしたのか、という意思決定の根拠を論理的に説明できるか。
- 計画性: 完成までのステップをどの程度具体的に考えられているか。
- 学習意欲: 知らないことに対してどのように調べ、技術的な選択を行ったか。
これらの要素は、設計という思考プロセスの中に色濃く現れます。採用担当者は、完成物だけでなく、その背景にあるあなたの思考を読み取ろうとしているのです。
HTML/CSS/JS基礎レベルでの設計プロセス例
HTML/CSS/JSの基礎スキルで実現可能なプロジェクトでも、設計プロセスを意識することは十分に可能です。例えば、以下のようなプロジェクトを考えてみましょう。
- 簡単なTODOリストアプリケーション
- 計算機能付きの簡単なWebサイト
- 特定のテーマに沿ったポートフォリオサイト自体
- 簡単なスライドショーやタブ切り替え機能を備えた情報サイト
これらのプロジェクトに取り組む際、漠然とコーディングを開始するのではなく、まずは「設計」から入ることを意識します。
1. 要件の整理
「TODOリストを作ろう」というアイデアがあるとしたら、まず「誰が」「何のために」「どのような機能が必要か」を具体的に考えます。 * 例: 「個人が日々のタスクを管理するため」「タスクの追加、完了チェック、削除ができる」「タスクをテキストで入力できる」など。
2. 情報とUIの検討
整理した要件に基づき、画面上にどのような情報が必要か、それらをどのように配置すればユーザーが使いやすいかを検討します。 * 例: 「タスク入力欄」「追加ボタン」「タスクリスト」「各タスクの横に完了チェックボックスと削除ボタン」など。 * 簡単な手書きのワイヤーフレームや、デザインツール（Figmaなどの初級操作でも十分です）で画面イメージを作成してみます。この際、「なぜこのレイアウトにしたのか」「このボタンはなぜここにあるのか」といった理由を考えながら進めます。
3. 技術的なアプローチの検討
実現したい機能に対して、基礎スキルでどのように実装するかを検討します。 * 例: 「タスクリストをHTMLでどう表現するか」「追加ボタンが押されたらJavaScriptでどうタスク要素を生成し、リストに追加するか」「完了状態はCSSでどう表現するか」「タスクデータを保存するか（localStorageなど、可能であれば）」など。 * 複数の実装方法が考えられる場合、「なぜこの方法を選んだのか」を検討します。（例: 「今回は学習目的のため、ライブラリを使わず素のJavaScriptで実装することにした」など）
4. タスク分解
プロジェクトを完成させるために、どのようなステップが必要か、小さなタスクに分解します。（例: 「HTML構造の作成」「基本CSSスタイリング」「タスク追加機能の実装」「タスク完了機能の実装」「タスク削除機能の実装」など）
この設計プロセスで最も重要なのは、「なぜそう考えたのか」という思考の根拠を言語化することです。この言語化が、ポートフォリオで「考える力」を見せるための土台となります。
設計プロセスをポートフォリオでどう見せるか？
設計プロセスをポートフォリオで効果的に見せるためには、単に完成したコードや画面を提示するだけでなく、プロジェクトの説明の中に設計に関する情報を意図的に盛り込む必要があります。
プロジェクトの解説項目に、以下のようなセクションを追加することを検討してください。
- プロジェクト概要: プロジェクトの目的やターゲットユーザーを明確に説明します。ここで、解決しようとした課題や提供価値に触れることで、思考の出発点を示せます。
- 設計コンセプト/こだわり: このプロジェクトで特に意識した設計上のポイントを記述します。（例: 「シンプルで直感的な操作性」「視覚的な分かりやすさ」「将来的な機能拡張の可能性を考慮した構造」など）
- 情報設計/UI設計: 作成したワイヤーフレームや画面フロー図などを掲載し、「なぜこのような情報配置にしたのか」「なぜこの操作方法を選んだのか」といった思考のプロセスを具体的に説明します。デザインツールで作成したものでも、手書きをデジタル化したものでも構いません。
- 技術選定/実装方針: 利用した技術（HTML, CSS, JavaScriptの具体的な機能や書き方など）をリストアップするだけでなく、「なぜこの技術を選択したのか」「実装にあたってどのような方針を立てたのか」といった技術的な意思決定の理由を記述します。（例: 「保守性を考慮し、CSS設計にはBEMの命名規則を採用した」「ユーザー体験を損なわないよう、JavaScriptの処理は非同期で行った」など）
- 苦労した点と解決策: 設計段階や実装中に直面した課題や迷い、それをどのように考え、解決策を見出したのかを具体的に記述します。設計の見直し、代替案の検討など、思考の試行錯誤の過程を示すことが重要です。
- 学びと今後の展望: プロジェクトを通して設計に関して何を学んだのか、今回の経験を今後どのように活かしたいのかを記述します。これは、あなたの成長性や学習意欲を示すことに繋がります。
これらの項目を記述する際は、「〜を作りました」だけでなく、「〜という課題を解決するために、〜と考え、〜という設計にしました。その結果、〜という効果が期待できます。」のように、思考のプロセスとその結果としての設計、そして期待される効果までを論理的に繋げて説明することを意識してください。
未経験者が設計で差をつけるためのヒント
基礎スキルを持つ未経験者が、設計というプロセスをポートフォリオで効果的に見せるために、いくつか実践できるヒントがあります。
- 小さなプロジェクトでも設計を意識する: 大規模なプロジェクトでなくとも、ToDoリストのようなシンプルなものでも設計は存在します。まずは小さな規模で、要件定義、情報整理、簡単なUI検討、技術的なアプローチ検討といったプロセスを意識的に行ってみてください。
- 既存の優れたアウトプットを分析する: 普段利用しているWebサイトやアプリケーションが「なぜ」使いやすいのか、どのような情報配置になっているのか、どのような操作で目的を達成できるのか、という視点で観察し、自分ならどう設計するかを考えてみる練習をします。
- 思考のプロセスを記録する: 設計段階で考えたこと、悩んだこと、試したこと、決定したことなどをメモしておくと、後からポートフォリオに記述する際に役立ちます。手書きのノート、テキストファイル、デザインツールのコメント機能など、方法は問いません。
- デザインツールの基本操作を学ぶ: Figmaなどのデザインツールは、UI設計や情報設計を視覚的にまとめるのに非常に役立ちます。高度なデザインスキルは不要ですが、ワイヤーフレーム作成などの基本操作を習得することで、設計意図をより分かりやすく伝えることが可能になります。
- 設計意図を言葉にする練習: 作成した設計や完成した成果物を見ながら、「なぜこう作ったのか」を第三者に説明する練習をします。これにより、思考を論理的に整理し、伝える力を養うことができます。
まとめ
ポートフォリオは、単に技術スキルや完成した成果物を見せる場ではありません。特に未経験者にとっては、その背景にある「考える力」、すなわち問題を発見し、解決策を考え、計画を立て、実行するポテンシャルを示すことが非常に重要です。
プロジェクトの「設計」というプロセスは、この「考える力」を最も具体的に示すことができる要素の一つです。HTML/CSS/JSといった基礎スキルで実現可能なプロジェクトであっても、要件定義、情報設計、UI/UX設計、技術選定といった設計プロセスを意識し、その思考過程をポートフォリオで丁寧に言語化・視覚化して見せることで、採用担当者にあなたのポテンシャルを強くアピールすることが可能となります。
ぜひ、次のプロジェクトからは「設計」のステップを意識し、ポートフォリオで「考える力」を存分に魅せてください。それが、あなたのキャリアへの道を切り拓く一歩となるでしょう。