リストビューをちょっとかわいく見せたい

Forguncyは簡単にWebアプリが作れますね。作りこむと皆さんどうでしょう、ちょっとデザイン気になってきたりしませんか？

ここでは「ちょっと垢ぬけたいな～」というときにどこを触るといいのかご紹介していきます！

リストビューのデザインはどこから変えられる？

リストビューの色やデザインは、リストビューを選択した状態のときに表示される、右端の「デザイン」タブ内の「クイックスタイル」から変更ができます。

クイックスタイルを押下するといくつかスタイルの候補を挙げてくれます。

ちなみにここで挙げられる色の候補はデザインタブの「テーマ」と連動していますが、ここではテーマの変更方法ではなくオリジナルなスタイルの作り方を紹介していきます

この画面、下のほうに「新しいリストビューのスタイル」というボタンがありますが、ここから新しいスタイルを作るとほんとに真っ白の状態から作ることになります。

色のイメージがつかみにくいので、上記画像のように適当なスタイルを右クリックし「複製」から始めると、どこの色をどう置き換えるか感覚がつかみやすいのでオススメです。

複製ボタンを押すと「リストビュースタイル」という画面が上がりました。

デザインに凝りだしたくなった程の方であればもう説明は不要でしょう！そう、ここで各要素の配色が設定できるのです。

スタイルは要素によって変更できるものが異なりますが、大きくは「塗りつぶしの色」と「フォントの色」と「罫線」の三つです。ここで操作しながらデバッグしつつ、好みのスタイルを作っていきましょう。

各要素の色を変更してみよう！

試しにちょっと春っぽいカワイイ感じを目指してみようと思います。

色のチョイスについては各々やり方があると思います、ユーザ設定で触りながらこの色にしようかな～と探すのもいいと思いますし、配色本等から参考にするのもいいと思います。最近ですと無料でカラーパレット（色の組み合わせ）を提供してくれているクリエイターさんも多くいらっしゃいますが、参考にしつつ自分の色を探していくのも楽しいかも！

デザインお作法のうんぬんはここでは割愛しますが、１つの画面でたくさんの色を採用してしまうと落ち着かなくなってくるので、色の統一感は気にするといいでしょう。

さて、私はヘッダーを少し濃いめのピンク、ヘッダー文字色を黒だと強すぎるので濃いめのグレー、奇数行をすごい薄いピンクにしてみました。

さっそくデバッグ！

うん、ピンクカワイイですね。でもちょっとアクティブなヘッダの色が水色は合ってないかも…。

もう少しいじってみようと思います、再度ビルダーへ。

クイックスタイルをもう一度押下すると、先ほど作ったオリジナルのスタイルは「カスタムスタイル」に残っています。こちらを編集していくと修正できますし、他のリストビューにもこのスタイルを適用したいときに選択候補にすることができるようになります。

さぁもうひと手間編集してみましょう。

ありました水色！「選択セルが該当するヘッダー」の要素だったようです。さて何色に変えようかな？ピンクに色が近いオレンジ系とかどうかな？

ついでに罫線の色もグレーだと主張が強いので白っぽくしてみましょうか、グリッド線も目立たなくしたいな、フィルターも欲しいけどボタンだと邪魔なのでアイコンに変えるか…（こうして時間がどんどん溶けていくのがForguncyの沼。。。）

じゃん！どうでしょうかちょっぴりカワイイスタイルのリストビューになったのではないでしょうか！

余談ですが、罫線の色を塗りつぶしの色と同じにするとヘッダーが結合して見えたりするので面白いですよ、試してみてください。

いかがでしたでしょうか、お気に入りのリストビュースタイルを作ってみてくださいね！

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