見出し画像

「はじめましてSTUDIO」イベントレポート

こんにちは!Beans College 運営・講師の おの @ono_picnico です。
Beans College(通称:豆カレ)では、毎月メンバー限定の「月イチ勉強会」というイベントを開催しています。
今回は、4/24 (水) にコミュニティ内で開催した「はじめましてSTUDIO」のイベントレポートをお届けします!


STUDIOって?

昨今のノーコードツール人気で話題にもよく挙がる「STUDIO」。手軽にブラウザ上でWebサイトが作れるノーコードツールで、Wixなどと操作感が少し違い、Webデザイナーにとてもおすすめのツールです。今回はそんなSTUDIOについてまだよく知らない、使ったことがない、という方に向けてレクチャーを行いました。

デザインを起こしてみよう!

デザインエディタ

今回はあらかじめFigmaで作ったサイトのデザインをSTUDIOに起こしていきました。(題材は黒猫カフェです🐾)

Figmaで作ったサイトデザイン

通常コーディングしていくのと同じような要領で、Box(div)を作ってその中に要素(pなど)を入れていきます。flexboxを使った整列が基本となっているので、子要素を増やせば勝手にどんどん並んでくれます。便利ですね。

STUDIOでの要素の整列

便利な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サイト

https://beans-college.com/

この記事が気に入ったらサポートをしてみませんか?