さわって学ぶ UIデザイン
用語図鑑試読版

画面を格子状に分割し、要素を整列させる「下地」です。ふだんは見えませんが、整ったデザインの裏にはたいていグリッドが敷かれています。チェックを入れて、隠れている下地を見てみましょう。

グリッドの「縦列」のことです。Webでは画面を12本のカラムに分ける「12カラムグリッド」が定番。12は 2・3・4・6 で割り切れるので、いろいろな分け方ができます。ボタンで分け方を切り替えてみましょう。

カラムとカラムの「間の余白」です。狭すぎると窮屈に、広すぎるとバラバラに見えます。スライダーでガターの幅を変えて、印象の違いを確かめてみましょう。

要素の外側の余白です。図のオレンジ色の部分がマージン。「隣とどれだけ離すか」を決めます。

要素の内側の余白です。枠と中身の間のクッションで、図の青色の部分がパディング。マージン(外側)とセットで覚えましょう。

要素のまわりの「何もないスペース」全般のことです。余白は無駄ではなく、洗練された印象と読みやすさをつくる大切なデザイン材料です。同じカードで比べてみましょう。

大きさ・色・配置の差で「どれが重要か」を伝える仕組みです。階層がないと、読む人はどこから見ればいいかわかりません。切り替えて視線の迷いを体感してみましょう。

要素の位置をそろえることです。そろえる基準線(左端・中央・右端)を意識するだけで、画面はぐっと整って見えます。

関連する要素どうしを近づけて置くと、線で囲まなくても「同じグループ」に見える——という原則です。距離だけで意味が生まれます。

同じ見た目のルールを繰り返すことで、一貫性と安心感を出す原則です。1つでもルールを破った要素があると、途端に雑然として見えます。

テキストが多い画面では、視線は「上を横に読み → 少し下がってまた横に → あとは左端を縦に流す」というF字を描きがちです。その動きに合わせて大事な情報を配置します。

要素の少ないシンプルな画面では、視線は「左上 → 右上 → 左下 → 右下」とZ字に動きがちです。広告やトップページで、最後に視線が着地する右下にボタンを置くのはこのためです。

別名ヒーロー / ヒーローセクション / アバブザフォールド

スクロールせずに最初に見える範囲のことです。英語の "Fold" は新聞の折り目のこと。朱色の点線が「折り目」で、その下はスクロールしないと見えません。中をスクロールしてみましょう。

画面の幅に応じてレイアウトが自動で組み変わる設計です。同じページでも、PCでは3列、スマホでは1列に。端末を切り替えて変化を見てみましょう。

レスポンシブデザインで、レイアウトが切り替わる「境界となる画面幅」のことです。スライダーで幅を動かすと、点線の位置(ブレイクポイント)を越えた瞬間にレイアウトが変わります。

要素が重なったとき、どれが手前に見えるかの順番です。机に紙を重ねていくのと同じで、手前の1枚が奥を隠します。やっかいなのは、手前の要素が奥の要素のクリックまで受け取ってしまうこと。どれを手前にするか切り替えて、重なった部分を押してみましょう。