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に聞くかもしれないけど。
なんかこれ入ってるんだけどこれ何?って。それはないですね。
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
タイポグラフィーって難しいんですよね。
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
検索っていうのがあって、そこで過去話したものとかキーワードが出てくるんですけど、キーワードをこんな話したっけみたいな感じで面白かったです。
アップデートされたサイトをご覧いただければと思います。概要欄にリンクを貼っておきます。
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
音声データは変わってないんだけど、それをテキストに直すロジックが良くなってて、
でも動的に生成するとどんどんインデックスそのものが変わっちゃうみたいなことが起きちゃうから、
なんか今回やっていて大変なんだろうなと思いながら、あえて触れずに黙って見てるみたいな感じでやってました。