設計と実装のズレ：UGREEN 100W充電器、AI任せのブログリニューアル、Sunoマッシュアップの試行錯誤

最初の話題はガジェットレポートです。神森さんが出張先での運用を念頭に買ったのは、UGREENの100WのPD充電器でした。

この充電器はUSB-Cが4つ、USB-Aが1つの5ポート対応です。大きさはMacの充電アダプターと同じくらいで、少し厚みがあり、ずっしり重い印象だと話されています。

3月末にAmazonで見つけ、写真を見た瞬間に「これいいな」と思って、安さもあって衝動買いしたそうです。

月に1回は東京へ出張しているという神森さんにとって、悩みの種はホテルでの充電環境でした。MacBook、iPad Air、Apple Watch、iPhone2台など、充電したいものが多く、コンセントもアダプターのポートも足りなくなりがちだと言います。

ここで効いてくるのが100W対応という点です。容量が少ない充電器だと、1つしか充電できなかったり、もう1つが超低速になるといった問題が起きがちだと説明されています。

神森さんのMacBookは13インチのProなので、96Wのような大容量は不要です。100WのうちMacに使った残りで、iPadやiPhoneを充電できればいい、という発想が今回の狙いでした。

神森さんが特に気に入っているのは、本体側面がタッチパネルのようになっている点です。どのポートに何ワット充電しているかが液晶に表示されると話されています。

何回か押すと表示の見え方が変わるところも気に入って、思わずポチッとしてしまったそうです。

いい点として、コンセントの差し込み部分を折りたためるので、持ち運びに問題がないことも挙げられています。

ただし、ここで思わぬ落とし穴が見つかります。この充電器は、ホテルのテーブルなどにある上向きのコンセントに刺すと非常に使い勝手がいい設計なのです。

上向きに刺すと液晶部分が上を向き、手前側にC4つとA1つのポートが自分のほうに並びます。ところが、壁差しにするとポートが下を向いてしまうのです。

そのため仕方なくひっくり返して上向きになるように使うことになり、あまりスマートではないと神森さんは指摘しています。

とはいえ、横向きでも下で支えて使えば問題はなく、複数デバイスを充電できる点でおすすめだとまとめられました。実際に使ってみて初めて見えた、設計と実装環境のズレの一例です。

続くワークトークは、自分のブログ「T-STUDIO.TOKYO」をリニューアルした話です。コロナ禍の頃にWordPressで構築し、約6年ほど運用してきたサイトでした。

リニューアルの理由は主に3つあります。神森さんは順に説明していきます。

1つ目はサイトパフォーマンスの向上です。GoogleのPageSpeed Insightsのスコアを上げたかったものの、既製品のテーマを使っているとコードに引っ張られて数値が悪くなっていたと話されています。

2つ目はアクセシビリティ対応です。神森さんはある会社のアクセシビリティ顧問も務めるなど、この分野に長く関わってきた人物です。だからこそ、まずは自分のブログをちゃんとしようという意向がありました。

3つ目は、勤務先が出しているテストサーバーサービス「SmartReleaseU」を実際に使いたいという理由でした。本番サーバーにつなぎ、ボタン1つでサイトをリリースできる機能を持つサービスだと紹介されています。

神森さんはもともとマークアップエンジニアとしてサイトを作り、その後ディレクター、現在は広報という経歴の持ち主です。HTMLやCSSを普通に書いてきた人間だと話されています。

しかし今の会社に入ってからはコードを書くことがほとんどなくなり、一からコードを書いて作りたいという気力も薄れていました。そこで生成AIで作れないか、というのが今回のリニューアルの出発点でした。

今回使ったのはClaude、Claude Code、そして最近再び話題のCodexの3つです。

まず神森さんはClaudeと一緒に要件定義を作りました。どんなサイトにしたいか、今のサイトの課題は何かを落とし込んでいく作業です。

その際に意識したのが、AIに丸投げしない使い方でした。推論ではなく事実に基づいて組み立ててほしいという考えから、独自の指示を出したと言います。

作業は平日の夜に限られ、1時間ほどを3日、合計3時間ほど対話しながら要件定義を作り上げたそうです。プロジェクトが始まったのは4月24日でした。

要件定義ができると、次はClaude Codeでサイト制作に入ります。今回はデザイン周りにFigmaを使わず、当時登場したClaude Designも使っていません。

WCAG 2.2に対応した、ブログやニュースサイトによくあるシンプルなデザインを狙い、やりとりの中で伝えたトンマナをベースに作っていったと話されています。

今回の前提は「a-blog cms」でサイトを運用することでした。そのため、a-blog cmsのテーマ作成もプロジェクトの一つになります。

ところが、神森さん自身はa-blog cmsのテーマの作り方がわからないため、ある程度をClaude Codeに任せる形で進めました。公式ドキュメントを参照させても、うまく言うことを聞いてくれない場面があったと言います。

さらにレート制限に引っかかって先に進まなくなったところで、Codexがいいという情報をたまたま見つけます。

そこで、Claude Codeで作ったフォルダーとClaudeが作った要件定義をまとめてCodexのアプリに引き継ぎ、その内容を元に作ってもらう形に切り替えました。

何度かのやりとりを経て、5月6日にはある程度サイトが本番に上がる状態になりました。

サーバーを従来のものからさくらのサーバーに移したため、ドメイン設定でまごついた面はあったものの、大体10日から2週間ほどでブログの移行を完了できたそうです。

その後も細かい修正が続きました。Googleアナリティクスのタグがうまく仕込まれず途中でトラッキングが切れていたり、見出しがなかったりといった問題があったと振り返っています。

現在は改善が進み、PageSpeed Insightsでも最初の読み込み速度以外はほぼ100点を取れるところまで来たと言います。速度が残るのは画像が重いためだと説明されました。

注目すべきは、この一連の作業で神森さんがほとんどコードを書いていない点です。表示がおかしいときに開発者モードで見て、あやしいコードをCodexに投げると、修正してくれたと話されています。

一方で、これをそのままクライアントのサイトでやるかというと、それはまた別の話かもしれない、という慎重な見方も示されました。技術を書く人から、判断する人へ役割が移っていく実感が語られています。

最後はSuno AIラボです。今回のテーマはマッシュアップ機能でした。Aの曲とBの曲を掛け合わせて新しい曲を作る機能だと説明されています。

掛け合わせたのは「In Focus」と「Matte」の2曲です。In Focusはクリアな世界をテーマにしたおしゃれで明るい曲、Matteはぶっきらぼうな声で歌うマイナー調のラブソングだと紹介されました。

今回あえてメジャーキーとマイナーキーを組み合わせたのは、そこに転調の面白さがあるからだと話されています。

Sunoでマッシュアップを作ると、歌詞をどうするか尋ねられます。Aの歌詞を主にするか、Bを主にするか、両方をブレンドするかを選ぶ形です。

ところが両方をブレンドさせると、前半がメジャーキー、間奏からマイナー調に転調してあとはずっとマイナー、という同じパターンの曲ばかりになってしまったと言います。

そこで神森さんが行き着いたのが、歌詞を自分で用意して渡すという方法でした。ただし素で書くのは避け、元の2曲の歌詞をClaudeに投げてマッシュアップした歌詞を作らせたのです。

すると、シンガーAとシンガーBそれぞれの歌詞の上に指示を書いてくれた形で返ってきました。それをSunoに渡したところ、狙い通りの曲ができたと話されています。

結論はシンプルです。マッシュアップ機能を使うときは、歌詞は自分で書いたほうがいいという一点でした。

Aメロ、Bメロ、サビ、間奏といったセクションの指示がちゃんと書いてあれば、その通りに曲を作ってくれるとまとめられました。めんどうでも歌詞を設計するか、生成AIにマッシュアップさせるほうが確実だという勧めです。

まとめ

充電器、ブログ、音楽制作という一見バラバラな3つの話題は、いずれも「設計と実装」という共通テーマでつながっていると神森さんは締めくくります。便利さの裏にある課題、技術より判断の価値、完成ではなく試行錯誤のプロセスの面白さが、この週のエピソードを貫いていました。

• UGREENの100W充電器は5ポートで複数デバイスを同時充電できるが、壁差しではポートが下を向く上向きコンセント前提の設計だった
• 元マークアップエンジニアが、Claude・Claude Code・Codexを使い、ほぼノーコードでブログをa-blog cmsへ移行した
• AI制作では推論任せにせず、質問をさせながら事実に基づいて要件定義を組み立てる使い方が鍵になった
• Sunoのマッシュアップは歌詞をAIに丸投げせず、セクションと歌手を自分で設計して渡すと狙った転調が生まれる
• 技術を「書く人」から「判断する人」へ、Web制作者の役割が変わりつつある実感が語られた