デザインの教室
次の書籍の写経リポジトリ。
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だと同心円はツールがないので手作業でコピペ
- Create an Eight Logo in Figma with Concentric Circles - YouTube
- https://www.figma.com/file/baa9B8NeN7pxR0RRNZOEwZ/DesisnTraning?node-id=38%3A113
円に沿わせるデザインなどは視覚効果は強いが、バランスが悪くなることがある。 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 グリッドの設計
グリッドと文字の合わせ
グリッドと画像
<script></script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent