Jakub Krehel

物体の説明、写真、CADモデルをもとに、形状や組み立てを伝える静的な技術図を作成します。拡大や色変更ができる閲覧ページと、SVG・PNG・PDF形式での出力に対応します。

• 組み立てを説明する分解図の作成
• 指定寸法に基づく正投影図の作成
• 写真から物体の形状を図解したいとき

キーボード操作や読み上げ、フォーム、拡大表示を点検し、WCAG 2.2に照らして問題を修正します。操作できない箇所と根拠を整理するスキルです。

• キーボードだけで操作を点検したいとき
• 操作名や読み上げ通知を直したいとき
• フォームのラベルとエラー表示の改善

選んだ画面部品の読み込み中・空・エラーなどを、実データに似せたサンプル付きの一時ページで切り替え、状態ごとの見た目を確認・調整する作業場を作るスキル。

• 表の読み込み中・空・エラーを見比べたいとき
• 権限やプラン別の表示を確認したいとき
• 実際に近いデータ量で表示を確認したいとき

画面の余白・整列・読む順序を整え、幅の変更や拡大、翻訳による文字量の増加、右から左に読む表示でも、内容や操作が隠れないレイアウトを点検・修正するスキル。

• 狭い画面や拡大時の表示崩れを確認したいとき
• 翻訳で長くなる文字列に対応したいとき
• 右から左に読む画面を点検したいとき

ボタン名・エラー・空状態・確認画面などの文言を、製品の語調や用語に合わせて作成・点検し、操作の意味と困ったときの次の手順が伝わる文章に整えるスキル。

• ラベルや通知の用語を統一したいとき
• 対処法が分かるエラー文に直したいとき
• 次の操作を示す空状態の文言作成

選んだUI部品を、実際に起こりうる内容や幅、状態で一時ページに並べ、表示崩れを確認します。観察した問題をページ上に記し、見比べられるレポートとして残します。

• 長い文字列への対応を確認したいとき
• 狭い領域での表示を確認したいとき
• データや状態ごとの表示比較

一つのUI部品に構成や密度などの違う案を作り、実際のページ上で切り替えて比較します。各案の利点と負担を整理し、選んだ案の本実装まで進めるスキルです。

• 一つの部品の構成案を比較したいとき
• 余白や情報密度を検討したいとき
• デザイン案をURLで共有したいとき

既存のデザインに合わせて、画面の角丸・影・アイコン・アニメーションを具体的な数値で整え、見た目の不統一やタッチ操作時の表示の問題を点検するスキル。

• カードの角丸と影を整えたいとき
• アイコンの状態表示を統一したいとき
• ボタンや登場時の動きを調整したいとき

画面の配色を用途別のパレットと色トークンに整理し、表記変換やコントラスト測定を行います。テーマ間の不整合や色の役割の誤用も点検するスキルです。

• 用途に合う配色パレットを作りたいとき
• 色トークンを用途別に整理したいとき
• 文字と背景のコントラストを測りたいとき

WebサイトのURLや画像から、画面や視覚効果、アニメーションの仕組みを解説します。重なり合う要素の役割を整理し、実測した値と計算結果、推測を区別して伝えます。

• グラデーションの重なりを知りたいとき
• Webアニメーションの仕組み学習
• サイトの画面構成や共通設定の調査

Figmaやデザイン画像をもとに、既存の部品と色・余白などの共通設定を使ってUIを実装します。指定された画面幅で仕上がりを比較し、差異や未接続部分を報告します。

• Figmaのデザインを実装したいとき
• デザイン画像から画面を作りたいとき
• 既存の部品や共通設定の再利用

画面のアクセシビリティ、配置、文章、文字組み、配色、見た目を横断して点検します。コードや実際の表示を根拠に、利用者への影響順で改善点を一つの報告にまとめます。

• 画面や一連の操作を点検したいとき
• 読み込み・エラー・狭い画面の表示確認
• 利用者への影響で修正順を決めたいとき

画面の文字サイズや行間、フォントの読み込み、折り返し、省略表示を整えるスキルです。既存の文字組みルールに沿って、表示の乱れを点検・修正します。

• 見出しと本文の文字サイズを整理したいとき
• 折り返しや省略表示を直したいとき
• 更新される数値の位置をそろえたいとき

ブランチやPR、未コミットの変更を調べ、アクセシビリティやレイアウト、文言などの問題を確認します。変更で生じた不具合と既存の問題を分けて報告します。

• PRの画面変更を確認したいとき
• 共有部品の変更による影響確認
• アクセシビリティの悪化を探したいとき

画面の角丸、影、文字、アイコン、動きの細部を見直し、見た目と操作感を整えます。既存のスタイル方式に合わせた実装と、重要度付きのUIレビューを支援します。

• ボタンやカードの見た目を整えたいとき
• ホバーやアニメーションを調整
• 文字の折り返しや数字表示を改善