top of page
  • 執筆者の写真オサダ

デザイナーがAdaloでデザイン実装してみた|チャットの吹き出しはどう作る?

更新日:2023年2月10日

はじめまして、デザイナーのオサダと申します。


c3reveでUIやバナー、NoCodeツールなどでデザインを担当しております。今回はAdaloでのデザイン実装をした経験から、チャットの吹き出しのデザインの作成方法をご紹介いたします。


★この記事に向いている方

・ Adaloで簡単に実装した事がある

・データベースの作り方を少し知っている



吹き出しのデザイン実装に困る事

私自身、今回のデザインを実装する際に、

相手用の吹き出しと、自分用の吹き出しが必要で、

その実装に少し迷いました。


LINEやiMessageなどを参考にすると、『相手』と『自分』の吹き出しはそれぞれ端に寄っています。さらに色も変わっています。これらはAdaloの表示条件を使って、実現する必要があります。


ただAdaloのサンプルでは、送信者の名前を付ける事で、誰からのメッセージかを確認するUIになっています。これは少し、分かりづらい。


Adaloのサンプルのチャット画面



実装例

まずは完成の画像から。



こちらは開発画面





実装方法

吹き出し図形の作成


構成としては、Rectangle・Text・Vectorでできています。


1. Rectangle = 吹き出しの背景

2. Vector = 吹き出し (三角の) 部分

3. Text = メッセージや日付や送信者の表示




▼ レクタングル(背景)の作成

レクタングルを置いたら、サイドメニューから"Rounding"を "24"に設定します。ちなみに高さは48にしています。






▼ 吹き出し(三角)部分の作成

サイドバーの+マークから、Simple > Vector を選択して、先ほどの背景に吹き出しを書きます。






▼ テキストを配置する



今回は、メッセージ内容、送信時刻、名前の要素として使う場所に配置します。


・メッセージテキスト 16px

・名前と時刻     12px


で配置しました。




▼ グループ化して、リストにする

オブジェクトとテキストを全て選択した状態で、グループ化し、続けてリスト化します。






自分用と相手用の吹き出しの表示方法

ポイントがあります。


"一つ" のリスト内に『相手側吹き出し』と『自分側吹き出し』を作る事が必要です。先ほど作成した吹き出しをコピーして、テキストやベクターの位置を反転させて、自分側の吹き出しも用意します。





そして、それぞれに表示条件の "Sometimes Visible" を設定し、自分のメッセージの表示と相手のメッセージの表示を実現します。






今回はそれぞれ表示条件で、メッセージの送り主が自分のアドレスと一致するかで、カードを表示・非表示にする設定をしました。





Adalo上でデザインを実装するうえで必要になるスキルは


Adaloでデザインを実装する時の重要なポイントとして、


動的に変化するデザインを、条件分岐などを使いながら実装する


というスキルが必要です。


デザインをするだけではアプリは完成しないという点が、figmaなどでデザインする点と大きく変わってきます。




Adaloで実現できなかったデザイン → できた! (2021/06/21 更新)


ノート投稿時、下記のように書いていました。


新着メッセージを、LINEアプリのように下へ追加していくUIができない。


しかし、先日Twitterのリプライより方法を伝授してくださった方がおりまして、 実現する事ができました!





1. Adaloのページを選択後、

2. Screen Navigation Typeを「Wellcome Screen」に設定後、

3. 「Edit Style」からReverse-scroll を有効にする



ご教示ありがとうございました!



今後もわたくしオサダからは、「デザイナー×ノーコード」での発信をしていく予定です。いまはAdaloのみですが、BubbleやWebflowの方も発信していけたらと思っています!

最後までお読みくださりありがとうございました!



さいごに

シースリーレーヴでは企画からデザイン・開発まで、Webサービスやアプリの受託開発に関する相談、開発を承っております。

またシステム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。


どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します!

実際に開発してみたいけれど、予算は?こんなサービスを作りたいけどノーコードでできるのか?最短でどれくらい?どんな小さなことでも、ぜひお気軽にご相談下さい。

技術スタッフがご相談させて頂きます!

ノーコード開発に関するお問い合わせはこちら

ノーコードに関するお役立ち資料もございますのでぜひご参照ください。

ノーコードに関する資料のダウンロードはこちら


最後まで読んでいただき、ありがとうございました!




Comments


資料ダウンロード.jpg

ノーコードに関するお役立ち資料をご用意しました。

ぜひご活用ください。

☑︎ノーコード開発ツールアプリケーション開発事例集

☑︎新規事業に最適な開発系ノーコードツール紹介

☑︎ローコード/ノーコード開発のセキュリティ対策

☑︎誰でもわかる!ノーコードとローコード

開発実績バナーFIX.jpg
最新記事
ノーコード開発お問い合わせバナー

ノーコードに関するお問い合わせや、ご相談などお気軽にどうぞ!

カテゴリー
bottom of page