こんにちはデザインチームのスギムラです。
最近はインスタで見つけた良さげなカフェやレストランをGoogleマップに保存しまくってます。
外出のついでに近くの店に立ち寄ったり、友人との食事の時の参考になってます。
これもっと何年も前からやっておくべきだった。
ということで今回はTechRachoのアイキャッチ作成にFigmaを導入して便利になったよ！という話をしていきたいと思います。
TechRachoのアイキャッチ作成については、サイトのリニューアル時にある程度システム化して、ノンデザイナーの編集部メンバーが楽に更新ができるようにしました。
関連記事はこちら。
アイキャッチ作成をFigma化した経緯
AdobeXDを使った運用そのものには大きな不満はなかったのですが、理由は二つです。
- ①AdobeXDのプラン改変によって無料プラン（スタータープラン）がなくなった（これがメイン）
- ②デザインチームがFigma導入を本格化した
①AdobeXDのプラン改変によって無料プラン（スタータープラン）がなくなった
これが最大の理由です。
編集部メンバーはアイキャッチの更新用に無料プランで利用していました。
Adobe公式からプランは消えていましたが、そのあともしばらくは無料プランが使えているようでした。
とはいえ、いつ使えるなくなるかもわからない状態のため、継続使用するわけにもいきません。
しかしながらアイキャッチ作成でXDを使うためだけに、Adobe Creative Cloudコンプリートプランはあまりにも費用オーバー＆使わなさすぎる…。
※Adobe XDはCreative Cloudコンプリートプランを購入しないと使用できません（2025年7月現在）
※Creative Cloudコンプリートプランは7,780 円/月 (税込)（2025年7月現在）
※参考：Creative Cloudアプリのプランと価格
②デザインチームがFigma導入を本格化した
2024年にBPSデザインチームはデザインワークでのFigma導入を本格化しました。
Figma運用のノウハウもしっかり溜まってきていました。
そしてFigmaは安い！Figmaなら年間23,760円、月々1,980円！（2025年7月現在）
※参考：プランと料金
という経緯で、TechRacho編集部にもこのタイミングでアイキャッチ作成をFigma移行してもらうことにしました。
Figma化のための手順
Figma化にあたり下記のことを実施しました。
- 既存のアイキャッチパターンを仕分け
- コンポーネントの整理
既存のアイキャッチパターンを仕分け
AdobeXD化から数年たち、作ってみたはいいものの運用していないテンプレートも存在していましたので、使用していないものは移行対象から外しました。
特に、「夏のTechTachoフェア」「アドベントカレンダー」企画で使用するパターンはたくさんあるとそれだけ作成の手間になりそうでしたので、シンプルなパターンに変更しました
コンポーネントの整理
まずコンポーネントとは何ぞやですが
コンポーネントは、デザイン全体で再利用できるUI要素です。
- メインコンポーネントは、要素のプロパティを定義します。
- インスタンスは、デザインで再利用できるコンポーネントのコピーです。
要するに、一個のテンプレートを用意したら、それをマスターにして管理できるよーという機能です。
似たような機能はSketchやAdobeXDにもあります。
下記画像のようにコンポーネントを用意しました。
背景色を複数用意したり、吹き出しの大きさ違いパーツを複数用意するなど、あらかじめよく使うパターンを組み込んでいます。
コンポーネントの詳しい機能については省略しますが、簡単に色やスタイルをあらかじめ用意した別のパターンに切り替えることができます
XDのころに比べると管理が格段に楽になりました。
アイキャッチ作成をFigma化して特によかった点
- カラーやレイアウトのバリエーションが複数あるコンポーネントの管理が簡単
- AdobeXDに比べてアプリケーションの動きが軽い
カラーやレイアウトのバリエーションが複数あるコンポーネントの管理が簡単
AdobeXDでも先ほど紹介した「コンポーネント」機能はあります。
ただし、Figmaのように1つのコンポーネントの中で複数のカラーやレイアウトのバリエーションを持たせることができません。
そのため、作業をするうちにいつの間にかテンプレートから変わってしまっていた…なんてことも起きていました。
Figma化したことによって、この問題は解消されました。
複数パターンあるデザインの管理が格段に楽になりました。
今回のFigma化はすでにパターン化されていたものをコンポーネント向けに整理したので、あまり労力はかかりませんでした。
「TechRachoのアイキャッチをテンプレート化しよう！」となったときのテンプレートを体系化して一から作る作業の方が大変でしたね…。
AdobeXDに比べてアプリケーションの動きが軽い
Figmaの方が体感早いです。
とくにアートボードが増えた時の動きがXDよりもサクサク感じています。
まとめ
結論：アイキャッチ作成をFigma化してよかったー！！
おまけ
Figmaの悪いところは料金体系のわかりにくさですね…。
サイトを見てもわからないことが多すぎて、お問い合わせをする羽目になりました…（サポートデスクの方は懇切丁寧に教えてくださりとても助かりました、ありがとうございます）
今年度から料金体系周りが変わったようなので今後も期待しています。
でも値上げなんだよな～…
Webサイト・アプリ開発・デザインはBPSにおまかせください
Webサイト、システムデザイン、LP（ランディングページ）の制作と合わせて、
ロゴ、チラシ、パンフレットなどのデザイン制作もまるっとご依頼いただけます。
BPSのデザインチームは「システム開発会社のデザインチーム」だからこそ、ユーザー目線を追求したデザインを可能にしています。
- 「自社に合ったシステム・アプリを開発してほしい」
- 「現行のWebサイト・システムが古いのでリニューアルしたい」
- 「自社に開発チームはいるけどデザインは外注したい」
といったご要望も、BPSが柔軟に対応いたします。
ぜひお気軽にご相談ください！
