bolder

概要

bolderとは？

bolderは、安全で無難、あるいは視覚的に平凡なインターフェースを、より刺激的で記憶に残る体験へと変えるUIデザインスキルです。デザイナーやチームがデザインの物足りなさの原因を特定し、使いやすさやアクセシビリティを損なわずに視覚的なインパクトや個性を高めるための体系的なアプローチを提供します。

誰がbolderを使うべきか？

このスキルは、デザインが無難すぎる、個性がない、目立たないとフィードバックを受けるUI/UXデザイナー、プロダクトチーム、開発者に最適です。デジタルプロダクトにもっと活気や独自性、ブランドの個性を加えたい場合に、bolderは実践的なワークフローを提供します。

bolderが解決する課題

• ジェネリックで予測可能、または刺激に欠けるデザイン
• コントラストや階層、視覚的なドラマが不足しているインターフェース
• ステークホルダーからより個性やインパクトを求められるプロジェクト
• 大胆な変更でも使いやすさとアクセシビリティを維持すること

使い方

インストール手順

1. 以下のコマンドでbolderをインストールします：

   npx skills add https://github.com/pbakaus/impeccable --skill bolder
   

2. 詳細なワークフローと背景を理解するために、まずSKILL.mdファイルを読みます。

3. README.md、AGENTS.md、metadata.jsonなどの補助ファイルも確認して追加のガイダンスを得ます。

4. rules/、resources/、references/、scripts/ディレクトリも探索して、ツールや例を活用しましょう。

bolderワークフローの適用

• 必須の準備:
  • $frontend-designを呼び出してデザイン原則やコンテキストを収集します。デザインコンテキストがない場合は、まず$teach-impeccableを実行してください。
• 現状の評価:
  • デザインが平凡に感じられる理由（例：一般的なフォント、低コントラスト、平坦な階層）を特定します。
  • ブランド、ターゲット、プロジェクトの制約を理解します。
• 強化の計画:
  • 視覚的なドラマやコントラスト、独自要素をどこでどのように加えるか決めます。
  • 変更がブランドやアクセシビリティ要件に合致していることを確認します。
• デザインの強化:
  • タイポグラフィ、色、レイアウト、動き、階層などでbolderな選択を適用します。
  • フィードバックや使いやすさのチェックをもとに繰り返し改善します。

推奨プレビュー対象ファイル

• メインのワークフローと理由が書かれたSKILL.mdから始めましょう。

よくある質問

どんな時にbolderを使うべきですか？

デザインが平凡、無難すぎる、個性がないと言われた時や、ステークホルダーからもっと視覚的なインパクトを求められた時に使います。

bolderはデザインの基本を置き換えますか？

いいえ。bolderは確かなデザイン原則の上に成り立っており、使いやすさやアクセシビリティのベストプラクティスを強化するためのものです。

詳細はどこで確認できますか？

リポジトリのFilesタブを開くと、補助的なリファレンスやスクリプトを含む全ファイルツリーを閲覧できます。