HTML/CSS/JS基礎レベルでも実践！ポートフォリオで示すデザイン思考とUI/UX配慮
はじめに
未経験からIT分野、特にWeb開発やデザイン関連の職種を目指す際、学習成果をまとめたポートフォリオは自身のスキルやポテンシャルを示す上で非常に重要です。HTML、CSS、JavaScriptの基礎を習得された方が、次にどのように成果を「魅せる」かという課題に直面することは少なくありません。単に技術を羅列するだけでなく、プロジェクトを通じてどのような思考プロセスを持ち、どのような価値を提供できるのかを示すことが、採用担当者の目に留まるための鍵となります。
本記事では、HTML、CSS、JavaScriptの基礎知識に加え、デザインツール初級レベルのスキルをお持ちの読者ペルソナを想定し、自身が作成したプロジェクトにおいて「デザイン思考」や「UI/UXへの配慮」といった側面をどのように取り入れ、ポートフォリオで効果的に示すかについて解説します。これらの要素は、未経験であっても、ユーザー視点や問題解決能力があることを示す強力なアピールポイントとなります。
なぜポートフォリオでデザイン思考やUI/UXを示すべきか
技術的なスキルはもちろん重要ですが、採用担当者は候補者が単にコードを書けるかだけでなく、ユーザーやビジネスの課題を理解し、それを解決するための思考ができるかを見ています。特に、Webサイトやアプリケーション開発においては、最終的にユーザーが利用しやすいか、目的に沿った体験を提供できているかが成功を左右します。
デザイン思考やUI（ユーザーインターフェース）、UX（ユーザーエクスペリエンス）への配慮を示すことは、以下の能力をアピールすることにつながります。
- ユーザー視点: 誰のために何を作るのかを考え、利用者の立場に立って物事を捉える能力。
- 問題解決能力: ユーザーの課題を発見し、それをデザインや機能で解決しようとする思考力。
- 論理的思考: なぜそのデザインや機能を選択したのか、理由を説明できる能力。
- コミュニケーション能力: 意図や思考プロセスを他者（採用担当者）に分かりやすく伝える能力。
これらの能力は、職務経験がない未経験者にとって、今後の成長性やチームでの協調性を示す上で非常に価値の高い要素となります。
プロジェクトで示すべきデザイン思考・UI/UXの具体的な要素
HTML/CSS/JSの基礎レベルとデザインツール初級のスキル範囲内で、プロジェクトにデザイン思考やUI/UXの要素を取り入れ、ポートフォリオで示すための具体的なポイントをいくつかご紹介します。
1. ターゲットユーザーと課題設定
プロジェクトを開始する際に、誰がどのような目的で利用するのか、利用者がどのような課題を抱えているのかを具体的に想定します。
- 例：「〇〇に困っている△△な人たちが、手軽に情報を得られるようにするためのWebサイト」
- ポートフォリオでの示し方：プロジェクト概要や企画フェーズの説明部分で、「ターゲットユーザーをこのように設定し、彼らのこのような課題を解決するためにこのプロジェクトを企画しました」といった形で明記します。なぜそのターゲットを選び、その課題に注目したのか、自身の経験や観察に基づいた理由を述べると説得力が増します。
2. シンプルで使いやすいUI（ユーザーインターフェース）
複雑な機能よりも、基礎技術で実現できる範囲で「分かりやすさ」「使いやすさ」を追求します。
- 例：
- 主要な情報への導線（ナビゲーション）が明確であるか。
- ボタンやリンクの配置、デザインが統一されているか。
- 入力フォームが必要な場合、ラベルや入力例が分かりやすいか、エラー表示が親切か。
- 配色やフォントが情報を読みやすくしているか（デザインツールで作成したトンマナを示す）。
- ポートフォリオでの示し方：「UI設計で工夫した点」といった項目を設け、上記のような具体的な工夫点を挙げます。なぜそのデザインにしたのか、ユーザーがどのように感じることを意図したのか、その理由を技術的な側面だけでなく、ユーザー体験の側面から説明します。デザインツールで作成したワイヤーフレームやデザインカンプ（簡易的なものでも）を掲載し、思考プロセスを示すことも有効です。
3. 基本的なUX（ユーザーエクスペリエンス）への配慮
ユーザーがプロジェクトを通じて得る体験全体を意識します。
- 例：
- ページの表示速度（基礎レベルでは画像の最適化など）。
- レスポンシブ対応（様々なデバイスで利用できるか）。
- 情報の探しやすさ（コンテンツの構造化）。
- 操作した際のフィードバック（ボタンを押した後の変化など）。
- アクセシビリティの意識（alt属性の設定、コントラスト比への配慮など、基礎知識の範囲で）。
- ポートフォリオでの示し方：「ユーザー体験向上のために工夫した点」などの項目で、上記のような点にどのように配慮したかを記述します。例えば、「スマートフォンからのアクセスを想定し、レスポンシブデザインに対応させました」「情報を素早く見つけられるよう、見出しと箇条書きを効果的に使用しました」など、具体的な対応と、それがユーザーにどのようなメリットをもたらすかを結びつけて説明します。
ポートフォリオでの見せ方・伝え方
プロジェクト自体にデザイン思考やUI/UXの要素を取り入れたら、次はそれをポートフォリオサイトで効果的に伝える方法を考えます。
1. プロジェクト解説の構成
単に技術スタックを並べるだけでなく、以下の点を意識して構成します。
- プロジェクト概要: どのような課題を解決するために、誰のために作ったのか（ターゲットユーザーと課題）。
- コンセプト・目的: なぜこのプロジェクトを作ろうと思ったのか、達成したかったことは何か。
- 企画・設計段階:
- ターゲットユーザーの具体像。
- ユーザーが抱える課題。
- その課題を解決するためのアイデア。
- サイトマップや簡単な画面遷移図、ワイヤーフレームなど（デザインツール初級のスキルを活かせる部分）。
- デザインのトンマナや基本的なルール（配色、フォントなど）をどのように考えたか。
- 実装段階:
- 使用技術（HTML, CSS, JavaScript）。
- 技術的な工夫点（レスポンシブ対応の実装方法、インタラクティブ要素の実現方法など）。
- デザイン・UI/UXの工夫:
- 具体的にどのようなUI部品やレイアウトで使いやすさを追求したか。
- 配色やフォント、画像選択の意図（なぜそれを選んだのか）。
- ユーザーの導線を意識した工夫。
- アクセスシビリティへの配慮（alt属性など）。
- 苦労した点と解決策: デザインやUI/UXの実装で難しかったこと、それをどのように乗り越えたか。このプロセス自体が問題解決能力の証明になります。
- 成果・学び・今後の展望: プロジェクトを通じて何を学び、どのような成果が得られたか。もし改善するとしたらどのような点か。
2. 視覚的な表現
言葉だけでなく、視覚情報も活用します。
- 高品質なスクリーンショット: デスクトップ、タブレット、スマートフォンの各デバイスでの表示画面。特にUIの工夫点を示す部分のズームアップなど。
- デザインツールの成果物: ワイヤーフレーム、デザインカンプ、簡単なフロー図など。完成物だけでなく、思考のプロセスを見せることで、デザインツールを単に使えるだけでなく、デザインの考え方を持っていることをアピールできます。
- 動画やGIFアニメーション: インタラクティブな要素や画面遷移など、実際の挙動を示すと理解が深まります。
ペルソナレベルで実現可能なプロジェクト例
HTML/CSS/JS基礎レベルとデザインツール初級のスキルで、デザイン思考やUI/UXへの配慮を取り入れやすいプロジェクト例をいくつか提案します。
- 特定テーマの情報サイト: ある趣味や関心事（例：地元の隠れたお店、特定の学習方法など）に関する情報をまとめたサイト。ターゲットユーザー（例：そのテーマに興味がある初心者）を設定し、彼らが情報を探しやすく、読みやすいUI/UXを意識して構築する。デザインツールでサイト全体の情報構造やページレイアウトを事前に設計するプロセスを見せる。
- シンプルなタスク管理・TODOリストアプリ: 入力、表示、削除といった基本的な機能のみのJavaScriptアプリ。ユーザーが直感的に操作できる入力フォームや、リストの見やすさ、タスク完了時のフィードバックなど、UI/UXに焦点を当てる。
- 簡易的なシミュレーション/診断ツール: 入力された情報に基づいて簡単な計算結果を表示したり、診断結果を返したりするJavaScriptアプリ。入力画面の分かりやすさ、結果表示の見せ方など、ユーザーがストレスなく利用できるUI/UXを工夫する。
これらのプロジェクトは、技術的な難易度を抑えつつ、ユーザー視点での設計やデザイン的な配慮の重要性を学ぶのに適しています。
まとめ
未経験から新しい分野へ挑戦する際、職務経験がないことは避けられない壁です。しかし、学習成果としてのプロジェクトを通じて、単なる技術スキルだけでなく、デザイン思考やUI/UXへの配慮といった、ユーザーやビジネスの視点を持つ能力を示すことは可能です。
ポートフォリオでこれらの側面を具体的に解説し、視覚的に分かりやすく表現することで、採用担当者に対して「この候補者は、ユーザーの課題を理解し、使いやすいものを作るために考えながら開発できる」という印象を与えることができます。
今回ご紹介したポイントを参考に、自身のポートフォリオプロジェクトにデザイン思考やUI/UXの視点を取り入れ、あなたの学習成果をより魅力的に「魅せる」ことに挑戦してください。