1. XCrossing
  2. ep197 山の上からスマホでサイ..
ep197 山の上からスマホでサイト修正 − CMS要素ゼロの爆速検索などAIと進めたサイト全面刷新裏話
2026-09-09 33:15

ep197 山の上からスマホでサイト修正 − CMS要素ゼロの爆速検索などAIと進めたサイト全面刷新裏話

spotify apple_podcasts youtube

Claudeでの番組分析をきっかけに、公式サイトを全面リニューアル。Claudeが出したデザイン案にダメ出し、色覚多様性への配慮、ミリ単位の文字間調整、驚異の検索の速さなどこだわりが止まらない。新しいウェブサイトがどう作られたのか話しました。

きっかけはClaudeでの番組分析。そこから公式サイトの全面リニューアルへ

「説明したらプロダクト作りの人としては負け」──ならば公開ユーザビリティテスト

グリーンやベージュを取り入れた温かみのある新デザイン(by Claude)にダメ出しを繰り返して完成

ヒーロー画像の正体は銀座・数寄屋橋交差点(ちゃんと横断歩道がX)

Apple Podcastのバッジ利用規約に「他社より先頭に置け」。嘘だろうと探したら本当に書いてあった

バッジの高さや中心線がズレたまま3年放置。ようやくきれいに揃って最高に気持ちいい

バッジ制作を通して感じたプロデザイナーの意図と配慮のスゴさ

話者の色は色覚に配慮し、キーカラーの一つを紫に変更

文字間の幅の微調整。わずかな隙間の違いでサイトの受ける印象が激変

Chromeの開発ツールに搭載されたAIアシスタントで複雑なCSS修正を高速化

3000m級の山の肩の小屋から、スマホのClaude Codeでサイト修正(!)

MovableTypeから、毎回全ページをリビルドして公開する静的サイトへの大胆な移行

CMS要素ゼロで毎回まるごとリビルド、テキストデータ中心だからこそ実現できた爆速検索

未公開の「分析」ページ、言い出しっぺ率は及川30%・関33%・みか37%

エピソード内で取り上げた情報へのリンク:


テック業界で働く3人が、テクノロジーとクリエイティブに関するトピックを、視点を行き交わしながら語り合います。

及川卓也  @takoratta
プロダクトマネジメントとプロダクト開発組織づくりの専門家
自己紹介エピソード ep1, ep2

関信浩  @NobuhiroSeki
アメリカ・ニューヨークでスタートアップ投資を行う、何でも屋
自己紹介エピソード ep52

上野美香  @mikamika59
マーケティング・プロダクトマネジメントを手掛けるフリーランス
自己紹介エピソード ep53

Official X: @x_crossing_
https://x-crossing.com

感想

まだ感想はありません。最初の1件を書きましょう!

サマリー

このエピソードでは、X-CrossingのウェブサイトがClaudeを活用して全面リニューアルされた経緯が語られます。デザイン案へのダメ出しや、色覚多様性への配慮、ミリ単位の文字間調整といった細部へのこだわり、そして驚異的な検索速度を実現した静的サイトへの移行について、開発の裏話が明かされます。また、Apple Podcastのバッジ利用規約の発見や、3000m級の山頂からのスマホでのサイト修正といったユニークなエピソードも紹介されています。

ウェブサイトリニューアルのきっかけと開発プロセス
Mika Ueno
X-Crossing、英語でスクランブル交差点を意味します。 趣味も世代も、住んできた町も違う3人が、スクランブル交差点で出会うように、様々な話題を聞かせるおしゃべりの交差点です。 今日のX-Crossingであなたが出会うのは、どんな話題でしょう?
Takuya Oikawa
おはようございます。及川卓也です。 東京でプロダクト開発の支援などをしております。
Mika Ueno
こんにちは、上野美香です。朝は弱い方です。 マーケティングとプロダクト開発をご支援しています。
Nobuhiro Seki
こんばんは、関信浩です。朝は強いんですけれども、ちょっと夜なので疲れてきております。 普段はニューヨークで仕事をしております。
大雑把、大雑把ですね。
Mika Ueno
及川さんが個人の方のClaudeでぶん回してくれている、何回か前に話しましたが、X-Crossingの分析をしたのをきっかけにして、今ウェブサイトのリニューアルをしていまして、
概要欄にリンク貼っておくので、ぜひ見ていただければと思うんですけど、X-Crossingの自分たちの独自のドメインのウェブサイトがあって、そこのリニューアルとか作りを大幅に変えました。
めちゃくちゃ変わっています。
Takuya Oikawa
リニューアルは一旦は終了です。
それにいろいろ機能を加えようとしているところですね。
Mika Ueno
これに、きっかけは分析をしてみて、ドキュメントで提供してもらったレポートがあって、
へぇーとか言いながらしてたらウェブサイトとか受動化とかできたらいいですね、みたいな話をいろいろしてたらやりますっていう、
及川さんが着手してくれて、そしたら止まらなくなったみたいな。
Nobuhiro Seki
これはチャットで及川さんと美香さんがひたすらこれの開発の話をしているので、
僕が朝起きると66とか何十件みたいになってて、
途中でもう読むのやめて、一回リニューアルの話とかどんな機能を追加したっていうのを僕も完全に把握してないんですよ。
要はもう流れていくから、ちょっと説明してもらう回一回やったらいいんじゃないのって思っていてですね、
次の回ぐらいでちょっと新しいサイトの機能とか苦労話を聞きたいなぁなんて思って。
Mika Ueno
でもそれ以外もですね、やった段階ってあるじゃないですか、まず全てを今の既存のまま置き換える。
まず置き場所をホスティング先を変えるみたいな何段階か減っているから。
Takuya Oikawa
説明するのもいいんだけど、説明したらプロダクト作りの人とは負けなんですね。
なので関さんがぜひ触って、いいですねこれとか、もしくはこんな機能があるんだ、これここでできるんですねとか、
もしくはこれ何ですかって言われたら負けなわけですよ。
そこらへんちょっと触ってユーザビリティテストみたいなのを公開の場でやるっていうのが面白いかもしれない。
Nobuhiro Seki
使いながら開発者に聞くってやつですよね。
Takuya Oikawa
そうですね。僕も分からなくてClaudeに聞くかもしれないけど。
なんかこれ入ってるんだけどこれ何?って。それはないですね。
新デザインの誕生とヒーロー画像の秘密
Nobuhiro Seki
でも一番良かったっていうか、僕も前のサイト作って途中でやめて放置になってたんでですね、
すごい良かったんですけど、やっぱり実際新しいサイトの色味とか好きなんですよ。
今Xって意地がグリーンになってたりとか、ベースの色もちょっとこれ何色なんですかね、ベージュっぽい感じ?
無機質な感じじゃない感じになって良かったなと思ったんですけど、この辺って全部Claudeにデザインさせたんですかね。
Takuya Oikawa
Claudeにデザインさせて、美香さんがひたすらダメ出しして、という感じですね。
これでもあれですね、今サイト見てるとXCrossingのヒーローのとこの背景が元々の交差点のやつが一応使われてはいるけど真っ暗になっちゃってるんで全然見えないから、ここはもうちょい改善してもいいと思うかもしれないですね。
Nobuhiro Seki
ちょっと暗すぎるからもうちょっと明るくしてもいいかもしれない。
Takuya Oikawa
もしくはもう交差点のやつをここに使うのはやめて、使わないなら使わない、使うとしてもどっか別のところ、番組についてとか持って行ってもいいんじゃないかなとか考えてもいいかもしれないなと思いました。
Mika Ueno
ヒーロー画像の右側にフワーって写っているのをもうちょっと明度を上げてもいいかもしれないですね。
Takuya Oikawa
そうですよね。
Mika Ueno
あの写真結構好きです。
Nobuhiro Seki
銀座の数寄屋橋なんですよね。
Mika Ueno
上から撮ったね。
ちゃんとクロスしている交差点が銀座で。
Takuya Oikawa
これAdobe Stockか何かでしたっけ? iStockでしたっけ?
Nobuhiro Seki
いや、すごい探したんですよ。
実はあんまりスクランブル交差点で本当にXになっているところが多くなくて。
渋谷とかもそうじゃないですか。スクランブルだけど、割とわちゃっとしてて。
Mika Ueno
Xになってないんですよね。
Nobuhiro Seki
だからXってすごい調べたんですけど、全然なくて。
ましてや夜景っていうか、車が夜走っているのが少し線になるようになったんですけど。
その2つの視点でやったらこれしかなかったですね、実質的に。
昼間の写真が多くて。
多分今だったらもっと簡単に調べられたんでしょうけど、昔これやった時って2022年とかですよね。
だから普通に検索やって、そういうストックフォトのところをひたすら探して、
クロッシングとかスクランブル交差点とかっていきなりひたすらカチャカチャカチャカチャ調べてたっていう記憶があってですね。
今だったらこういうのもイメージって作れちゃったりしますもんね、下手するとね。
Mika Ueno
そうですね。
Nobuhiro Seki
今あるのはあるのでいいかもしれないけど、そういうのも新しく入れてもいいかもしれないですよね。
プラットフォームバッジの規約とデザインの考察
Mika Ueno
いろいろ及川さんとやり取りをさせてもらいましたけども、
Apple PodcastとかYouTube Musicとか各プラットフォームのバッジがあって、
そのバッジを並べてみるとそれぞれのバッジのフォントの大きさとか重みとかが全然違うから、
並べるとこんなに見え方が違うんだなとかね、そういうのをとても勉強になりましたね。
Takuya Oikawa
いやー、まともに規約読んだらAppleは他の配信サイトよりも絶対先頭に入れろみたいな規約があって、
Appleらしいなと思ったのと、みんながみんなそんなこと言い出したら破綻するぞと思って。
Mika Ueno
本当ですね。王者が言ってるみたいなすごいこと言いますよね。
Nobuhiro Seki
それってAIが探し出したんですか?そういう規約使ってましたって。
Takuya Oikawa
嘘だろうと思って探して、で規約のどこだよって聞いたら確かに書いてあってね。
Mika Ueno
規約読みませんもんね、その細かいところまでね。
Nobuhiro Seki
前使ってたやつも結局各サービスが出してるやつじゃなくて、それを使って同じ大きさにバッジに作りましたみたいな人がいて、
それを使ってたんですよ。だからその後にYouTubeが出たりとかLISTENとか出たりとかしたんで、
そもそもYouTubeとかLISTENとかのサイズも合ってなかったりしたと思うんですけど、それも全部そういう理由なんです。
バッジがもう後から入れてるし、適当に高さだけ合わせて放り込んだりしたりとかしたんで、
幅がずれてるとか中心線がずれてるとかそういうのは平気で起きていたんで、
直したいんだけど、こういう細かいの直そうとするとすごい時間かかったよなと思って放置して3年みたいな感じだったんです。
どんどんどんどん綺麗になってて気持ちよかったです。
Mika Ueno
これはどうせまたできることなんで、先に言っちゃいますと、LISTENのこのバッジっていうのは自作なんですよ。
自作っていうかロゴがあるんで、そのロゴを入れてバッジのサイズにしてるんですけど、
最初はちょこっとListen onとかAvailable onとかっていうのを入れてみたんですけど、
Mika Ueno
やっぱりそれで作ると他のバッジと並べたときのバランスとかって全然崩れちゃうんですよね。
それを私Canvaとか使って作るんですけど、ロゴと余白の大きさとか文字のウェイトの大きさとか、
そういうものっていうのがちゃんと考えられていて、それに全部理由があって、
他にもApple PodcastとかYouTube Musicとかそのロゴとかもあるんですけど、
ちゃんとそういうふうに見えるようになってんだなってそこにデザイナーさんのちゃんと意図があるっていうのを作っていて、
今回の本当思ったんで、例えばClaude Designとかに入れてこれとバランス合うようにしてっていうのはそれはそれでできると思うんですけど、
そうするとこのプラットフォーム側が見せたいバッジのあり方と他と並べてってバランスでいろいろあるだろうから、
Mika Ueno
これを判断できるのはやっぱりデザインをちゃんと勉強した人なんだなっていうのはすごく思いました、とっても。
ただツールとして作ってもらうというのは簡単なんだけど、それがどういう意図で、
ここの場合だったらこうやって調整するべきっていうのはきちんとあるんだろうなっていうのはとても思いましたね。
色覚多様性への配慮とタイポグラフィの追求
Takuya Oikawa
さすがです。
Mika Ueno
いや、本当に及川さんとかめちゃくちゃ早くいろんなことをやってくれるから、私もちゃんと見させてもらわなきゃみたいな感じ。
Takuya Oikawa
ちょっと聞いてる人に誤解ないように言っておいた方がいいと思うんだけど、
LISTENのやつを多少修正したのはちゃんと許可を得てやっていますと。
Mika Ueno
そうですね。
ロゴはちゃんと公式に公開されている画像とSVGとかがあって、
Mika Ueno
それをバッジにしたいんですけど、って近藤さんに言って。
公式の方がこれからまた多分出てくると思うので、それ出るまでの間にちょっとやらせていただいてます。
Nobuhiro Seki
ちゃんとそういうのも細かいところで尋ねたりとかして、ちゃんとクリアしてるっていうのは、
全員商業サービスの従事者だったっていうことがよく分かる動きをしてるなと思って見てましたよね。
LISTENのやつもちゃんと聞いていたし、
Appleが先頭に置かなきゃいけないっていうのも気づいて一番上に置いてあるしっていう感じです。
Mika Ueno
これも機能的にもいろいろ追加されて、
配信されたらこのページが自動的にできるっていう、たぶん関さん的に一番嬉しいやつだと思うんですけど、
それがきちんと入ってるのが素晴らしいのと、
私この改修とかアップデートとかで言いたいことが2つあるんだけど、
Mika Ueno
言ってもいい?この舞台裏かもしれないけど。
まず色とね、色とフォントの配置っていうのを及川さんとすごくやらせてもらって、
一つ色の方は、
色覚の障害を持っていらっしゃる方に対してのちゃんと色ってのも配慮されているんですよね、今回のやつって。
スピーカーのそれぞれにマークがついてて色もついてるんですけど、
Mika Ueno
その色の配色っていうのは最初に提案したものと、
きちんと色覚異常の方を考慮するとこの色じゃダメですみたいなのを及川さんがちゃんと案出してくれて、
この中どれがいいですかみたいなやつをやりとりしたんですよね。
その時に、ちょっと似たような色だったんですよ。
キーカラーになってるものと、私の色がちょっとオレンジ系で近かったんで、
それがなかなか識別しにくいですよっていうのがあって、
じゃあ別の色を選んでみたらどうかなみたいなのをやって、
それも私もちょっとClaude Design聞いたりとかしながらやってみたんですけど、
黄色系と紫系はどうだろうみたいな提案をしつつ、その中で紫が採用されたんですけど。
そういうのを見た時に、実は自分が使っているデザインの中の色のパレットっていうのがあって、
その色のパレットって日本の和の伝統色ってあるじゃないですか。
Mika Ueno
浅葱色とか。
和の色がすごい好きなので、ああいうのをパレットにしているデータがあって、それを参考にしたりしてるんですけど、
それをこういうことなんだけど、橙色とあんまりかぶらない色はどれだろうみたいな感じのやり取りをしたんですよ。
その時に紫色と黄色系っていうのをやり取りした時に、ああいう提案の色が出てきたんで、
それですごく面白かったんです。
かつそれがライトモードになった時とダークモードになった時と使う色が違って、
紫の場合だったら濃いめの紫とライトモードした時に少し薄くなったりとかね、
Mika Ueno
こういう配慮をするんだなっていうのをとても勉強になりました。
Takuya Oikawa
今は普通に他のAIとかでもやるけど、すぐに見た方が早いっていう風に、
僕はそれをいつもリクエストしてるからもあるかもしれないんだけれど、
アーティファクトっていう形で出してくれて、
案1 案2 案3とか説明つけてっていうのって出してくれるから、判断すごくしやすいですよね。
Mika Ueno
そうですね。やっぱりパッと見てわかる。
プロトタイプとか試作とか作るのもそうじゃないですか、見て手に取る時と図面だけの時とってやっぱり全然違うから、
こういうサイトとかでも全体に当てはめてみた時のこの色とかこの形っていうのがすごくやっぱり大事なんだなと思います。
さっき関さんが話したページの一番ヒーローの画像のところにあるXCrossingっていうロゴっていうか、
番組タイトルのところなんですけど、一番最初もうちょっと文字の間隔が狭かったんですよね。
Mika Ueno
すごく文字の間のカーニングですか、それがギューッと縮まっていた感じのものだったんですけど、
それはそれで成り立ってはいるんですけど、ちょっと近いから離してみたらどうでしょうかみたいなやり取りをさせてもらって、
それも、もともとこれ使っているフォントがあって、DJR Formaっていう、
フォントで文字間を狭くしていくっていうのもあったんですけど、それをもう少し広げてみたいなっていうのを勝手ながら言ってみると、
やっぱり同じフォントですけど文字間隔が広い狭いっていうので受ける印象は全然違っていて、それもまた面白かったですね。
本当にゼロコンマいくつなんですよね、文字間隔もね。
Takuya Oikawa
Mですね、EMって書くやつですね。
Mika Ueno
それをちょうどそのやり取りをやって、もともと日頃からフォントとか気になっちゃうタイプなんですけど、
フォントがすごい気になっていて、電車で移動しているときに、電車の中の次は何々駅っていうディスプレイ表示あるじゃないですか、
Mika Ueno
JRでも東急とかでも、私鉄でも、あれがやっぱり本当に気になっちゃって、すごい見やすいんですよね、あのフォントって。
日本語のフォントで表示されるときって、例えば渋谷って書かれているのと、ひらがなで渋谷って書かれる。
その後に英語で渋谷って書かれるじゃないですか。
日本語と英語と、最近は中国語韓国語って変遷していくんですけど、それぞれの言語になったときも同じ印象のまま変わっていくんですよね。
それが、うわぁこれ、常に見てるから見やすいなぐらいで、しかも空気として化してたんですけど、
そこでこれどこが作ってんだろうと思って、東急線の調べたらあれ三菱電機が作ってるオリジナルらしくて。
それも日本語と英数文字を独自に開発して、それぞれがちゃんと見やすいっていう、開発デザインチームが入って開発されてるもので、独自に保有してるんですって。
それでグッドデザイン賞も取ってるらしいんですけど。
そういうのを見て、とてもびっくりしました。
そのデザインの人たちが、公共システムで求められるデザインっていうのは、気にならないというか、自然に見えて忘れるほどっていうのが、公共デザインとして一番優れてるものなんだっていうふうに言ってて。
自然に頭に入ってきて、なんとも思わない空気みたいな存在になることを目指してるみたいなことを言ってて、あのフォント使いたいくらいです。
Takuya Oikawa
タイポグラフィーって難しいんですよね。
AIアシスタントによるCSS修正と開発の楽しさ
Takuya Oikawa
今回もだから、CSSっていうスタイル設定のところで、letter-spacingっていうやつで直したんですよね。
CSSって昔からそうだけど、めちゃくちゃ多機能で、inheritってウェブ上だと継承されていくから、どこに書かれてるかもよくわからなかったりするんですよ。
DevToolsっていう、Chromeについてるデバッガーみたいなやつで追ってって探してってやるんだけど、結構めんどくさかったりするんですね。
今、このDevToolsにもGeminiが搭載されていて、AIが搭載されていて、AIアシスタントっていうのがあるんですけど、そこで要素を指定して、これこう直したいんだけどって言ったら、思い通りにして、ここですって言ってっていうのをやってくれるから。
Takuya Oikawa
本当は最初からClaudeに投げてもよかったんですけど、そこまで特定して、具体的にこう直してほしいっていうところまで落とし込んで、その段階で一旦スクリーンショット撮って美香さんとかに見てもらってるんですけれど、
合意取れたやつを、このコードをこう直せっていう形でClaudeに指示出してっていうのもできるんで、だいぶ本当に楽になりましたね。
Mika Ueno
何かを言うと、速攻でできているから、すごいなって。
あと、これもチャットでは言いましたけど、及川さんが作ってるのこれ、たぶん楽しいんじゃないかなっていうのを。
Takuya Oikawa
楽しいです。楽しいです。
Mika Ueno
ちょっと感じていて、作るとかこういうふうに何か形になっていくっていうのがとても楽しいんではないかなっていうのを感じました。
サイトリニューアルの動機と開発の継続
Takuya Oikawa
いやー、すげーよくないなと思うのが、XCrossingのサイトとかってまともに見たことがなくて。
Mika Ueno
これを機にもう何年目にして始めて。
Takuya Oikawa
あれなんですよ。そもそものきっかけっていうのは、まず分析をしたじゃないですか。挨拶順っていうところをファクトベースに語ってやろうじゃないかっていうことで、
まず挨拶順だけ見たら、他にも気になることがあったから色々分析させたわけですね。
で、どこに上げようってことになって、PDFにしたけれどウェブでも見れるようにしたときに、一旦自分のサイトに置いたってお二人見てもらったんですよね。
で、これ自分のサイトに置くの変だなってやっぱ思ったのと、自分のサイトに置き続けるのって、実はGitHubのActionsっていうのを使ってやろうとしたら、
結構認証人間のところで余計な手間をかけなきゃいけなくて、どうせなら当たり前だけれど、
Takuya Oikawa
x-crossing.comっていうところからそこに載っけたほうがいいわけですよ。
じゃあそこに載せるとしてどうなってんだろうなって見てみたら、あれなんか知らないけど更新止まってるぞっていうのに気づき。
で、さっき言われてたけど、僕もデザインとかってそんなに凝る方じゃないんだけど、やっぱりバッジとかがガタガタしてるし、これちょっと直した方がいいなってことは、
一旦自分で引き取っちゃって、全く同じやつを再現してからデザインチェンジしていって、アナリティクスみたいなものとかいろんな機能入れていったら面白いんじゃないかなと思って、
やりだしたら止まらなくなりましたという、今になるという感じです。
Mika Ueno
素晴らしい、本当に素晴らしい。きっかけって思いもよらないところから来ますけどね、本当に今回のはいいきっかけだったと思います。
Nobuhiro Seki
ちょうどそのタイミングと夏休みっていうのが被ったじゃないですか。だから多分それがすごい一番良かったと思うんですよ。
Takuya Oikawa
僕夏休みって仕事普通にしてましたけどね。
Nobuhiro Seki
外部の人とやると減るじゃないですか、思うのかって。
Takuya Oikawa
そうでもなかったんですけどね。ミーティングとミーティングの合間とかに引き出したり。
だからそれこそやっぱり仕事終わった後に、仕事終わっても僕だらだら仕事しちゃってるほど多いんですけれど、ややプライベートモードになるじゃないですか。
プライベートモードにとか、あとはジム行きながらとか、そういう感じですね。
Mika Ueno
あと大事なの忘れてますよ。山から。
山頂からのスマホでのサイト修正とCMS要素ゼロのサイト
Takuya Oikawa
山です。あれはすごかったな。
来ただけ肩の小屋っていう、三千何メートルか十何メートルかな、忘れたけど。
Mika Ueno
あれ、最初でも山って、及川さんが山にいるって知らなくて、でもなんかすごいサクッと返ってくるんですよね、返事が。
デスクトップの前に行ってやるのかなと思ったら、今もうすぐ電波が何とかでとか言い始めたから、はい?と思ったら山にいるっていう。三千メートルの山にいるんですよ、今。
そこからウェブサイトの回収をしましたね。
Takuya Oikawa
あれはスマホだけで、これはClaude Codeのいいところで、Claude Codeってアプリの中からも使えるんですよ。
Claude Codeってターミナルっていうところでカタカタ叩いてってやるんで、私もそっちがメインにしてるんですけれど、GitHubのレポジトリっていうソースコードの置き場と連携させていてっていうふうにしたならば、ウェブからアプリからもできるんで、そっちだと思って粛々とやり、という感じでしたね。
Nobuhiro Seki
いいタイミングですよね。もうすぐ200回じゃないですか。ほぼその直後ぐらいに4周年なんですね。
だからその前にサイトリニューアルもされて素晴らしいと思っていてですね。
及川さんもやろうと思えばいつでもできるけど、ノッたのが先月でした。先々週でしたってことですもんね。
そういう要素がありますよね。思い越しをなかなか上がらないけど、上げたらずっとハマるみたいな。
Mika Ueno
今回いろいろやってます。全面的に作りも何もいろいろ変えてくれてますけど、やってて一番楽しかったやつとか、むむむって燃えたやつとかってどの辺ですか?
Takuya Oikawa
やっぱり検索回りとデータ分析でアナリティクスのところかな。ただ全体的に面白いんですよ。今回のようなサイトだから取るべき手段っていうのがあるんですよね。
もともとはこれMovableTypeじゃないですか。いわゆるCMSなんですよね。実はこうしたサイトってCMS的な要素ゼロなんですよ。毎回毎回サイトをリビルドして公開してるんですね。
Mika Ueno
へえ、毎回?
Takuya Oikawa
だからエピソードいくつエピソードいくつってレコードをどっかに持ってるわけじゃないんですよ。後ろに元にデータがあってそこから今のページを全部作ってるんですよ。
今はまだそんな重くないから3,4,5分ぐらいで作れるんですけど、この後検証のところもう少し慎重にやるんで10分ぐらいかかるようになっちゃいますけど、でもせいぜい10分で全部作れちゃうんですね。
Takuya Oikawa
よく考えたら一個一個のコンテンツなんてそんなに複雑じゃないし、更新頻度も一週に1回だけだしっていう形で考えたらCMSなんだけどCMSの要素なくて全部作り直したとしてもたかが知れてる量なんですよね。
だからそれを実はやってるんですよ。
Mika Ueno
今197回目ですけど、197回分のエピソードと文字起こしの文字があってそれも大したことない量なんですね。
Takuya Oikawa
そうですそうです。だってよく考えたらテキストしか入ってないわけですよ。
テキストの量なんて大したことなくてですね、だから本当に全然軽いですね。
だから検索めちゃくちゃ早いですねって言ってくれてるじゃないですか、だから検索データ全部ローカル、ブラウザがほぼ持ってる形だからすぐ出てくるんですよね、インデックスとかも。
Nobuhiro Seki
ちょっとやるとニョロニョロニョロと出てきますよね。
Mika Ueno
検索っていうのがあって、そこで過去話したものとかキーワードが出てくるんですけど、キーワードをこんな話したっけみたいな感じで面白かったです。
ソースコードのコメントとAIによる分析
Nobuhiro Seki
本番まで公開するまであるのかわかんないけど、ソースのコメントとかを見てるんですね。
僕ね、結構暇だから。
ああなるほど、こういうことなのねとか全部コメントが日本語で書いてあるからすごいコメントを読んじゃうんですけどね。
これでずっと残ってるんですかね、コメント。
Takuya Oikawa
どうしましょう。最近もどこだっけ。
参議院かなんかのやつがおそらくAIが作ったやつでそのまま書いててっていうのが話題になってましたけど、どうしよう消してもいいし。
Takuya Oikawa
あとコメントは英語にすべきだっていうふうにClaudeが自分で最近気づき始めてるんですよ。
Mika Ueno
なんで?
Takuya Oikawa
なんでだったっけな。何かの理由でそうなってて。確かになと思うんでここら辺もちょっと理由決めてやるかもしれないですね。
書き起こしデータの利用と精度への懸念
アップデートされたサイトをご覧いただければと思います。概要欄にリンクを貼っておきます。
Mika Ueno
これをベースに私たちは遊んでいるという感じですね。
Nobuhiro Seki
もともと同じネタをよく話題にするから話しながらこれを見て、これって前喋ったよねとかっていうのを喋ってる途中で軌道修正できるみたいな。
そんなこと言ってましたよね、確かね。
Mika Ueno
そうですね。検索めちゃめちゃ早いのと、これ前確か話しましたっけって言った時に話し手側として使えるのはすごい面白い。
公開してませんけど分析ページっていうのがあって、それはそれで自分たちはすごい面白いことやってますね。
Nobuhiro Seki
分析ページはいずれ公開してないんですか?
Takuya Oikawa
実はね、外に出てはいるんですよね。どっからもリンクしてないんだけど。
Nobuhiro Seki
リンクしてない。どっかで書ける。
Takuya Oikawa
新しいやつがもう公開されちゃってるわ。
ちょっと手直ししてて、次これ見ながら話してもいいかもしれないし、いろんな面白い分析ができるやつを入れてて、一旦QAサイトだけにしたんだけど、問題なかったら別にこれお遊び用だから外に出しちゃおうかなと思って。
Nobuhiro Seki
そういうの面白いですよね。
Mika Ueno
何言い出しっぺって。
Nobuhiro Seki
終盤に引く人とかっていう。後半に喋んない人ってことですね。
Mika Ueno
どこどこそれ。
Nobuhiro Seki
疲れちゃう人ってことですね。
Takuya Oikawa
このページの概要のところに、左の下のボックスで終盤に引く人美香って書いてある。
Nobuhiro Seki
占有率の下。
Mika Ueno
たくやさんが黙る話題。
これ面白いね。終盤に引いてくるの、わたし?
Takuya Oikawa
わずかですよ。42から35とかそんなもんなんで。
それでもこの独演度っていうのはね、自分でもこれを見ていろいろ考えることがありそうだなって。
Mika Ueno
これでもいいですよ。テーマを投下した人とか、自分の範囲のエリアとかだったらね、それはそうなりがちですよね。
Takuya Oikawa
これでもね、左側に話題で見る言い出しっぺっていうやつをクリックするとまさにそれなんですよ。
持ち込んだ話題とその後言い出しっていう、それを専用している割合が3人の話者事に出てるんですよね。
Nobuhiro Seki
人で切ると3人。
Takuya Oikawa
だから言い出しって専用してるのは関さんが一番多いんですよ。
Nobuhiro Seki
自分で言いたい話を言ってるんですもんね。
Mika Ueno
気になった話題はそうなりがちですけどね。
言い出しはそれぞれ、及川さん30パー、関さん33パー、私37パーか。
Nobuhiro Seki
言い出しはやっぱり美香さん言い出しが多いじゃないですか。僕らがいつも言い出し係として認識しちゃってるんで。
Mika Ueno
一応皆さんネタあるか聞いてるけど。
これもね、大変面白いですね。公開したらこれをまたネタにしながら話しますね。
Nobuhiro Seki
暦で見る周期とリズムってのも面白いですね。
Mika Ueno
ちびこの言い出しっぺとか、問いと掛け合いとか独演度とか、こういうやつはどういうふうに問いかけで作るんですか?
Takuya Oikawa
僕は全部言ったんです。
Mika Ueno
こういうのがあるから作ってみてっていう感じですか?
Takuya Oikawa
こんなのあるんだけど、ブレストモードっていうので、そういったプラグインのスキルの中にスーパーパワーズっていうんですけど、ブレインストーミングってのがあるんですね。
あとプロジェクトマネジメントスキル、PMスキルってのもあって、そこにブレストモードがあるんですよ。
そこを起動させてブレストしながら、こんなのどうだろう?こんな切り口どうだろう?ちょっと作ってみて。
データで面白いもの出ましたっていうのはすぐにデータを解析して分析して、面白いネタになりそうかどうかっていうのをやってくれて、
じゃあそれでやろうっていうのを決めて、どんな感じのビジュアルにするかだとか。
本当はBIみたいな形でビジネスインテリジェンスみたいな形でディメンションを切ったりだとかしてってやろうかなと思ったけど、それはやりすぎですって言われて、確かにそうだなと思って。
Takuya Oikawa
なので典型的な切り口のやつだけ入れて、こんな感じにできないかっていうのを投げて、
昨日の夜ですね、あとは任せたと。
Codexと連携できるようになってるから、あとは2人で相談して、朝になったら動くのにしといてくれよと。
Mika Ueno
それでできたと。
Nobuhiro Seki
これってさっき言ってないですけど、文字データっていうのはLISTENで起こした文字データを使ってるんですか?
Takuya Oikawa
そうです。
Nobuhiro Seki
それって別に構わないんですよね。それをそのまま使ってもLISTEN的には構わないってことに。
Takuya Oikawa
やべっ。
利用規約見てないです。
Nobuhiro Seki
起こしてくれてるっていうのが、誰に著作権があるのかって結構微妙ですよね。
Mika Ueno
全部でもLISTEN上に飛びますからね。
Takuya Oikawa
そうなんですよ。これ見ようと思ったらLISTENに飛ぶから。
うちのXcrossingだけだけれども、サイト的にはLISTENに飛ばすための検索ページみたいになっていて、検索してLISTENに飛ばす。検索してLISTENに飛ばすっていう立ち付けですから。
Mika Ueno
じゃあ文字起こしはあっちにLISTENが。
Takuya Oikawa
問題ないんじゃないかなって思いますよね。
Nobuhiro Seki
現実的にはそれって昔のAmazonのウェブサービスで自分のページにトラフィックをくれれば使っていいですよって思いますよね。
Takuya Oikawa
そうですね。LISTENの方のrobots.txtとかを見た方がいいかもしれないけど、
多分普通にスクレーピングとかできないようにしているサイトってプログラマブルにも、
AIが、エージェントが行っても見れないんですけど、LISTENは普通に見れてるんで、まず大丈夫じゃないかな。
多分、近藤さんこれ見たら喜んでくれ、面白がってくれると思いますからね。
Nobuhiro Seki
全くにね、インバウンドになりますからね、リンクがね。
ただだから、ああいう書き起こしのやつって結局、4年もやってると昔のやつの書き起こしの精度と今のやっぱり書き起こしの精度が全然違うじゃないですか。
Takuya Oikawa
そうなんですよ。
Nobuhiro Seki
それがいつも気になるんですよね。
Takuya Oikawa
いやだから今回、いろいろ文字認識の文字起こしのところで間違ってるやつがあって、結局LISTENの方を修正しないと、根本から直さないとダメなやつがあるから、
いつも美香さんがやってたと思うんですけど、粛々と直したりしましたよ。
Nobuhiro Seki
更新直してその後手直すみたいなことをしないといけないですもんね。
羊の館みたいなことが起きちゃうんで。
Mika Ueno
過去のやつはLISTENにお引っ越しする前のやつ、まとめてどうってやったやつってそういうのたくさんあるから、検索するとそういうのいっぱい出てきますけど、それを見つけたらみたいな感じですね。
Nobuhiro Seki
でも精度が良くなったら勝手にどんどんアップデートしてくれたりしないじゃないですか。
しちゃうと他のサービスが問題になっちゃうから、なかなか難しいですよね。
Nobuhiro Seki
音声データは変わってないんだけど、それをテキストに直すロジックが良くなってて、
でも動的に生成するとどんどんインデックスそのものが変わっちゃうみたいなことが起きちゃうから、
なんか今回やっていて大変なんだろうなと思いながら、あえて触れずに黙って見てるみたいな感じでやってました。
X-Crossingサイトリニューアルのまとめ
Mika Ueno
XCrossingのサイトをリニューアルした話でしたね。これからも続く。
33:15

コメント

スクロール