bubble　タブ説明（Design編）

あいさつ

こんにちは、bubble太郎です。

さて、いよいよbubbleを触っていこうということで

本日は一番目にするであろうDesignタブについてまとめていきます。

辞書代わりにでも使ってください！

①Text

テキストを表示し、その中に、静的テキストを入力するか、動的テキストを入れ込むことも可能。

※静的テキスト：UIの表面上に書かれるフレーズ。

動的テキスト：プログラムに対して指示を行うフレーズ

静的→ユーザーへ向けて　動的→プログラムに向けてと覚えよう

②Button

クリックするとワークフローへと誘導するボタン。私たちが普段からスマホを使ってクリックしている。

③Icon

そのWebサイトでのイメージを担うことが多い。ダブルクリックで色や大きさなどが調整可能。たくさんの種類がある。

④Link

クリックするとユーザーを別のWebサイトやPageへと飛ばす。主にURLを張るために使われることが多い。

⑤Image

ファイルを選択してそこから入力したいイメージを選択。イメージによってはTwitterのGIFのような動的画像も使える。

⑥Shape

ユーザーがクリックした時のみ、反応するエレメント。主にUIとして使われるがワークフローの効果をもろに受ける。

⑦Alert

制作中にフローがおかしい部分に対して制作者にその個所を教えてくれる。ワークフロー設定により、アニメーションにすることもできる。

⑧Video

その名の通り、ファイルからビデオを持ってくる。

⑨HTML

HTMLコードと接続可能にするエレメント。有料プランになるとページに配置する埋め込み可能なHTMLコードの提供がある。

⑩Map

Googleマップとの連携。チュートリアルにもある通り、Input、Bottonとの連携でマップ検索ができる。

⑪Built on bubble

bubbleのコードなしでbubble公式のIconが使える。使用用途としてはbubbleで作ったアプリの一番下に添付するケース。

⑫Group

ほかのエレメントに対して親と子の関係を築くことが可能になる。（親と子の関係については後日まとめます）。役割としては上記が1つ目、2つ目は見栄えをよくするケース。

⑬Repeating group

連続するグループという意味。行数と列数を指定して持ってくると表が出来上がる。その中にテキストを持ってくることも可能。

⑭Popup

ワークフローで指示するまでUIには出てこない。例としてはサイトを開いて少し時間がたつと出てくる広告もPopupである。

⑮Floating Group

ユーザーがスクロールしてもその位置にずっとあるもの。よく使われる例としてはHPのメニュータグとか連絡先とか大事な情報。

⑯Group Focus

ユーザーがそのボタンの外側をクリックすると自動的に非表示にされるグループのこと。アンケートや広告など、消したいときにユーザーに消してもらえる。

⑰Input

Eメールやパスワードなどユーザーに情報を入力してほしい時に用いるフォーム。基本的に1行しか入力できない。

⑱Multiline　Input

ユーザーに複数にわたる入力をお願いするときに用いる。メモ書きや備考欄などユーザーによって内容の長さが違うときに役に立つ。

⑲Checkbox

チェックボックスを表示する。

⑳Dropdown

リストに基づいて↓をクリックすると選択肢を表示する。選択肢がたくさんある場合、すべて表示させると邪魔になるために使われる。

㉑Search　Box

よくある検索フォーム。

㉒Radio　Buttons

「あてはまるもの全てにチェックしてください」などの時に使用される。ユーザーは選択肢の中からいくつも選択できる。

㉓Slider Input

質問の程度を答える際に使用される。棒の中にある球をスライドさせてその回答をする。

㉔Date/Time Picker

クリックするとカレンダーが出てきて月日が選択できる。

㉕Picture Uproader

画像のアップロードとして使用される

㉖File Uproader

特定のファイルをアップロードする際に使用される。

㉗Footer

ページが何枚にもわたるときにフッターとして使用される。導入されたアプリはどのページに飛んでもそのフッターは残り続ける。

㉘Header

フッターは画面の一番下にあるタブを指しているがヘッダーは一番上。

㉙Sign up/LoginPopup

自動的にそのWebアプリへのサインアップフォームを作成してくれる。テンプレートのようなもの。

㉚Tab Element

エレメントのテンプレート。複数のタブを集合させているテンプレが使える。

まとめ

いかがだったでしょうか？？

このnoteは辞書としても使ってもらおうと思っているので

ユーザー目線に立った説明もさせていただきました！

そして、Designタブはそれのみだと当然使えません。

なのでワークフローと連携させる必要があるのです。

次回はワークフローの使い方についてまとめていきます。

それでは、また次回お会いしましょう。ばいばい！