記事より動画で見たい方はこちらから！（チャプター付のリンク有）
【動画のChapter】
00:38 今回のお題～タイトル
01:26 実際にFigmaを操作しながら解説
01:52 今回つくるギャラリー機能のご紹介
02:30 ベースとなる仕組みを理解する～オートレイアウトの設定～
04:55 画像の配置と設定
06:23 ライトボックス機能の実装
07:58 完成形とレスポンシブ時の状態を見てみる
09:20 今回のまとめ
11:18 「Figma Sites」が使用できるプランについて
こんにちは！今回もFigma Sitesのお話です！「デザインデータ」だけで！ライトボックス付のギャラリーつくっちゃおう
みなさんこんにちは～🌟🌟🌟
どーもどーも！私は「上武 ハヤ（うぇぶ はや）」といいます！
最近、動画配信を始めたVの者(Vtuber)です～🌟🌟
tedateさんのCSS解説動画（近日公開予定）を制作したご縁で、
こちらにも投稿させてもらうことになりました！（これ言うの4回目📢）
今日もよろしくおねがいしますねっ！
さて、前回の内容にひきつづき。
今回も、驚天動地のつよつよツール「Figma Sites」についてのお話ですよ～！
はりきっていきましょうっ！！！
デザインデータだけで、ライトボックス実装しちゃうよって話。
そう、Figma Sitesならね。
今回の動画はですね…、「ライトボックスのつくり方」について、挑戦してみました！
し・か・も♡
もちろん、レスポンシブ対応もセットです！
「Figma Sites」を使えば、
「Webサイトにライトボックスを実装すること」なども！
なんと…
「デザインデータを用意するだけ」で、ほんとうに「ライトボックス実装」、
できちゃうんですっ！！！
具体的な方法としては…
- ・(1). 画像をFigmaのデザイン上に並べてあげて、ギャラリー風のUIをつくります
- ・(2). そこに、「オートレイアウト」を適用して（フローの方向が重要！）
- ・(3). 「インタラクション」の設定をすればできちゃう！！！！！
たったこれだけの、わずか数ステップで！！
ほんとにできちゃうんだから！！ライトボックス付きのギャラリー！！！
グレート。greatful フィグマちゃん、ってわけですよ。
この前もその前もその前も…、毎回言ってますが「Figma Sites」、
「ゲームチェンジャー」最有力候補ですよもうこれ。
おそらく、
Webデザイン、Web制作のワークフロー、変わってくると思います。（これ言うの4回目📢～！）
今回もですね、
デザインデータだけで、ギャラリーを実際につくってみて…
「Figma Sites」のハンパなさ、再実感しました。
もうねこれ。ディモールト。ジョルノもびっくりの性能ってわけ。
…ということで、今回も、実際に私自身がFigma Sitesで、
ライトボックス付きのギャラリーをつくってみた様子を動画として配信してますので、ぜひぜひ！どうぞご覧くださいね～！！
【実践動画】【Figma Sites】LightBox機能付のギャラリーも！デザインだけで実装できます！【もちろんレスポンシブ化も！】
【動画のChapter】
00:38 今回のお題～タイトル
01:26 実際にFigmaを操作しながら解説
01:52 今回つくるギャラリー機能のご紹介
02:30 ベースとなる仕組みを理解する～オートレイアウトの設定～
04:55 画像の配置と設定
06:23 ライトボックス機能の実装
07:58 完成形とレスポンシブ時の状態を見てみる
09:20 今回のまとめ
11:18 「Figma Sites」が使用できるプランについて
みなさんぜひぜひ、チャンネル登録お待ちしてますねっ！！
上武 ハヤでした～！またねーーーーー🌟🌟🌟！！！
（※この記事は内容の品質向上を目的に、随時更新を行う場合があります。）
※記事内の動画は個人配信者によって制作されたものです。
Figmaロゴは、Figma商標ガイドラインに基づいて使用されています。
※Figma および Figma Sites は、Figma, Inc. の商標です。
※文中に登場する名詞・名称・商標等はそれぞれの権利を有する権利者に帰属します。