推しに自作寄せ書きを贈ろう【Figma+Google Sheet】

最近推しへの寄せ書き企画に協力しました。

色紙へ載せるメッセージを応募してくださった方は50人近くいましたが、今回Figma + Google Sheetを使うことで作業の一部を自動化できたため、オリジナルデザインでありながら、締め切り以内に企画のみんなと一緒に仕上げられました。

寄せ書きを作りたい方の役に立つかもしれないので、この記事ではそのやり方を紹介したいと思います。

サンプル画像
今回作成した寄せ書きには、みんなのメッセージとファンアートをいっぱい散りばめました。
自動化した部分はメッセージ部分です。メッセージを投稿する際、文字色とフォントを選択することができます。
3枚分のデータを実物の色紙に印刷し、推しに届けてもらいました。素敵な企画に参加できて本当に良かったです。企画、協力したみんなありがとう！（私の推しもありがとう💐💐）

色紙を作成する他の方法

この企画にて、最初に挙げられた方法は2つありました

①　オンライン寄せ書きサービス
　　　✖　テンプレートに沿ったデザインにしかできない
　　　✖　出力にお金がかかる場合がある
②　自作
　　　✖　編集が大変

オリジナリティが欲しいけど全部手作業でやる余裕がない、そこで今回の企画ではFigmaを使うことにしました。

Figmaとは

FigmaとはUI/UXデザインチームのためのツールです。基本無料。WEBでも使える、共同編集しやすいツールです。料金はプロジェクト規模によりますが、寄せ書きを作るには無料で十分です。

FigmaではComponent（コンポーネント）という機能があってデザインの調整が快適にできます。更に、Google Sheets SyncというプラグインがあってGoogle Sheetのデータを同期できます。

この二つの機能を利用してかなり編集時間を節約できます。

Figma: The Collaborative Interface Design Tool

メリット＆デメリット

〇　オリジナルデザイン
〇　デザインの調整がしやすい
〇　募集したデータの自動反映
〇　共有と共同作業
〇　PNG / JPG / PDF出力
〇　無料
✖　Figma（とGoogle Sheet）についての知識
✖　メニューと公式資料が英語
　（一応、Figmaメニューの日本語化Chrome拡張機能もあります）
✖　自動化できない部分・デザインには手作業が必要

作業の流れ

①　Figmaで大まかのデザインを決める
②　Google Formで募集（データがGoogle Sheetに保存される）
③　FigmaでGoogle Sheets Syncを使い、データを読み取ってFigmaに反映させる
④　Figmaでデザインや配置などを調整する
⑤　完成

とはいえデザインは何度も変えられるしデータも何度も同期できるので、順番を気にせず機能を試しながらやりましょう。

作り方

Figma自体の使い方は、ネット上に日本語のチュートリアルが沢山あるので、それを省略し、寄せ書きの制作に役に立つ機能を主に紹介します。

「（上級）」と書いている部分は複雑なので必要な時だけ見てください。文字色とフォントの同期と、見た目のバリエーションが上級部分です。

枠と文字のレイアウト：Auto Layout

Auto Layout（オートレイアウト）という機能を使えば文字によってサイズが変わる枠を作ることができます。オートレイアウトとはFrame（フレーム）内のコンテンツを自動的に配置する機能です。フレームサイズもコンテンツに応じて調整されるように設定できます。

文字に合わせて枠のサイズとアイコンの位置が自動的に調整される

枠の高さが文字によって変わるようにする設定

アイコンが枠に合わせて移動する設定
（つまりメインフレームの下に揃える）

ちなみにコンテンツのConstraintsを設定することで、フレーム内の上下左右の点のどちらを基準に配置することができます

パーツの再利用：Component

パーツをComponent（コンポーネント）にすることで簡単に量産できます。コンポーネントを利用することで、色やサイズなどを一括で指定できます。複製されたものはInstance（インスタンス）と呼びます。これを使えば枠の見栄えの統一が簡単！

基本的な使い方

同じパーツの見た目を一緒に変えられる
一部の設定の上書き(Override)もできる

基本的な操作

バリエーションを増やす：Variants（上級）

Variants（バリアント）とは一つのコンポーネントにバリエーションを持たせる機能です。プロパティの組み合わせを作って置いて、インスタンスの見た目を簡単に変えられます。

簡単なバリアント（フォントが違います）

複雑なバリアント

インスタンスのプロパティを変える
Figma Variants Playgroundより

データの同期：Google Sheets Sync

Google Sheets SyncというFigmaプラグインを使って募集したメッセージを一気にFigmaに持ち込めます。

Google Sheets Sync | Figma Community

基本的な使い方

ステップ：
①　Google Sheet Syncのページでプラグインをインストール
②　Figmaファイルでレイヤー名を命名規則に則って変更
③　プラグインにGoogle Sheetの共有リンクを入力して同期を押す
④　Re-syncを押せば再同期（もう一度取り込む）ができる

プラグイン画面

命名規則
レイヤー名に対応する「#列名」を入れる

データの個数によってコンテンツ生成

フレームをオートレイアウトにして、フレーム名に「@#」（半角注意！）を付けるとGoogle Sheets Syncで同期をしたときに中身を必要なだけ複製してくれます。

データが3個あるので、インスタンスが3個に増えた

コンテンツ生成の詳細（英語）：

Repeating your layers

レイヤープロパティ（上級）

テキストと画像の変更が基本的な使い方ですが、色、フォントサイズなどのプロパティも変えられます。それらの値はGoogle Sheetで特殊な書き方があります。更にターゲットがテキストレイヤー、またはインスタンスレイヤーの場合、値の前に「/」を置くことが必要です。

テキストレイヤーの色とフォントサイズを変える場合、Google Sheetでの書き方が「/#色コード」と「/font-size:数字」となる

対応できるプロパティと詳しいルールはここに書かれています（英語）：

Special data types

フォント名の指定はプラグインの機能にはありませんが、バリアントを利用すれば変更は可能です。

バリアント（上級）

編集画面の左がバリアント、右が生成したインスタンス（フォントが違います）
コンポーネント名に「#列名」を付け、シートの列（E列）で各プロパティの値（「プロパティ名1=値1, プロパティ名2=値2, ...」の形式で）を入力すればインスタンスのプロパティが変えられる

バリアントの同期の詳細はこちら（英語）：

How a value is applied to a layer

Google Sheet関数（上級）

プラグインが読み取れるよう、募集したデータに前処理が必要かもしれません。例えば色の「赤」は「/#D83058」に書き換える必要があります。そのために使えそうなGoogle Sheet関数を紹介します。

①　シートの結合

=QUERY({ QUERY('フォームの回答 1'!A2:F,"select *"); QUERY('フォームの回答 4'!A2:F,"select *"); QUERY('フォームの回答 5'!A2:F,"select *")}, "where Col1 is not null order by Col1")

もし複数のフォームで募集した時回答が別々のシートに保存されるので結合が必要です。「'フォームの回答 x'」を結合したいシート名に変えて新しいシートのA2にこの関数を入力すればできます。

上の関数を説明すると、「フォームの回答 1」、「フォームの回答 4」、「フォームの回答 5」それぞれの回答範囲（A2からF列の底まで）を全て選択し（select *）、されに空白の行を取り除いて（Col1 is not null　一列目が無ではない）、時間的順序（order by Col1　一列目つまりA列のタイムスタンプで順番を決める）で表示する。

関数QUERYの詳細はこちら：

QUERY - ドキュメント エディタ ヘルプ

②　色（方法１）

="/#"&REGEXEXTRACT(E2,"\w+")

Google Formで投稿してもらった内容（E列）をプラグインで読み取れる書式（H列）へ変更します。回答に埋めてあるカラーコード（「ピンク F66FD1」の「F66FD1」）となる文字列を抽出して、前に「/#」を追加します（/#F66FD1）。

関数REGEXEXTRACTの詳細はこちら：

REGEXEXTRACT - Google ドキュメント エディタ ヘルプ

③　色（方法２）

=VLOOKUP(I2, color_table, 2, FALSE)

あらかじめ色とカラーコードの対応表を作り、この対応表から色の名前で対応するカラーコードを探します。

1枚目の画像が対応表で、名前付き範囲の機能でcolor_tableという名前をつけました。2枚目の画像では、回答の色（I列）をcolor_tableから探し、見つけたカラーコードをプラグイン用の列（J列）に入れます。

関数を説明すると、I2の内容（白）をcolor_tableの1列目（A列）から探して、見つかったところ（A5）の2列目（B5）、つまり「/#F」を表示する。

関数VLOOKUPの詳細はこちら：

VLOOKUP - Google ドキュメント エディタ ヘルプ

③　フォントサイズ

="/font-size:"&MAX(MIN(SLOPE(fontsizes, textlengths)*LEN(B2)+INTERCEPT(fontsizes, textlengths), max_fontsize), min_fontsize)

文字数によってフォントサイズを計算します。

1枚目の画像ではあらかじめ決めた最小最大のフォントサイズとそれに応じた文字数です。ここは文字数が42以下だとフォントサイズが64、文字数が140以上だとフォントサイズが36になります。関数が書きやすいようにいくつかの名前付き範囲、fontsizes、textlengths、min_fontsize、max_fontsizeを作って置きます。

関数の説明：

# B2の長さ、つまり文字数
LEN(B2)

# 一次方程式でフォントサイズを求める
SLOPE(fontsizes, textlengths)*LEN(B2)+INTERCEPT(fontsizes, textlengths)

# 最大フォントサイズをmax_fontsize(62)に制限する
MIN(..., max_fontsize)

# 最小フォントサイズをmin_fontsize(36)に制限する
MAX(..., min_fontsize)

共有

FigmaファイルはGoogle Docみたいにリンクで共有できます。「can edit（誰でも編集できる）」は危ないので「can view（誰でも見れる）」にしましょう。共同編集したい時は相手のメールアドレスを入力して個別に招待しましょう。

おわりに

Figmaは本当に素晴らしいツールなので、もし推し事や創作に役に立てそうならぜひ使ってみてください。

クレジット

kirsepaさん💐
tototoさん💐
寄せ書きとこの記事をたくさん助けてくれて本当にありがとうございます！