![見出し画像](https://assets.st-note.com/production/uploads/images/134640391/rectangle_large_type_2_889abb2d46ebebf422e23f0b22496490.png?width=1200)
Figmaで作成しているサムネイル、あとちょっと作業時間を短縮したい
デザイナーのemiです。
このサムネイル(見出し画像)はFigmaで作成しているのですが、サムネイルを作ろうと思ったらなにげに時間かかりませんか?
noteでは作成した画像をアップロードしてサムネイルとする他に、画像を選ぶだけでできたり、CanvaやAdobe Expressでテンプレートをもとに作成できるようになっています。
![](https://assets.st-note.com/img/1710742909751-pVJNSnJcJC.png?width=1200)
便利な機能なのでこれを使えばいいのでは?と思うのですが、このブログは個人のブログではなく、ちょっと社のデザイナーユニットとしてのブログなので、「デザイナーユニット」として適切か。と考えた時に、「適切……ではない気がする」と思い、作成した画像をアップロードしてサムネイル(見出し画像)としています。
ちなみにサムネイルは各自で作成しています。
サムネイル作成のツール選定
サムネイル画像の作成に何のツールを使うか。ですが、以前コーポレートサイトでブログが運営されていた時、私はXDで作成していました。
当初Photoshopで作ろうと思っていたのですが、どうしても時間をかけてしまう(作業しているうちに楽しくなって、もっとこうしようかなと思い始めて結局時間がかかる)ため、他にも業務があるのにここで時間をかけるわけにもいかないので、Adobe XDで短時間で作成するようにしていました。しばらくの間XDで作成していたのですが、XDは新機能の追加がされない、更新もされない、業務でFigmaを使うようになったこともあり、今はFigmaで作成しています。
Figmaでサムネイルを何枚か作成して思ったことは、「ここをコンポーネントにすればもっと作業時間を短縮できるかも。」「テンプレートを作ったらもっと時間短縮できるかな。」でした。
とりあえずいくつかパターンを作成
まずは、テンプレートを作成しよう。でもその前にコンポーネントを作成した方が表示非表示を切り替えることもできるし、作業時間短縮につながるのでは。と思い、空いた時間でコンポーネント化の作業をしました。
いままで作成したサムネイルを数枚ピックアップして、共通化できる部分を探していきます。文字情報と背景画像で分けて考えることにしました。
![](https://assets.st-note.com/img/1710743023550-frT6ai1uMa.png?width=1200)
Figmaで作成したコンポーネント化する前です。(自分だけが作業するファイルだとおもってレイヤー名とかとくになにもしてないです、すいません)
まずはこのデータをもとにコンポーネント化していきます。
![](https://assets.st-note.com/img/1710743051918-c6YnmS0VCl.png?width=1200)
コンポーネント化していく
コンポーネント化するにあたって、どの部分でどんなふうにプロパティを持たせればいいか。を考えました。今回はロゴとタイトルの表示はマストかな。ということで、まずは大枠で以下の4つに分けました。
ロゴ
装飾
タイトル
背景画像
それぞれでデザインのバリエーションを持たせよう。と思い、プロパティを指定する部分を以下のようにしました。
type
サブタイトルのテキスト
タイトルのテキスト
サブタイトルの表示・非表示
タイトルコンポーネント
タイトルを表示する部分で3種類のデザインのバリエーションを用意し、これをバリアントで管理するようにしました。
![](https://assets.st-note.com/img/1711005585474-dOAiyv0EVy.png?width=1200)
サブタイトルの部分は以下のプロパティを指定しました。
表示・非表示の切り替え(ブール値)
文字入力(テキスト)
![](https://assets.st-note.com/img/1711005508964-g1hatYC9NI.png?width=1200)
タイトルの文字部分は以下を設定しました。
テキストプロパティ
サムネイル作成時にはタイトルは必ず入れるだろう。と思ったのでブール値プロパティで非表示ができるようにはしていません。(非表示にしたくなったらレイヤーの方で非表示にできるので)
装飾のコンポーネント
装飾のコンポーネントも3種類のデザインを作成してバリアントで管理しています。
![](https://assets.st-note.com/img/1711005756374-nv6aW0cwpE.png?width=1200)
英語表記、日本語表記の文字情報の部分は、ブール値プロパティで表示・非表示の切り替え、テキストプロパティで文字入力ができるように設定しました。
![](https://assets.st-note.com/img/1711005863814-nwEFsi0kNV.png?width=1200)
ロゴは背景の有無のバリエーションでバリアントで管理しています。
![](https://assets.st-note.com/img/1710743445468-QYQYK3lpv7.png?width=1200)
背景画像は画像の差し替えができるようにし、4つのバリアントを用意しました。
![](https://assets.st-note.com/img/1711006259032-xtazVzl5q1.png?width=1200)
作成したコンポーネントを配置してサムネイル全体をコンポーネントにし、文字の配置を3つバリアントで用意しました。
左寄せ
中央寄せ
2カラム
![](https://assets.st-note.com/img/1711006971976-movb6L8IaU.png?width=1200)
ロゴの部分で装飾として追加している線もブール値プロパティで表示と非表示を切り替えられるようにしました。
![](https://assets.st-note.com/img/1711007438098-kvaG9Y4cYw.png?width=1200)
テキストプロパティとブール値を設定した装飾、タイトルについては、プロパティパネルでタイトルとサブタイトルの文字を入力することができるようになりました。
![](https://assets.st-note.com/img/1711007585834-GRPzc0uwZj.png?width=1200)
![](https://assets.st-note.com/img/1711007727796-eszj7Awhdi.png?width=1200)
完成
完成です!プロパティの部分で切り替えるだけでデザインが変更できるようになりました。
これでサムネイル作成の工数をさらに減らせる…はず!
![](https://assets.st-note.com/production/uploads/images/134638137/picture_pc_c7420f22d42a335106d88373aeb15fb3.gif)
![](https://assets.st-note.com/production/uploads/images/134638184/picture_pc_1c4491baeb0e6e98778709eeb9427ff7.gif)
課題
背景画像も変更できるようにしてみたんですが、画像は選択するよりも都度選ぶ方がいいのか、でもそこに結局時間がかかりそうだなと思うので、もうちょっといい方法がありそうです。
![](https://assets.st-note.com/production/uploads/images/134638476/picture_pc_676c7cf422a3c49b7ba2e0896cc7e04f.gif)
しばらくこれで使ってみようとおもいますが、もう少しデザインのバリエーションを増やそうかな…でも色とか画像差し替えれば良さそうだし…どのデザインパターンを選ぶか悩んで結局時間奪われそう…バリアブルを使えばもう少しラクできる気がする…と改善できそうな点がいくつかありそうなので、引き続き模索します。
この記事が気に入ったらサポートをしてみませんか?