DESIGN ATLASWebデザイン制作支援リファレンス
見て、探して、つなげる。判断から実装までを、実例と動く道具で確かめる制作作業台です。
島は左から右へ、制作の流れの順に並べています。選ぶとこの枠に入口の説明が表示され、押すとその入口へ移ります。
逆引き#
困り事とやりたいことから、直す場所へ。
代表的なものだけ挙げています。全188件は逆引きにあります。
| こう困っている | 行き先 |
|---|---|
| 文字が読みにくい・詰まって見える | 字間と行間 |
| どこから読めばいいか分からない | 視覚階層 |
| 画面が散らかって見える | デザインの4原則 |
| 全体がなんとなく落ち着かない | 構図とバランス |
| 色が決まらない・多すぎる | 配色の型 |
| 文字が背景に沈んで読めない | コントラストと色覚 |
| ダークモードで色が破綻する | 役割で色を持つ |
| 要素の幅と余白が毎回ばらつく | 余白 |
| 文章の右に意味のない空白が残る | 版面と行長 |
| スマホで横スクロールが出る | レスポンシブ |
| 同じ部品が場所ごとに違う実装になっている | デザイントークン |
| ボタンとリンクのどちらを使うか迷う | ボタンとリンク |
作る順番#
何から決めるか迷ったときの順番。
決める→組む→詰める→確かめる の順で、何から決めるかを通しで読めます。後戻りの原因になりやすい3つも挙げています。
分野#
決める順に並べた分野から降りる。
図の中身を文字で読む
- 上の層から決める。下の層の判断は、上が決まっていないと好みの話になる
- 土台 要素どうしの関係の作り方 基礎
- 誰に、どんな態度で ここが揺れると先が揺れる UX・情報設計 ブランディング デザインスタイル
- 見た目の素材 文字・色・幅を決める タイポグラフィ 色彩 レイアウト
- 仕組みにする 同じものを同じに作れる形へ デザインシステム UI部品
- 通す 誰でも使えて、速いか アクセシビリティ モーション 実装
- 進め方 AIに作らせるときの手順 AIと制作
- 届ける 作ったものを見つけてもらう SEO・公開と検索
- 行き来はする。ただし決める順序は動かさない。「誰に」より先に「何色か」を決めない。
上から 土台／誰に、どんな態度で／見た目の素材／仕組みにする／通す／進め方／届ける の順に降ります。分野一覧で、層ごとに絵で選べます。
テーマ#
分野の中のテーマを絞って引く。
分野の中の65件を横断して引きます。分野名で頭出しするか、語を入れて絞り込めます。
デザインスタイル#
色・書体・余白の規則を1つに揃え、画面の態度を決める。
デザインシステム#
実物のデザインシステムの決め方を見る。
公開されている22件の決め方を、同じ画面を組み直して比べます。
Material Design 3／Human Interface Guidelines／Fluent 2／Carbon／Polaris
出発点のCSS#
貼るところから始める土台のCSS。
案件ごとに変えるのは色・書体・版面の3つだけ。残りはそのまま貼って使えます。
パターン集#
コピーして組み上げる完成形。
貼るコードそのものをプレビューしています。全54件。
| 1ページ分を組む | 中身 |
|---|---|
| LPを組む | ヘッダーから締めのCTAまで13の節 |
| 問い合わせフォームを組む | 入力・エラー・確認・完了の4画面 |
| 記事一覧と記事を組む | 一覧・記事・前後送りまで |
用語索引#
語の名前から、その語を扱うページへ。
433語を名前から引きます。似ていて迷う1,293組は、違いだけを並べた面が別にあります。
動く素材#
動かして調整し、単一HTMLで持ち帰る。
炎
公開前チェック#
出す前に確かめることを、記録しながら。
機械で確かめる・人が確かめる・出したあと の順に確かめます。押した記録はこの端末に残るので、途中で閉じても続きから戻れます。
何のために作ったかはこの資料についてに書いています。