デザインの目を鍛える ― 理論の土台

良いデザインを「分解して言葉にする」練習です。最初の1ページは、次の手順どおりに作ってみましょう。

1. 観察するサイトを開くまずは見慣れたものが一番です。このカリキュラムサイトのトップページを開きましょう。
2. スクリーンショットを撮るWindows + Shift + S で画面の上半分を範囲選択して撮ります。
3. Figmaに貼るFigmaで新しいファイルを作り、Ctrl + V で貼り付けます。ファイル名は「観察ノート」にしましょう。
4. 4色の付せんを用意する四角ツール (R) で小さな四角を4つ作り、それぞれに文字ツール (T) で「近接」「整列」「反復」「対比」と書きます。
5. 見つけた場所に置いて、ひとこと添える例: カードのグループに「近接」を置き、「カード同士の間は広く、カードの中は狭い」と添えます。4原則ぶん置けたら完成です。

お題: 好きなサイトを4つ選び、例題と同じ作り方で観察ノートを合計5ページにします。サイトは「よく使う通販」「役所」「ゲーム」など、雰囲気の違うものを混ぜると発見が増えます。

迷ったら、ページごとに次の4つの問いに答えれば、自然にノートになります。

1. 一番目立つものはどれ?それは大きさ・色・余白のどれで目立たせている? (対比)
2. 情報の塊はいくつある?塊同士の間はどれくらい空いている? (近接)
3. そろっている線はどこ?左端・中央・右端のどれでそろえている? (整列)
4. 繰り返されているルールは?色・形・並び順のどれが統一されている? (反復)

お題: 身の回りから「ちょっと見づらいな」と感じる印刷物や画面を1つ見つけ、「どの原則が崩れているか」と「どう直すか」を言葉で説明します。作り直しは不要で、説明だけでOKです。

素材の文章は何でも構いません。練習素材 omise-text.txt (架空のお店の紹介文) を使うと早いです。

1. Figmaでフレームを作るF を押して、サイズ一覧から「Desktop」を選びます。
2. 文章を3つに分けて貼る文字ツール (T) で「見出し」「本文」「補足」の3つのテキストを作り、素材の文章を分けて入れます。
3. 書体をそろえる3つとも選んで、右パネルの書体を「Noto Sans JP」にします。
4. サイズの階層をつける本文16・補足13・見出し28に設定します。見出しだけ太字 (Bold) にします。
5. 行間と幅を整える本文の行間 (Line height) を170%にし、テキストの箱の幅を全角35文字くらいで折り返す幅まで狭めます。

お題: 同じ文章を「①事業所のお知らせ」「②イベントのポスター」「③Web記事」の3場面向けに組み分けます。それぞれフレームを分けて作りましょう。

1. ① お知らせ: 読みまちがいゼロが目的です。ゴシック体・本文16px・行間170%・飾りなしで組みます。
2. ② ポスター: 遠くから目を引くのが目的です。見出しを本文の3倍以上に大きくし、文字数を思いきって減らします。
3. ③ Web記事: 長く読んでもらうのが目的です。本文の幅を35文字で折り返し、段落の間に余白を入れます。

お題: 「文字がきれいだ」と感じるサイトを3つ見つけて観察ノートに追加し、本文サイズ・行間・1行の長さを調べて書き込みます。

1. Coolorsを開くブラウザで coolors.co を開き、「Start the generator」をクリックします (Step 4でやった操作です)。
2. 方向を決めてから回す「清潔」のイメージから、青〜水色系を1色捕まえて鍵アイコンで固定し、スペースキーで残りを回します。
3. 3色を選び出すうすい色をベース、青系をメイン、1色だけ性格の違う色 (例: 柔らかい黄) をアクセントに選びます。
4. コントラストを検査するWebAIM Contrast Checkerを開き、Foregroundに文字色 (濃い色)、Backgroundにベース色を入れて、Normal TextがPassになるか確かめます。
5. 不合格なら濃さだけ直すFailのときは、色相はそのままで文字色を濃くします。色を変えずに明るさで直すのがコツです。

お題: 「①頼れる法律事務所」「②楽しい駄菓子屋」「③静かな図書館」の3つに、それぞれ3色パレットを作ります。例題と同じ手順で、1つずつ進めましょう。提出物は、お題ごとに「3色 + 選んだ理由ひとこと + コントラスト検査の結果」です。

お題: 好きなサイトを1つ選び、使われている色をすべて採取して、「ベース・メイン・アクセントがそれぞれ何%くらいか」を観察ノートにまとめます。70 : 25 : 5の型に近いか、外れているならなぜ成立しているかを考えます。

1. フレームを作るF → 「Desktop」を選びます。
2. グリッドを表示するフレームを選んだまま、右パネルの「Layout grid」の + を押します。赤い線が出ます。
3. 12カラムに変える出てきたGridの種類を「Columns」に変え、Countを12、Gutter (列の間) を24、Margin (左右の余白) を40にします。
4. カードを4カラム幅で作る四角ツール (R) で、ちょうど4カラムぶんの幅の四角を描きます。線に吸い付くので簡単です。
5. 3枚並べるCtrl + D で複製して、4カラムずつ3枚並べます。ぴったり12カラムで割り切れます。

お題: 例題のフレームに、授業2の文章 (見出し + 本文) を足して、1ページのレイアウトに育てます。

1. 見出しを12カラム全幅に置くページの一番上は、幅いっぱいを使ってOKです。
2. 本文を8カラム幅に収める左の8カラムに本文、右の4カラムは空けるか補足情報に使います。1行が長くなりすぎない幅になります。
3. 縦の余白を8の倍数でそろえる見出しと本文の間は32、本文とカードの間は56のように、8の倍数から選んで統一します。

お題: 観察ノートに集めたサイトから1つ選び、その1画面の「骨格だけ」(色や写真は抜きで、グレーの四角と線だけ) を12カラムグリッドの上に再現します。何カラム使っているかを数えながら写しましょう。