SHEET K-49-U03

UIの部品 U03

暗い面のカード

暗い面に、右上から色の光がにじむカード。4つの色で、案件や講座を色分けできる。日付・進み具合・担当を1枚にまとめる。

01動く実物

見て、動かして確かめる。

4つの色を並べています。カードに触れると、右下の残り日数に色が差します。

  • 2026.11.02

    ホームページ制作

    設計

    進み具合90%
    • A
    • B
    残り2日
  • 2026.11.05

    業務の自動化

    試作

    進み具合30%
    • C
    • D
    残り3週間
  • 2026.12.03

    社内ダッシュボード

    検証

    進み具合50%
    • E
    • F
    残り3週間
  • 2026.12.08

    AI相談窓口

    要件整理

    進み具合20%
    • G
    • H
    残り3週間

案件名・日付・数字・担当は、すべて見本です。

Kristen「Course design cards #scss」をもとに作りました(© 2024 Kristen/利用条件(MIT))

許諾文(MIT)を見る
MIT License

Copyright (c) 2024 Kristen (https://codepen.io/kristen17/pen/NPKrxBd)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

02この見せ方のよいところ

色だけで、見分けがつく。

  • 色で見分けられる

    右上の光・縁・進み具合の線・追加の丸が、同じ1色でそろう。文字を読む前に、どの種類のカードかが分かる。

  • 暗い面でも、沈まない

    黒一色ではなく、角から色がにじみ、縁が光る。暗い画面の中でもカードの形がはっきり浮かぶ。

  • 必要なことが1枚に収まる

    日付・名前・段階・進み具合・担当・残りの日数を、上・中・下の3段に分けて置く。並べても読む順番が迷わない。

  • 色を足すのが簡単

    色は1か所を変えるだけで、光・縁・線のすべてに行き渡る。種類が増えても、作り直さずに足せる。

03向いている内容

こんな場面に向いています。

  • 案件や講座の進み具合の一覧
  • 会員ページ・管理画面のカード
  • 暗い色のサイトのサービス紹介
  • 種類ごとに色を分けたい一覧

04無料相談

まずは、御社の業務についてお聞かせください。

導入の相談だけでも構いません。

無料相談を申し込む
  • 初回のご相談は無料です
  • オンラインでも対応します
  • ITに詳しくなくても大丈夫です
無料相談を申し込む