ICONS8 の Ouch: システムのように動作するスタイルライブラリ

公開: 2025-11-18

エグゼクティブサマリー

製品、Web、電子メール、ドキュメント、広告にわたって 1 つの視覚的な音声が必要です。また、予定通りに発送したいと考えています。すべての画面のカスタムアートは拡大縮小されません。ストック画像が衝突します。スタイルファミリーとのギャップを解決します。それぞれのファミリーは、1 日で習得でき、数か月間継続できる小さな視覚言語です。見返りは簡単です。画面がつなぎ合わされて見えるのをやめ、1 つの製品のように読み始めます。

箱に同梱されるもの

アートワークを一貫したスタイルにグループ化します。スタイル内では、文字、オブジェクト、背景が比率、線の太さ、間隔のリズム、色のロジックを共有します。ピースは継ぎ目なく結合されます。ランディングページのヒーローシーン、説明者の中間シーン、空、エラー、成功の小さなスポットに加えて、レイアウトを整然と保つニュートラルな背景が得られます。ファイルは、制御が必要な場合は SVG として、ドロップインが必要な場合は PNG として送信されます。どちらも高密度のディスプレイに耐えます。

チームが実際にどのように使用するか

製品デザイン。空の状態には小さなスポットと 1 つの明確なアクションが与えられます。オンボーディングは、開始、進捗、成功の 3 つのビートに変わります。特集ページでは、やるべき仕事を示唆する中盤のシーンを借用しています。コピーをアートの近くに置いているので、意味がペアとして伝わってきます。

マーケティング。一人のヒーローがキャンペーンを支えます。正方形、垂直、水平フレームのクロップが用意されています。繰り返し登場するキャラクターや小道具は、チャネル全体で認知度を高めます。電子メールでは、高圧縮の PNG が使用されます。ソーシャルでは同じアイデアがさまざまな割合で得られます。

ドキュメントとヘルプ。複雑なステップでは、吹き出しの隣にコンパクトなシーンが表示されます。装飾的な毛羽立ちはありません。ビジュアルは利益を生みます。

デザインシステム内に適合

Ouch スタイルを、タイプ、トークン、アイコン、グリッドの隣のサブシステムとして扱います。それに安定したホームと 1 ページのルールセットを与えます。

 /ブランド/ビジュアル/

  /タッチスタイル-a/

    README.md

    トークン.json

    ヒーロー/

    シーン/

    シミ/

    背景/

README では、配置、許可されるクロップ、エクスポートサイズ、予約された用途について説明しています。トークンマップは塗りつぶしとストロークをブランドカラーにバインドするため、テーマを変更しても新たにエクスポートする必要はありません。アセットを所有画面の隣に保管します。雰囲気ではなく、所有者に基づいて名前を付けます。

味ではなく証拠で選ぶ

コピーとレイアウトを使用して 4 つの実際の画面を構築します。アートのみを交換します。

ホームページのヒーロー
価格コールアウト
オンボーディングのステップ 1
製品内の 1 つの空の状態

プロジェクトに携わらない 5 人に 2 つの候補スタイルを示します。それぞれに 3 つの形容詞を尋ねます。音声ガイドに合ったスタイルを維持してください。他のセットをアーカイブします。ある日の午後に決断。ムードボードはありません。議論はありません。

配送のブロックを解除するスターターキット

次のリリース用に小さなキットを凍結して、すべてのチケットが同じブロックを使用するようにします。

サイトまたは主力機能の 1 人のヒーロー
製品とコンテンツの 2 つの中間シーン
空、成功、エラーの 3 つのスポット
フォーカスを奪うことなくレイアウトを埋め込む 1 つの背景

プロジェクトの途中で、チームメイトはどこを参照してカバレッジを確認するかを尋ねます。レビュー中に見られる場所にきれいなポインタを置きます: 図。

コードレビューに耐えるアクセシビリティ

画像は、誰もがページを使用できる場合にのみ役に立ちます。チェックをプルリクエストに組み込みます。

代替決定。画像に意味がある場合は、そのアイデアを説明する短い alt を書きます。装飾的な場合は、支援技術がスキップできるように空の alt を使用します。インライン SVG には、簡潔なタイトルと、必要に応じて説明を含める必要があります。

 <svg role="img" aria-labeledby="td" width="512" height="256">

  <title>分析目標を定義するチーム</title>

  <desc>同僚はグラフや付箋を移動し、他の同僚は結果をチェックします</desc>

</svg>

コントラストと状態。アートワークにテキストが含まれている場合、または意味を表すために色が使用されている場合は、WCAG 2.2 の比率に従ってください。塗りつぶしとストロークをアラートとボタンで使用されるのと同じトークンに結び付けることで、アートと UI で成功とエラーが同じように読み取られます。

表現。包括的なキャラクターや日常のアクティビティを好みます。決まり文句は避けてください。視聴者を反映した少人数のグループでテストします。

渋滞下でも維持できるパフォーマンス

写真は重いです。予算を設定したコードのように扱います。

テクスチャが必須ではない場合は SVG を優先します
レンダリングしたサイズでのみ PNG をエクスポートします
レイアウトのずれを防ぐために、幅と高さを常に設定してください
フォールドの下に遅延読み込み
実際のページ上の最大のコンテンツフルペイントを測定する

フレームワークなしの応答性ラスター:

 <写真>

  <source type="image/avif">

  <source type="image/webp">

  <img src="/hero-ouch.png" alt="分析をレビューする同僚" width="1280" height="720"loading="eager">

</ピクチャ>

テーマ変数に関連付けられたインライン SVG:

<スタイル>

  :root { --accent: #2563eb }

  @media (カラースキームを優先: ダーク) { :root { --accent: #7c3aed } }

  .hero [データアクセント] { 塗りつぶし: var(--accent) }

</スタイル>

<svg class="hero" role="img" aria-labeledby="ab" width="480" height="240">

  <title>成長グラフは上昇傾向</title>

  <desc>単純なグリッドを横切る線</desc>

  <path data-accent="" d="M10 200 L120 140 L220 160 L360 80" fill="none" ストローク="var(--accent)" ストローク幅="6"/>

</svg>

ロールベースのプレイブック

ウェブとUX

画像を使用して意図を明確にします。空の状態には 1 つのアクションと短いコピー行が含まれます。オンボーディングは、同じキャストと設定で開始、進行、成功として明確に読み取れます。 SVG をデザインツールのコンポーネントに変換し、塗りつぶしをカラースタイルにリンクしてテーマを高速に反転します。狭いレイアウトでは、混雑したシーンの上に小さなスポットを選択します。

マーケティングとSMM

正方形、垂直、水平のフレームを使用してソーシャルグリッドを構築します。シーンをそれらの比率で事前にトリミングし、そのバリエーションをブリーフの隣に保存します。シリーズ全体で繰り返し登場するキャラクターまたは小道具を 1 つだけ保存しておいて、思い出してください。クライアントは依然として多様であるため、電子メールでは慎重に圧縮された PNG が使用されます。

開発者

リポジトリ内のバージョンのアートワーク。アセットをレンダリングするコンポーネントの近くにアセットを配置します。インライン SVG を使用すると、新しいファイルをエクスポートする代わりに、CSS 変数を使用してテーマの切り替えに反応できます。クリティカルパスに重い画像を配置しないでください。動きが必要な場合は、ベクトルをアニメーション化します。

教育

授業と LMS でうまくいきました。生徒は何もないところから描くのではなく、シーンをリミックスすることで階層とリズムを学びます。スタイルパック、固定パレット、および 3 つのターゲット画面を提供します。ライセンスの領収書と帰属メモをコースリポジトリに保存して、ポートフォリオが準拠した状態を維持できるようにします。

スタートアップと中小企業

1 つのスタイルを選択し、4 分の 1 冷凍します。サイト、デッキ、ストアの掲載情報、商品のトップ画面に適用します。今日は団結力。特徴的な機能については後でカスタムシーンを使用します。

ドリフトを防ぐガバナンス

プルリクエストにチェックリストを追加します。

必要に応じて代替テキストが表示されます
装飾画像が正しくマークされている
レイアウトのずれを避けるために設定された寸法
ページ予算を下回るファイルサイズ
ターゲットページでLCPが検証されました

小さなルールは大規模なリファクタリングに勝ります。

価値を証明する指標

実行可能な場合、SVG への切り替え前後のヒーローアートからのペイロードシェア
展開後のメインランディングページの LCP トレンド
3 つのスプリントにわたる一貫性のない画像に対するレビューフラグの数
キャンペーンの概要から最初に承認されたモックまで数時間

計画する制限

ニッチなシナリオでは、パーツからの複合が必要になる場合があります
モーションはアニメーションスタックにまだ残っています
カタログが大きいと、単純な意思決定ルールがないとチームが遅くなる

電子メール

ライセンス付与と記録保持

Icons8 は明確なライセンス条項を公開しています。無料プランでは通常、クレジットが必要です。有料プランでは帰属が削除され、使用が拡大されます。発行者のサイトで現在のポリシーをお読みください。領収書をブランドフォルダーに保存します。各アセットの出荷場所を追跡します。法的な要求があれば、証拠を得ることができます。

結論

1 つのスタイルを採用します。コンパクトなキットを作ります。それをトークンに接続します。レビュー時にアクセシビリティとパフォーマンスを強化します。 Ouch は、予定通りに出荷され、意図的に設計されたかのようなビジュアル言語を提供します。

参考文献

テキストの代替案とコントラストに関する WCAG 2.2 の W3C WAI ドキュメント
SVG のアクセシビリティと埋め込みに関する MDN ドキュメント
レスポンシブ画像と画像パフォーマンスに関する Web.dev ガイド
NNグループのUXにおけるビジュアルコミュニケーションと理解に関する研究
Shopify Polaris と Google マテリアルデザインのイラストガイダンス

ICONS8 の Ouch: システムのように動作するスタイル ライブラリ