脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

吹き出しスタイルチャットにカスタマイズ|初心者のアプリ開発|Adalo

f:id:yuka-edu:20220131140510p:plain

こんにちは!ゆかゆかです。

今日はNocodeツール「Adalo」で用意されているチャットを

吹き出しスタイルにカスタマイズしてみます。

 

以前のブログで問い合わせチャットをご紹介したところ、

Adalo仲間様に「吹き出しに変更してみたら見やすくなるよ」

ご有難いご助言いただきました〜♡さすがでございます!

 

ブログリンク:コーディングなしで「問い合わせ用サポートチャット」を作ってみた

 

最終的な画面イメージ

Adaloのサンプルアプリのチャット画面を紹介して、

私がカスタマイズしたチャット画面をご紹介いたします〜

 

Adaloのチャット画面

f:id:yuka-edu:20220131112620p:plain

Adaloのサンプルチャット、素晴らしいのですが

見た目がシンプル!

LINEを見慣れていると、なんだか物足りないですよね。

 

吹き出しを設定すると

f:id:yuka-edu:20220131111420p:plain

私が用意したチャット画面がこちらです。

助言を参考に吹き出しの「ぴょこ」とした部分を追加してみました〜。

 

私はデザインとか超苦手なので、どうやって用意するのか

よくわかっていなかったのですが、

お仲間様に設定の仕方を教えていただきました!

 

事前の準備

まずは吹き出しのぴょこっとなっている部分を用意します。

 

↓私が用意した「ぴょこ」っとなっている部分のイラストです。

 

f:id:yuka-edu:20220131111443p:plain

 

私はイラストが超苦手なのです。(涙)

Canva という無料で使えるデザインアプリで

吹き出しを探してきて、切り取って使いました。

もし、おすすめの方法があれば教えていただきたいです。

 

Adaloの設定

吹き出しの「ぴょこ」が用意できたので、Adaloに設定します。

 

1. 画像設定

f:id:yuka-edu:20220131134906p:plain

吹き出しの四角を端に寄せて、

先ほど用意した「ぴょこ」画像を配置します。

 

リストなので、下に繰り返されていますね。

 

2. 四角の枠の色を変更

f:id:yuka-edu:20220131135325p:plain

色を指定して、忘れず影のチェックをなくしておきます。

影があるとちょっと違和感があります。

 

プレビュー

f:id:yuka-edu:20220131135432p:plain

四角が吹き出し風になりました〜!

画像と色を統一すれば、色付き吹き出しもできそうです。

 

もう少し修正

f:id:yuka-edu:20220131135714p:plain

左側に送信者のプロファイル画像を配置してみるとこんな感じです。

よりチャット感が出ましたね!

良い感じです♪

 

まとめ

画像をうまく組み合わせることで、見た目がよくなりますね!

私はイラストは苦手なので、吹き出しの「ぴょこ」作りに苦労してしまいましたが、

得意な方ならもっと素敵にできそうです!

 

このブログのトップページに私が作った問い合わせチャットがあります。

よければ試しにコメントいただいても大丈夫です〜

ゆかゆかが適当に返信いたします!笑

 

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com

 

最後までご覧いただき、ありがとうございました〜♡