はじめに：Figmaとは
こんにちは、たなけんです。 こんにちは、こばちえです。
てくてくラジオは、仕事の合間にするような、ゆるい雑談を配信するポッドキャストです。
今週もよろしくお願いします。 よろしくお願いします。
はい、エピソード237、やっていきましょう。
はい、やっていきましょう。
今日はですね、最近使っているウェブアプリケーション、フィグマについてお話ししたいなと思います。
はい、フィグマね。
フィグマです。
フィグマ、ご存じない人もいるかもしれないので、簡単に話すと、フィグマって何だろう。
デザインツールですね。
そうだね。
コラボレーションインターフェースデザインツールというふうに、サイトのタイトルはなっていますね。
コラボレーションなんだ。
意義のある製品を生み出すための業界をリードするコラボレーションデザインプラットフォームです。
とのこと。
なるほど。
そうだったんだ。
ちょっと難しいな、難しい日本語だな。
なんか製品のデザインプロトタイプの構築を迅速に進め、云々観音っていうことが書いてあります。
なるほどね、まあでも結構もう業界的にはスタンダードなツールにはなってきてますかね。
そんな気がしますね。
なんかヒグマ使ってるって話ばっかり聞く気がする。
そうですね、そんな感じがする。
そうなんですよ。
で、僕もここ半年ぐらいかな、ヒグマを積極的にお仕事でも触る機会があって、触っているんですけど、
結構面白いなってことに気づいてきまして、ちょっと僕なりの理解をシェアしたいなと思ってますと。
ぜひぜひです。
Figmaの初期の印象と使い方
で、ヒグマ最初ね、どう使えばいいかね、結構分からなかったんですよ。
分かんないよね、なんかすごいたくさん機能があって、すごいいろんなことができるのは分かってるんですけど、
なんかね、ちょっと私には使いこなせてない。
うん、分かる分かる。
なんか、僕らね、ウェブアプリケーションの開発をしているので、アプリケーションのデザインをね、
ワイヤーフレームを作ったりとか、
ワイヤーフレームをもっとかみ砕いて言うと、この画面のこの位置にこんな情報を表示しようとか、
その表示するにあたって画面の構成を、例えば左側にサイドメニューを配置しましょうとか、真ん中にメインコンテンツを置きましょうとか、
右下に例えばサードパーティーの問い合わせツールのアイコンを置きましょうとか、
そういう全体の配置を決めるとか、
っていうざっくりしたデザインをすることもあれば、
もっと細かく、ここの文字のテキストは、文字のテキストって一緒ね。文字のカラーはこれぐらいの色合いでとか、
このボタンにはこういうちょっと、例えば影をつけるとか、書く要素のマージンはどれぐらいにするかとか、
そういう最終的にHTMLなりCSSで表現するにあたってどういう数値でデザインするのか、
感覚にするのかとか色合いにするのかみたいなのを決めたりすることもできるという、そういうふうに使うんですけど、
で、何だろうな、例えばざっくりデザインをしたり、細かいデザインを自分たちがすごく詳細に詰めるって、
僕はあんまり今までやってなくて、どうしても僕は軸足がサーバーサイドのソフトウェアエンジニアなので、
デザインの細かいここのマージンはこれぐらいがいいとかっていうのにあまりこだわりが自分自身はなかったんですよね。
なので細かいところを詰めるというよりかは、ソフトウェアのワイヤーフレームを作るっていうのがデザインするときの主な考えていることだったんですよ。
なので、その時ってなんかもっとスピーディーにざっくりデザイン、ワイヤーを書きたいってなると、
究極、紙に手書きすることがすごい早かったりとか、
それも実際今でもやることあるし大事なんですけど、
もっと使い慣れている、例えばパワーポイントとかグーグルスライドみたいなツールで四角を書いていくとか、
あとは他のもっとウェブデザインというよりかは広く図形を書くためのツールとしての見ろっていうような看板作ったりとか絵も書けるし、
図形をいろいろ、グーグルスライドとかよりもより図形を書くことに特化したツールと言えばいいのかな、
とかで四角的に目で見てわかるものを書いていくっていうことが多かったんですよ。
そうですね。
だからFigmaで何かやろうとするとちょっと使い方わからん、いやもっと早くただ四角いパーツをいっぱい並べて情報を書きたいだけなんだっていうのがあったから他のツールを使うことが多かったんですよね。
本当にそれだけだったら他のツール使ってもいいなと思ってるんですけど、
やっぱりFigmaはそういうざっくりしたワイヤーフレームももちろんできるし、
それをそこから発展させて細かいレイアウトとか構造、デザインの構造を管理できるっていうところがFigmaの面白いところだなというふうに思っているんですよ。
Figmaの操作における発見：サイドメニューの活用
なるほどね、そうだね、階層構造だもんね。
そうそう、で、慣れればそのワイヤーフレームとかもFigmaで書いた方が楽に割とスピーディーにできるっていう感じに僕は今なってきましたね。
素晴らしい、いいよね、なんかあのコンポーネント作っといてそれをねいろんなところで使うとかっていうこともできるから、ベースちゃんとしてれば早いんだろうなぁの想像は持ってるんですけど、
ちょっとまだねそこに至れてないから、たなけんさんのそのコツつかんでるやつ聞きたいです。
はい、そうなんですよ。やっぱりね思い通りに作っていくのが慣れるまで結構時間かかるっていうのがFigmaだと思うんですけど。
で、えっと僕はすごい使ってて、最近この半年ぐらい前からちゃんと使い始めて、この2ヶ月ぐらいであの実感しているのは、あんまり真ん中の画面を見てないなということに気づいたんですよ。
なるほどね。
そう。
それは違うわ、今私めっちゃ見てるもん。
そうですよね。もちろん真ん中見れば見るんですけど、Figmaって画面の構成として左側にサイドメニューがあって、真ん中に何て呼んだらいいかわかんないけど、
そのデザインされた結果が出力されている、目にはこういうふうに見えますよっていう画面があって、で、右側に各要素のプロパティをいじるような右サイドメニューみたいなのがあるんですよ。
うんうん。
で、えっと、デザインするときにもちろん真ん中も3つなんですけど、結構左サイドメニューと右サイドメニューだけで操作をしていることに僕は気づきまして。
なるほど。
そう。なので、極論、左サイドメニューと右サイドメニューだけいじっていれば、頭の中でこういう構造になってるはず、こういうデザインとして出力されるはずっていうのがわかる。
うーん。
極論わかるっていう感じです。
これはやってみよう。ちゃんと意識して。
そう。
そうかも。
感覚的に、どうしても真ん中で見ながらどうやるんだ、やるんだとか、要素をいろいろドラッグして、例えばこのボックスの中にこのテキストを入れたいんだみたいなのを一生懸命真ん中の画面上でやろうとするんだけど、
そうじゃなくて、左サイドメニューでこの階層の下にこれを入れたらいいんだなみたいなのがサイドメニュー見るとわかるので、それやった後、右サイドメニューでレイアウトを縦並びにするのか横並びにするのかグリッドにするのかとか選んで各要素のマージンを決めてとかってやるときれいに構造化されていくんですよ。
確かにね。
今私真ん中で操作しようとして、うまくいかないってなって、このテキストをこの、何?ボックスの中に入れたいんだけど、うまくここの中に入らないみたいなやつをやろうとしてうまくいかないから、結果左側の階層のところで操作するみたいな感じになっているんですよね。
だからよく考えてみたら左側で最初からやればいいじゃんって感じだなって思った。
そうなんですよ。
なので階層をうまく作ってあげれば、あとはその階層の中で、フィグマの用語で言うとフレームっていうのが各要素みたいな感じなんですけど、そのフレームの中には別のフレームを入れていくみたいな感じでどんどんやっていけば、
情報の構造は左側のサイドメニューでできてて、でそのフレームの中の配置をどういじるかは右サイドメニューでレイアウトとかポジションとかそういうので選んでいけば整うので、
実は極論真ん中見なくても構造を作っていくことができるということなんですよね。
ちょっと意識のスイッチって感じがするな。やってみよう。
そうなんですよ。
で、これ僕感覚的にはマークダウンで文章を書いているときに近いなと思っていて、
マークダウンってそのプレインテキストでシャープ1つ付けたら一番でかいタイトルですとか、シャープ2個付けてたら2番目の大きさのタイトルですとか、
なんかビュレット、リスト表示にしたければアスタリスクかハイフンでみたいなので記法が決まってて、
プレビューしなくてもそのプレインテキストの方だけ見てればどういうレイアウトにしたいんだなっていうのが伝わると思うんですよね。
そうですね。
そうそう。で、もちろん最終的にはプレビュー見てちゃんと意図通りのデザインになってるかなというのを確認してサブミットするとは思うんですけど、
でも頭の中でプレインテキストがどういうプレビューになるのか、どういう出力結果になるのかをイメージしながら書いてると思うんですよね。
で、それの感覚にたぶん近いなと思ってて。
なるほどなぁ。
Figmaと他のアプリケーションの比較
なんか、マークダウンはでも、私の場合はあんまCUIとか意識してなくて、
情報の、これはこういう分類で、こういう情報のまとまりの単位ぐらいにしか思ってないことが多いかもしれないが、
でも田中さんが今言ってくれたことはわかる気がする。
情報の改造でね、情報整理していくっていう感覚がマークダウンとすごい近い気がしますね。
そうなんですよ。
っていうので、なんでFigma、なんかそういうアプリケーションの使い方あんましたことなかったというか、
なんかウェブアプリケーションを使う中でサイドメニューをこんなに見つめてることないなっていう面白さがあって。
確かに。
こうやってみると、すごく左サイドいじって右サイドいじってめっちゃやってるから、
なんかそういう体系のウェブアプリケーションを触ったことなかったかもと思って。
やっぱりサイドメニューは結構ナビゲーションとして使うこと、まあノーションとかもそうですけど、
そうだね。
サイドメニュー開いて、なんか最近ノーションもサイドメニューすごく充実して、
最近見たページがピッと見れるようになったりとか、なんかね、いろいろ情報が増えて、
まあこれが使いやすい人もいればまだ慣れてない、使いにくいなって人もいるかもしれないですけど、
なんか各ページに飛ぶためのハブというか、いう感じでサイドメニューがあるなと思うんですけど、
なんかフィグマの場合はサイドメニューで構造をどんどん定義していくっていう、
メインの使い方になるかなって僕は思ってて、
それは結構面白いな、新鮮だなって思ってますね。
そうだね、いや確かにな。
そう、なんかあんまり触らないっていう意識が勝手にあって、
キャンバスで何とかしようみたいになっちゃってたけど、
そうだね、サイドメニューがしがし使っていく、サイドメニュー違うか、レイヤーズっていう、
サイド、左側のウィンドウみたいなイメージなのかな。
そうですね。
そこをちゃんと使っていくっていう意識は、なんかそういうふうに持っていけるといいなと思いました。
エンジニアとUIデザインの重要性
結構そのなんか、マインドが変わる瞬間が最近あったなと思って。
いいね、確かに。
面白かったっす。
いい話。
なんか今後自分がどんなアプリケーション作っていくかわかんないけど、
なんかこういうスタイルもあるんだなっていうその学び。
うん、そうだね。
あのフィグマってなんとなくデザイナーさんとかね、
の使うツールみたいなイメージをこれまで持ってたんですけど、
そのエンジニアも結局バックエンドのデータ、特にデータ構造とか、
とそのUIっていうのがある程度関連してないとだいぶ厳しい事実になっちゃったりするだろうから、
エンジニアがUIまでね、ちゃんと見れるっていうのって、
なんか必要なことになっていく気がするんですよね。
そうですね。
だしなんかそのフロントエンド苦手、私苦手なんですけど、
フロントエンド苦手でも今フィグマからMCP使って実装を連携してくれたりとかもできるようになってるから、
それが正しいかどうかは自分で見ないといけないと思うんですけど、
なんだろうな、初手として力作るっていうことがね、
必要ない時代になってきてもいるから、
より今までできてなかったことやってなかったことみたいにも、
UIのデザインとかも含めてね、
エンジニアがやっていくっていうのは必要なことになるんだろうなって思ってます。
いやそうですね。
なんかやっぱり、もちろん最終的にはちゃんと人間がレビューしてアプリケーションを作り上げていかなきゃいけないのは大前提ですけど、
なんかどのように作るかという部分がすごくサポートされやすくなってきた、
その生成AIなりで、どのように作るかどういうふうに実現するかの部分はやりやすくなってきた分、
やっぱり何を作るかっていうところを決める、デザインも含めて、
どういうものを作り上げるかっていうのを決めることがより重要だし、
それによって使ってくれる人に届ける価値の大きさが差別化ポイントになってくるっていうのがあると思うんで、
そうなった時にデザインをどう作り上げるかっていうのを、
触手問わずみんなできるようになっていくっていうのは結構大事かなと思うんですよね。
そうだね、今エンジニアの立場で話しちゃったけど、
エンジニアとかじゃなくって、みんながいろんなことをできるようになる時代、
なってきてる時代ではありますもんね。
そうそう、だからやっぱり使う人に対する理解、
ドメイン知識とかって呼ばれるものと、
それをどういうふうに、どういうアプリケーションとして提供するのかっていうデザインの部分、
っていうのを決めることができたら、
それを実現する手段は結構AIでコーディングはサポートしてもらえるんで、
そうだね。
なのでそのドメイン理解とそれを実現するインターフェース、UI、デザインっていうところが、
なんかその2つができるっていうのは結構大事なんで、
なんかその意味でもフィグマとかを使って、
デザインの構造を組み上げることができるようにしておくっていうのは結構大事かもなぁと思うし、
フィグマ自体も面白いし、なんかいいなって思ってますね。
そうだね。
デモ画面作成におけるFigmaの有効性
私は最近、お客さんのところにデモをするための、
デモの画面、デモ用で説明する画面を準備するときにフィグマを使ったりするんですけど、
あのね、文字で、言葉で伝えてもやっぱりイメージできないから、
こういう画面でこういう機能を作りますよって、
言葉で言ってもやっぱり自分もね難しいなと思うし、
お客さんはね、そのITの専門家でもない方もいらっしゃるから、
言葉で言ったものをイメージしきれないってすごい当然のごとくあるわけなんですよね。
それが画面、ペラッとしたものでもあるとすごく伝わりが早いので、
もうね、画面、見えるものの大切さってめっちゃ最近感じてます。
そうですね。
わかる。
そうそう。
伝わるのはすごい大事。
なんか、その前提としてどういう課題を解決したいかっていうのを握っとくことももちろん大事ですけどね。
画面作っちゃうとその画面に引っ張られてしまうというリスクもね結構あるので、
そのハウに寄っちゃうみたいなね。
特定の機能っていうよりも、お客さんの業務プロセスを改善するときに、
こういう機能がないとこういうことができないですよね、
こういうことをやるためにこういう機能が必要ですよねっていうのを表現するときに、
何かしらないと、本当にそういうことができるんだねっていう感覚を持ってもらえないんですよね。
わかるわかる。
空中戦になりますよね。
空中戦になっちゃうから、
こっちとしてはできるんですよって伝えてもお客さんに本当から進まなくなっちゃうので、
やっぱね、ある程度の画面を断定こんなイメージですけどねっていう前提を持っていくことにはなると思うんだけど、
やっぱイメージできるUIがあるってめっちゃいいって思った。
そう思いますね。
何かそう、今、こっちさんが言ってくれたような、こういう風にできるんですよっていうものに、
僕らが言ってることに対して、本当?できないんじゃない?のパターンもあれば、
お客さん側の想像の方が先走ってしまって、
すげーできると思ってるみたいなパターンもあるんで、
そこをすり合わせるためにも、僕らが思い描いてるのはこういうところです。
ここまでです。逆に言うと。
うん、そうだね。
っていうので、その先をお客さんが言っちゃってる場合は、
その先についてはお客さんに話してもらえるように、
そうだね。
これからプラスアルファこれはできないんですか?っていうお客さんの声を引き出すためにも、
今思い描いてるのはここまでですっていうのを伝えるっていうのも大事ですね。
それもすごい大切。
この先はシステム外なのか、お客さんの手動で頑張っていただきたい部分ですって伝えておくのがすごく大切だからね。
そうですね、わかる。
そのためにフィグマンはすごい良いツールではあるから、
ちょっと苦手意識がまだまだあるんですけど、頑張って使っていきます。
まとめと今後の展望
僕は今かなり楽しい気に入ってます。
いいな。
おもろ気に入ってますね。
ちょっと思わずそこまで行きたい。
ぜひやっていきましょう。
ではでは、そんなところでエピソード237を終わりたいと思います。
このエピソードでは、今たなけんがハマっているフィグマというアプリケーションについてお話ししてみました。
今回も最後まで聞いていただきありがとうございました。
ありがとうございました。
バイバイ。
バイバイ。