Figmaでconnpassのイベント画像を作る
はじめに
connpassでイベントを作成する際、大切な要素の一つにイベント画像があります。このイベント画像というものはイベント一覧の少し横長のサムネイルや、カレンダーに表示されている小さなアイコンにも同じ画像が使用されます。
初めの頃は特に何も考えずに作成していましたが、今では色々と意識して作成するようになりました！イベント画像にこだわることで集客やイベントにワクワクする効果を増大させることができます。自分なりの作り方をまとめておくので参考になれば幸いです✊
Figmaとは
私はイベント画像を作成する際にFigmaを利用しています。Figmaはブラウザでも利用できるデザインツールです。また、今回の用途では無料で利用できます。
チームでの利用も一部無料で可能ですが、大規模な利用の場合は料金プランページを確認してください。
イベント画像とは
今回作成方法についてまとめたイベント画像とは、connpassでイベントを作成するときに設定します。この画像はconnpass内で主に以下の3箇所に使用されます。
イベントページの上部
イベント一覧のサムネイル
カレンダーのイベント開催日
それぞれのサイズについて
公式の利用ガイドでは以下のように記述があります。
PC版connpassではイベント画像は、横660pixel × 縦270pixel サイズで表示されます。
このサイズを超える画像の場合は、横660pixelに縮小され、縦270pixelになるよう上下がカットされます。
スマートフォン版connpassのイベントページでは横200pixel × 縦200pixelにリサイズした画像が横75pixel × 縦75pixel に縮小表示されます。
このサイズを超える画像の場合は、横200pixelに縮小され、縦200pixelになるよう上下がカットされます。
PC版、スマートフォン版のいずれでも画像の一部カットされないようにするには、横660pixel × 縦270pixel の画像を用意してください。
これに従って作成していましたが、この記事を書いている際に必ずしも上記のように動作しているわけではないような気がしてきました。ですが公式が推奨しているので上記方法に倣って作成していきます。
画像作成時のポイント
各画面での表示を意識する
まずは3箇所でイベント画像がどのように見られるかをイメージします。私のイメージは以下です。
-
イベントページの上部
イベント時にまず見るところ。SNSのOGPにもこのサイズの画像が使用されるので、イベントを知るときに一番に目に入りそうな気がする。 -
イベント一覧のサムネイル
様々なイベントと並べられる。例えばJAWS系のイベントを探している人であれば、一目で分かる方がいいはず。 -
カレンダーのイベント開催日
自分のページでカレンダーが埋まっているとニヤニヤする。字はほぼ読めない。
上記を意識すると「イベント一覧のサムネイル」サイズになるべく情報をまとめつつ、イベントのメイン画像は「カレンダーのイベント開催日」サイズにデーンと配置し、「イベントページの上部」サイズには割と好き放題してもいい感じです。
いきなり手を動かすのもいいですが、なんとなく完成系をイメージしてから作業をするとスムーズかと思います。
背景画像にはマスクをかける
これはイベント画像のコツというか、様々なデザインに言えることだと思います。例えば景色の画像を背景に設定する場合、明るい写真だと上に配置した文字が見えにくくなります。
Figmaではお手軽にマスクを設定できるので、背景画像に明るい画像を設定する場合には覚えておいて損はありません。
黒 透明度50%マスクの有無
画像を作成する
ここまで長くなりましたが、ようやく画像を作成していきます。
新しく作業用のファイルを用意する
まずはFigmaで「New design File」を選択し、新しいファイルを作成します。2回目以降は同じファイルに並べていけばいいと思います。
ヤマダのテンプレをコピーしてくる
次に以下のファイルからヤマダの作成したさいきょうのテンプレをコピーしてきます。これをベースにして作成することで様々な表示箇所を意識しやすくなります。
https://www.figma.com/design/9TKOJspxZE0wCjwLQlIglE/Untitled?node-id=0-1&node-type=canvas&t=MpydBqr6Q6HOu5l7-0
左のメニューにある「#テンプレ」を右クリックして「コピー」を選択します。全体的をまるっとコピーしないとパーツのみ持っていってしまうのでお気をつけください。
自身のファイルにペーストする
2個くらいペーストしましょう。一つは今後のテンプレ用、そしてもう一つを今回の作業用として使います。イベント名などに変更すると管理しやすいです。
自由に画像や文字を配置する
さいきょうのテンプレについて
「さいきょうのテンプレ」には各表示領域に合わせたオブジェクトが配置されています。
これらのオブジェクトの表示・非表示を切り替えて、最終的なイメージを確認しながらイベント画像を作成してください。
オブジェクトの表示・非表示はオンマウスした際に右に出てくる目のアイコンで切り替え可能です。
コツとしては水色の領域である「イベント一覧のサムネイル」に収まるように作成すると見栄えが良くなります！
文字配置
「T」ボタンを選択し、適当に範囲をドラッグすると文字列を挿入できます。Figma内のオブジェクトは左のツリーにあるフレーム内に配置しないと画像化する際に反映されません。
フレーム内に文字列オブジェクトを配置した例
画像配置
適当にドラッグしてファイルをアップロードしたり、コピペで持ってきたりできます。これもフレーム内に含めないと画像化する際に反映されないので注意が必要です。
背景画像にマスクをかける
適当に背景に画像を配置してみました。この画像にマスクをかけていきます。
マスクをかけたい画像を選択し、右のメニューの「Fill」の「＋」を選択します。
その後、追加された黒いFillの透明度を「50%」ほどに設定します。また、合わせて前面に配置した文字色を「白」に変更します。
画像としてエクスポートする
完成したら画像出力をしたいフレーム全体を選択し、右メニューから「Export フレーム名」のボタンをクリックしてエクスポートします。
私のテンプレをコピーして作成し、フレーム全体を選択できている場合は特に操作をしなくてもエクスポートのボタンが存在すると思いますが、存在しない場合は「＋」ボタンから追加してください。
テンプレに含まれている各表示イメージ用のオブジェクトは最後に非表示か消してしまいましょう。表示状態で残っていても手前に表示されていなければ画像には映りません。
最後に
一度Figmaでイベント画像を作成すれば、同系統のイベントであればフレーム全体をコピペして文字列オブジェクトを変えるだけで簡単に画像が生成できるので非常に便利です！また、簡単な色味の変更や背景の透明化などもPluginでできたりするのでぜひ調べてみてください🙇♂️
Figma最高！👊👊👊
Discussion