FigmaをCCCで使用してみて
https://gyazo.com/e460a8ad23b00b41ef1dbdc8b9e9411a
はじめに
CCCでのアプリデザインでは、Figmaというデザインツールが推奨されています。私はデザイナー課題の際に試し程度に使用していましたが、便利だったので制作でも使用しました。
CCCの詳細は既に他の記事でも書かれていると思うので、私は主にFigmaについての紹介、及びCCCの感想について書いていきたいと思います。短期間だけ触った素人ですが、どうぞよろしくお願いします！
デザインツール『Figma』
Figmaとは無料で使えるUIUXデザインツールであり、同時に複数のユーザーが同一のプロジェクトで作業できるため、簡単に同期的にも、非同期的にも共同作業を行うことができます。また、ブラウザ、デスクトップアプリ、モバイルアプリのどこからでも利用できるため、私は作ったものをスマートフォンの画面で見ながら細かいデザインを調節していました。
作業が常にバックアップされているため、保存が必要ないことも利点です。私のPCはフリーズする頻度がやけに高いので、作業中に何度も救われました。
次に機能について紹介します。
共有ライブラリの再利用可能なアセット
作業時間の短縮や一貫性の確保にとても役立つのがFigmaのアセットです。
無料でいろんな種類のアセットが使えるので、使って損はないと思います。何より組み合わせるだけで簡単にデザインが作れるのが楽！デザインセンスがなかったので大変ありがたかったです。
ここで、私が仕様したアセット３種類を載せておこうと思います。
https://gyazo.com/b0134ed52d7b377b501ff2cc17dff803
https://gyazo.com/67c1398d51c3b98f971f5d2b3bd8713chttps://gyazo.com/baf7a457179289c4108e8560e54b0a82
ライト/ダークどっちもあるのが良心的ですね。
公式なので当然ですが、見ての通り画面はまんまです。
フレームやキーボード、メニュー、３Dタッチ、FaceID、アラートなど、ありとあらゆるIOSの画面パーツも揃っているので、IOSのアプリデザインに迷ったらまず注目したいアセットです。
https://gyazo.com/81fa282c0d187bbeac46b14f6c64d6c7
https://gyazo.com/502499137a8f99233255d7b78677f1ab
私はデザインの際にアイコンがなくて困っていたのですが、これだけあれば大抵のものは見つかります。アセットの中身は一面アイコンで、上のようなページがずっと続きます。
探すのが大変と思うかもしれませんが、カテゴリに分けられているし、アイコン一つ一つに名前がついているため、英単語で検索も可能です。
アイコンに困ったら使いましょう。
https://gyazo.com/38f3866a9c22b3ccc251cc63496f30c4
デザイナー課題から制作まで常にお世話になったアセットです。
カレンダーやスイッチやチェックボックス、ボタンなど作るのが難しいパーツがおしゃれなデザインで揃えられているので、色を変えたりするだけで自分が作りたいデザインができます。
紫系のカラーガイダンスもあるので配色も考えやすいです。
私はアイコンの枠、日付選択、ボタン、検索ボックスなど多くの場所に使いました。
https://gyazo.com/aa7a64678003ea97dfefaeb47cb79d89https://gyazo.com/089c8af5d5ca98d640dfaa235d627769
作業効率を上げるプラグイン
Figmaのプラグイン機能とは、Figmaの既存の機能を拡張し、Figmaの基本機能ではできない操作を可能にしたり、デザイン作業の効率を上げることができる機能です。
Figmaコミュニティや開発者によって作成され、多くの便利なプラグインが公開されています。
私は今回あまり利用してないのですが、下の画像のように画面遷移をわかりやすくする矢印を簡単にひいたり、日本語フォントが少ないFigmaで日本語フォントを使用したりするために活用しました。
他にも、グラデーションを作るものや、波形を作るもの、画像をベクター化するものなど、本当に数多くプラグインがあって、活用方法がいくらでもありそうです。
https://gyazo.com/5a0147ee5337349a5f591911745414bc
ノーコードでプロトタイプを作れる
Figmaのプロトタイプ機能では、アプリやWebサイト全体の操作の流れを設計できます。
薄くて見づらいですが、水色の線がプロトタイプで画面遷移を行ってくれる矢印です。
押したら次の画面に進んで欲しい時、ボタンを選択して遷移先に引っ張るだけで簡単にプロトタイプが作成できます。
画面の遷移もアニメーションが選べるため、色々と工夫ができるのが面白いです。
また、スライドインを使えばテキストボックスを押した時にキーボードが出るようにもできます。
私はあまり使いこなせませんでしたが、上手く使えばデザイナーとプログラマーのイメージ共有がしやすくてチーム開発に活かせそうな機能だなと感じました。
https://gyazo.com/b828490bfe25ff23eb4d7746c4d13012https://gyazo.com/2dc8d2ad2163a07321132deb03639482
開発モードでコーディング
CCCの時には使用しませんでしたが、Figmaには開発モードがあり、コンポーネントを選択すると、すぐに使用できるCSS、iOS、Android用のコードスニペットの生成をしてくれます。VSCodeとも連携ができるようです。プログラミングは苦手ですが、次Figmaを触る機会があればちゃんと勉強してみたいです。
Figma、奥が深すぎる......。
Figmaの感想
Figmaを使用した感想としては、「奥も深いしクセも強いし可能性も無限大」です。
無料のツールなのにアセットやプラグインが山ほどあって無限にやり方はあるし、開発モードを上手く使えばFigmaだけでアプリが作れそうです。
私はプログラミング苦手なのでもしアプリを作れと言われたらできるだけコードを書かずに済むFigmaを極めたいですね。
CCCの感想
次にCCCの感想ですが、私がプログラミング及びソフト全般に弱かったのが本当によくなかったと思いました。デザイナーとプログラマーで役割が分けられてはいましたが、逆の役割もある程度理解する必要があったと思います。特にReact連携関係はさっぱりだったので...。（今でもReactが何か分かりません）
今思えばFigmaの開発モードをもっと早く知りたかったと思います。
CCCの反省
反省は山ほどあるのですが、シンプルにデザインのセンスがなかったこと、アプリで解決できる内容ではなかったこと、交通系の損益問題が難しいこと、コミュニケーション不足、統計を取ってない等々本当に反省だらけです。
今後CCCに出る方がいればまず最低限進捗確認は必須だと思います。これは最低限できなければならなかったことです。それに加えて、テーマの深堀りは最初に行わなければ、後で難しいと思っても戻れなくなります。私は途中でテーマ内容を考えながら作っていたので、これアプリで解決できるのか...？と後から疑問に感じました。CCCは技術よりもテーマ内容重視の印象であるため、社会課題をアプリで解決できるかと、アイデアの面白さが大事になってきそうです。
まとめ
反省はいっぱいありましたが、Figmaには可能性が詰まっていることを知れたり、チーム開発の難しさを知れたのはいい経験だったと思います。運営の方からも画面遷移の明確さやユーザー志向のデザインなど、こだわった箇所の評価をいただけたのは嬉しかったです。
Figmaは少々クセが強いようにも思いますが、世界的にも注目されているデザインツールなので使えて損はないと感じます。特にアセットを無料で使えるだけでも価値があるので、是非モックアップを作る際などは触ってみてください。
拙い文章でしたが、ここまで読んでくださりありがとうございました！