みなさん、こんにちは。
ノーコード初心者の方に向けて第9回目のチュートリアルということで「UI・UXを整える方法」を解説していきたいと思います。
本記事を読むことによって、より利便性の高いアプリを作る方法を理解できると思いますので、ぜひ最後までお読みください。
また、本記事は第7・8回目のチュートリアルで作成した「SNSアプリ」を応用して作るので、そちらをまだ作っていないという方は以下の記事を読んでから本記事をお読みください。
動画チュートリアル
今回の記事は、以下の動画をさらに分かりやすく解説した記事になります(本記事に対して少しキャンバス画面での内容が違うところがありますが気にする必要はありません)。
YouTubeを見て分からない点をこちらの記事で補うといった形で学習を進めてみてください。
UI・UXを整える方法
トップとボトムのエレメントを配置する
では第８回目のチュートリアルの完成画面から始めていきたいと思います。
まず「トップ」「ボトム」と書かれているエレメントをドラッグ&ドロップで「一覧ページ」に配置します。これらのエレメントはどこにドラッグ&ドロップしても一番上・一番下に配置されるようになっています。
次にボトムタブの設定についてエディターから編集していきます。
初期設定では「Favorite」「Home」「Profile」の3つのタブが用意されていますが、今回のSNSアプリでは3つもタブを用意する必要がないため、それらを1つにします。
そのためにエディターにて「2番目のタグ」「3番目のタグ」のチェック欄を解除します。
次に「1番目のタグ」の名前を変更していきます。「Favorite」と書かれているところを「投稿ページ」という名前に変更しましょう。
そしてアイコンも変更します。初期設定では「heart」が選択されていますが「arrow up」に変更しましょう。
この状態ではまだ「Home」にボトムエレメントがない状態なので、同じような設定で配置します。ボトムエレメントは現在ではコピー&ペーストできない仕様になっているのでもう一度ドラッグ&ドロップから操作します。
そして右のエディターの「スタイル」を選択し「アクティブ時の色」を「#bbb」にします。
そして「ClickFlow」から「1番目のタブ」を選択し「ClickFlowの追加」をクリック、「ページ移動」「一覧ページ」と選択します。
これらの設定によって、ボトムエレメントのタブをクリックしたときに「一覧ページ」に飛ぶことができるようになります。
背景の色を変更する
次に「一覧ページ」という文字をクリックします。Clickではページの左上のページタイトルをクリックすることによってそのページ画面全体を選択することができます。
そしてエディターの「スタイル」をクリックします。
「背景スタイル」を「背景色」に変更します。こうすることによって下にカラーコードが出現します。
初期設定では[#fff]となっていますがこれは白色を表しています(白色のカラーコードは#ffffffですが、おなしコードが6連続で続く時#fffと3文字の羅列で省略することができます)。
そしてカラーコードを直接入力、または以下の画像のように決めることもできますので、好きなように色を設定します。すると背景の色を変更することができます。
ここでは背景を例にしましたが同様に、テキストやボタンなどの様々なエレメントでも行うことができるので、自由に「スタイル」から変更してみてください。
また「背景スタイル」を画像に設定すると、好きな画像を背景にすることが可能になります。ただし、縦長の画像でないと写真が見切れてしまうのでその点は要注意です。
SNSに日時を追加する
YouTubeの動画ではカスタムリストを使った場合の日時の追加方法の関して説明していますが、こちらではタイムラインリストを使って日時を追加する方法について解説します。
「タイムラインリスト」のエディターから「サブタイトル」を選択します。現在は「Form内容＞ID」となっていると思いますが、そこで右上+ボタン(マジックテキスト)をクリックし「Created At」を選択します。
するとそのタイムラインの投稿がなされた日の日時を表示することができます。
また、IDと投稿日時をどちらも表示させたい場合は現在のところ、カスタムリストを使うことが必須となります。しかし、ユーザー数がよほど多いSNSアプリでなければIDは作る必要がないと考えられるため、この段階ではあまり気にする必要はありません。
詳細ページを作成する
ここでは、投稿の詳細を見るための「詳細ページ」を作っていきます。
なのでまず「ページ」をクリックして「詳細ページ」を選択して新規ページを作成します。
すると以下の画像のようにページが追加されます。
このままでは「一覧ページ」から「詳細ページ」に移動することはできないので、その動作をClickFlowで設定していきます。
まず「一覧ページ」のタイムラインエレメントを選択します。そして「TimeLine List」から「ClickFlowの追加」をクリックし「ページ移動」を選択し、「詳細ページ」をクリックします。
この設定によって投稿をクリックしたときに、詳細ページに移動することができるようになりました。
この状態ではまだ、「詳細ページ」から「一覧ページ」に移動することができないので「詳細ページ」のボタンのClickFlowを選択します。そして「ページ移動」から「一覧ページ」と選択します。
詳細ページの設定を行う
この段階では「一覧ページ」から「詳細ページ」に移動することはできますが、その投稿の詳細を確認することはできません。なのでその「詳細ページ」に対して詳しく設定を行なっていきます。
まず、画像エレメントをクリックします。そして右のエディターの画像ソースから「データベース」,「Current Form内容」,「投稿画像」と選択します。
次にテキストエレメントを選択して、右のエディターの「Text」を全て消します。そして右上の+ボタン(マジックテキスト)を選択して「Current Form内容」,「投稿内容」と選択します。
これによって「一覧ページ」の投稿の詳細について「詳細ページ」で確認することができるようになりました。
一つ上にある「Type Line」に関しては複数行の表示をできるように「Multi Line」にしておきましょう。
プレビューで確認する
プレビューから「投稿内容」と「投稿画像」を入力します。
本記事では詳細ページの利便性を分かりやすくするために「投稿内容」には、
[Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。Clickで開発。]
と入力しています。
「一覧ページ」の画面を見てみると、以下の画像のようになっています。
投稿をクリックしてみると、以下の画像のように表示されます。
このように詳細ページを利用することによって、SNSの利便性を高めることができるようになります。
おわりに
いかがでしたでしょうか。
このようにUI・UXを整えるようになることでアプリケーションの利便性を格段と向上させることができます。
今回のアプリでも実はまだまだ改善できるようになっていますので、ぜひ自分で「どのようにしたら使いやすくなるのか」ということを考えて、修正してみてください。
ヒントとしては、今回の記事ではトップエレメントのエディターは全く設定していませんでしたね。なのでそこを上手く編集すればより使いやすくなるかもしれません。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
