ファイルの準備をする

THEME

デザインを制作する前に、Figmaのデータ周りを整えます。チーム・プロジェクト・デザインファイル・フレームといった機能を復習しながら、制作に沿った流れを進めます。

チームとプロジェクトを作る

チームを作ります。チームを分けると案件ごとやクライアントごとでプロジェクトを整理しやすくなります。

チームの内部にプロジェクトを作ります。無料プランの場合、プロジェクトを1つだけ作成できます。

デザインファイルを作成する

デザインファイルを作成します。Figmaのデスクトップアプリを開き、ホーム画面より「デザインファイルを新規作成」を選択してください。

@div:figure

デザインファイルを新規作成する @divend

「無題」という名前でデザインファイルが作成されます。「無題」の文字にカーソルを合わせてダブルクリックすると、名前を新しくつけることができます。今回の制作では「コーポレートサイト」という名前をつけます。

実制作においても制作する順番としてはファイル＞ページ＞フレームという順番になります。ファイルの中にページを作り、ページの中にフレームを作ります。

ページの設定をする

ページは１つのファイル内に最低３ページから作ることができます。

@div:figure

ページ @divend

ページを作成するには、レイヤータブ・アセットタブの右側にあるPage 1という名前の部分をクリックします。ここからページを新規作成することができます。初期設定では１ページ分のみ設定されていますが、ページ数を増やすとページごとに役割を設定でき、制作をスムーズに進めることができます。

今回の制作では３つのページを活用します。

・ワイヤーフレーム

・デザインデータ

・デザインガイドライン

各ページの役割について解説します。

ワイヤーフレーム

ワイヤーフレームには、コンテンツの設計図となる情報を整理します。デザインの前工程になる情報ですが、工程が異なるため、ページを分けて見やすいように管理します。

デザインデータ

実際にデザインを作っていくページです。レイアウトや装飾といったデザインの実作業をここで行います。

デザインガイドライン

設定したスタイルや、コンポーネントなどを見えるように集めておくページです。Figma側に登録したスタイルを一括で見えるように整理します。

フレームの設定をする

「ワイヤーフレーム」ページの中にデザインの枠となるフレームを作成します。 本Lessonでは幅1440pxのPCサイズのフレームと、幅375pxのSPサイズのフレームを作成します。これらのサイズを基準として本Lessonではデザインカンプを作っていきます。 PCサイズの基準としては横幅1366pxのノートPCサイズ、もしくは横幅1920pxのフルHDディスプレイを基準とすることが多いですが、横幅を1440pxとすることで２つのサイズの中間地点としてデザインを作成することができます。 また、横幅375pxサイズはiPhone 8を基準としたサイズ感であり、日本における2022年12月の画面シェアとしてはもっとも使用者が多いスマートフォンの画面サイズにあたります。

レイアウトグリッドを設定する

PCサイズ・SPサイズともにレイアウトグリッドを設定します。グリッドを設定することでフレーム内にレイアウトの基準を作り、分割したサイズでのデザインを作成しやすくなります。

PCのグリッドサイズ

PCのグリッドサイズを設定するにあたり、コンテナサイズを頭に置きつつ設定します。コンテナサイズは、コンテンツ幅ともいいます。この幅の中でテキスト・画像などのコンテンツをレイアウトしておくことにより、見やすく実装しやすいデザインを作成することができます。このLessonにおいてはPCのコンテナサイズは横幅1140pxに設定しています。

@div:figure

PCのコンテナサイズ @divend

このコンテナサイズに合わせて、グリッドを引きます。

@div:figure

PCのグリッド @divend 列　12分割グリッド　幅73　ガター24 種類:中央揃え

グリッドを引くことにより、画面を分割したレイアウトをしやすくなります。これをグリッドレイアウトと呼びます。12分割のグリッドを基準とすることで、3分割、2分割、4分割、6分割など横幅をさまざまな分け方で分割することができるため、幅の広いPCサイズにおいては12分割のグリッドを引くことでレイアウトの自由度が上がります。

SPのグリッドサイズ

@div:figure

SPのグリッド @divend

（１）列　1分割グリッド　幅20　ガター24 種類:左揃え

（２）列　1分割グリッド　幅20　ガター24 種類:右揃え

幅375pxのSPサイズのフレームを作成します。フレーム内にグリッドを2つ作成し、それぞれ左・右から20pxのガターを設定します。このようにグリッドはいくつか重ねて設定することができます。スマートフォンサイズの場合は、画面のサイズが小さいこともあり、左右の余白のみをグリッドとして設定すると取り回しがよくなります。