ノーコード bubble 解説_文字とボタンのデザイン

文字は微妙な調整で文章としては読み易くデザイン的にも美しくなります。ボタンはホバー効果で「反応」を返すことでそれがクリック可能なのだとユーザーが直感的に分かり親切です。

反応を返す、、

 

 

文字のデザイン

Bubble で出来る文字のデザインのLetter spacing 、Line spacing、 Word spacing の解説です。

 

Letter spacing 文字と文字の間隔

 

数字が大きくなるほど広がってゆったり、マイナスになると詰まって苦しい感じです。Letter spacing の選択肢の中に無い数字(-5、-1.5 などでも）を書いても大丈夫です。

 

デザインとして使う場合など英語や数字は特に効いてくる感じがします。

 

同じ扱いのタイトル文字でも片方はLetter spacingをゆったり、片方はきつくしないといけない場合もあります。

 

（解説のため背景を水色にしました）「イニシャルコースター」を「コースター」と同じLetter spacing：０にするとパソコンで見る時はいいのですがスマホで見た時にカラム落ちしてしまうのです。

カラム落ちするとデザインが崩れます

うん、これなら文字が詰まっている方がまだいいね

この場合は文字数の多い「イニシャルコースター」のLetter spacingを−2にするといい具合に納まりました。

 

Line spacing 文章の行と行の間隔

 

0.5だともう読めません。適度な隙間があると読みやすいです。

 

Word spacing 英単語と英単語の間隔

 

こちらは日本語には関係なく英語に有効です。英単語と英単語の間隔を調整します。0と−2を比べると−2ではribbonの次のaroundが次の行に行ってしまっています。この単語は絶対に次の行に行かせたく無い時など微調整するといいかもしれません。

 

 

ボタンのデザイン

UI Builder のButtonで作ったボタンです。

 

新しいスタイルを定義するためにStyles を押します。

 

Add style ＞Create a new style 窓が出るので好きな名前を書きます。ここではapplication申し込み、の意味で「app Button 」としました。Element style はButton です。CREATE を押します。

 

左上に先ほど決めた名前「app Button 」が出ています。右側で色やフォント、サイズなどこの「app Button 」のスタイルを定義します。

 

ボタンの角を丸くする

Roundness はボタンの四角の角の丸さです。0だと90度直角で数字が大きくなるほど丸くなります。最高が50で半円が出来ます。周りを線で囲む事も出来ます。線は１本線、２本線、ドットなど。

 

デザインの定義が決まったらDesign タブでページに戻ります。

ボタンを選択しStyle の中から今定義したApp Button を適応させます。

 

丸くて可愛らしいボタンになりました。

 

ちょっと丸くしすぎたなぁ。それにホバー効果もやってみたいし

修正、ホバーの追加もEdit style から簡単に出来るわよ◎

Conditional タブを押します。

 

ボタン、ホバー効果で明るく

ボタンにマウスを乗せた時に色が変わる設定も加えます。

Define 〜をクリック＞When のClickをクリック＞

 

This Button＞またClick をクリック＞is hovered　で、Select a property to change when true （trueの場合に変更するプロパティを選択）”trueの場合”とはボタンがホバーされた時という意味です。変更するプロパティに背景色 Background color を選びます。

 

ホバーした時の色を元の黄色よりも少し明るく設定しました。右上のPreview で実際の動作を確認します。

 

ボタン、ホバー効果でボックスシャドウ

ホバーで色を変更するのは止めてボックスシャドウをつけたい時。Background color の右端にあるゴミ箱マークでこの設定を削除します。そして新しくSelect a 〜クリックしてBoxshadow style ＞Outset （Inset だと内側に影）

 

実際の動作で確認します◎

 

Linkメニューなども同様の方法でホバー効果を付けられます