30分でできる！ Figmaでサムネイルを作ってみよう

Figmaの基本的な利用方法から実務に役立つTipsまでをご紹介する本連載。 第5回目のテーマは「 Figmaを活用したサムネイル作成」です。

前回に引き続き、 necco の阿部が担当します。 当社はコンサルティング型のデザイン制作会社です。Figmaは共同編集が快適で、最後の作り込みまで対応できるため、2018年から使用しています。

今回は、デザイン作成の第一歩として「サムネイル」の作成方法を紹介していきます。サムネイルとは、ファイルを開かなくても内容が一目で分かる画像のことです。Figmaでは、ファイルブラウザ画面 にサムネイルが表示されます。

例えば、YouTubeの動画やニュースアプリのコンテンツなどで表示される画像がサムネイルです。サムネイルがあることで、エンドユーザーは動画を再生したり記事ページを開いたりしなくても、動画や記事の内容を判断できます。

以下の画像が、今回作成するサムネイルの完成図です。 作成の流れに沿って具体的な操作を見ていきましょう。

• 

  サムネイル完成図

1.フレームを作成する

まずは、サムネイルの大枠となるフレームを作成します。 上部ツールバーにある「フレーム」を選択。右側のデザインパネルに、Figmaに登録されているフォーマットが表示されるので、その中から「プラグイン/ファイルのカバー」を選択するとフレームが作成されます。

• 

  ツールバーから「フレーム」を選択後、デザインパネルに表示されるテンプレートから「プラグイン/ファイルのカバー」を選択

• 

  「プラグイン/ファイルのカバー」を選択するとフレームが作成される

フレームにはデフォルトで名前が付いていますが、複数のフレームがあると所在が分からなくなってしまうため、レイヤーパネルから新しくフレーム名を設定するのがおすすめです。他のメンバーと共有する際にも伝わりやすくなります。

• 

  フレーム作成後、レイヤーパネルからフレーム名を設定

2. テキストを作成する

続いて、サムネイル内のテキストを作成していきます。ツールバーから「テキストツール」を選択し、フレームの中でテキストを入力します。

テキストのサイズや、フォントは右側のデザインパネルから調整可能です。「Bold」を選択すると太字にできます。テキストの位置の調整は、デザインパネルで数字を打ち込む、もしくはマウスやカーソルで直接移動させて行います。

• 

  ツールバーから「テキストツール」を選択し、テキストを挿入

行間もデザインパネルから設定が可能です。タイトルや説明文など、種類によって適切な行間は変わってくるため、用途に合わせて設定しましょう。

今回は「Hello, Figma World !」というテキストを入力し、文字を「Bold」、フォントサイズを「200」、フォントの種類を「Noto Sans」、行間を「140%」に設定しました。

• 

  デザインパネルから、フォント・フォントサイズ・行間などを設定

3. シェイプを作成する

次に、円・三角・四角・線などのシェイプを作成していきましょう。

円を作る場合には、ツールバーのシェイプツールから「楕円」を選択し、ドラッグ＆ドロップで作成します。Shiftキーを押しながらドラッグ＆ドロップすると正円を作ることができます。

• 

  ツールバーの「シェイプツール」から作成したい図形を選択

三角・四角や直線も同様に、シェイプツールから選択して作成できます。直線や矢印は、先端の形状を変更することも可能です。デザインパネルから任意の形状に変更しましょう。

• 

  「直線」と「矢印」は、デザインパネルから先端の形状を指定することも可能だ

また、複数のオブジェクトを整列させることも可能です。整列させたいオブジェクトをShiftキーを押しながら複数選択し、整列パネルから「右揃え」や「左揃え」を選択します。

ここでは、直線（「Hello」下部）と矢印（「Figma World !」下部）を選択して、左揃えにしています。

• 

  整列させたいシェイプを選択し、デザインパネルから「左揃え」「中央揃え」などを指定できる

なお、作成したシェイプを右クリックして「コピー」を選択し貼り付ければ、シェイプの複製が可能です。ショートカットキーもあり、Windowsの場合はShiftキーを、Macの場合はOptionキーを押しながらシェイプをドラッグすれば複製されます。

4. デザインの階層構造について

ここで、デザインの階層構造について解説します。複数のフレームや要素を含む複雑なデザインを作成する際に、階層構造を意識したデザインをすることで、エンジニアなど他の人がデザインデータを見た際に、デザインのまとまりが一目でわかるようになります。

理解しやすいように、フレームとシェイプを使って説明していきます。 まず、フレームの外にシェイプ(円形)を作成します。次に、シェイプをドラッグ＆ドロップして、フレームの中に移動します。

そうすると、フレームの縁が青色になり、フレームの中にシェイプが入ったことがわかります。

• 

  シェイプをフレーム内に移動させると…

この際、シェイプの階層が変わり、レイヤーパネルにも階層変更が反映されます。レイヤーパネルを確認すると、シェイプ（Ellipse 1＝円形）がフレーム（サムネイルA）の中に移動していることがわかります。

• 

  シェイプの階層が変わり、レイヤーパネルにも階層変更が反映される

レイヤーパネルとキャンバスは連動しており、レイヤーパネルのEllipse 1をドラッグ&ドロップでサムネイルAの外側に出すと、キャンバス上でもシェイプがレイヤーの外側に出て、フレーム上でクリックできなくなります。

5. 塗りや線の設定を行う

次に、フレームやシェイプへの塗りと、シェイプの枠線を設定します。

まずは塗りからです。色をつけたいシェイプを選択し、デザインパネルの「塗り」から、自分の好きな色を選択します。すると、選択した色がシェイプに塗られます。フレーム（背景）も同様に塗りを設定できます。

• 

  色をつけたいシェイプを選択し、デザインパネルの「塗り」から色を指定

なお、FigmaではRGB形式でさまざまな色を表現できますが、印刷物向けのCMYK方式には対応していないので、制作したサムネイルやデザインを印刷すると色の見え方が異なるため注意しましょう。

シェイプの色塗りが終わったら、シェイプを強調するために全てのシェイプに枠線を付けていきます。 Shiftキーを押しながら全てのシェイプを選択します。シェイプを選択したら、デザインパネルにある「線」の「+」をクリックしましょう。すると、全てのシェイプに枠線が追加されます。

線の色や太さもデザインパネルから変更できます。今回は、線の色を黒に設定し、太さを10pxに設定します。

• 

  枠線をつけたいシェイプを選択し、デザインパネルの「線」から枠線の太さや色を指定

これでサムネイルのデザインは完成です。

6. サムネイルの設定と画像の書き出し

最後に、サムネイルの設定と画像の書き出しの方法について解説します。

まずはサムネイルの設定からです。サムネイルの設定は、フレームを選択した状態で右クリックし、「サムネイルとして設定」を選ぶだけです。Figmaのファイルブラウザ画面でサムネイルとして表示されていることが確認できます。

• 

  フレームを選択後、右クリックから「サムネイルとして設定」を選択

次に画像の書き出しについて解説します。 書き出しを行えば、Figma内でサムネイルとして使うだけでなく、バナーなどの画像やSNSへの貼り付け画像、デザインデータに入れる画像など、さまざまな用途で活用できます。

まずは、フレームを選択した状態でデザインパネルの「エクスポート」をクリックしましょう。PNG、JPEG、SVG、PDFの4種類の書き出しを行えます。2倍、3倍など書き出しの倍率も選択可能です。

• 

  フレームを選択後、デザインパネルの「エクスポート」から画像を書き出し

また、「エクスポート」内の「+」をクリックすると、PNG、JPEGなど複数の形式を同時に書き出すことができます。

• 

  一度に複数形式で画像を書き出すことも可能だ

今回はデザイン作成の一歩目として、サムネイル作成の手順をご紹介しました。 まだFigmaを使ったことのない方や、これからFigmaを使ってデザインを作ってみたい方は、この記事を参考にぜひ一度サムネイルを作成してみてください。