#438 ひまプロのエピソードアーカイブサイト作って公開してみた！(ゲスト: inovueさん)

この番組は、エンジニアの成長は楽しい学びからをモットーに、昨日より少しだけ成長できる学びを配信する、エンタメ系テックポッドキャストでございます。

でございます。

おお、ございます。テックラジオか。

えー、さすがに。

はい？

テックラジオだっけ。

テックラジオですね。

まあまあまあまあまあ。

はい。

まあまあまあまあ。

ま、というわけでですね、今日はちょっとあのー、いつもと違う風を吹かす感じでいくんですけど。

おお、ニューウェーブ？

ニューウェーブ。

風じゃない、風。

ま、我々、あのー、テック系ポッドキャスターですけど。

はいはいはい。

えー、オフラインとかオンラインイベントもそこそこやってるわけじゃないですか。

うんうんうん。

うん。で、まあその中で、ま、ひときわ、えー、異彩を放つというか、気になりすぎる人。

はいはいはい。

あまりにも気になりすぎた人。

うんうんうん。

まあ、多分初めての出会いは1年以上前ぐらいなのかな。1年前ぐらいですか。

もうちょい前な気もしますけど。

ちょっとあまりにも気になりすぎる人がいたので。

うん。

で、ちょっと最近おもしろいことをやってたので。

はい。

ちょっと来てくださいなということでお声がけをしたんですけど。

すごい、なんか月曜から夜更かしみたいな呼び込みだな。

そう、そんな感じで。月曜から夜更かしってそんな感じでしたっけ？

なんかそんな感じのイメージあるよ。

うん。

うん。

で、ちょっと、ど、どうやらですね。

はい。

あの、男性の方で。

うん。

で、彼はあのー、第2回のオフラインLT会で、えー、LTをぶちかましているエンジニアではない人。

おおー。

なのに、誰よりもエンジニアムーブをしてる人。

はいはいはい。

うん、確かに不思議ですね。

うん、ちょっとよく分からないんですけど、よく分からなすぎるので、ちょっと自己紹介をしていただきながら、ま、ちょっと我々でね、今回深掘っていこうかなと思います。で、すいません、ちょっと、あとはなんか、なんで呼んだんだっていうところがあるんですけど、1個だけちょっと紹介すると、ひまプロのね、サイト作ってくれたんですよね。

ついに。

すごいんですよ、これが。クオリティーもスピード感も、あと品質じゃなくて、あの、機能もすごいんですよ。

うんうんうんうん。

うんうんうん。で、ぜひね、ちょっと皆さんにも見ていただきたいなというところで、えー、今日お呼びしたんですけど。ではちょっと、えー、自己紹介ですね。えー、お願いします、いのびゅうさんです。

はい、よろしくお願いします、いのびゅうです。あの、普段の仕事は、えっと、リユース業界にいまして、えっと、倉庫管理だったりとか、えっと、顧客の対応だったりとか、あと電気工事士の免許を持ってるので電気工事とか、あとトイレのリフォームとかもやる、ま、なんでも屋みたいなことをやってるポジションです。

そうですね、まあ一言で言えばなんか中小零細企業によくいる、ちょっとパソコンに詳しいおじさんみたいなことをやってます、はい。

すごいなあ。ま、まずあの、すいません、リ、リユース業界聞き慣れないんですけど。

はい。

リユース業界って例えばどんなお店ですか。

えっとー、アンティークショップですね。あのー、骨董屋とかって言われたりもするんですけど。

お宝屋とかそういうのとはまたイメージ違います？

あ、でもお宝屋の、なんか個人、ちっこい番みたいな感じのところですね。

うんうんうんうんうん。

ふーん、なるほど。で、あとちょっと気になったのが、えっと、ちょっとパソコンに詳しいおじさんっていう言い回し、あの、これって普通はほんとにちょっとパソコンに詳しいおじさんっていう使い方するんですけど、多分いのびゅうさんの場合は、えー、リナックスちょっとできるのちょっととの使い方なんじゃないかって。

うんうん。

うん。

そうですね、確かに。ちょっとこれ誤解読みそうっすよね。うん。

1周回ってちょっとなんですよね、多分ね。

そうなんですよね。

全然全然、あの、もうまるで業界経験なくて、もうほんとにエンジニアの方たちを尊敬してます。すごいなあと思って。ええ。

すごい。

ちょっと、ちょっと詳しいぐらいで。

ちょっと詳しいぐらいでウェブサイト作っちゃうっていうね。

いやー。

いいですね。っていうので、えーっと、ま、過去、えーと、ひまプロのオフラインイベントもオンラインイベントも出ていただいて、えー、最初のLTは始めようスライデブっていう。

はい。

えー、スライデブっていう、なんて言うんだあれは。ま、JSでスライドが作れるツール？

うんうん。

を紹介する、発表してたんですけど。スライデブって、ま、うちの会社でもテンプレートあったりするんで、ま、エンジニアで使う人はいるんですけど、あんなにディープに使ってる人、いまだにいのびゅうさん以外見たことないっていう。

うん。

うーん。

なんかキャラクターをしゃべらせたりしてませんでした？

そうですね、あの、スライデブが、あのー、JavaScriptのフレームワークのビューが裏側で動いてるので、あの、結構いろんなことができて。そうですね、あの、初めて、ほんとに初めてのあれが、あの、LTだったので、ちょっとなんか飛び道具的なものを持ってかないと、こう、緊張しすぎちゃってしょうがないなと思って、ちょっと飛び道具を使いました、はい。

それ、飛び道具、ロケットランチャーぐらいの破壊力ありましたよね。

そうそうそう。

ドカーンは言ってましたよね。

うん。

いや、ほんとに。はい、っていうのでちょっと余談だ、余談ではないのか。まあちょっと軽くいのびゅうさんの紹介だったんですけど。早速あの、えー、ひまプロのサイト、これはなんだ、ポッドキャストのアーカイブサイトっていうんですか、これは。

そうですね、一応アーカイブで、あのー、文字起こしを全エピソードをしてるので、まあ、あのー、そこに対して全文検索かけてもらえたりとかで、結構こう、えっと、トピック検索するときに、あの、僕自身が、あのー、普段Spotifyで聞いてるんですけど、結構全文検索やりづらくて。なのでちょっと、あのー、ネットで見たらRSSも転がってたんで、RSSから全エピソードの情報引っ張ってきて、えっと、文字起こしかけてっていうふうなのやれば、割と、あの、全文検索して使いやすくなるなあと思って。最初は自分向けに、あのー、作ってましたね。最初はAPIで作ってたんですけど、まあどうせだったら公開しようと思って、えっと、アストロじ、アストロですね、アストロで作りました。

ふーん。どっから行こうかな。えっと、まず抽象的なところから行くんですけど。

はい。

はい。そのー、ポッドキャストって検索性悪いよねみたいな、ま、ブログ記事と違って検索性悪いよねっていうのは、ま、よく、よくある話ではないのか。言われるけど、ま、誰も解決しようとはしなかったというか。

まあそうですね、確かに。

うん。

はい、みたいな課題を、まあどうにかしたいなっていうので、ひまプロに関しては今の使い方としては、なんかど、どういう感じで検索できるサイトになってるんですか。

え、あのー、右上のほうに、あの、エピソードを検索っていうふうなボタンがあるので、えっと、そこを押していただくとダイアログが開いてきて、ダイアログの中のインプットに、えーと、例えばオブシディア、あ、オブシディアンじゃない、ゼッテルカステンって入れてもらうと、えっと、のりさんのゼッテルカステンシリーズが2エピソードだったんですけど、割とパチッと出てきたので。

うん。

そういうふうな使い方してもらうと、こう、ひまプロの中での、あのー、何かシリーズものの検索がしやすいのかな。

すげー、なるほどね。今やってみたんですけど、スムーズにチェって打てなかったっすね。

いや、知らんよ、そんなの。どうでもいいわ。そこ気になってなかったわ、誰も。

チェが押せなかった。

ゼッテルカステンとかだとなんかタイトルに入ってるかもしんないんですけど、もうそれだけじゃなくて。例えばですよ、のりさんがお気に入りの、ちょっとなんのくらいだっけ。えっと、僕が。

ユニテツっすか。

ユニテツ？

違う？

ユニテツ、そう、そうそうそうそうそう。ユニックス哲学。あ、そうそうユニテツね。いやいや、なんでやねんみたいな感じ。あのへんも、ひょっとしたらなんかその、文字起こしされてたらタイトルにないけど探せるっていうことなんすよね？

そうですね。結構あのー、全文で出てきちゃうので、結構よく使われるやつだと逆にいっぱい出てきすぎちゃうかなっていうところもあるんですけど。あとあの、文字起こしのモデルが、あのー、あんまりいいモデルを使ってない、ちょっとお小遣い制なもので、いいモデル使えなかったので、ちょっと正確性には欠けるので、あのー、そうですね、ちょっと使い勝手、その部分で悪くなっちゃうかもしれないんですけど、ヒット率が。

そのへんの技術的なところもあとで聞きたかったりもするんですが。

はい。

ま、っていう、えっと、ま、サイトを作ったというので、ぜひあの、聞いていただいてる方、ま、リンクは説明欄に載せておくのと、ほかにどうやって広めればいいんだろうって感じですけど、はい。

うん。

ぜひあの、検索して、検索してじゃないな、リンクをクリックして、タップして、で、ちょっと触ってみると、あのー、もう見た目もすごいし、いろいろすごいんで、楽しいと思います。

うんうんうん。このリンク、ウェブサイトにおってお便りを送るボタンでお便りをくれたりもしますからね。

うんうん。

あ、そうですね、はい。

これ、なんか、カンパ募って文字起こしの精度上げるとかもできるかもしんないっすね、ひょっとしたら。いいモデルを作って文字起こしをするっていう。

そうですね。

したいですけどね。

うん、はい。

やっぱりちょっとお金の面でいいモデルが。

ぜひ、スポンサー求む。

そうですね。

あ、で、すいません、ちょっとさっき言い忘れちゃったんですけど、ひまプロコミュニティのほうの自己紹介欄に、えっと、ちょっと私の、あのー、過去発表したスライドのURLとかも送っておいたので、あの、もしどんなものかさっきのくだりで気になる方がいらっしゃれば、ぜひひまプロコミュニティ入っていただいて、自己紹介欄見ていただければ。3回、あの、LTやったんですけど、1回目の、えっと、キャラクターが一緒にしゃべる、えー、スライドと、えーと、2回目にやった、えっと、じゅんぺいさんのボットですね、LINEボットの、えっと、デモ画面。あと3回目が、えっと、今回のひまプロの、えー、サイトでも使ったFAL、FAL AIの、えーっと、音声文字起こしモデルの紹介をしてる、えー、スライドの資料もありますんで、ぜひ、はい、コミュニティ入ってみていただければなと思います。

うん。すごい。

このための動線だった。

精神がすごい。はい。いいんですよ、コミュニティ。楽しんでやってるんでね、ほんとにね。はい。えっと、ざっくりのりさんに聞きたいんですけど。

はい。

このサイ、サイト見たときのちょっと感想と、あとなんか気になったところをいのびゅうさんにそのまま聞いていきたいなと思ったりするんですが、なんかこれ見てどう思いました？

いや、まずですね、あのー、さ、作業早いなと思って。なんかいつの間にかさっと作って、で、これ使えるようになってますみたいなときに、な、なんだろうな、これ。なんかこういうサイトあればいいよねみたいな話したときに、あ、実はもう作ったんですよみたいな感じで、確かこのサイトが出てきたような記憶があるんですよ。

はいはい。

なんかそのムーブが、なんかもうエンジニアっぽすぎて、なんか社内にいるすごい活動量多いエンジニアみたいなムーブしてるなってのがあって、結構その印象が強いのと。あと僕はですね、やっぱお便りを送るみたいなところで、なんかリンク付いてるっていう、なんかそのUXのこだわりを僕は感じましたね。

うん。そのへんは、なんかやっぱ、まあ考えられてたというか、どういう、結局なんなんだろうな、どういう課題を解決するというか、ど、どういうペルソナ、どういう人を対象にこれ作、イメージして作った感じなんすか。

あ、そうですね。えっとー、まず、えっと、ひまプロさんのどうしても音声のメディアなので、ちょっとこうビジュアル面の、あの、色だったりとか、あと雰囲気だったりとかっていうふうなのを、こう、えーと、入口にあって、そこからなんかこうもうちょっとお便りを送りやすくなるようになったらいいなっていうので、まあヒーロー、ヒーローセクションの一番上にお便りを送るだったりとか、えっとー、エピソードの一覧だったりとかを載せてるんですけど、そのへんでちょっとこう、なんて言うんですかね、あのー、こうビジュアルを意識して、あの、作りましたね。

うーん。

うん。

なんかちょっとこのぜ、全体的なこだわりポイント聞きたいっすね、なんか。こここだわってるんすよみたいな。

あ、なんか逆に僕から言うんすけど、すいません。

はい。

これ見て一番やばいなって最初にぱっと見て思ったのは、なんかこんな素材なくないみたいなのがあるんですよ。なんか、と、というのも僕びっくりしたのが2個あって。えーと1つ目は、ぱってサイト開くと、あのー、ひまじんプログラマーの週末エンジニアリングレッスンのあのサムネイルっていうのかな。

ま、画像のほうの。

画像のほうで？

うんうんうん。サムネイル？

うさぎと。

うん。

かえると。

うん。

きつねさん。

アートワーク？

アートワーク。

はいはい。

アートワークの動物たちが、あのー、それぞれ動いたり、うさぎが振り返ったりするんすよ。

うんうんうんうんうん。

うんうんうん。あ、あれって別に素材出してるわけじゃなくて。

うん。

多分、Spotifyとかに上がってる画像なのかな。まああとスライドとかで公開したときにあったのかな。ただあれ別にね、ただのpingとかだと思うんで。

うんうんうん。

あれ、そういうのってこんなふうにできるんだっけって思ったのが1つと。

うん。

あとはそのヘッダの、なんて言うんだろう、左上の文字の部分。

えーと、ロゴの部分？

ロゴの部分？

はいはい。

ひまプロって書いてるんですけど、僕これ見たことなくて。

おー。

うん。

そ、素材としてね？

素材として。

はいはい。

作ってないっす。あの、素材全部ね、あのー、知り合いに頼んでやってるんですけど。

うんうん。

知り合いにそんな素材作ってもらった記憶はないので。

うん。

っていうので、ちょっとなんかそのへん、ど、どう、どうやったのかみたいなちょっと、技術的な部分とかちょっと教えてほしいです。

あ、了解です。えっと、動物は、えっと、コンパスの、えっと、ひまプロの、えっと、コミュニティーのところにちょっと大きめのpingの画像があったんで、ちょっと無許可で、あのー、非常に悪い形になったんですけど。

あ、全然。

あの、pingで、えっと、もらってきて。で、それを、えっとー、SVGにしたんですけど、えっと、AIでSVGにしてて、リクラフトっていう、えっと、AIのモデルがあるんですけど。

ほう。

はい。リクラフトっていうの、あの、ま、世に言う、なんか画像生成AIって大体全部、あのー、SVGで出力しないで、あのー、pingとか、あのー、JPEGの出力は普通だと思うんですけど、このリクラフトだけは、えっと、画像からSVGにするモデルがあって、そいつに。

へー。

そうですね。ま、若干、あのー、えっと、そいつに読み込ませる前にコントラストを上げたりとか、SVGにしやすくなるように若干補正はかけてるんですけど、ま、黒の線強くしたりとかすれば。ちょっとこう、あんまりこうぼやぼやしちゃうと、あのー、ちょっと精度悪かったんで。若干加工加えて、AI入れて、SVGにして、で、えっと、キャラクターをそれぞれ分離して。で、そうですね、あのー、で、えーと、SVGの中にスマイルっていう種類のタグがあるんですけど、SVG単体でアニメーションを付けられるっていうタグなんですけど、そのタグを使って、えーと、うさぎは反転させて、えー、かえりは、えー、ジャンプさせて。で、きつねは若干こううなずくように、あの、傾斜かけてるっていうふうなアニメーション追加してます。はい。で、えっと、ロゴに関してもおんなじですね。ロゴに関しても、あのー、えっと、バック、あ、そっか、バックグラウンドを1回消してますね。あとAIの、あの、RemBGっていうAIのモデル。ま、結構いっぱいあるんですけど、あの、安めのRemBGっていうので、えー、背景1回消してから。で、えっと、SVGに処理してます。で、えっと、1番左上のひまプロっていうのは、あの、かいちさんのおっしゃるとおり、素材がなかったので、えっと、ロゴのところから、えっと、SVGになった火と火と火と火の、えっと、パスを、あの、詰めて1個の、あの、が、SVGにしてます。

SVGってそういう使い方するんですか。ベクト、ベクターの分直接いじってるってことですか。

あ、そうですね。

え？

はい。

へー。それはちょっとすいません。あのー、すいません。SVGってそもそも、なんか生データってどういう形式になってるんでしたっけ。

はい。えっと、生で、中身としては、あのー、HTMLみたいな感じで、えーっと、全部タグになってますね。

うんうん。

あの。

タグがあって、なんか数字が並んでるんでしたっけ。

そうですね。パスとかだとこっからここまでの座標の、あのー、データが入ってる数字が入ってますね。

でもあれ正直、丸とか四角以外、あまりにはなんかいろんな情報ありすぎてわけわかんなくないすか、あのSVGのタグって。

そうですね。あの、パスになっちゃうともう、その座標に関してはもう読めたものじゃないんですけど。ただ一旦ちょっとこう整形かけてみると、割とこうシンプルな、あのー、タグの構造になってるんで、割といじり放題ではありますね。

へー。へー。普通に勉強になるな。

確かに。

ちょっとパソコンに詳しいっすね。

ちょっとSVGに。

で、あともう1個ちょっと気になったのが、えーと、リクラフトと、あとなんでしたっけ。

RemBG？

えー？

うん？

あ、えっと、FAL。

あ、FAL。

ね、M、Mなんとか。

RemBGが透かすやつですか。

そうですね。RemBGっていうのが、えっと、背景を、えのー、なくすようなAIのモデルになってますね。

えーと、そのへんのAIサービスって、どうやって情報を仕入れて、どうやってそのソリューションにたどり着いてるんですか。

確かに。聞いたことないモデルがめっちゃ出てきてるんだよな。

そうですね。えっとー、一応FAL AIっていうふうなので、インターネット検索してもらうと出てくるのがあって。これが、あのー、いろんな画像系のモデルだったりとか、ま、動画とかもあったりとか。あと、えっと、音声生成、あの、TTSって呼ばれるモデルだったりとか。逆にそのー、STT、スピークトゥテキスト、えーと、文字起こしのモデルとかも、えっと、ホスティングして。えーっと、結構エンジニア向けのそういう画像関連のモデルを使うのに特化したプラットフォームなんですかね。あのー、使い方すごい簡単で、ポストの、あのー、CURLとかで、あのー、ポストメッセージを送ってもらえれば、あのー、画像のモデル使えたりとか。割と、うん、そういうので、あの、情報は収集してますね。なんか新しいものが出てきたら通知来るようにして、あ、こんなん出たんだみたいなのでちょっと使ってみるみたいな使い方をしてます。

ふーん。じゃあ割と、なんでしょうね、気になったらすぐ触ってみて、ああ、こんなんなのねっていうのを、ま、日々やってる感じじゃないですか。

そうですね。あのー、ま、ちょっと高いモデルは、あのー、概要見て、あのー、エアップしちゃうようなところはあるんですけど。ま、安いものだったら、あの、プレイグラウンドもあるんで、簡単にこう画面上からボタンポチポチで使えたりするんで。

うーん。FAL AIって今、ま、画像を、音声系のAIが多いってお話でしたけど、なんでしょうね。なんか、ど、どういうモチベーションでそれを日々触ってるんですか。なんか何かに使えそうだなみたいな感じじゃないですか。

そうですね。何かに使えそうだなあとかっていうのもそうですし、結構こう、えっと、僕自身が何かもの作るときってこう、自分用にもの作るっていうよりは、なんか、あのー、誰か他人がこう、こうもやもや解決できないものを、なんか自分が解決できたりするときに結構モチベーション上がったりするんで。それのこう手札を増やすような感覚で。

へえ。

あとそういうのも見たりとか。そうですね、手広く見るようにはしてますね。何か1個っていうよりは、あのー、手持ちのカード増やすような感覚で取っといてる感じですね。

うーん。そのなんか、だ、誰かのために作るってすごい素晴らしいことだなって思うんですけど。そこはなんでしょうね。結局多分今の本職、本職の骨董屋さんのDXは、もうそういうところに通じてるんですもんね。

そうです。そうですね。あのー、誰かの仕事を、あの、入ったときに結構、あのー、業務的に時間パツパツでみんなやってたんで、ちょっとなんとか、あのー、効率上げて時間減らしてあげないと結構、あのー、人が辞めちゃったりとか、そういったところも多かったので、あのー、ちょっとなんとか自分が解決しないとなあと思って、あのー、ちょっとDX進めてるところではありますね。

うんうんうん。

うん。

うん。

あと、まあ単純に自分が結構、あのー、どうしようもない人間っていうのを、あのー、理解してて。結構逃げ癖っていうか、あのー、言い訳癖があって。あのー、自分のためってやっちゃうと自己満足だったりとか、あのー、もうどうせ自分が使うからとかっていうふうなので、こう品質意識しないで、こう勉強にもならない。なんか勉強っていうのさえ自分はなんか言い訳にしちゃうっていうか。あのー、誰かのために作ると、こうプレッシャーがあるっていうか。あのー、品質だったりとか見た目とかこだわるところが意外と出てくるんで。なんかこう自分的にはすごい逆にそれがいいなと思ってて。なんか例えば今回のサイトとかも、えっと、自分のためとかって作っちゃうと、あのOGPっていうあの画像、えっと、リンクを送ったときに、よくあのLINEとか、あのXとかでリンク送ったときにポコって出てくる画像とかも割と作り込んでるんですけど。あのエピソードごとに、えっと、タイトルが出てきたりとか、あの、あとキャラクターが変わったりとか、そういうOGPも動的に変えるような仕様にしてるんですけど。

えー。そうだな。やってみよう、ちょっと。

あ、そうなん。あのエピソードを、あの別々のエピソードで送ると、あの単純なロジックなんで、あの三分の一の確率なんですけど、あのうさぎが背景だったりとかカエルが背景だったりしますね。

ほんとや。

マジで。

すげー。

へー。

すっごー。す、へー。

ほんまや。

そんなことできるんだ。

OGP動的に生成してんの初めて見たかもしんない。

確かに。

あ、でも、あの全とか聞いたとかも、なんかあれですね。あのOGP自動的に、あのー、えっと、記事名だったりとかが変わったりとかはおんなじような技術使ってやってますね。ただ、まあ、あの後ろのキャラクターだったりとか画像的なもの、枠的なものをガラッと変えるみたいなのは、そうですね、あのー、こうなかなか。

なかなか見ないっすよね、これ。

そうですね。はい。

すげー。

ちょっと今、いのびやさんの話を聞いてて、ま、少し鳥肌がいい意味で立ったんですけど。人のためにやるから、なんか細かいところまで妥協しないで作れるんだとか、そのなんでしょうね、ど、努力と質が上がるっていうんですか。なんかそこ、そこはあんまり僕意識して生きたことがなくて。それすごい、なんだろう、百二十パー出す上でめっちゃいいなって思いましたね。なんか生きるためのヒントになって。

そうですね、おっしゃるとおり。百二十パー出ますね。

うん。あと僕個人的に好きなあの百二十パーのあれがあるんですけど。実は、あのー、これあれっすよね、ChromeのなんかライトハウスみたいなSEOのチェックするやつ見たら、パフォーマンスありえない点数になってるんすよね、これ確か。

あ、そうですね。一応、あのー、最後デプロイするときにクラウドフレアページス入れて、で、えっとー、ボットのなんかセキュリティーかなんか入れたときにパフォーマンスちょっと悪くなっちゃって、オール百点ではなくなっちゃったんですけど。

うん。

一応出してすぐのときはライトハウスで全スコア百点で、あの花火を出し、出すように作りましたね。

ちょっと、す、すいません。あの、だいぶ追い打ちされてる人いっぱいいると思うんで。そもそもまずライトハウスとはぐらいのところからお願いします。

ちょっと、そうっすね。全然わかんな、僕はついていけてないですね。すごいんだとしか、すごすぎて。ちょっとお願いします。

あの、ライトハウスっていうのが、えっと、グーグルChromeとかに標準で付いてる、あのー、デベロッパーツール、あのF十二かな。WindowsではF十二なんですけど、F十二。

F十二で出た気がする。

はい。

スピーカーに。はい。出てくる。あの、多分エンジニアの方だったら皆さん使ったことあると思うんですけど。あれの中にライトハウスっていうふうなツールが入ってて。えっと、パフォーマンス、えっと、項目が四項目あるんですけど。えっと、その中でもそうですね、特にパフォーマンスのところがグーグルのSEOだったりとかそのへんで、えーと、かなり重視されるっていうので、一個、あのー、いいサイトっていうか、なんかこだわるサイトの指標にはなってますね。

うーん。で、そこで点数として出るのはパフォーマンスが出る？

えっと、パフォーマンスとアクセシビリティーとベストプラクティスとSEOっていう、えー、四項目出るんですけど。正直、まあアクセシビリティーとベストプラクティスとSEOっていうふうなのは、ライトハウスに、あのー、こういうふうに設定してくださいねみたいな、あのー、ワーニングが出てくるので、割と簡単に直せるんですけど。パフォーマンスに関しては、割とこう動的にJavaScript読み込むようにしたりとか、CSSのサイズ小さくしたりとか、あの、阿部寛さんのサイトだったりとかぐらい、こう、なんて言うんすかね、中身を徹底的に作り込まないと、えっと、百点だったりとかはなかなか出ないですね。

うんうんうん。それもこだわりポイントでそこまで点数を上げるっていう。

こだわり。そうですね。まあどうせ作るならっていうところで。

素晴らしすぎるなあ。これちなみに制作期間どれくらいなんすか。

制作期間は、えっと、時間数で言うと十時間かかったかかかってないかぐらいですね。

短。

うんと。十時間もかかってないか、八時間とかそれぐらいだったと思います。

へー。

まあただちょっと細かい調整だったりとかもあるんで、なんかこう単純な時間ではなかなか、そうですね、あのがっつりやったのはそれぐらいなんですけど。

うん。そんなんでできるんだ。

そうですね。家に帰ってから、あの寝る前のこうぼーっとする時間でちょろちょろ作ってた感じですね。

じゃあ一週間ぐらいとかですか、期間は。

あ、そうですね。はい。おっしゃるとおり一週間。あの寝る前の一週間で大体まあそんぐらいだなっていう。

いやー、もう絶対見てほしい、これ。

確かに。

すごいな。

うん。

あとこれ結構デザインもなんかこうすごい、なんて言うんでしょう。く、空気感もなんか番組の空気感に合ってて。

うん。

なんて言うんでしょうね、これ。えーっと、結構最近クイックにサイト作ると、なんとも言えないAI感みたいなやつにじみ出るイメージあるんですけど、そういうのがまったく感じられなくて。

確かに。

このへんとかはなんか工夫したポイントみたいなやつあるんすか。

そうですね。あのー、一つは、あ、えっと、そうですね、技術的なところで言うと、まずあのー、CSSのフレームワーク自体はテイルウィンドウを使ってて。で、えっと、テイルウィンドウのプラグインでDaisyUIっていうのがあるんですけど、これが割と使いやすくて。なんかボタンの形だったりとか、あのー、テイルウィンドウでボタン作ろうって思うと、こういくつかあのプロパティー設定しないといけないのが一個のボタンっていうプロパティーで、えー、済んだりとか。

うーん。

で、割とこういうボタンは作りやすいんですけど。そうですね、デザイン面で言うと、えっと、後ろの背景の、えっと、罫線だったりとかを斜めにしたりだったりとか、こう、なんて言うんですかね、横の罫線にするとちょっとこう、元々は罫線にすればちょっとこう勉強感っていうか、あのー、学習感が出るなあと思って罫線にはしてたんですけど、ちょっとまああまりにもこう勉強感が出すぎちゃうんで、ちょっとまあ斜めにしたりとか。そのへんの実際の、なんて言うんですかね、あのー、ニュアンス、なんか人間がこう感じるニュアンスっていうふうなところで、こう感じながらあのデザイン詰めてった感じではありますね。

自分なりの印象で決めてたってことですか、AIをベースでは。

あ、そうですね。AI、AIは使わないで。あのデザインは割と自分で画面見ながらこんな感じかなっていうのだったりとか。あと、そうですね、Figmaを使って当たりは付けてはいたんですけど。そうですね、デザインは割とAI使わずに人力でやってた感じですね。

ふーん。デザインいけちゃうんすね。すげーな。

いや、どうなんすかね、独学で全然勉強も何もしたことがなくて、こんな、こんなもんだろうと思って作ってる感じなんですけど。

ちょっと素人すぎるんですけど、Figmaを使ってっていうと、Figmaであの静止、静止画じゃない、なんて言うんだろうな、えー、ま、モック、プロトタイプ的なウェブサイトの、それこそコンポーネントをポチポチ配置してってっていう使い方でFigmaを、でデザインしたってことですか。

そうですね。はい。

あー、じゃあもうほんとにデザイナーの使い方で。

そうなんですかね、世に聞く、なんかこういうふうにみんなやってるんだなっていうふうなので、あのー、Figmaを使ってはみたんですけど。ただ詳しい使い方はよく分からないんで、こう当たりを付けるっていうか、な、なんて言うんでしたっけね、そういうの。当たりを付ける感じ。なんかボタンの作り込みをするとかっていうよりは、あのヒーローのセクションは、えっと左側にタイトルを入れて右側は画像にしようで、えっとレシ、レスポンシブになるときの、こうある程度のブレイクポイントに達したときには、えっと画像を縦にしてこんぐらいの配置にしようだったりとかっていうふうな、こうレスポンシブ対応するときに割と、あのー、あらかじめ頭ん中でこう想像するのに使ってた感じですね。

あー、なるほど。

うん。

じゃ、いわゆる細かいデザインのところは実装後につけてった意味みたいな感じなんですか、そのフォントどうするとか、色をどうするとか。

そうですね。はい。あのおっしゃるとおり、あの実装のときに決めてった感じですね。

へー。

多分、あのちゃんとされてる方たちは最初にFigmaで細かいところやられていくと思うんですけど。なんかそれよりは割と、なんて言うんですかね、スピードを出そうとすると最初になんかこうデザインこだわりすぎちゃうとどうしてもそこが、えー、こだわりすぎるっていうか、なんかこう余計なところ、完成の手前のなんかところで沼りやすくて。なんか僕はあえてFigmaでこだわって使うことは逆にやめてますね。なんかそこをあえてやらないっていうか。あの当たりだけ付けて、あとは、えっとー、CSSのフレームワークの、えっとー、部分が担当するようにしたほうが早いですね。

うんうんうん。エピソードの途中ですが、いい時間になってきたので前半はここまでです。え、後半は引き続きひまプロサイトのお話や、いのびやさんの行動哲学的な、ま、コアな部分はなんなのかみたいな話とか、あとは最近作っているほかのサービスについてのお話を後半していますので、えー、ぜひそちらもお楽しみください。それではまた次回。

やめて。ラーのバグ侵入の特殊能力でマスター・ザ・ブランチが焼き払われたら、闇のスパゲティコードと見つけつこうしている純平地の心までクラッシュしちゃう。お願い、死なないで純平地。あんたがここでクラッシュしたら先方との契約はどうなっちゃうの。ソースコードはまだ修正の余地がある。ここを耐えれば行動納品できるんだから。次回、納期間に合わず。デバッグスタンバイ。