pubDate: 2024-03-04

author: sakakibara

デザイン作成手順

デザインを作成する際に決まった手順に従うことでより、良いデザインができる。 個人の感覚に完全に頼り、センスのみにで白紙に要素を並べるよりも、 ある程度の設計を行ったほうがよい作品ができる。 (もちろん設計ばかりではなく実際に手を動かすことも必要だが)

大まかなデザインの設計手順は以下。

1. 伝えたい情報を決める
2. 版面・マージンを決める
3. グリッドを決める
4. 配置を決める
5. オブジェクトの大きさや強弱を決める
6. 配色を決める
7. 書体・フォントを決める
8. 図式化を行う

次回からはそれぞれのデザイン作成手順を見ていく。

1. 情報の整理

2. 版面・マージンの決定

3. グリッドの決定

グリッドを下敷きにレイアウトを考えると統一のとれたレイアウトができあがる。 実際にFigmaで実際にレイアウトを考えるときにどのような手順を踏むかを以下に記す。

まず、フレームを決める。 Figmaを使いこなす鍵はこのフレームにある。 フレームの大きさは例えば、標準的なwebサイトならデスクトップの選択肢を選べば良いだろう。 今回はW x H = (1440, 1024)のサイズのフレームを選ぶとする。

8 pt グリッドレイアウト

8ptグリッドレイアウトというものがある。これは一辺8ptの格子・グリッドのことであり、 10ptや15ptよりも使い勝手が良いことがしられている。 そこで8ptグリッドをフレーム全体に敷く。

N, M グリッドレイアウト

さらにその上からN行M列のグリッドを敷く。 NxMグリッドの始まる

4. 役割による配置

5. 大きさ・強弱・強調の決定

6. 配色の決定

7. 書体・フォントの決定

8. 図式化

いくつかオブジェクトを選択し、左のデザインパレットのエクスポートからファイルのエクスポートができる。

• reference_1