Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント

この記事について

この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。

最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。

また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。

利用状況

2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。

（出典）総務省「通信利用動向調査」

このようにスマホ、PCどのデバイスでも見ることができるようにするために、レスポンシブWebデザインであることが重要になります。

PCとスマホそれぞれのWebデザインを作成してコーディングすればレスポンシブに対応したWebサイトを作成できますが、そのデザインの工程でFigmaを使用すれば効率的に作成することができます。

レスポンシブWebデザインとは

レスポンシブWebデザインは、さまざまなデバイスサイズに合わせてWebサイトのデザインを自動的に最適化する手法です。スマートフォンやタブレット、デスクトップなど、ユーザーが使用するデバイスに応じて柔軟にレイアウトを変更することで、快適なユーザー体験を提供することができます。

HTML・CSSを使用してレスポンシブWebデザインのWebページを作る方法は、Web制作の基礎から学べる「Webコーディングスクール」初回体験レッスン の動画で学ぶことができます。

Figma初心者でも大丈夫

Figma初心者でもポイントを押さえてデザインを作成すれば、レスポンシブに対応したWebデザインを作ることができます。

この記事では、以下の3つのポイントに分けて解説していきます。

• 文字スタイルを設定
• コンポーネントを作成
• オートレイアウトで時短

まずはカードレイアウトのデザイン例です。この例ではPCとスマートフォン用のデザインを用意しています。

文字スタイルを設定

見出し、本文など、テキストで表示する部分では文字スタイルを設定しておきます。

文字スタイルを設定しておくと、デザインの作業時に都度フォントサイズを確認しなくても文字スタイルの部分を選択するだけで、設定したフォントの種類やサイズが適用されます。

設定された文字スタイルを使用すれば、ページによって見出しのサイズがバラバラになったりすることを防ぐことができ、デザインの統一にもつながります。

PCとスマートフォンで文字サイズを変更して表示したい。という場合も設定された文字スタイルを確認すれば、Figmaでの作業だけではなく、コーディング時にも文字スタイルとしてまとまったものを確認することができ、作業時間の短縮にもなります。

コンポーネントを作成

繰り返し使用する部分をコンポーネント化すると、何度も同じデザインパーツを作成せずに済むので、作業時間を短縮することができます。

また、微妙に余白やフォントサイズが違うものになってしまったりすることがなくなるので、Webサイト全体の統一感にもつながります。

この例ではカードレイアウトの部分をコンポーネント化しています。

よく見ると、このカード内でも他のセクションで使用できる共通のデザインパーツがあることがわかります。

このカード内にある共通の部分もそれぞれコンポーネント化して、カードレイアウトとしてひと塊りでコンポーネント化しています。

 オートレイアウトで時短

Figmaでオートレイアウトを使って作成する場合はコーディングのことも考えながら作業します。コーディングは、様々なウィンドウ幅で表示しても崩れないようにする必要があります。

PCとスマートフォンのデザインを作成することになった場合で考えてみます。

このようなカード型のデザインパーツをPCでは横並びで表示することができても、スマートフォンでは幅も狭くなるのでどうしても同じように横並びにはできず、折り返して縦に並べることになるかと思います。

PCでは横並び、スマートフォンで表示する場合は縦に並べて表示するようにデザインしたい。という時、オートレイアウト機能を使ってデザインすると、プロパティパネルをクリックするだけで横並びから縦並びに簡単にレイアウトされた状態になります。

Figmaを使ったレスポンシブWebデザイン作成のメリット

Figmaのコンポーネントやオートレイアウトはデザイン作成時に作業しやすいのはもちろんですが、並び方を簡単に変更できるだけではなく、オートレイアウトを使用すると、カードのエリア内の余白を設定することができ、プロパティパネルで余白として設定した部分の数値も確認できます。

その数値はコーディング時にpaddingとして指定する時にも使うのでコーディングの作業をする人も確認もしやすくなります。

このように、コーディングのことを頭に置きつつ、Figmaでオートレイアウトを使えるようになるとデザイン制作の作業時間の短縮になるだけではなく、コーディングしやすいデザインデータにもつながります。

まとめ

ではレスポンシブWebデザインをFigmaで作るためのポイントをおさらいします。

このポイントを押さえておけば、Figma初心者でもデザインの効率化だけではなくコーディングのことも考慮したレスポンシブWebデザインを作成できます。