DESIGN.mdって何？

Transcript

1. DESIGN.mdって何？ UTC+11
2. この資料で見ること 01 全体像 02 私のDESIGN.md 03 1枚試す 別の内容に当てて確かめる 04 まとめ 何を共通にし、何を更新するか 8項目と、値／使い方の二層 OverviewからDo's and Don'tsまで 2 / 13
3. DESIGN.mdとは 色や文字の値と使い方を、人とAIで共有するテキストの設計書。 私のDESIGN.md｜1つのファイルに、値と使い方をまとめた 冒頭のYAML ＝ 値 AIに渡すと、値として読み取れる primary: "#006241" slide-title: 56px / 700 margin-horizontal: 96px Markdown本文 ＝ 使い方 人が読んで、なぜその値かがわかる 緑は基本の強調、生成りは背景に。 タイトルの下に4pxの線を引く。 1枚につき伝える主張は一つ。 本文の8項目 Overview Colors Typography Layout Elevation & Depth Shapes Components Do's and Don'ts どんな表現を目指すか 色に役割を持たせる 文字の役割を分ける 置ける範囲を決める 面で階層をつくる 線と形の語彙を揃える 図解の表現を揃える 一枚一主張を守る 3 / 13
4. Overview｜どんな表現を目指すか この資料で何を伝え、どう感じてほしいかを、言葉で決める項目。 私のDESIGN.md｜3つの言葉から、深い緑を選んだ 起点 今日の小さな幸せと行動を大切にする つながり 学びや経験をひらき、人や社会と出会う 育つ、ひらく。 このイメージから、深い緑を仮の主色に選んだ。色 に決まった意味があるからではなく、自分の言葉に 近いから。 向かう先 今日の一歩が、誰かの明日につながる 4 / 13
5. Colors｜色に役割を持たせる 色を「赤・青」ではなく、背景・文字・強調という役割で決める項目。 私のDESIGN.md｜緑を軸に、生成りを背景、茶を小さな印に 緑 面 インク 茶 補助 primary #006241 canvas #F2F0EB ink #302C28 accent-earth #8B6044 line #C7CEC7 primary-deep #1E3932 primary-soft #CBD9D0 surface #FFFFFF ink-muted #5B5752 accent-earth-soft #C9A78F ink-soft #D5CEC7 on-deep #FFFFFF 強調・反転面・図解の淡い塗り 背景と、図表をまとめる白い面 本文の文字と、補足の文字 観察や具体例につける、小さな印 区切り線・淡い塗り・白い文字 5 / 13
6. Typography｜文字の役割を分ける 文字の大きさと太さを、役割ごとに決める項目。 私のDESIGN.md｜8つの役割に、実寸と太さを決めた slide-title key-message section-heading body body-strong support caption footer 論点はタイトルに 主張は一つに絞る 根拠を分ける見出し 説明と図解のラベル 本文の中の重要語 図解に添える補足 図版の注記・出典 ページ番号・資料名 56px / 700 44px / 600 36px / 700 32px / 400 32px / 600 28px / 400 24px / 400 20px / 400 6 / 13
7. Layout｜置ける範囲を決める 画面の大きさと、文字や図を置ける範囲を決める項目。 私のDESIGN.md｜1920×1080、左右96・上48・下40 1920 × 1080px 上 48px 左 96px 文字と主要な図版は、この内側に置く 右 96px 下 40px 7 / 13
8. Elevation & Depth｜面で階層をつくる 面が重なるとき、どちらが手前かを何で示すかを決める項目。 アプリやサイト 私のDESIGN.md 本文の面 本文の面 日々の小さな行動から、学びが生まれる。 図表の面 メニューの面 試す 気づく 結論の面 DESIGN.mdを育てながらつくる。 同じ白い面でも、影があれば手前だとわかる。 重ならないので、影ではなく面の色で役割を分ける。 8 / 13
9. Shapes｜線と形の語彙を揃える 角の丸み、線の太さ、使う図形の種類を決める項目。 私のDESIGN.md｜角丸3つ、線3本、図形4つだけ 角の丸み 線の太さ rounded.none 0px 直線的な区分 stroke.fine 1px 区切り・小見出しの下 stroke.strong 2px 図解の輪郭・関係線 stroke.title 4px スライドタイトルの下 rounded.soft 8px 図解面・基本ノード 基本図形 rounded.full 短いバッジだけ 組み立て 四角形 ＋ ＝ 三角形 直線・円・三角形・四角形。この4つを組み合 わせる 新しい形は描かず、 この4つで表す 吹き出し 9 / 13
10. Components｜図解の表現を揃える 繰り返し出てくる図解の部品を、どう描くかを決める項目。 私のDESIGN.md｜輪郭と塗りの4表現を、役割で使い分ける outline ＝ 輪郭だけ。この図が扱う範囲を示す 集める soft ＝ 淡い塗り。ふつうのまとまり 選ぶ soft-outline ＝ 淡い塗り＋輪郭。区切りを強める 決める solid ＝ 濃い塗り。焦点は1枚に一つ 10 / 13
11. Do's and Don'ts｜一枚一主張を守る 守ることと避けることを、短い文で並べる項目。 私のDESIGN.md｜主な「守る」と「避ける」 守る ◦ 1枚につき伝える主張を一つ定める。 ◦ 要点を絞り、罫線と余白で関係を示す。 × カードを多用する × 装飾の影・グラデーション × タイトルの上に飾りを置く 避ける × 一枚に多くの色を使う 11 / 13
12. DESIGN.mdで1枚作ってみた 今日、試す 反応から次を選ぶ 反応が、次に試すことを教えてくれる 気づきを言葉にする 人と共有する 12 / 13
13. 3つ決めて、1枚つくる DESIGN.mdは、非デザイナーが統一感のある資料を作る土台になる。 01 主色を決める 自分の言葉に近い色を1つ 02 文字の階層を決める タイトル・主張・本文の3つ 03 安全余白を決める 1枚作って、収まりを見る 作った1枚を見て、合わなかったところだけ書き直す。 13 / 13