フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

Figmaでホワイトデーのバナー作りました。JavaScriptでギャラリー風に。

当ブログはアフィリエイト広告を利用しています。
Design
スポンサーリンク
【PR】おすすめの本

管理人が買って良かった一冊を紹介します!

Webデザイナーのお仕事が具体的に分かる!デザイン勉強中の人は読んで損なしの一冊。
¥2,497 (2024/10/08 17:12時点 | 楽天市場調べ)

こんにちは!
ホワイトデーに合わせて、Figmaを使ってバナーを作ってみました。
超久しぶりにインスタに投稿して達成感がありました(^^)


今までWebデザインはAdobePhotoshopやXDを使用して作成していたのですが、XDはもう主流ではなくなる事が分かってきたので、今後はFigmaを使えたほうがいいだろうと思い練習中です!
Figmaは無料で使えるプラグインが充実しているとの事で、色々な参考記事を見ながら機能を試してみました。

写真の加工やこだわったあしらいを作成するには、AdobePhotoshopやIllustratorを使ったほうがいいかな、という感触です。
ですが、Figmaだけでもほぼ完成形まで作れそうな感じで、今回のようなシンプルなバナーならわざわざAdobe使わず、軽くサクサク作れてしまいました?(クオリティは置いといて)

それではお目汚しですがバナーご覧になってください〜!

スポンサーリンク

ホワイトデーバナーのギャラリー

4種類作ったです!
4枚並べるだけなのもつまらないかな?と思ってギャラリー作ってみました。
小さなサムネイルをPC版ではホバー、SP版ではタップすると大きいメインの画像が切り替わります。

このギャラリーは以下書籍を参考に作りました(^^)
これからJavaScriptを勉強したい方にオススメです。
WordPressのカラムブロックで作ろうとしたのですが画像パスの切替がややこしくなりそうだったのでカスタムHTMLです。

1冊ですべて身につくJavaScript入門講座

¥2515(2024/10/03 13:53時点 | amazon調べ)

スポンサーリンク

今回使ったFigmaのプラグイン

バナー作成で使用した主なFigmaのプラグインをさくっとご紹介します。

Unsplash

マカロンの画像はこちらから使用させていただきました。
Unsplashのサイトで検索して、画像をダウンロードして、、、という手間が省けてとても助かりました。

Unsplash | Figma Community
...

Remove BG

画像の背景を自動で削除!Figma上で完結できて便利でした。利用する前にアカウント登録してAPIキーを取得する必要がありました。

Remove BG | Figma
...

Blobs

ふんわりとした円形の画像がさくっと作れます。
作った円形で写真をマスクして可愛らしい画像が作れます(^^)

Blobs | Figma Community
...

終わりに

FigmaこれからWebデザインでバリバリ使っていきたいと思います!
Webデザインではスタイルの登録やレイアウトグリッドの使用など、バナー作成よりもシステム化して使っていく感じになります。
慣れればかなり効率よく制作できると思います(^^)

それでは、今回は以上になります。

ご訪問ありがとうございました。


コメント