デザインの教室｜株式会社エムディエヌコーポレーションという書籍を読みながら、Figmaでその内容を写経してたので、そのまとめです。

デザインのレイアウトについてがメインの書籍で、グリッド/要素の置き方/色の出し方など基本的なことが手を動かしながら学べてよかった。 あと、Figmaの機能を一通り使えた気がします。

次のFigmaにそれぞれのレッスンごとに写経したものをまとめてあります。

Lesson 2-1: 線を使ったデザイン

Lesson 2-1 練習1

線でページを分割する。

Lesson 2-2 練習2

文字と線の位置を検証する。

Lesson 2-2: 面を使ったデザイン

Lesson 2-2 練習1

面を使ったデザイン。ハカギ的なデザイン 写真展のタイトル、写真家の名前、場所と期間の表示をする

四角をおいて、そこからタイトル、→に対する直線、人名に縦に対する直線にそろえていく。 右上の四角があるのが重要なライン

Lesson 2-2 練習2

グリッドを使ったレイアウト。 背景の補助線としてグリッドを使って色分けてしていく。

Lesson 2-3: 円を使ったデザイン

Figmaだとパスファインダーの代わりにBoolean Operationを使うと和とか表現できる

円はAlt + ドラッグで中心を軸にして拡大縮小できる

Lesson 2-3 練習1

円を並べるデザイン

Lesson 2-3 練習2

同心円を並べたデザイン。

Figmaだと同心円はツールがないので手作業でコピペ

円に沿わせるデザインなどは視覚効果は強いが、バランスが悪くなることがある。 Adobeっぽいデザイン

Lessson 2-4: 斜めのデザイン

斜めは動きを出せる。 デザインをするときはどのような視線で見てもらいたいかを意識する。

  • 斜めの動き = 視線の動き
  • よく使われる角度 30、45、60、23.4

Figmaでは縦書きテキストができない 長方形を何が目に配置してページを斜めに分割するデザイン。

Lesson 2-4 練習1 ボールド

BOLDフォントを使ったデザイン 同じfont familyを使うことで統一感がでる。

Lesson 2-4 練習2 ボールド

ライトなフォントで目立たせるデザイン。

シンプルなイメージだからサンセリフとか目的に合わせた特徴のフォントに絞り込んでから具体的なフォントに決めていく。 好みと特徴をちゃんと使い分ける

Lessson 3-1 練習 目次のデザイン

赤をアクセントに使ったデザイン。 ページ背景に使うパターンと、控えめに使ったパターン。 背景的に使う方が好みだな。エンコードには悪そう

Lesson 3-2 練習1 既存のデザインに色を付ける

既存のデザインにワンポイントのアクセントカラーをつけてみる。 背景全体がカラーだと重たいので、面積を減らす。

Lesson 3-2 練習2 名刺のデザインのために色を選択する

色を選ぶ時に、彩度、明度を変える、色相を変えてみるなどのポイントを絞って変更していく。 デザインは隅から配置していくとしやすい

Lesson 3_04 カラーパレットの作成

カラーパレットの作り方について。

基準色を決める、色相をずらした色をならべる、黄色は要調整、パターンによって特徴的な色をパレットに入れる。

少ない色でカラフルなデザイン。 白のスペースを使ってそこが一番目立つようにする

Lesson 3_06 動きやリズムを感じさせるデザイン

Lesson 3_06 練習1

動きを感じさせるデザインの前に静的なデザイン。 左右対称など安定感を感じさせることが多い。

あくまで静止画なので、動きを予測させるデザイン。 偏ったり、はみ出したり、繰り返しによるリズムを与えたりする。

リズムは繰り返しだけではなくアクセントによって発生する

Lesson 3_06 練習2 色を使ってリズムを感じさせる

色でリズムを作る

規則性から適度にずらすことでリズムが生まれる。 ただ適度には公式っぽいのがないので、バランス感覚が求められる。

グラデーションはリズムには使わない。

課題

縦揃いのところの右上にブロックが跳ねるイメージでリズムを出す。 左上から右下への流れがあるので、そこではねる感じ。

Lesson 3_07 余白を生かしたデザイン

意図的な余白を扱う。

箸からレイアウトしていくことで、レイアウトにも意図が残りやすい余白が作れる。

箸から考えて余白を作る

Lesson 4_01 文字組みと見出し

文字とレイアウト

Lesson 4_04 グリッドの設計

グリッドと文字の合わせ

グリッドと画像