フォームやメニューに少しデザイン性を持たせたい場合、背景に角丸を設定すると見た目を柔らかくできます。

ですが、Forguncyのセルにただ色を設定しても、角は四角いままです。

今回は、Forguncyで角丸の背景を作成する方法を紹介します。

このページでは以下のことがわかります!

  • Forguncyで角丸の背景を作成する方法

このページの想定読者

  • 画面デザインを少しおしゃれにしたい人
  • ダッシュボードやメニュー画面を見やすくしたい人
  • アプリの見た目を手軽に改善したい人

このページの情報はV10以降で動作確認済みです。

設定方法

角丸の背景を設定する場合、Forguncyのセルは利用しません。

代わりに「背景画像」という機能を使います。

機能の場所は以下。

選択したら画像の種類を選択するメニューが出てくるので、「セル単位の背景色」を設定します。

OKを押すと、画面上に画像が現れるので、適当なサイズに変更します。

※間違って、画像以外の箇所を触ってしまうと、背景画像が選択できない状態になります。
 その場合は、右ペインの背景設定を選択すると背景画像が操作できる状態になります。

角丸の設定方法

背景画像が選択されている状態で、以下の設定を操作すると、角丸に設定されます。

あとは背景画像があるところのセルを編集すると、角丸背景の上にコンテンツを配置することができます。

よくある使い方

以下のような画面を作りたいとき

セルの色をグレーで塗りつぶしがちですが、それだとうまくいきません。
背景画像は一番後ろの設定なので、セルの色設定より優先度が低いです。

こうなる。(今回はわかりやすくするため、黒とグレーで表現しました)

グレー背景に、白い角丸でメニューを表現する場合は、複数の背景画像を使います。

こんな感じ。

背景の前面背面は、右ペインの矢印ボタンから設定できます。

小ネタ

Altキーを押しながらドラッグすると、セルの線にそって背景画像が動くので、便利です。

移動するときもそうですが、サイズを設定する際も機能します。

方眼紙的なレイアウトを維持したい場合に活用しましょう。

この記事はいかがでしたか?内容を楽しんでいただけましたか?少しでもワクワクしたり、新しい発見があれば嬉しいです!わくわくした方は、ぜひわくわくボタンをクリックしてください。

【著者】

sasayaki@メシウス社員

すべてのシゴトをデータで繋ぐ!

【メシウス社員です】
Forguncyを作ってる側の人間ですが、このコミュニティでは「いちユーザー」としても楽しみながらお邪魔しています!公式サポートではないですが、知ってることは共有したり、相談に乗ったりできたら嬉しいです。
※あくまで「個人の意見」なので、製品への要望や不具合の報告は、公式のサポート窓口も併せてご利用ください!