デザインのスキル

画面や部品のデザインを、情報の伝わり方や操作の分かりやすさから評価します。利用者像に沿った確認と40点満点の採点で、優先して直す問題と具体的な改善案を整理します。

• 公開前に画面や部品を評価したいとき
• 情報過多や分かりにくい導線の修正順位付け
• 初心者と熟練者の視点で操作を確認したいとき

画面の余白や整列、情報の優先順位を見直し、単調なカード配置や窮屈なUIを、内容に合う密度と強弱のあるレスポンシブなレイアウトへ整えるスキル。

• 窮屈な画面の余白調整
• 重要な情報を目立たせたいとき
• 単調なカード配置の見直し

エラーメッセージやフォームのラベル、ボタンなどの分かりにくい文言を見直し、利用者が状況と次の操作を理解しやすい、簡潔で一貫した表現に整えるスキル。

• エラーの対処方法を伝えたいとき
• フォームの説明を見直したいとき
• ボタンの動作を明確にしたいとき

既存の画面をスマートフォン、タブレット、デスクトップ、印刷やメールの用途に合わせて調整します。画面幅だけでなく、入力方法や情報の優先順位も見直し、操作しやすい構成に整えます。

• パソコン向け画面をスマホに対応したいとき
• タブレットの縦横レイアウト調整
• モバイル画面をデスクトップに展開

Apple風の半透明で奥行きのあるUIを、CSSの共通設定と部品例を使って組み立てます。カードやボタン、明暗モード、アニメーション、読みやすさへの配慮まで扱います。

• 半透明のカードやボタンのデザイン
• ガラス風ツールバーやモーダルの作成
• ライト・ダークモードへの対応

既存のコードやブランド素材と利用者への質問から、対象ユーザーや見た目の方向性を整理し、今後の作業で参照するデザイン方針をファイルに保存するスキル。

• プロジェクト開始時のデザイン方針整理
• ブランドや好みを次回に引き継ぎたいとき
• 既存コードと素材から設計背景を整理

単調な画面にブランドや用途に合う色を加え、ボタンの優先度や状態の違いを伝えます。背景、文字、グラフまで配色を整え、見やすさと温かみを両立するスキル。

• 灰色の画面に温かみを加えたいとき
• 主要ボタンを目立たせたいとき
• 状態やカテゴリを区別したいとき

ボタン操作や画面の切り替えに、結果や状態が伝わるアニメーションを加えます。表示速度や動きへの配慮も確認し、目的に合ったUIの動きを設計・実装するスキルです。

• ボタンやフォームに操作の反応を加えたいとき
• メニューやモーダルの切り替えを整えたいとき
• ページ登場やスクロールの演出設計

粘土のように柔らかく膨らんだ見た目のカードやボタンを、大きな角丸と内外の影で作ります。ダークモードや文字の読みやすさにも配慮したCSSの指針をまとめたスキルです。

• 柔らかな立体感のカードやボタン制作
• 入力欄やトグルの見た目の統一
• 粘土風UIのダークモード対応

画面や部品の見た目と操作を既存のデザインシステムに合わせ、色・文字・余白のばらつきや独自実装を整理して、使い方の一貫性まで整えるスキルです。

• 画面を既存のデザイン基準に合わせたいとき
• 独自のスタイル指定を共通化したいとき
• 部品や操作パターンを統一したいとき

利用者やブランドの方針に合わせて、Web画面の見た目と操作性を設計・改善します。文字、配色、余白、動きからアクセシビリティや公開前の仕上げまで扱います。

• デザインシステムの整備
• 操作性とアクセシビリティの点検
• スマートフォン向けの画面調整

ボタンの反応や完了時のアニメーション、待機中の文言に個性を加え、使う楽しさを整えます。ブランドや利用場面に合わせ、操作を妨げない演出を設計するスキル。

• ボタンやフォームの反応を整えたいとき
• 空の画面や待機表示に個性を加えたいとき
• 完了や節目を演出したいとき

無難で印象の弱い画面を見直し、文字の大小、配色、余白、構図、動きに強弱を付けて、使いやすさとブランドに合った個性を両立させるスキルです。

• 印象の弱いページに個性を加えたいとき
• 重要な情報に視線を集めたいとき
• 文字や配色をブランドに合わせたいとき

色や太字、装飾、動きが強すぎる画面を見直し、落ち着いて使える見た目に整えます。重要な要素の強調と個性を保ちながら、余白や文字、配色を調整するスキル。

• 鮮やかすぎる配色を和らげたいとき
• 太字や大きな要素の競合を減らしたいとき
• 過剰な装飾や動きを整理したいとき

公開前の画面を点検し、余白や配置、文字、操作時の状態表示などの不揃いを整えます。機能が完成したUIを対象に、表示や操作、コードの細部まで仕上げるスキルです。

• 公開前の画面を最終確認したいとき
• 余白や文字の不揃いを直したいとき
• 読み込み中やエラー表示の点検

半透明の背景、ぼかし、細い境界線、柔らかな影を組み合わせ、すりガラス風の画面部品を作ります。カードやナビゲーションの見た目をそろえ、文字の読みやすさにも配慮するスキルです。

• すりガラス風のカードを作りたいとき
• ナビゲーションとモーダルの表現統一
• 半透明ボタンとホバー表示の作成

画面の目的に合わせて情報・装飾・操作・コードの複雑さを見直し、必要な機能やアクセシビリティを保ちながら、迷いにくく要点の伝わるUIへ整理するスキル。

• ボタンが多い画面を整理したいとき
• 過剰な色や枠線、カードの入れ子の整理
• フォームや操作手順を減らしたいとき

太い黒枠、鮮やかな配色、ぼかしのない影で、輪郭のはっきりした画面部品を作ります。カードやボタン、入力欄の見た目と操作時の動きを、共通のCSS設定でそろえるスキルです。

• 太い枠と硬い影のカードを作りたいとき
• ボタンのホバー・押下表現の作成
• ナビゲーションや入力欄の見た目統一

初回利用の案内やデータがない画面を設計・改善し、利用者が最初の成果に進める導線を整えます。ツアーやヒントの出し方、完了状況の記録も扱います。

• 初回利用の案内を改善したいとき
• 空の画面から最初の操作へ導きたいとき
• 複雑な画面の操作ツアー設計

曖昧なUIの依頼から、配色・書体・レイアウト・操作のルールを具体化。製品の用途に沿ったデザイン方針をまとめ、アクセシビリティの確認や実装方法の検討を支援します。

• ランディングページのデザイン方針作成
• ダッシュボードの配色・書体選び
• UIのアクセシビリティと操作の見直し

Webページやアプリの画面を、目的と利用者に合うデザイン方針から設計し、文字・配色・余白・動きまで統一した実際に動くコードに仕上げるスキル。

• デザイン方針のあるLPを作りたいとき
• ダッシュボードの設計と実装
• Reactの画面部品を作りたいとき

稼働中のWebサイトを複数の画面幅で確認し、レイアウト崩れや配色・余白の不統一、アクセシビリティの問題を見つけ、ソースコードの修正と再確認まで進めます。

• スマホ表示の崩れを直したいとき
• 余白・フォント・配色の統一性の点検
• コントラストやフォーカス表示の確認

ボタンやメニューの反応、アニメーションの速さ、ドラッグ操作など、画面の細部を見直し、使用頻度や目的、アクセシビリティに応じたUIの実装・改善を支援します。

• UIコードの改善案を比較したいとき
• アニメーションの速度や緩急の調整
• ドラッグ操作やボタンの反応の改善

Webページやアプリの画面を、用途と利用者に合うデザインで実装するスキル。書体、配色、余白、動きに一貫性を持たせ、動作するコードに仕上げます。

• デザイン方針のあるLPを作りたいとき
• ダッシュボードの見た目を整えたいとき
• Reactの画面部品を作りたいとき