![見出し画像](https://assets.st-note.com/production/uploads/images/108866247/rectangle_large_type_2_5e2f752c1ff47d05c7998adb3fded44d.png?width=1200)
ミールプラン効率化プロジェクト:一日目Bubbleに登録、ビデオを見て、ワイヤーフレームを作る
Bubbleにメールアドレスで、登録してログインしてみる。
右も左もわからないので、Appのトップページのところにある、ビデオを見る。ビデオ一つずつが二分ぐらいなので、私のようにとりあえず触ってみたいタイプにはありがたい。
まずはDesign、Workflow、Dataのタブから始めると。
Designのタブで、ドラッグアンドドロップしながらDesignを作り、Workflowがクリックなどのイベントでなにが起こるかの設定、DataのタブでDataのストラクチャーを決めるという。
![](https://assets.st-note.com/img/1687376740813-4rm7HNByrI.png)
まずはDesignから取り掛かる。
レシピ選択のページは、こんな感じ?というのを、またwhimsicalで作成してみた。
![](https://assets.st-note.com/img/1687384977716-kqwgkvFdBW.png)
うーむ。デザインは納得いかないけど、ここのスキルは振り絞っても出てこないだろう。とりあえず、自分が使いやすいというののみを目指していくことにしよう。
Add Receipeのページや、あとはレシピのカテゴリー(Groupワケされている)を作るページなんかもいるな。しかし、とりあえず、まずはbubble.ioを触ってみたい。
いままでの職業柄、ランディングページを作ったり、Websiteの作業に関わることがあったので、多少の理解はある。チュートリアルを見ると、まずはコンテナーを使って枠を設定してからだ。
ヘッダーのコンテナーを作って、Propertyを設定していく。
Container LayoutをRowに設定し、コンテナーアライメントを設定。幅や高さを調整すると、なんとなくHeaderができた。(難しい。Mobileで見たときに、どれだけ崩れるのかあとで確認しよう。)
![](https://assets.st-note.com/img/1687385866867-Y0D1QbCEJM.png)
続きはまた後日。赤子の睡眠時間との戦いである。
この記事が気に入ったらサポートをしてみませんか?