bubble

【bubble】意外と知られていないボタン(button)の使い方

こんにちは!ノーコーダーのIKDです。

今回は、bubbleで意外と知られていないボタンの配置方法・編集方法などをお伝えしていきます。

ボタンは、何かを入力させてそれを送信するときや、画面を移動させたりと使うことが多いのでしっかりと使えるようになりましょう!

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

ボタンの配置方法

まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。

ボタンの配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ&ドロップするだけです!

はい、出来ました!

ボタンの編集方法

次は、ボタンの編集方法を確認していきます。

  1. ボタン上に出てくるテキストを設定できます。
  2. チェックを入れるとクリックできなくなります。(必要事項が記載されるまで送信できない、とかいう設定に使えるでしょう)
  3. ボタンの上にマウスを置くと表示されるテキストを設定できます。

ここまではそんなに難しくないと思います。使っていくうちに自然に使えるようになるでしょう!

最後は、ボタンのスタイル編集についてお話ししていきます。

スタイル編集

最後は、ボタンの色や角の丸みをつけるなどを変更するスタイルの主な編集機能についてお伝えしていきます。

  1. スタイルを空白に設定すると自分でカスタムできるようになります。
  2. フォントの種類を変更できます。
  3. フォントの大きさを変更できます。
  4. B:太文字にできます I:文字を斜めにできます U:下線を引くことができます
  5. テキストを揃えることができます。
  6. テキストの色を変更できます。
  7. 背景色を変更できます。
  8. ボタンの色を変更できます。
  9. ボタンの上下左右の辺を任意で変更できます。
  10. ボタンの囲いをドットなどに変更できます。
  11. 角を丸くできます。

なかなか覚えることがありますが②〜⑦はボタン上のテキストの編集、⑧〜⑪はボタン自体の設定と覚えると覚えやすいです。

ボタンは機能が多く、これに加えて2つほど覚えていいことがあります。

  1. テキストに影をつけることができます。
  2. ボタンに影をつけて立体感を出すことができます。

この中でも特に②はボタンのクリック率の上昇につながるところでもあるので、是非使ってみましょう!

まとめ

ボタンは、アプリを使う上では必須とも言える機能です。少しずつでもいいので、今回紹介したようなテクニックを使えるようにしましょう!

今回は以上です!また次回お会いしましょう〜

ABOUT ME
IKD
UI/UXで差をつけろ | ノーコード関連のライター | プログラミングはたしなむ程度

COMMENT

メールアドレスが公開されることはありません。