最近、AIに相談しながらアプリを作ってみています。コードを書いてもらったり、画面の仕様を一緒に考えたりしていると、個人でもアプリづくりに挑戦しやすくなっている感じがあります。
ただ、思ったより早い段階で手が止まりました。デザインです。機能のイメージはあっても、それを画面としてどう並べるのか、一覧画面と詳細画面をどうつなげるのか、ボタンをどこに置くのかが急に分からなくなりました。
AIにコードを書いてもらうことはできます。でも、こちらが「どんな画面にしたいか」をうまく伝えられないと、出てくるものも少しずれます。そこで、Figmaを触りながら、自分でも画面を作れるようになってみようと思いました。
Figmaでやりたいこと
今回の目的は、プロのUIデザイナーになることではありません。まずは、自分の中にあるアプリのイメージを、誰かに見せながら話せるくらいのモックアップにすることです。
文章だけで説明すると、人によって想像する画面が少しずつ変わります。画面で見せられれば、「ここが一覧」「ここが詳細」「このボタンから登録する」という流れを共有しやすくなります。
もうひとつ、Figmaを学びたい理由は、「こういう感じがいい」を言葉にしやすくしたいからです。シンプルだけど冷たすぎない、かわいいけれど子どもっぽくはない、見やすいけれど業務アプリっぽすぎない。そういうふわっとした感覚を、少しずつ画面にして確認できるようになりたいです。
題材は「喫茶メモ」
練習題材として、「喫茶メモ」という喫茶店記録アプリを考えています。行きたい喫茶店をメモしておき、実際に行ったら写真や感想、雰囲気、また行きたい度を記録できるアプリです。
喫茶店は身近なテーマなので、画面に入れたい情報を想像しやすいです。店名、エリア、タグ、写真、メモ、また行きたい度など、一覧画面にも詳細画面にも使えそうな要素があります。
作る予定の画面は、行きたい喫茶店の一覧、店舗詳細、新しく登録する入力画面、実際に行ったあとに記録を追加する画面、行きたい店と行った店の状態差分です。大きなアプリをいきなり作るのではなく、小さな題材で画面の作り方を練習していきます。
1〜3日目で作ったもの
最初の3日間では、ホーム画面、行きたい喫茶店一覧画面、店舗詳細画面を作りました。まだ画面遷移はつけていませんが、「ホーム → 一覧 → 詳細」という流れが見えてきただけで、少しアプリらしく感じられました。
1日目はホーム画面です。スマホサイズのFrameを作り、タイトル、説明文、カード、ボタンを置きました。使ったのは主にFrame、Text、四角形です。最初はもっと複雑な機能が必要だと思っていましたが、それだけでも画面の土台は作れました。
2日目は一覧画面です。店名だけでなく、エリアやタグ、一言メモを入れると「どんなお店なのか」が伝わりやすくなりました。一方で、情報量が増えると文字サイズや余白の調整が必要になることも分かりました。
3日目は店舗詳細画面です。写真エリア、基本情報カード、メモカード、記録追加ボタンのように情報を分けて置くと、何を見る画面なのか分かりやすくなります。カード内の文字位置やレイヤー名の整理など、細かいところも意外と大事だと感じました。
3日間で分かったこと
Figma初心者でも、Frame、Text、四角形だけで、アプリの基本的な画面は作れます。最初からきれいなUIを作ろうとしすぎるより、「1画面作れた」「2画面目も作れた」「一覧から詳細の流れが見えてきた」という感覚を積み重ねる方が大事そうです。
画面を作ってみると、アプリの仕様も少し見えてきます。一覧には何を表示するのか、詳細にはどんな情報が必要なのか、ボタンはどこにあると自然なのか。頭の中で考えているだけでは見えなかったことが、画面に置くと分かりやすくなります。
Figmaを触ることは、デザインの練習でもありますが、アプリの中身を整理する練習でもあるのかもしれません。
40日くらい続けてみる
しばらくは、1日1時間くらいを目安にFigmaを触ってみます。学習を少し、実際の操作を多め、最後に振り返りを少し、という流れで進める予定です。
日数が進んだら、そのときにやったことや、つまずいたこと、分かったことも同じように記事へ追記していきます。完成したものだけではなく、途中で迷ったことも残しておくと、あとから見返したときに役に立ちそうです。
学習のお供
Figmaの練習は、短い時間でも集中して触る方が続けやすいです。自分の場合は、コーヒーや紅茶を用意して、一区切りの作業時間として始めると気持ちを切り替えやすくなります。
この記事は特定の商品を紹介する内容ではありませんが、学習のお供として用意しておくとよさそうなものを置いておきます。