AppSheetで作成したアプリの見た目を調整したい人は多いでしょう。今回は、AppSheetアプリの見た目を変更する方法の記事を書きます。これで自分らしいアプリの見た目に表現することができます。
AppSheetアプリの下準備
AppSheetで見た目を変える方法を説明したいと思います。まずは、スプレッドシートでデータを作ります。
続いて、拡張機能のAppSheetからアプリを作成を選びます。
アプリ作成が完了されたら、ポップアップウィンドウを閉じて、いつも通りのレガシーモードに切り替えます。
右側には下記のようなサンプルアプリが表示されています。
大きな見た目の変更はBrandタブで設定する
見た目を調整するメニューは左のメニューのUXです。
UXメニューのBrandタブを選びます。
Themeはダークモードに変更できるもので、Primary colorはボタンやメニュー名の色が変わります。アプリアイコンはAboutなどで表示されるもので、あまり表に出てこないかもしれません。
ダークモードに変えてみたものが下記の通りです。自動でPrimary Colorも調整されて、ボタンやメニューの色も変わっています。
Brandタブの下の方にヘッダーとフッターの設定メニューがあります。押してプレビューを見ればわかりやすいのですが、上下に表示されるエリアの調整です。
Styleで上下の背景色をPrimary Colorに変えられます。あとは、Show logoで先ほどのあまり前に出てこないと説明したアプリのアイコンを表示させられます。メニュー非表示やアプリ名非表示などもこちらで調整できます。
細かい調整はOptionsタブで見た目を変更できる
次がOptionsタブです。
左サイドメニューの表示を減らしたい場合は、下記の設定を初期値から切り替えるとすっきりします。
設定を変えると、下記の通りになります。
他に使えそうなオプションは、GeneralのStarting viewで、つまり、最初に表示するシートを選べる機能です。
あと、フォントサイズを大きくしたい場合にはFontsのText sizeが使えます。
個人的に使うことが多いのは、下記のRight-align numeric columnsで、数値を右揃えにしてくれる。
価格(Price型)を価格フォーマットで表示してくれるData FormatsのUse accounting formatあたりも使えます。
まとめ
今回は、AppSheetアプリの見た目を変更する方法についての記事を書きました。ポイントをまとめると下記の通りとなります。
- UXメニューで見た目の変更ができる
- Brandタブで大きな部分の見た目の変更ができる
- Optionsタブで細かい部分の見た目の変更ができる
つまり、AppSheetで自分らしさを表現するには見た目の調整がおすすめです。そのため、UXメニューで見た目を変更しましょう！
AppSheetに興味がある人は、下記の記事もチェックしてください。
