00:05
はい、みなさんこんにちは。TRY-CATCH FM第28回を始めていきます。 お願いします。
このTRY-CATCH FMも、あともう少しで30回になるじゃないですか。
なりますね。
1回目か2回目くらいの放送の時に、
マイクの話したと思うんだけど。
ああ、そういえばした気がする。
で、ついにちょっと買おうと思って。 ある程度落ち着いたからね。
Amazonのポイントが1万円分くらい溜まってて。
おお、結構溜まったね。
いいのないかなと思って、いろいろ探してたんですよ。
そしたら4,000円くらいのめっちゃレビュー高いやつあって。
うーん、意外と安いな。
そうそう、意外と安いから、初心者用になんかいいんじゃないのかなと思って、
買いました。
なんてやつ?
ちょっと待ってよ、Amazon見てみよう。
アカウント、注文履歴。
あったあったあった。
なんて読むんだろうな、Kunberって読むのかな?
あー、Kunber出てきたね。
で、これやっぱね、見た目かっこいいのよ。
この、声のさ、なんか声とかを応じする、なんかあるじゃん、声優とかがマイクに使う。
そうそうそう、なんかツイークたり。
これかな?
すごいかっこいい。
このアームがガチャガチャしてるやつ?
アームがガシャガシャしてるやつね。
どれだろう?
わかんないけど、3899円のやつ。
あ、じゃあ地芸やつか。
で、まあUSBで普通にパソコンにさせて、
設定はめっちゃ簡単です。
で、評価もね、4.4くらい。
1877の評価ついてて、4.4だから、まあ申し訳なさそうな。
確かに、あ、見つけた、このコンテンサーマイクってやつね。
そうそうそうそう。
確かに、マイクの後になんか、多分破裂音防止なのか、
なんか、唾液止めるのかわかんないけど、あの枠みたいなやつがありますね。
そういうことですね。
確かにかっこいいな。
かっこいいやん。
でね、肝心の音はどうなのよって話だと思うんだけども、
はい。
まあね、ちょっと検証したんだけど、
03:01
前回の27回もこれで撮ってるんだけど、
はい。
まあそこまで劇的にね、変わんないね、やっぱ。
まあ、ズーム落としちゃうからかもしんないね。
かっこいいなとね、うん。
でもまあモチベーションは上がるっていうのと、
あと実際ね、ポトキャス以外で自分でテストしてみたんだけど、
はい。
そのスマホで音楽とかを流してそれを録音すると、
なんか明確に差が出たかな。
あー、なるほど。
このマイクでそのスマホから流れてるやつをレコーディングというか、
撮ったやつはまあ結構比較的クリアだけど、
Macのマイクで撮ったやつはちょっとビリビリしてるというか、
ちょっとノイジーな感じになってた。
機械音とかなんか種類によっては差が出るんだね。
そうだね。
でもまあ、人間の声はね、ビビタルさです。
でもまあちょっとコスでも、
これくらい安いやつだったらぜひ買ってみてください。
そうだね。
今僕は安めのゲーミングヘッドセットでやってるから、
一応口の前にマイクはある状態なんだけど、
なるほどね。
なんか今後もしかしたらこういうマイク的なやつを、
逆にもっとやりやすいなとか、
これよさそうなものがあったら買ってみるかもしれないので、
それをやったら僕も今度は雑談のコーナーからね、
喋ってみようかと思います。
なんか普通にオフライン収録とかもやってみたいよな。
このFM未だに1回も2人で集まって収録したことないじゃん。
ないね。
逆にオンラインでやってるから、
ちゃんと2人の声が上手く録れてたりするのかな。
同じ部屋でマイク1つで喋ってたりしたら、
ちょっと遠かったりするのかな、分かんないけど。
ちょっと難しい気もする。
ちょっと寄下げなマイクを真ん中に置いてやるがいいかもね、
この場合はね。
そうだね。
ただ、最近若干慣れてきたけど、
やっぱり顔見ずにやってるから、
お互いの間の取り方とかさ、
挨拶をここで遊ぶみたいなのがちょっと難しいから、
リアルでやるとね、そこがスムーズになると思う。
たまにね、ちょっとお見合い状態になったりするもんな。
やっぱりね、ちょっと難しさはある。
はい。
余裕があったらやっていきましょう。
ゴールデンウィークも緊急事態宣言、
06:00
まん延防止対策、緊急事態宣言か、
やっちゃったしね。
そうだね。
またもうちょっと先の話にはなるけど、
それまではゆっくりこれで続けていきましょう。
はい。やっていきましょう。
今日の本題がですね、
ちょっと久しぶりかどうか分かんないけど、
エンジニアリングテーマというか開発系のテーマで、
プロトタイプを作るときに気をつけることっていうテーマ、
やっていきましょう。
プロトタイプって要は、
アプリとかウェブサービスとか作るときに、
比較的最初コース小さくして簡単なものを作って、
実際にユーザーとかに使ってもらって、
その反応を調べるために作るものみたいな感じだと思うんだけど、
俺が今の会社でも前の会社でも結構それっぽいことをやってたので、
プロトタイプエンジニアってことじゃないけど、
大体いろんなプロジェクトで最初のプロトタイプ作ってたみたいな経験があるので、
ちょっとその辺りの知識とかを共有できたらなと思います。
フロントエンド寄りの話だね、今回は。
そうかもね。
あんまりバックエンドとかはやらないかな、プロトタイプでほぼほぼ。
画面モックみたいな感じだろうね。
そうだね。何個かレベルがプロトタイプレベルというのか、
どれくらい雑なものを作るかっていうのと、
コースでトレードじゃない?
そうだね。
だからその時々でね、
どこら辺のバランスを取るのかっていうのは変わってくるんだけど、
一番簡単な家じゃないかな。
普通にお絵かきレベルよね。
そうだね、どこに何がありますねとかのが分かるぐらいのやつだよな。
例えば俺がやってたのはスケッチっていう、
フィグマっていうツールがメジャーだったりするけど、
そういうデザインツール。
これ無料で使えるんでぜひみんな使ってほしいんですけど、
そういうデザインツールでオブジェクトとかを置いて、
ページのイメージを作る。
パワポのめっちゃ痒いところに手が届く場みたいな感じかな。
それで実際のUIを作ってあげる。
それを作ると、それだけでもいいんだけど、
このボタンのところをクリックするとまた別のデザインが飛ぶみたいな、
09:03
そういう繊維でもできたりするから、
それで実際に動いてるっぽく見せるというか、
画面繊維だけはデモができるみたいな。
なるほどね。
そういうものだと結構簡単に作れるというか、
普通にどれくらいかな、1日で作れたりすることもあるし、
2、3日くらいでできることもあるし、
それが一番工数の軽いやつかな。
確かにね、それぐらいで一番最初に、
どんな繊維でどんなデザインのほうがいいと決めてから、
せめてより重いプロトタイプを作るとしても、
それを体掛け台にしたいよね。
イメージ構成が後から変わるとめっちゃしんどいんだよね。
だからそこを一番最初に固めるっていうのは、
結構大事なところかもしれない。
そうだね。
それが一番軽いやつで、
どこまで重くするかっていうのは、
結構基準決めてた。
工数ぐらいだった。
こうすると、
例えばSIRとかだったらクライアント、
どれくらいのレベルのものを見たいのか、
っていうところ次第で結構、
どうやって作るかが変わってくるみたいな感じかな。
なるほど。
その次のレベルくらいでいいと、
HTML、CSS書きますくらいかな。
ちょっとJavaScriptとかも書いて、
やるみたいな感じかな。
ちょっとリッチな見た目くらいの。
ブラウザで見れるようくらいの感じだね。
だから普通にサーバーとか全く用意せずに、
もうローカルホストで立ち上げるレベル。
それで簡単なものを作って、
要するにHTML、CSSで書くっていうことは、
かなり実物に近いというか、
それが結構一番多かったかな、
俺が作ったプロトタイプとしては。
なるほど。
そこから、
僕とみやき一緒にやってたプロジェクトとかもあったけど、
みやきがいたPOCとかプロトタイプの段階でいたやつに、
僕が途中からエンジニアとして参加みたいなのがあったりした。
12:03
あれとかって分析案件だったからさ、
画面側の最初そういうちょっと軽いところまで作って、
そろそろそのぐらいまでいくと分析側の軽い分析が追いつく。
だから今までダミーデータだったやつを、
例えば何々さんの分析データでいうとこんなのが出る。
あったね、そういうこともしてたね、確かに。
だからUIだけじゃなくて、
実際の分析結果も、これ1人分とか2人分とか、
最小単位で見せてあげて、
この画面でこういう分析結果がこういうふうに見れるんだなみたいな。
これをお客さんにイメージしてもらうっていうことはしてたね。
これぐらいの見た目だったら、
画面複雑すぎないし、分析結果も見えますね、だったりとか。
例えばこの注意アラートみたいなやつとか、
この色がついた部分とかが、
この人は5件出てるから見えるけど、
最大何件出るかみたいなやつを別で、
分析側がプロトタイプ分析として持っていって、
画面で見るとこんな感じ、複雑な人だとこんな感じみたいなのを、
画面にパターンプラス、
外れ値の人がどのぐらいいるみたいなデータを一緒に持っていって、
じゃあ外れ値の人どうしましょうかみたいなね。
そういう意味でも確かにできるようになるプロトタイプ。
だから画面と途中で他の、
バックエンド側とかの人のプロトタイプが交流していく感じになるよね。
そうだね。
あと、やっぱりそういうものを作ると何がいいかっていうと、
提案取れてからプロトタイプ作るっていうプロジェクトももちろんあるけど、
もう提案段階で作っちゃってるっていうケース、うち多かったよね。
その方がお客さんも安心して受けれるし、
上に報告がしやすいしみたいな。
そうそう。
だからある程度チームで、
そういう汎用的なプロトタイプ、
うちが提案できるウェブ開発とか、
分析系のソリューションの汎用的なプロトタイプを作っておいて、
それをクライアントごとに最後カスタマイズして、
こういうことしませんかっていう提案をするみたいな。
結構やり口だった気がする。
実際ちょっと大変だけどその分強いよね。
15:01
そうそう。認識相互もないし、期待値がすごい合うというか。
他で使い回せるようにすれば効率がそんなに悪いとかではないしね。
うん。横展開とかもめっちゃできるし。
だからプロタイプすごい大事かなと思いますね。
そこから導入した後、次はこういう機能にしましょうみたいなのとか、
次のフェーズというか、移行の時の提案も結構そういうのでやってたりしたい。
たぶんね。
確かに。
結局見ないと分かんないしみたいな。
そうなんだよな。やっぱりPowerPointだけでやるって限界あるよね。
確かにね。結局お客さんのイメージ力がどれだけあるかと、
コツのイメージと一致してるかでまただいぶ変わってくるから。
そう。市場の空論になりかねないしね。
ねー。
っていうところでじゃあ、パワーポーと違って分かりやすさはあるんだけど、とはいえここは気をつけてたみたいなポイントあるの?
そうだね。でもやっぱプロットタイプを作る段階でも結構、かなり作り直しをしてた。
お客さんに持って行く前にまずチームで思うじゃん。
その段階で結構早めに出しとくとか、チームに共有するとか、
いうことはまずやって、何回もここはもうちょっとこうでしょっていうのを、
でも本当にデザインツールとかHM、CSSレベルで作ってるから、いくらでもすぐぶっ壊せるし、作り直すことができるのよ。
だからそういうところは結構やったっていうのと、
あとはさっきコスターが言ってくれた、比較的リアルに近いデータをプロットタイプで表示させてあげるっていうのがあって、
分析結果とかあるならなおさらいいんだけど、ない場合はダミーの人の名前とか、
ダミーの所属部署の名前とか、そういうのは結構丁寧に作るっていう感じかな。
プロットタイプだからさ、名前、山田花子とか、ああああとかさ、やりがちなんだけど、
そこも結構丁寧にやる。
これもう作っちゃったの?って勘違いされるくらい、ダミーデータ作り込むみたいな。
18:03
横展開してくれたら、他社もほぼこんな感じだよなみたいな、別にパクリとかじゃなくてデザインとか変わったりするんだけど、
この完成度のやつあるよな、みたいなやつじゃないかな。
そんな感じかな。
あとちょっと細かい話とかで言うと、
プロットタイプ結構ブートストラップとか使って作ってて、
ブートストラップ使うとさ、ブートストラップシューがしちゃうじゃないですか。
それって一般的な非IT系の企業のクラウドだったらわからないんだけど、
やっぱりそこは自分なりのこだわりみたいなのがあって、
ブートストラップビルドっていうブートストラップのカスタマイズできるみたいな。
だからブートストラップのCSSクラス、例えばテキストプライマリーみたいなCSSクラスあって、
それをやるとフォントの色が青色とかになってるりするんだけど、
青色とかのパラメータをいろいろ変えれるみたいなサイトがあって、
一旦作っちゃうとあまりブートストラップシューのしないブートストラップができあがるっていう。
見たことある感じとはまた色合いとかいろいろデザインがちょっと変わってくる。
それでクライアントに合わせて調整とかもできるし、
お客さんの色とかあるしね。
だからそれは結構多様してたかな。
あともう一個気をつけたほうがいいことがあって、
プロトタイプ作るときに、アンギュラーとかVueとかのフレームワークとかあるんですよ。
シングルページっぽいやつとか。
え、何?
シングルページのモダンなやつみたいなってこと?
マテリアルデザインをすぐに作れますみたいなやつとか。
あるんだよね。あらかじめ用意されたコンポーネントを、
アンギュラーとかVueのコンポーネントを使って作るみたいなやつがあるんだけど、
JavaScriptレベルでそういうコンポーネントが使っちゃうとね、
後々拡張しにくいみたいなのがあって。
中身が結構ブラックボックスになってるから、
テーブル1個作るにしても、条件分岐でこの行だけ消したいとか、
フォー文で行を出して回すときに、こういう条件の時は消したいとか、
21:03
セルの中にツールチップを入れたいとか、
そういうのに後は対応できなくなってくるんだよね。
じゃあ、どの単位でコンポーネント作る?
どの単位でっていうか、そういうフレームワークを使わずに、
自分である程度を書いてたかな、だから。
JavaScriptで。
JavaScriptとか使って、これも1回作っちゃうとね、
後々基本的なコンポーネントは横展開というか使い回しできるから、
やってたりしたかな。
ああいうフレームワーク、使いやすいんだけどね。
すごい簡単にリッチなアニメーションとかついてるUIとか作れて、
すごい良いんだけど、ちょっと小回り効かないところ。
それはね、俺はあんまり使わないようにしてる。
なるほどね。メンテナンスがしやすいように、
設計とかコメントとかしっかりしてれば、
そういうオーダーメイドで作るのも結構ありかもしれないな。
っていうところかな、俺がフロートタイプ作るときに気をつけたこと。
なるほど。これはあれですね。
ウェブ系のこれからって人もそうだし、
SIRでも結構フロントエンドの画面Mockとかを作ることがある人もいたりすると思うので。
多分ヘッダーとかだったらExcelとかでやってるよね、絶対。
ああ、そうね。ExcelかPowerPointでやってそうだけど、
なんかちょっとチャレンジしてみたいとか、
フロントエンドのレベルを上げてみたい人、
こういう形でプロトタイプを作ってみるっていうのもいいかもしれませんね。
はい。ということで、今回はこれで終わりたいと思います。
はい。
ありがとうございました。
ありがとうございました。
またね。
