AI Booster スキルライブラリスキルライブラリ

スキル一覧/デザイン・スライド/Design System

デザイン・スライド 第一印象

Design System

似ているのに揃わない画面を、作り続けている方へ

部門デザイン・スライド 呼び出し名design-system 収録ファイル26本

なぜ、これが必要なのか

画面をひとつ作りました。次の画面も作りました。並べると、青が微妙に違います。余白も、見出しの大きさも、少しずつずれています。直そうとしても、どこを触れば全部に効くのかが分かりません。結局ひとつずつ手で直して、また新しいずれが生まれます。人に手伝ってもらうと、ずれはさらに増えます。渡せる基準がないからです。数を出すほど、揃える時間が作る時間を食いはじめます。

何が手に入るのか

決めごとを3つの層に分けて持たせます。大元の値、それが何の役目かを示す名前、部品ごとの当てはめ。この順に積むと、大元をひとつ変えるだけで全部が追随します。押した時、触れた時、使えない時の見え方まで書き出せるので、人に渡すときも口頭の説明が要りません。27本の資料に、組み立ての順番が入っています。

どう使うのか

接続URLの受け取りは会員サイトからです。登録は一度きりで済みます。使うときは、いま使っている色や文字の大きさを書き出して「この決めごとを、3つの層に整理してください」と頼みます。抜けている段は補って返ってきます。以後は新しい画面を作るたび、その決めごとに沿った指定が出てきます。

どうなるのか

色を変えたくなったとき、直す場所がひとつになります。手伝ってもらう相手にも、口で説明せずに基準を渡せます。作る数が増えても、並べたときの顔が崩れません。似ているのに揃わない、という気持ち悪さが画面から消えます。整えるために使っていた時間が、中身を良くする時間へ戻ってきます。

今すぐ、はじめる

いま使っている色の値と、文字の大きさを書き出してみてください。整理はそこから始まります。会員サイトに、つなぐための入口を置いています。

接続URLは会員サイト内でのみ配布しています。お使いのAIに接続URLを登録すると、このスキルがそのまま呼び出せるようになります。