このページの中身

基礎

デザインの判断は、要素どうしの関係で決まります。ここが揺れると、この先の全部が揺れます。

基礎で決める順と、前後の分野とのつながりを示した図
図を大きく見る
図の中身を文字で読む
  • 基礎で決めること　要素どうしの関係をどう作るか
  • 見え方の仕組み　ゲシュタルト　認知の法則
  • 並べる規則　デザインの4原則　視覚階層
  • 全体を整える　構図とバランス
  • ここが効く先　すべての分野

このページから降りる#

この分野が答えになる場面#

全13件。ほかの分野もまとめて引くなら逆引きへ。

この分野が答えになる場面困り事から引く13 件
こういうとき答えいますぐ詳しくは
見出しと本文の差がつかない大きさだけで差をつけようとしている。太さと余白を併せて動かすと、大きさは控えめで足りる。コードを開く視覚階層
画面が散らかって見える近接から直す。関係のあるものを寄せ、無いもののあいだを空ける。線や枠を足すのは最後。コードを開くデザインの4原則
どこから読めばいいか分からない大きさ・太さ・色・位置・余白のうち、2つだけで差をつける。全部を変えると差が消える。コードを開く視覚階層
全体がなんとなく落ち着かない揃っていない端を探す。左端が1本の線に乗っているか、余白が同じ刻みかを見る。コードを開く構図とバランス
中央揃えにすると締まらない左揃えに戻す。中央揃えは端が揃わないので、要素が増えるほど落ち着かなくなる。コードを開く構図とバランス
要素をいくつ並べるか迷う同じ重さのものを4つ以上並べると、どれも見られなくなる。優先順位を付けて差をつける。/* 主役1 + 副2まで。4つ以上は優先順位で差をつける */視覚階層
囲み枠を足しても整理された感じがしない枠は最後の手段。余白で分けられていないものを、枠で分けようとしている。コードを開くデザインの4原則
同じ形の繰り返しが単調に見える繰り返しは統一の手段で、単調さは別の問題。大きさか位置に1か所だけ変化を入れる。コードを開くデザインの4原則
要素が離れているのに関係があると伝えたい同じ色・同じ形・同じ枠で囲む。距離で結べないなら、見た目の共通点で結ぶ。コードを開くゲシュタルト
写真とテキストの配分が決まらない先に版面を決め、写真を断ち落とすかどうかを決める。半々にすると、どちらも主役にならない。コードを開く構図とバランス
選択肢が多いと決められないと言われる一度に見せる数を減らす。選ぶ数が増えるほど、決めるまでの時間は伸びる。/* 一度に見せる数を5件以下に絞る */認知の法則
押し間違いが多い小さくて遠い的ほど押しにくい。よく使うものを大きくし、動線の近くに置く。コードを開く認知の法則
何のページか分からないと言われるh1で名乗る。ページを開いて最初に読む1行が、そのページの答えになっているか確かめる。<h1>料金の目安</h1>視覚階層

他の分野へ#

タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ モーション ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。