ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリの製作が可能なツールです。
ここでは、「Adaloのウェルカム画面の追加設定」を紹介します。
Adalo
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m01d_202236230.jpg)
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法や金額プランは別記事で紹介していますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloの無料プランと有料プランの違い
Adaloのウェルカムスクリーン画面
ウェルカムスクリーン画面は、アプリを立ち上げた時に表示される画面です。
サインイン画面が最初に表示されるのでもいいのですが、ウェルカム画面が表示されるとアプリの印象も変わります。
ここでは、アプリを立ち上げた時に表示されるウェルカム画面を作成していきます。
ウェルカム画面設定
まず、新規でスクリーンを作ります。
左サイドバーの+ボタンをクリックして、ADD SCREENをクリック
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_172905234.jpg)
ADD SCREENでスクリーンの追加をします。
追加するスクリーンの選択をします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_172918602.jpg)
ここではBlank Screen(ブランクスクリーン)を選択しました。
追加したスクリーン(New Screen)に名前をつけます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_173209641.jpg)
ここでは名前をopeningにしました。
名前を入力したら、CREATE SCREENをクリックします。
エディタのスクリーンで確認すると、作成したスクリーンが追加されています。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_173232689.jpg)
次に、スクリーンの設定を行います。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_173245769.jpg)
左サイドバーからスクリーンに、imageコンポーネントを追加しました。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m23d_173254257.jpg)
imageには、画像を入れることができます。
画像を入れる時は、イメージスクリーンに画像をアップロードします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113015873.jpg)
Uploadを選択して、画像を選択して、画像をアップロードします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113052913.jpg)
サンプルとしてぶたの画像を入れました。
アップした画像のサイズの変更もできます。
次に、ウェルカム画面を一番最初に移動させます。
スクリーン移動は、ドラッグアンドドロップで移動できます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113225576.jpg)
一番最初にウェルカムスクリーンを持ってきました。
次に、ウェルカムスクリーン設定を行います。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113832421.jpg)
ウェルカムスクリーンのペンマークをクリックして詳細設定を開きます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113844981.jpg)
スクリーンを選択できます。
- ノーマルスクリーン
- ホームスクリーン
- ウェルカムスクリーン
スクリーンを指定します。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_113850981.jpg)
スクリーンが一番最初に表示するようにするため、ウェルカムスクリーンを選択します。
このままでは、スクリーン画面が繋がっていないため、スクリーンをつなぎます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_114402051.jpg)
アクション(ACTION)をクリックします。
アクションの中の+ADD ACTIONをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_114427802.jpg)
アクションの中のLinkをクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_114434474.jpg)
Linkするページを指定します。ここでは次のサインアップスクリーンにつなぐため、Singupを選択。
ウェルカムスクリーンとサインアップスクリーンをつなぐことができました。
最後に、プレビューで確認します。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m27d_114529030.jpg)
一瞬、オープニングが表示されて、サインアップ画面に移動します。
このような流れで、アプリにウェルカム画面を追加することができます。
今回は、「Adaloのウェルカム画面の追加設定」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのブランディング設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定
コメントを残す