自分にとっての幸せとは何なのか？

大切なことだとわかりつつも、なかなか追求しきれない人生の問い。

それを常に考え、経営者として本気で実践している人たちがいます。

**自分たちが本当に使いたいSNSアプリ『mio』を想い優先で自社開発**し、**Going my wayを貫くために自己資金での経営を貫く**『Anycloud』

今回は、互いにスタートアップの起業を経験した後にこのスタイルに辿り着いた、CEOの村井謙太さんとCOOの清水一貴さんにお話を伺いました。

~~COO 清水一貴さん（左） / CEO 村井謙太さん（右）~~

## 『mio』が目指すのは、中高生が友達とつるむ感覚で使えるリアルなSNS

#### balloon eriko_ichibangase left
**2021年11月に、新しいSNS『mio』をリリース**されましたよね。** “友達ともっと仲良くなれるSNS”がコンセプト**だそうですが、どういうことですか？

#### balloon miokentamurai right
**友達の数やいいねに価値を置いておらず、素の自分を出しやすいという意味です。** 投稿をきっかけにコミュニケーションが生まれるSNSアプリという点ではTwitterやInstagramなどの既存のSNSと同じですが、投稿に対するリアクションやコメントは他の人からは見えないようになっています。

#### balloon eriko_ichibangase left
**飾らない日常の投稿をきっかけにDMで会話が始まり、その会話が周りには見えない**ということですね。 SNSというよりも、**教室や休憩室でのリアルな会話に近い**ですね。

#### balloon miokentamurai right
**僕が欲しいのは、中高生のころ、自然と仲良くなった友達と、休み時間や帰り道でいつもつるんでいたような、あの感覚**なんです。 そんな理由から、**疎遠になった人とは自動で友達解除**されるなど、リアルな友達関係に近い距離感を作り出す工夫をしています。

#### balloon eriko_ichibangase left
友達の自動解除！ それはあとでじっくりお聞きするとして、2022年1月現在、mioの会員数はどれくらいですか？

#### balloon miokentamurai right
2021年1月からのユーザーテストに参加してくださった方が約1000人。 **現在の会員数は、まだ全然少なくて3000数百人くらい**です。

#### balloon eriko_ichibangase left
これだけいろいろなSNSがある中、一企業が自社開発した新しいSNSを3000人がインストールしているのは、すごいことだと思いますよ。 mio内は、盛り上がっていますか？

#### balloon miokentamurai right
いったん気に入ってくれた方は、とてもアクティブですね。 友達の数は関係なく、少ない人数とのつながりでも頻繁に投稿される方が多いです。

#### balloon eriko_ichibangase left
それはぜひ使ってみたい……のですが、会員登録しても、つながっている友達がいないと投稿できないんですよね。 今までのSNSは、友達とつながる前に使い勝手を試す感じで始めていたので、おっと！という感じでした。

#### balloon miokentamurai right
そうなんです。 **ほかのSNSは登録して有名人をフォローすれば、ROM専（他人の投稿を見るだけ）でも楽しめる**んですが、**mioは友達を誘わないと始められないので、最初のハードルは高い**ですね。 ただ最近、Facebook連携で友達を探す機能を実装しました。今まではID検索のみで、mio外の場所で友達を誘う前提だったので、最初のハードルはかなり下がったと思います。

#### balloon eriko_ichibangase left
すでに使っている友達を探せるのはいいですね。実名が原則のFacebookだと、相手の素性を知っているので、他のSNS連携よりも安心感はありそうです。 ただ、せっかくmioを使うのに、つながりたくない人に見つかる確率が上がるのはちょっと気がかりではあります。そのあたりはどういう判断だったんですか？

#### balloon miokentamurai right
不本意につながるリスクについては、もちろん検討しました。 でも、交流がなければいずれ自動解除される機能があるので、「1人目の友達が見つからない問題」を解決するメリットのほうが大きいと判断しました。

#### balloon miokazutakasimizu right
Facebook連携したとはいえ、これでユーザー数をどんどん増やしていこうと思っているわけではありません。 例えばTwitterなら、誰とでも自由につながれるので、ユーザー数が価値になりますよね。 でもmioは**友達とだけつながるクローズドなSNSなので、総数が何人だろうとユーザーにとっては関係ないんです。**

#### balloon miokazutakasimizu right
友達の数が少なくてもアクティブな方も多いし、そういう方が友達を招待して少しずつ増えていくというのが、僕たちの想定するmioの広がり方です。

~~Facebookと連携することで、mioを利用しているFacebook上の友達を見つけられるようになる~~

## 「これは、自分の幸せにつながるのか？」――コロナ禍で感じた既存SNSの不自由さ

#### balloon eriko_ichibangase left
そもそもですが、どうして新しいSNSを作ったのですか？ これだけ多様なSNSがある今、企業の挑戦としては、正直かなり無謀だと思うのですが。

#### balloon miokentamurai right
きっかけはコロナです。僕は淋しがりやなので、リモートワークで人に会えないのがすごくキツかったんです。 でも、そんな淋しさをうまく解決してくれるSNSがなかったんですよね。

#### balloon miokentamurai right
最初は自分でSNSを作るつもりはなかったですよ。こんなにあるのに、いまさら？と。 でも、**自分は起業してるんだし、ないなら自分で作ればいいじゃん**という発想になっていきました。

#### balloon eriko_ichibangase left
ほかのSNSは、村井さんが欲しいものとどこが違ったんですか？

#### balloon miokentamurai right
Twitterは好きですが、そのころは炎上や激論も多くて、交流のためのSNSとしては心理的に良くないと感じることが多かったんです。 Instagramは、男性の友人があまり使っていない。Facebookは結婚や転職などライフイベントの報告が多くて、自分としては気軽な日常を発信しにくい場になっていました。

#### balloon miokentamurai right
それに、**どのSNSも、つながる人は増える一方で減ることがなく不可逆**ですよね。 関係性の薄い人やステークホルダーも増えてくるので、**使い続けるに従ってどんどん自由な発言がしにくくなる**んです。

#### balloon eriko_ichibangase left
それは、すごくよくわかります。Facebookは公開範囲を細かく設定できる機能がありますが、投稿の内容ごとに変えるのは正直面倒ですね。

#### balloon miokentamurai right
自分が求めているのは、**本当に大切だと思う友達との気の置けない交流ができる、心理的安全性の高いSNS**なんです。 だから、コロナで人に会えない中で既存のSNSを使っていると、**「この中に自分の友達っているのかな」「ここでの交流は自分の幸せにつながっているのかな」**と、思うようになったんですよね。

#### balloon eriko_ichibangase left
mioの開発は、自分が欲しいからというのが動機だったんですね？

#### balloon miokentamurai right
そうです。 **社会のニーズに応えるためではなく、自分が欲しいプロダクトを作りたかったから**です。 でも、**mioみたいなSNSを欲しいと思っているのは自分だけではない、という確信はありました**よ。

## リアルな人間関係を追求したら、友達が自然消滅するSNSができた

#### balloon eriko_ichibangase left
友達の数やいいねに価値を置かないSNSとのことですが、具体的にどんな仕様なんでしょうか？

#### balloon miokentamurai right
繋がっている友達の名前や人数、いいねの数や投稿に対するコメントは他人から見えないようになっています。 投稿にリアクションすると、DMで1：1の会話が始まります。

#### balloon eriko_ichibangase left
友達が見えないこと以外は、Instagramのストーリーズで実現されていませんか？

#### balloon miokentamurai right
その機能はそうですね。 **Instagramのストーリーズは友達と交流するツールとして非常に優れたプロダクトだと感じている**ので、ベンチマークしています。

#### balloon eriko_ichibangase left
Instagramとの違いはどういう部分ですか？

#### balloon miokazutakasimizu right
**友達が増えすぎて投稿しづらいとか、あの人には見られたくないなというフラストレーションがない**ように作っているのが、Instagramとの大きな違いですね。

#### balloon miokentamurai right
友達が逓増して減らないという従来のSNSの構造を変えないかぎり、**「新しい場所が欲しくてmioを始めたのに3年経ったら他のSNSと同じになってしまった」**となるはずです。 意図せずつながってしまった仕事関係者や、試しにつながったけど違ったなという人を解除できなければ、当然そうなりますよね。

#### balloon miokentamurai right
それは、仲のいい友達と密にコミュニケーションを取れる場を作るうえで弊害になると考えているので、**友達との関係を維持しつつ、切れるところは切れていくという、心理的安全性の高い世界観を作りこんでいるのがmioのバリュー**かな、と思ってます。

#### balloon eriko_ichibangase left
具体的には、どんな仕組みが用意されていますか？

#### balloon miokentamurai right
**親しさで関係性が変わるフレンドポイント**や、**関係性を維持するために強制的にインタラクションを生む仕組み**などですね。

*●インタラクションとは*

~~*インタラクション（interaction）は、交流や相互作用を意味する言葉。単なる「やりとり」の意味にとどまらず、お互いが呼応し合い、影響を及ぼし合うような関係性を指す。*~~

~~mioのタイムライン。友達と同じお題に回答すると、友達の回答を見られるようになる~~

### 友達解除もあり得る、フレンドポイント

#### balloon eriko_ichibangase left
ひとつずつ、じっくりお聞きしたいですね。フレンドポイントとは？

#### balloon miokentamurai right
**リアクションやメッセージの量だけでなく、インタラクションの時間別分布や投稿の公開対象に選ぶ頻度など、多面的につながりを評価する仕組み**です。 フレンドポイントによって友達は1stサークル、2ndサークル、3rdサークルに分かれます。

#### balloon eriko_ichibangase left
それぞれのサークルで、どんな権限があるんですか？

#### balloon miokentamurai right
2nd以上は、お互いに位置情報を共有できる機能が解放されます。 いまのところ1st限定の権限はないですが、親しさの度合いを測れますね。 3rdより下に「その他友達」という位置付けがあり、「その他友達」枠にいる間が一定期間続いた上で、諸条件を満たすと友達が自動解除される仕組みです。

~~2nd以上になると、お互いが許可することで位置情報を共有できるようになる~~

#### balloon miokentamurai right
ちなみに、**フレンドポイントは、直近の親しさの比重が大きい**という特徴があります。 つながってからの単純な累計ではないんです。

#### balloon eriko_ichibangase left
過去の親友よりも最近知り合ったばかりの友達に親しみを感じたり、何年も離れていたのに仲直りしたり、という**流動的で可逆的な人間関係がmio内にある**んですね。

~~mioでは、自分を取り囲む友人と、その関係性の濃さが可視化される~~

#### balloon eriko_ichibangase left
友達の自動解除も、親しさの度合いによって決まるんですよね。 事前に通知が来て、リアクションを増やせば解除を阻止できるような仕組みでしょうか。

#### balloon miokentamurai right
**事前の通知はなく、いきなり友達解除**です。

#### balloon eriko_ichibangase left
それはまた思い切りましたね。通知なしにした理由はなんですか？

#### balloon miokentamurai right
**もうすぐ解除になりますよ、という通知が来る心理的負担が大きかった**んです。 通知が来ると、「何らかのアクションを起こして解除を防ぐ」「通知を無視して解除を待つ」の二択になりますよね。

#### balloon miokentamurai right
それって実際、自分から能動的に友達を解除するのと変わらない強いストレスがかかってしまうな、と。 自分で解除するストレスを減らすための機能なのに、通知がバッド体験になっては意味がないので、解除の条件を厳しくしたうえでいきなり解除することにしました。

#### balloon eriko_ichibangase left
たしかに、通知が来るよりも気づいたら外れててほしいですね。 「自分で解除するのも、つながったままでいるのもしんどい」という関係性はSNSのあるあるなので、これは画期的ですね！

### 話しかけないといけない環境を作る、強制インタラクション

#### balloon eriko_ichibangase left
では次に、強制的にインタラクションを作る仕組みについてお伺いできますか？

#### balloon miokentamurai right
mioには、タイムラインロックという機能があって、**一定期間リアクションせずにいると、相手の最新投稿が見られなくなる**んです。 最新投稿を見たければ、何かリアクションしないといけないんですよ。

~~mioのタイムラインロック機能。一定期間リアクションをしていないと最新投稿の閲覧が制限される~~

#### balloon eriko_ichibangase left
単純に考えると不親切な機能ですが、その意図は？

#### balloon miokentamurai right
リアルでの友達関係でも、もともとは部活が一緒だったり席が隣だったりして、強制的に話しかけざるを得ない空気に置かれたことがきっかけだったりしませんか？ ただ集められて「仲良くしてね」と言われても、関係性は生まれないですよね。

#### balloon miokentamurai right
面倒な機能だと感じる人は多いでしょうが、**中長期的には良い人間関係のきっかけになる**と考えてます。

#### balloon eriko_ichibangase left
言われてみれば、たしかに……。 **リアルの友達関係をSNSでロジカルに再現すると、友達が自然消滅したり、面倒なハードルをわざと置くことになったりする**わけですね。 mioの発想、おもしろいですね。

## 開発は2人だけで！予想以上に交流しないユーザー同士に四苦八苦

#### balloon eriko_ichibangase left
SNSを一から自社開発されたわけですが、開発チームはどんな体制でしたか？

#### balloon miokentamurai right
**開発は、清水と僕の2人**です。 デザインまわりは清水の奥さんで、3人で仕様を相談することも多かったです。

#### balloon miokazutakasimizu right
妻は副業なので、メインは村井と僕ですけどね。

~~mio開発チーム。2022年2月現在は3名体制で内製している~~

#### balloon eriko_ichibangase left
これを、2人で！それは最初から最後まで大変だろうとは思いますが、特に苦労した部分はどこですか？

#### balloon miokazutakasimizu right
まずは**友達の自動解除機能**ですね。そもそも、消すか消さないかでかなり迷いました。 mioには友達を1stから3rdに分けるサークル機能がありますが、それだけのほうがマイルドかな、と判断して、テスト期間中の一時期は解除機能を止めていたこともありました。

#### balloon miokentamurai right
友達を自動解除するアイデアは早い段階であったんですけど、バッド体験になるなら、ないほうがいいのかもね、と。

#### balloon miokazutakasimizu right
個人単位で公開範囲を設定できる機能もあるので、それでいいのかもしれない、とか、そのへんも考えましたね。 でも、非公開対象にする友達とつながり続けるくらいなら、やっぱり友達を解除するほうがいいんじゃないかと。

#### balloon miokentamurai right
自動解除すると決まったあとは、どんな条件で消すかという部分で躓きましたね。 **最初は「1ヶ月連絡を取り合わなければ消す」としたんですが、これが意外とすごく外れる**んですよ。

#### balloon eriko_ichibangase left
忙しくて1ヶ月ログインしてなかった、数ヶ月ROM専だった、なんてことは普通にありそうですよね。大人の1ヶ月は、あっという間ですし。

#### balloon miokentamurai right
それで、フレンドポイントで判断するようにしたんですが、それでも半分くらい切れるような事故が起きて。

#### balloon eriko_ichibangase left
ああ、それもなんかわかります。**SNS投稿を見て近しい気持ちでいても、実はコメントやリアクションはあまりしていない**ってことも多いですよね。 でもそれは悪いことじゃなくて、少ない交流で親近感を保てるのはSNSのいいところでもあり……。ユーザーとしては、友達自動解除には高い精度を求めてしまいそうです。

#### balloon miokentamurai right
ですよね。アルゴリズムは詳しく言えないんですけど、**最終的に「これはどう考えても友達解除したいと考えているに違いない」というレベルに限定した解除**に絞りました。

#### balloon miokentamurai right
自分も今、mio上で30人くらい友達がいるんですけど、最大で50人くらいだったのがそこまで減りました。 今残っているのは本当に交流がある人たちですね。 定量的な評価は難しいんですけど、友達が解除されたときに「そうだろうな」という納得感があるので、精度は上がっていると思います。

#### balloon eriko_ichibangase left
納得感のある秘密のアルゴリズムの精度、すごいですね！ そういえば御社の事業内容に機械学習も入っていましたが、そのアルゴリズムにAIは使われているんですか？

#### balloon miokazutakasimizu right
使ってないです。このあたりのアルゴリズムを含め、2人で考えて内製で作っています。

## Anycloudが重視するのは、 会社の成長 ＜ 愛されるサービスを作る喜び

#### balloon eriko_ichibangase left
mioは無料アプリですが、有料サービスや広告表示での収益はあるんですか？

#### balloon miokentamurai right
**いまのところ、mioではマネタイズできていない**です。 でも、スタートアップ的にmioだけに絞ってとにかく伸ばすみたいなスタイルは取らないつもりでいます。

#### balloon eriko_ichibangase left
えっ、それでいいんですか？

互いにスタートアップの起業を経験した後に友達ともっと仲良くなれるSNS『mio』を生み出した、CEOの村井謙太さんとCOOの清水一貴さんにmioについてお話を伺いました。

心理学科卒業後、新卒未経験でSI企業に就職し、Java系のSEとして10年。 結婚出産を経て、2015年にトラベルライターに転身。 現在はライターのほか、webディレクターや広報の業務にも携わっている。 新婚旅行では1年かけて世界50ヶ国を巡るほどの旅行好き。 日々の晩酌が何よりの楽しみ。

一番ヶ瀬 絵梨子

1992年三重県生まれ。
東京大学在学中に株式会社Progateを創業し、 100万人以上のユーザーが使う初心者向けプログラミング学習サービスのProgateを開発・運営する。
CTO(最高技術責任者)として経営、プロダクト開発、教材開発、採用、組織マネジメントなど幅広い業務に携わる。
2019年株式会社Anycloudを創業。

村井さん

1993年生まれ。
新卒でマーケティングのコンサルタントとして勤務し、クライアント、自社事業のグロースに携わる。
2015年に株式会社SAGOJOを創業。 エンジニアがいなかったのでプログラミングを独学し、開発、マーケティング、マネジメントなど技術、ビジネスの両面で幅広い業務に従事。
2019年株式会社Anycloudを創業。

清水さん

『mio』を作った理由は、自分たちが使える既存のSNSがなかったから

友達が“増えるだけで減らない”SNSでは、自由な発言が次第に難しくなる

中長期的に良好な人間関係を築くためには、やりとりを強制的に生む仕組みも必要である

Anycloudは、会社の成長だけでなく自分たちの理念も大切にするために自己資金で経営している

SNS疲れに終止符。素の自分を出せるSNS『mio』が追求する“心理的安全性”の価値【前編】

ブラウザ上で共同編集できるデザインプラットフォームとして、多くの現場で使われている「[Figma](https://www.figma.com/ja-jp/)」。デザイナーがFigmaで作成したファイルを元に、実装を進める流れが一般化しています。しかし、エンジニアのなかにはFigmaを上手く使いこなせず、デザイナーとスムーズな連携が取れないケースも。

そこで今回はエンジニアが知っておくべきFigmaの便利な活用法を、Figmaコミュニティの中核を担っている谷拓樹さんに伺いました。デザインを実装するまでの手間がなくなり、効率的にコーディングを進められる機能が満載です。　

Figma Japan株式会社デザイナーアドボケート。中小企業向けのSaaS、フリーランスでの受託、起業やスタートアップでの開発チーム立ち上げを経験。Webのフロントエンド開発や、UI・UX設計をおこなう。現在はFigmaのマーケティングやリソースの設計・開発に取り組んでいる。またデザインシステムに関連する情報のキュレーションや、その他講演・執筆活動などもおこなっている。

## プロダクト開発全体をサポートする機能が充実

#### balloon kishi left
最近はさまざまなノーコードツールが登場していますが、それらと比べてFigmaにはどんな強みがありますか？

#### balloon figma_tani right
Figmaとノーコードツールは役割が異なるため、直接的な比較は難しいですね。ノーコードツールは、視覚的にデザインしたものをコードを書かずに機能するものをつくる目的なので、実装コストの削減や、リソース不足の解消、短期的なページ作成などに使われることが多いです。

#### balloon figma_tani right
一方で、Figmaはプロダクト全体の設計、例えばアイデア出しやワイヤーフレームの作成から、具体的なUIデザインやプロトタイプの作成、そしてそのデザインを元にしたコード生成まで、より多様な用途に対応できます。そのため、中長期的に運用・拡大していくサービスやアプリ、複数の関係者が関わるプロジェクトでもスムーズに連携して進められるのが特徴です。またFigmaは様々なツールとの連携もあり、ノーコードツールと連携させることで、Figmaで作ったデザインを元にノーコードツールを介して公開するところまで進めることもできます。

#### balloon kishi left
具体的には、どのような場面でFigmaの強みが発揮されるのでしょうか？

#### balloon figma_tani right
最新のデザイン仕様をFigmaに集約できるので、もしユーザーのフィードバックから改善すべきポイントを指示するにしても、わざわざドキュメントツールに画像のキャプチャを貼り付けて修正指示を書いて...などをしなくても、直接Figma上にコメント機能でコメントを書いたり、あるいは編集権限があれば簡単な文言修正ならばデザイナーでなくても対応することができます。そうしたデザインへのアクセスのしやすさが大きな強みといえます。

~~「Figma」による共同編集の画面イメージ~~

#### balloon kishi left
Figmaを信頼できる情報源とすることで、コミュニケーションの無駄なコストを減らせるということですね。

#### balloon figma_tani right
先ほどのノーコードツールとの連携でいうと、例えば、「Studio」というノーコード・ローコード系のツールがありますが、**FigmaのデザインをStudioにエクスポートできるプラグインもあります。**これにより、FigmaでデザインしたものをStudioに反映させて、簡単に実装を進められます。

#### balloon kishi left
Figmaの機能性でユーザーに支持されているのはどんなところですか？

#### balloon figma_tani right
ブラウザ上でもスムーズに動作し、macOSなどのネイティブアプリと同等のパフォーマンスでコラボレーションできる点です。この共同編集のしやすさがFigmaの核となる体験の一つです。**当初はデザイナー向けツールとしてスタートしましたが、先ほども触れた通り現在ではプロダクト開発全体をサポートする機能も充実しています。**

#### balloon kishi left
共同編集の他には、どのような機能が追加されたのでしょうか？

#### balloon figma_tani right
例えば「[FigJam](https://www.figma.com/ja-jp/figjam/)」というホワイトボードツールは、プランナーやプロダクトマネージャー、リサーチャーなど、多様な職種の人々がアイディアを出し合う場として機能します。

~~「[FigJam](https://www.figma.com/ja-jp/figjam/)」によるブレインストームの画面イメージ~~

#### balloon figma_tani right
また、2023年には「[開発モード（以下、Dev Mode）](https://www.figma.com/ja-jp/dev-mode/)」を追加し、デザインからコードへの引き継ぎ（デザインハンドオフ）を円滑にする機能も提供。Figmaは、単なるUIデザインツールにとどまらず、プロダクトの構想段階からコード化までを一貫して支援しているのが特徴です。

## 途中段階のデザインを確認すれば「手戻り」が減る

#### balloon kishi left
Figmaはデザイナー以外の職種でも使用されているようですが、特にどのような職種が多いのでしょうか？

#### balloon figma_tani right
特にエンジニアの方々に多く利用されています。デザインデータを参考にしながらコードを書くプロセスは、昔からPhotoshopなどでも行われていましたが、Figmaでも同様の流れが一般的です。実際、Figma全体のユーザーのうち、約3分の2はデザイナー以外の方が占めており、エンジニアを含む幅広い職種に利用されていることがわかります。

#### balloon kishi left
Figmaについてエンジニアからよく寄せられる課題は？

#### balloon figma_tani right
**エンジニアからよく聞くのは、デザイナーが作成したデザインデータに触れることへの恐怖心です。**「データを壊してしまいそう」といった不安を抱えている人が多いですね。「閲覧権限」や「Dev Mode」で見ているだけなら、触ってもデザインを壊す心配がないのでこの点をまず理解することが大切です。

#### balloon kishi left
デザイナーとの連携に関して他にも課題はありますか？

#### balloon figma_tani right
従来のプロセスでは、デザイナーが作業完了するまでエンジニアはその内容を把握できないことが多いです。例えば、上流工程で仕様が決まってデザインが完成。その段階でエンジニアが実装の依頼を受けたとしても、「このデザインでは実装が難しい」と手戻りにつながるケースも。もしくは、実現がかなり困難でもエンジニアが対応せざるを得ないこともあります。

#### balloon kishi left
エンジニアとデザイナーのコミュニケーションの問題を、どのように改善すればいいのでしょうか。

#### balloon figma_tani right
**Figmaでは、ブラウザを使ってデザインデータに簡単にアクセスできるので、エンジニアは途中段階のデザインを確認することができます。**これにより、デザイナーが作成段階のアイデアに対して、エンジニアがコメントを送ることも。また、実装に必要なデザインデータが不足している場合にも、すぐにコミュニケーションを取れるので生産性向上につながります。

#### balloon kishi left
私もFigmaを使うことがあるのですが、過去のデザインデータを一つの画面で確認できるので内容を比較しやすいです。

#### balloon figma_tani right
そうですね、全体を俯瞰して見れるのはエンジニアにとっても大きなメリットだと思います。例えば、自分が実装する画面でエラーが出たときにどんな画面が表示されるのかなど、必要な情報をすぐに確認可能。ファイルを探す手間がなくなることで、作業を効率化できるのではないでしょうか。

## デザイナーとのやり取りを円滑にする方法

#### balloon kishi left
エンジニアがまず知っておくべきFigmaの使い方は何ですか？

#### balloon figma_tani right
まず重要なのは、実際に触ってみてFigmaの基本的なインターフェイスとナビゲーションを理解することです。どこをクリックすれば色が見れるのか、などデザインの情報をどこで見るのかなどを確認していくことで、デザインデータをスムーズに閲覧できるようになります。

#### balloon kishi left
まずは操作してみるということですね。デザインファイルから効率的に実装を進めるための方法を教えてください。

#### balloon figma_tani right
まず、デザイナーとのやり取りですが、エンジニア側が「閲覧権限」のみで内容を編集できない場合でも、コメント機能を使ってスムーズにコミュニケーションを取れます。例えば、エンジニアがデザインに「表示件数は最大3件」などとコメントを入れて、それをデザイナーが確認するような流れですね。

#### balloon figma_tani right
閲覧権限でも使えるコメント機能だけでもデザイナーと連携はできますが、Dev Modeという機能（有料）を使用すると、より見やすいかたちになります。**Dev Modeには「アノテーション」という注釈の機能があるんですけど、これを使うと静的なデザインデータ上ではわからない細かい仕様や寸法、コンテキストなどを一目でわかるかたちで共有できます。**

#### balloon kishi left
クリックしてコメントを確認する必要がないので、かなり便利ですね。実装フェーズでは、どのデザインファイルが着手可能なのか、エンジニアが判断できないという悩みもよく聞きます。その場合はどうすれば？

#### balloon figma_tani right
**Dev Modeを使えば、デザイン完了したファイルに「開発準備完了」というフラグを表示できます。**さらにフィルター機能で「開発準備完了」だけを抽出することも。コーディングするときに他の画面を見なくてもいいので、集中して作業に取り組むことができます。

## Dev Modeでコーディングの工数を大きく削減

#### balloon kishi left
Figmaでコーディングを効率化する方法を教えてください。

#### balloon figma_tani right
まず、通常の閲覧権限の場合はデザイン上のUIをクリックしたとき、右側にPixelの値や色のコードが表示されるので、それを元に実装を進められます。

#### balloon figma_tani right
ここでDev Modeに切り替えると、さらにリッチな情報が表示されるんです。**CSSやiOS、Androidなどで推奨されるコードスニペットを生成してくれるので、ゼロからコードを書くよりも、かなり楽になります。**この機能により、デザインから実装までのワークフローを大きく効率化できます。

#### balloon kishi left
これはすごいですね。コーディングの作業がかなりラクになりそうです。

#### balloon figma_tani right
画像の書き出しについても、プレビューが表示されて簡単にエクスポートできます。**PNGの書き出しや高解像度での書き出しもできるので、デザイナーに画像の書き出しを依頼する手間がなくなります。**画像に関しては基本的にエンジニア側で完結できるのではないでしょうか。

#### balloon kishi left
なるほど、書き出しまでできるのは本当に便利です。

#### balloon figma_tani right
コーディングをさらに効率化するなら、コードエディター「Visual Studio Code（以下、VS Code）」との連携がおすすめです。VS Code向けの拡張機能を使用することで、デザインファイルをテキストエディターに取り込むことができます。つまり、VS CodeのなかでFigmaのデザインデータを見れるということです。

~~「Visual Studio Code」の拡張機能「Figma for VS Code」のデモ画面~~

#### balloon figma_tani right
従来の操作では、ブラウザやアプリでFigmaを見て、出てきたコードなどをコピー、その後でVS Codeのエディターを開いてペーストするなど、切り替え作業が発生します。一方で**VS Codeの拡張機能を使うと、コードを書くエディターのすぐ横にFigmaが表示されるので、コピー＆ペーストが簡単。**しかも、サジェストの設定を有効にすれば、エディター上でコードを予測表示することも可能です。

#### balloon kishi left
コードをコピーできるだけでも便利なのに、サジェスト機能まで付いているというのは驚きですね。

#### balloon figma_tani right
注意点としては、サジェスト機能で表示されるコードがデザインデータから解釈している内容なので、精度は高いもののプロダクトの全ブロックを書くのは難しいということ。細かい部分の修正などが発生すると思いますが、作業の効率が飛躍的に高まるのは間違いありません。

#### balloon kishi left
今後はVSCode以外にも拡張機能を広げていく予定なんですか？

#### balloon figma_tani right
リクエストをたくさんいただいているので、現在検討中です。ニーズとして高いのは、iOS開発であればXcode、Androidの場合はAndroid Studioですね。具体的にいつ対応するのかなど、方向性はまだ決まっていませんが実現する可能性はあるかもしれません。

## 構造的なデザインを簡単に作れる「オートレイアウト」

#### balloon kishi left
デザイナーにディレクションしようとするときに便利な機能はありますか？

#### balloon figma_tani right
単純なデザインに対するフィードバックであれば、コメント機能でディレクションすることが多いと思いますが、それに加えてオートレイアウト機能を使うと、フレーム内の要素を規則的に並べて、構造的なデザインを組むことができます。

#### balloon figma_tani right
例えば、上記のような画面の場合、要素が増えたときに自動で幅が伸びたりすることはないのですが、オートレイアウト機能を使うと、自動的にレイアウトが切り替わります。

#### balloon kishi left
なるほど、便利ですね。構造的なレイアウトは、その後のコーディング作業でも何かメリットがあるんですか？

#### balloon figma_tani right
**構造的なデザインにすると、Dev Modeを使用したときのコードスニペットでも、内容を解析しやすくなるんです。**

#### balloon figma_tani right
例えば、上図の2つのデザインを見てもらったときに見た目はそんなに変わらないですが、左のようにデザインデータがフラットな状態になっていると、どこが親子関係になっているのかわかりづらく、コーディングに時間がかかってしまいます。
一方で、右のように**オートレイアウトで構造的なデザインを組んでおくと、階層的なコードを出してくれるので効率良く実装を進められます。**

#### balloon figma_tani right
つまり、Dev Modeで機械的に解釈するとき、単純にグループ化してただ並べているだけでは構造的なコードを出すのが難しい（上図の①）ということです。そのため、オートレイアウトなどで構造的なレイアウトにすることをおすすめします（上図の②）。

#### balloon kishi left
なるほど、オートレイアウトを使うことで実装も進めやすくなるということですね。

#### balloon figma_tani right
そうですね。そもそもデザイナーの誰もが構造的なデザインを熟知しているとは限りません。Figmaも活用しながら構造的なデザインを作ってもらえるようにコミュニケーションを取れると、エンジニアの作業をより効率化できると思います。

## UIキットを活用すれば0→1のデザインも可能に

#### balloon kishi left
エンジニアが簡易的なワイヤーフレームを組むときに便利な機能は？ 

#### balloon figma_tani right
Figma上で新しい画面を作成する場合、デザイナーが用意したコンポーネントセットやボタンなどを共有してもらうのが便利です。エンジニアに編集権限が付与されていれば、それらを組み合わせてワイヤーフレームを作成したり、画面を微調整したりすることができます。

#### balloon kishi left
共同作業がスムーズになりますね。デザイナーとの連携がこれからで0→1の状態で画面を起ち上げるときにはどうすれば？ 

#### balloon figma_tani right
**独自のUIキットを持っていない場合でも、Figmaが公式で提供しているUIキットを活用すれば、誰でも手軽に画面を作成できます。**UIキットのなかにはAppleと提携して作られたものもあるので、基本的なデザインの構築が可能です。

~~[Figmaの公式ページ](https://www.figma.com/community/ui-kits?resource_type=mixed&editor_type=all&price=all&sort_by=all_time&creators=all)では上記のAppleが提供しているUIキットの他にもさまざまなキットを提供している。~~

#### balloon kishi left
デザイナーとの共同作業を円滑にするため、最低限決めておくべきルールなどはありますか？

#### balloon figma_tani right
私自身の実装経験を踏まえてなんですけど、まずデザインデータをFigma上で公開して、関連したメンバーで「閲覧権限」を持った人なら誰でもアクセスできる状態にしておく。そして、途中経過でデザインのレビューなどを適宜入れられるようにして、デザイナーとエンジニアの関係性を作ることが重要だと思います。その上で、デザイナーがFigmaのコンポーネントセットを共有するなど、より効率的に進められる体制を構築することが大切です。

#### balloon kishi left
実装フェーズに向けて、他にも決めておくべきことはありますか。

#### balloon figma_tani right
**命名規則のすり合わせが非常に大切だと考えています。**例えば、デザインデータ上で表示される「薄いベージュ」や「グリーン」といった色をバリアブル機能で管理し、カラーコードで共通の命名規則を持つようにしておく。そうすると、デザインデータをコードへスムーズに転用でき、再確認の手間が減ります。

#### balloon kishi left
具体的にはどのようなルールを決めればいいですか？

#### balloon figma_tani right
細かい部分ですが、アンダーバーを使うのか、ハイフンを使うのか、スペースを空けるのかなどの細かいルールを決めておく。**色の命名についても「ブランドカラー」や「サブカラー」などを命名しておくとスムーズに作業を進められます。**エンジニアが初期段階からデザインに関わるケースも増えているので、Figmaを活用してより良いアウトプットを生み出していただけたらと思います。

大学卒業後、構成作家・フリーランスライターとして、幅広いメディア媒体に携わる。現在は採用関連のインタビュー記事や新卒採用パンフレットの制作に注力しながら、SaaS企業のマーケティングにも携わっている。いま一番関心があるのは、キャンプ場でワーケーションできるのかどうか。

岸 裕介

谷さん

エンジニアがFigmaを使って効率的に実装を進める方法

デザインから簡単にコーディングできるFigmaの活用法

デザイナーとのコミュニケーションを円滑にする方法

デザイン→実装の作業がラクになるFigmaの活用法。エンジニアとデザイナーの垣根をなくす方法とは？

14年ぶりに日本が世界一を奪還し、侍ジャパンの功績が大きな話題を呼んだ第5回WBC（ワールド・ベースボール・クラシック）。その華やかな舞台の裏には、テクノロジーを活用した高いデータ分析力による貢献がありました。

今回は2009年、2023年のWBCにおいてデータ関連スタッフとして日本チームに帯同し、トラックマン（※）の野球部門の責任者を務める星川 太輔氏にインタビューを実施。野球におけるデータ活用の実態や、スポーツアナリストという職業が生まれた経緯について話を伺いました。

~~※トラックマン：レーダー技術でボールをトラッキング（追尾）し、球速や回転数、打球角度など40種ほどのデータを取得することができる弾道測定機器~~

## トッププレイヤーのデータと向き合う姿勢

#### balloon kaneko left
星川さんご自身も、かつて慶應大学の野球部に所属していたと伺いました。

#### balloon hoshikawa right
はい。大学の硬式野球部で、ピッチャー兼データ分析担当として活動していました。3年生で辞めてしまいましたが、1つ上の学年には高橋由伸さんがいましたね。卒業後はスポーツテックベンチャーの株式会社アソボウズ（現：データスタジアム株式会社）に入社し、10年ほど勤めました。その間に、プロやアマチュアの野球チームにデータ入力分析ソフトを販売したり、分析したデータを記事化したり、テレビ局に営業したり。いろんなことを経験しました。

#### balloon kaneko left
まさに現在のお仕事に通じる活動をされていたのですね。

#### balloon hoshikawa right
そうですね。データ分析スタッフとして2009年のWBCにも帯同しました。ただ、日本が世界一になって“やりきった”気持ちと、野球界をもっとよくするにはこのままではダメだという思いになりました。**球団内部に入って貢献する選択肢もありますが、外部からアプローチするほうが自分に合っているな、と。**

#### balloon hoshikawa right
それには自分のビジネススキルが圧倒的に不足していると思い、1から勉強すべく、それまでとはまったく別分野で平社員から出直そうと思いました。そこで、経営者の視点でビジネスを徹底的に学べる商社に転職。ところが4、5年ほど勤務したところで「トラックマン」に出会い、改めてスポーツ×テクノロジーの面白さに魅了されてしまい。再びこの世界に戻ってきました。 

#### balloon kaneko left
野球における「テクノロジーの活用」に関して、その変遷について教えていただけますか？

#### balloon hoshikawa right
僕が大学生の頃は、大きな模造紙にピッチャーの球種やコースなどを手で書いて壁に貼り付けていたような時代でした（笑）。当時、アソボウズ社でアルバイトをしていたのですが、年間何百試合ものプロ野球中継の映像を見て、プレイデータをひたすらデータベースに入力するという仕事内容で。そのアプリケーションも開発途中といった段階でしたから、まだまだ現場はテクノロジーの活用とは程遠い状況でしたね。

#### balloon hoshikawa right
その数年後、2000年代初頭頃からでしょうか、**まずはプロ野球界でデータの有効性に注目する動きが生まれました。**プロ野球では当時、スコアラーのみなさんが、ピッチャーの投球傾向や配球、バッターの得意・不得意などを分析していました。ただ、その手法はアナログなやり方が中心でしたので、テクノロジーの力を利用してデジタル化していこうという機運が高まったのです。

 #### balloon kaneko left
なるほど、日本のプロ野球におけるデジタル化の流れはここ20年ほどの話なのですね。ちなみに海外、特にメジャーリーグ（以下、MLB）ではもっと前からITの活用が進んでいたのですか？

#### balloon hoshikawa right
MLBも、日本と比べて特に先進的な取り組みをしていたわけではなかったようです。というのも、MLBは球団数が多いので、日本ほど細かく対戦相手を分析できないという問題があって。MLBでは自分たちのチームでスコアラーを雇うというよりも、全球団のデータを取得している会社から、各チームがデータを買う方法、そして試合前にビデオコーディネーターが編集した映像を見るというのが主流のようでした。

#### balloon kaneko left
野球はMLBのルールやしきたりが少し遅れて日本に入ってくるイメージでしたので、デジタル化という点でそこまで差がなかったとは意外でした！

#### balloon hoshikawa right
当時は、ですね。とはいえ、“データの活用”という点では、やはりMLBのほうが進んでいるなと感じる部分はありますよ。今は「ハード」の部分ではMLBも日本もそこまで大きな差はありませんが、「ソフト」の部分の差ですね。つまり“数字で語る”“数字で評価する”というカルチャーがもともとアメリカにはありますので、選手もファクトに基づいて仮説を立てながら自己研鑽する意識が高いように思います。

#### balloon hoshikawa right
実際2023年に開催された第5回WBCにもデータアナリストとして帯同しましたが、ダルビッシュ有選手や大谷翔平選手の取り組み姿勢が印象的でした。**2人とも投球練習の際に、自分の投げた球を1球1球チェックしているんです。両選手とも「投げたい」理想の球があって、“自分の感覚”と“実際の投球”との差異をデータで逐一確認しているイメージです。**同じ環境があるのですから、「日本の選手たちも、いい意味で真似してくれたらいいな」と思っていました。

#### balloon kaneko left
たしかに、現状の戦力ややり方で既に世界一に輝いているわけですから、そこにさらにデータの力がプラスされれば最強ですね！

人気のある記事