「はじめましてSTUDIO」イベントレポート
こんにちは！Beans College 運営・講師の おの @ono_picnico です。
Beans College（通称：豆カレ）では、毎月メンバー限定の「月イチ勉強会」というイベントを開催しています。
今回は、4/24 (水) にコミュニティ内で開催した「はじめましてSTUDIO」のイベントレポートをお届けします！
STUDIOって？
昨今のノーコードツール人気で話題にもよく挙がる「STUDIO」。手軽にブラウザ上でWebサイトが作れるノーコードツールで、Wixなどと操作感が少し違い、Webデザイナーにとてもおすすめのツールです。今回はそんなSTUDIOについてまだよく知らない、使ったことがない、という方に向けてレクチャーを行いました。
デザインを起こしてみよう！
デザインエディタ
今回はあらかじめFigmaで作ったサイトのデザインをSTUDIOに起こしていきました。（題材は黒猫カフェです🐾）
通常コーディングしていくのと同じような要領で、Box（div）を作ってその中に要素（pなど）を入れていきます。flexboxを使った整列が基本となっているので、子要素を増やせば勝手にどんどん並んでくれます。便利ですね。
便利なFigma to STUDIO
こんな風に、作ったデザインをSTUDIO内でもう一度再現していくわけなので、もちろん事前のデザインツールは何でもOKです。ですが、Figmaで作っておくと、プラグイン「Figma to STUDIO」を使って簡単にデザインをコピペできてしまうんです！
これがとても簡単で、プラグインを起動→STUDIOにもっていきたいデザインをコピーして→STUDIO上でペースト、するだけなんです。本当に。ただし完全ではないので、ページ全体を一気にもっていくのは難しいです。わたしはセクションごとにコピペして手動で微調整をしています。
詳細な使い方はこちらの公式ブログをどうぞ。
CMS導入もできちゃう
無料プランでも使えるCMS機能。結構独特で、他のCMSへエクスポートできなかったりするところがちょっと難点なのですが、個人的にはCMSに苦手意識がある人にはとってもおすすめです。
流れとしてはデータベースのテーブル（STUDIOではモデルという）を作って、デザインエディタに埋め込んでいく、という感じ。モデルの作り方も簡単で、例えば「カテゴリ」モデルと「記事」モデルの2つさえ作ってしまえばもうブログができてしまいます。
その他できること
地図や動画を埋め込んだり、メタ情報ももちろんページごとに入れられます。お問い合わせフォームも簡単に設置ができ、問い合わせ管理までSTUDIO上で行えます（スプレッドシートと連携もできる！）。
私も仕事で使う機会がすこしずつ増えてきました。特殊なデザインにはまだ対応できない部分もありますが、初期費用を抑えたいというクライアントには十分提案できるツールだと思います。
参加者の声
とても勉強になりました！今後もっとSTUDIOを使っていきたいと思います。
STUDIOと一緒に、figmaも勉強したいなと思いました。
STUDIOでできることやできないことなどの具体的な説明があり使用場面のイメージがしやすかったです。
アーカイブ配信
今回のイベント内容は、メンバー限定の学習サイトにてアーカイブ配信を行っています。メンバーさん向けにはFigmaファイルも公開しています。
（他にも過去のイベントが数多くありますので、それらのアーカイブ配信はご入会するとご視聴いただけます。）
2024年5月の予定
豆カレ内でも希望の声が多数上がっていた、あいはらによるライブコーディングを行います！デザインをコードに起こすときに考えていることは？どういう順番でコーディングしている？などなど、プロの頭の中を覗けるいい機会になると思います。
豆カレ内のイベントには、メンバーであればどなたでも参加可能です。
気になる方は、ぜひぜひ豆カレへの参加をご検討ください✨
Beans Collegeの説明会に参加する
Beans College（豆カレ）にご興味をお持ちいただいた方は、毎月4回、土曜日と水曜日に説明会を実施しておりますので、ぜひご参加ください！
▼説明会のお申し込みはこちら
https://forms.gle/RPX4Jon1RMpDqghy5
ちょっとした入会特典も貰えます！
Beans College 公式Webサイト
この記事が気に入ったらサポートをしてみませんか？