UI設計 スキルシートの書き方｜評価される5つの実例と入力例

エンジニアとして、自身のスキルを正確に伝え、より良い案件やキャリアに繋げるためには、スキルシートの書き方が非常に重要です。
特に、UI設計の経験をどのようにスキルシートに落とし込むかは、多くのエンジニアが悩むポイントでしょう。単に「UI設計を担当」と記載するだけでは、その経験の深さや貢献度を十分に伝えることができません。

この記事では、スキルログの入力画面に沿って、プロジェクト情報、開発プロセス、役割、業務内容、技術カテゴリ、そして最も重要な「成果アピールポイント」をどのように整理すれば、採用担当者や営業担当者に響くスキルシートが作成できるのかを、具体的な例を交えながら解説します。
あなたのUI設計の経験を最大限に活かし、市場価値を高めるためのスキルシート作成を始めましょう。

UI設計（ユーザーインターフェース設計）とは、ユーザーが製品やサービスとどのように対話し、操作するかを定義するプロセスです。具体的には、画面レイアウト、ボタンの配置、ナビゲーション、情報の表示方法などを設計し、使いやすく、直感的で、魅力的なユーザー体験（UX）を提供することを目指します。スキルシートにおけるUI設計の経験とは、単にデザインツールを使えるということだけでなく、ユーザーリサーチに基づいた設計、ユーザビリティテストの実施、プロトタイピング、デザインシステムの構築・運用など、一連の設計プロセス全体に関わった経験を指します。

スキルシートでUI設計の経験を効果的にアピールするには、担当したプロジェクトの概要、具体的な設計内容、使用したツール、そして最も重要な「どのような課題を解決し、どのような成果に繋がったのか」を明確に記載することが求められます。特に、詳細設計フェーズにおけるUI設計は、開発の方向性を決定づける重要な工程であり、その経験を具体的に記述することで、エンジニアとしての専門性と問題解決能力を高く評価してもらうことができます。

UI設計の業務は多岐にわたりますが、スキルシートで具体的に記載すべき主な業務内容は以下の通りです。

• ユーザーリサーチ・分析: ターゲットユーザーのニーズ、行動パターン、ペルソナ設定、カスタマージャーニーマップの作成。
• 情報設計（IA）: サイトマップ、ナビゲーション構造、コンテンツの整理と構造化。
• ワイヤーフレーム作成: 画面の骨子となるレイアウト、要素の配置、機能の流れを定義。
• プロトタイピング: インタラクティブなモックアップを作成し、ユーザーフローや操作感を検証。
• UIデザイン: ビジュアルデザイン（カラースキーム、タイポグラフィ、アイコン）、コンポーネントデザイン。
• ユーザビリティテスト: プロトタイプや実装されたUIを用いて、ユーザーテストを実施し、改善点を発見。
• デザインシステムの構築・運用: 再利用可能なUIコンポーネントやデザインガイドラインを作成・管理。
• フロントエンドエンジニアとの連携: 設計内容を正確に伝え、実装上の課題を共有・解決。
• アクセシビリティ対応: 高齢者や障がい者など、多様なユーザーが利用しやすいデザインの実装。
• デザインレビュー・フィードバック: 関係者からのフィードバックを収集し、設計に反映。

これらの業務を、担当したプロジェクトの文脈に合わせて具体的に記述することが、スキルシートで評価されるための鍵となります。

UI設計の経験をスキルシートに具体的に記述することは、エンジニアとしての市場価値を高める上で非常に重要です。その理由は以下の通りです。

• 専門性の証明: 「UI設計」という言葉だけでは、具体的なスキルレベルが伝わりにくい場合があります。ワイヤーフレーム作成、プロトタイピング、デザインシステム構築といった具体的な業務内容を記載することで、専門性の高さを明確に示せます。
• 問題解決能力のアピール: ユーザーリサーチに基づいた設計やユーザビリティテストの結果を盛り込むことで、単に見た目を整えるだけでなく、データに基づいて課題を特定し、解決策を導き出す能力があることをアピールできます。
• プロジェクトへの貢献度を示す: どのようなUI設計を行い、それがプロジェクトの目標達成（例：コンバージョン率向上、ユーザー満足度向上）にどのように貢献したかを具体的に示すことで、プロジェクトへの貢献度を明確に伝えられます。
• 面談での深掘り対応: 具体的な設計プロセスや工夫した点を記載しておくことで、面談で質問された際に、自信を持って詳細を説明できるようになります。これにより、採用担当者に「このエンジニアは経験が豊富で、自社でも活躍してくれそうだ」という印象を与えることができます。
• 営業担当からの提案力向上: 営業担当者は、スキルシートを見てクライアントにエンジニアを提案します。記載内容が具体的であればあるほど、案件とのマッチング精度が高まり、より有利な条件での提案に繋がりやすくなります。

スキルシートは、あなたの「営業ツール」であり「自己PRの場」です。UI設計の経験を最大限に活かすためにも、これらの重要性を理解し、具体的な記述を心がけましょう。

NG例とOK例を見比べると、評価されやすい書き方の違いが分かりやすくなります。

スキルシートにおけるUI設計の記載方法について、NG例とOK例を比較してみましょう。

項目	NG例（浅い書き方）	OK例（評価されやすい書き方）
業務内容	UI設計を担当	ECサイトのリニューアルプロジェクトにて、ユーザーフローの設計、ワイヤーフレーム作成、プロトタイプ作成を担当。ターゲットユーザーの行動分析に基づき、直感的なナビゲーションと購入プロセスを最適化。Figmaを用いてデザインし、ユーザビリティテストで発見された課題を元に改善を重ね、離脱率を15%削減。
役割	UIデザイナー	UI設計リーダーとして、チームメンバー3名と連携し、デザインガイドラインの策定、主要画面のUI設計、プロトタイプ作成、およびフロントエンドエンジニアとの仕様調整を担当。
成果アピールポイント	使いやすいUIを作成しました。	ユーザー中心設計アプローチにより、直感的で操作性の高いUIを実現。結果として、ユーザー満足度調査で平均スコアが20%向上し、リピート率の増加に貢献しました。デザインシステムを導入し、開発効率を向上させました。

営業担当者は、スキルシートを見てクライアントにエンジニアを提案する際に、以下の点を重視します。

• 案件提案時に伝えやすいか: 記載内容が具体的で分かりやすいか。専門用語が多すぎず、クライアントが理解しやすい表現になっているか。
• 経験範囲が具体的か: UI設計の中でも、どのようなフェーズ（要件定義、基本設計、詳細設計）で、どのような業務（ワイヤーフレーム、プロトタイプ、ビジュアルデザイン、ユーザビリティテストなど）を担当したかが明確か。
• 技術名だけでなく役割が分かるか: 使用したツール（Figma, Sketchなど）だけでなく、設計プロセスやチーム内での役割（リーダー、メンバーなど）が理解できるか。
• 面談で深掘りできる内容か: スキルシートの記載内容が、面談でさらに詳しくヒアリングする際のフックとなるか。具体的なエピソードや成果が盛り込まれているか。
• 成果アピールポイントにつながるか: 設計したUIが、どのようなビジネス上の成果（コンバージョン率向上、離脱率低下、顧客満足度向上など）に繋がったかが具体的に示されているか。

営業担当者は、あなたのスキルシートを「クライアントへの提案資料」として活用します。そのため、クライアントのニーズに合致する経験やスキルが、分かりやすく、かつ具体的に記載されていることが非常に重要です。

企業の採用担当者は、スキルシートを通じて、候補者が自社の求める要件を満たしているか、チームに貢献できるかを見極めようとします。

• UI設計を任せられる範囲: ユーザーリサーチからデザイン、プロトタイピング、ユーザビリティテストまで、一連のプロセスを自律的に遂行できるか。
• 仕様理解の深さ: ユーザーのニーズやビジネス要件を深く理解し、それをUI設計に落とし込めるか。
• ユーザー中心設計への理解: 常にユーザー視点を持ち、使いやすさや分かりやすさを追求できるか。ユーザビリティテストの結果を設計に反映できるか。
• フロントエンドや他チームとの調整経験: デザイナーだけでなく、エンジニアやプロダクトマネージャーなど、他職種との円滑なコミュニケーションや連携ができるか。
• 実装後の手戻りを減らせるか: 精度の高いワイヤーフレームやプロトタイプを作成し、開発チームとの認識齟齬を防ぎ、手戻りを最小限に抑えることができるか。
• デザインシステムへの理解・活用: 効率的な開発と一貫性のあるUIを実現するためのデザインシステムに関する知識や経験があるか。

企業担当者は、あなたのUI設計スキルが、単なるデザイン能力に留まらず、ビジネス目標達成やチーム開発への貢献に繋がるものであるかを評価します。具体的な実績や、課題解決へのアプローチ方法を記載することで、採用担当者に安心感を与えることができます。

UI設計の経験について、面談でよく聞かれる質問とその回答のポイントをまとめました。スキルシートの記載内容を補強するつもりで準備しておきましょう。

• Q1: 担当されたUI設計プロジェクトについて、概要とあなたの役割を教えてください。
  A1: プロジェクトの目的、対象ユーザー、担当したUI設計の範囲（例：新規機能のUI設計、既存機能のリニューアルなど）と、チーム内での具体的な役割（例：ワイヤーフレーム作成担当、プロトタイプ作成担当、デザインリーダーなど）を明確に説明できるようにしましょう。
• Q2: ユーザーリサーチはどのように行いましたか？また、その結果をどのようにUI設計に反映させましたか？
  A2: 実施したリサーチ手法（例：ユーザーインタビュー、アンケート、競合調査など）と、そこから得られたインサイトを、具体的なUIの改善点や新機能のアイデアにどう繋げたかを説明します。
• Q3: ワイヤーフレームやプロトタイプを作成する際に、特に意識した点は何ですか？
  A3: ユーザーフローの最適化、情報階層の分かりやすさ、操作の直感性、ビジネス要件との整合性などを意識した点を具体的に説明します。使用したツール（Figma, Sketch, Adobe XDなど）にも触れると良いでしょう。
• Q4: ユーザビリティテストは実施しましたか？どのような結果が得られ、どのように改善に繋げましたか？
  A4: テストの目的、参加者数、実施方法、そしてテストから得られた具体的な課題点（例：特定のボタンが見つけにくい、操作が複雑で迷うなど）と、それに対する改善策を説明します。
• Q5: フロントエンドエンジニアや他のメンバーとの連携で、工夫した点はありますか？
  A5: 設計意図の正確な伝達方法（例：デザイン仕様書の作成、デザインレビューでの説明）、実装上の課題に対する協力体制、フィードバックの受け入れ方などを具体的に話します。
• Q6: デザインシステムを導入・活用した経験はありますか？どのようなメリットがありましたか？
  A6: デザインシステムの構築経験や、既存のデザインシステムを活用した経験について説明します。一貫性の担保、開発効率の向上、チーム間の連携強化などのメリットを具体的に述べます。
• Q7: UI設計において、最も重要だと考えることは何ですか？
  A7: ユーザー中心設計、アクセシビリティ、ビジネス目標との整合性、拡張性など、自身のUI設計に対する哲学や考え方を述べます。

これらの質問に対して、スキルシートに記載した内容を具体的に補足説明できるように準備しておきましょう。

スキルログでは、詳細設計フェーズのカテゴリとして「ユーザーインターフェース設計」を選択し、具体的な経験を登録できます。以下に、UI設計の経験をスキルログに入力する際の具体例を示します。

プロジェクト名: スマートフォン向け新感覚パズルゲーム　UI/UX設計・開発

開始日: 2023年4月

終了日: 2024年3月

参画中: いいえ

開発プロセス: ウォーターフォール

カテゴリ: ユーザーインターフェース設計

役割: UI/UXデザイナー、システムエンジニア

プロジェクト規模: 50名規模

チーム規模: 10名（UI/UXデザイナー2名、フロントエンドエンジニア4名、バックエンドエンジニア3名、QA1名）

業種: サービス

業務内容:

• ターゲットユーザー（10代～30代のカジュアルゲーマー）の嗜好を分析し、ペルソナ設定およびカスタマージャーニーマップを作成。
• ゲームのコアとなるパズルロジックと、ユーザーが直感的に操作できるようなゲーム画面のUI設計（画面遷移、ボタン配置、アイコンデザイン、エフェクトデザイン）。
• Figmaを用いて、インタラクティブなプロトタイプを作成し、社内およびクローズドβテストでユーザビリティ検証を実施。
• テスト結果に基づき、チュートリアルフローの改善、操作フィードバックの強化、UI要素の配置最適化を実施。
• デザインシステムを構築し、カラースキーム、タイポグラフィ、ボタン、カードなどのUIコンポーネントを定義。これにより、開発チーム全体でのデザインの一貫性を担保し、開発効率を向上。
• フロントエンドエンジニアと密に連携し、デザイン仕様書の作成、デザインレビュー、実装時のフィードバック対応を実施。
• ゲームの進行状況や達成度を視覚的に分かりやすく表示するUI要素（スコア表示、レベルアップ演出など）を設計。

成果アピールポイント:

参画プロジェクトにおいて、ユーザー中心設計アプローチに基づいたUI/UX設計を担当しました。ターゲットユーザーの行動分析とユーザビリティテストの結果を基に、直感的で没入感のあるゲーム体験を提供するためのUIデザインを追求しました。特に、ゲームのコアとなるパズル操作の分かりやすさと、達成感を高める演出デザインに注力しました。その結果、クローズドβテスト参加者からのUIに関する満足度が平均4.5/5となり、リリース後のユーザー定着率向上に大きく貢献しました。また、デザインシステムを導入したことで、開発チーム内でのデザイン共有がスムーズになり、UI実装における手戻りを約20%削減することに成功しました。この経験を通じて、ユーザー体験の向上と開発効率の両立を実現するUI設計の重要性を改めて学びました。

Q1: UI設計 スキルシートで、具体的なツール名を記載すべきですか？
A1: はい、記載することをおすすめします。Figma, Sketch, Adobe XD, InVisionなどの使用経験は、UI設計スキルを具体的に示す上で有効です。どのようなツールをどの程度使いこなせるかを明確にすることで、採用担当者はあなたのスキルレベルをより正確に把握できます。

Q2: UI設計の経験が浅い場合、スキルシートにはどのように書けば良いですか？
A2: 経験が浅くても、学んだことや自主制作物、学習中のプロジェクトなどを具体的に記載しましょう。例えば、「学習中のWebアプリケーションで、ユーザーフローの設計とワイヤーフレーム作成を実施」「ポートフォリオサイトで、自身のUIデザインスキルをアピールするデザインを作成」のように、具体的な行動と目的を記述することが重要です。UI設計の基本的な考え方や、学習意欲を示すことも大切です。

Q3: UI設計 スキルシートで、デザインだけでなく開発経験もアピールすべきですか？
A3: はい、特にフロントエンド開発の経験がある場合は、積極的にアピールしましょう。UI設計者が開発プロセスを理解していることは、エンジニアとの連携を円滑にし、実現可能なデザインを提案するために非常に有利です。HTML/CSSの知識、JavaScriptの経験、レスポンシブデザインの実装経験などを具体的に記載すると良いでしょう。

Q4: UI設計 スキルシートに、デザインシステムに関する経験をどう書けば評価されますか？
A4: デザインシステムの構築経験、または既存のデザインシステムを活用した経験について、具体的な内容を記載しましょう。例えば、「デザインシステムをゼロから構築し、コンポーネントライブラリを作成した」「既存のデザインシステムをプロジェクトに合わせてカスタマイズし、開発効率を向上させた」など、どのような貢献をしたかを具体的に示すことが重要です。デザインシステムがプロジェクトにもたらしたメリット（例：一貫性の向上、開発スピードの向上、保守性の向上など）を添えると、より評価が高まります。

Q5: UI設計 スキルシートで、成果を定量的に示すのが難しい場合はどうすれば良いですか？
A5: 定量的な成果が難しい場合でも、定性的な成果を具体的に記述しましょう。例えば、「ユーザーインタビューで得られたフィードバックを元に、〇〇の操作性を改善し、ユーザーからのポジティブな反応を得た」「チームメンバーとのデザインレビューを通じて、デザインの質を高めることができた」のように、具体的な行動とその結果、そこから得られた学びなどを記述します。また、デザインの意図や、なぜそのデザインにしたのかという背景を説明することも、担当者の理解を深める上で有効です。

Q6: UI設計 スキルシートで、UXデザインとの違いをどう表現すれば良いですか？
A6: UI設計は「見た目」や「操作性」に焦点を当てるのに対し、UXデザインは「ユーザー体験全体」を設計します。スキルシートでは、担当した業務内容に応じて、それぞれの経験を明確に区別して記載すると良いでしょう。例えば、「ユーザーリサーチやペルソナ設定はUXデザインの範疇として担当し、その結果を基に具体的な画面レイアウトやインタラクションを設計するのがUI設計の担当範囲でした」のように、役割分担を明確に説明することで、それぞれの専門性をアピールできます。

UI設計の経験をスキルシートに効果的に記載することは、あなたの市場価値を高め、希望するキャリアパスを実現するための重要なステップです。単に「UI設計を担当」と書くだけでなく、具体的な業務内容、使用したツール、設計プロセス、そして何よりも「どのような課題を解決し、どのような成果に繋がったのか」を明確に記述することが求められます。スキルログのようなツールを活用し、プロジェクト情報、開発プロセス、役割、業務内容、技術カテゴリ、成果アピールポイントを整理して入力することで、採用担当者や営業担当者にあなたのスキルと経験を正確に伝えることができます。

この記事で紹介したNG例とOK例、営業担当者や企業担当者が見るポイント、面談で聞かれる質問などを参考に、あなたのUI設計の経験を最大限にアピールできるスキルシートを作成しましょう。そして、あなたのスキルをさらに磨き、キャリアの可能性を広げるために、ぜひスキルログへの登録をご検討ください。