サックス奏者であり大学の音楽仲間である山中一毅氏のウェブサイトをリニューアルしました。2026年5月発売の3rd album『Humanity』に合わせた世界観となっています。

氏の要望は極めて明確でした。
余分なものは徹底的に排除し、情報は必要最低限なもののみに厳選。
アルバムアートワークから私は波の無い湖面を想像しましたが、改めてアルバムを聴いても｢音が鳴っているのに感じるのは静寂｣と、非常にコンセプチュアルな方向性を感じます。そしてクライアントである山中氏との会話から、ウェブサイトにもその考えが反映されているように思いました。本人と話したわけではありませんが。

そのような音楽に対し『Humanity』というタイトルを冠する彼の感性、私にとってはユニークであり、アルバムを発表する度に意外性がとインスピレーションがあります。

また氏の要望は極めて精細でもありました。
文字サイズを1px単位で、文字色をHEXレベルで、背景色の透過度を1%単位で、と拘りが炸裂。もちろん修正作業の数は膨大になりましたが、これは依頼者がこのメディアを大事だと考えている証拠でもあります。こうなると制作側としては何が何でもその想いに応えたいという気持ちになるものです。

自分の本業がウェブ制作から離れて長いこと立ちますが、初心に返った現場となりました。

ウェブサイトはこちらから

Kazuki Yamanaka 山中一毅

Figma Makeを使ってみて

制作プロセス上の目玉はFigma Makeの利用にあります。前回(2020年)のリニューアル時は｢Sketchを使ったぞ！｣と自信満々に言った事から考えると、かなり隔世の感があります。

というか、制作している間にClaude Code、はてはClaude Designの発表…と、すでにFigma Makeが時代遅れになっている感がありFigmaの株価もえらい事になっておるのですが、この制作を始めた時はFigma Makeだったんですよ。時代が。

Figma Makeを使って感じた価値は以下の通りです。

• ゼロイチが凄い。マジで爆速。
• ソースコードに落とす工程は不向き。結局自分で書き直した

立ち上げは本当にすごかった

氏は丁寧にも目指す世界観やサイトの構成、ページごとの掲載情報を文書化したブリーフィング(Wordファイル)を寄越してくれたので、これをFigma Makeにほぼそのまま転記してドラフトを作成。さすがに初稿で完璧とは行きませんでしたが、30分ほどの手直しだけで｢一旦見せられる｣状態まで到達してしまいました。

これは凄い。

Figmaのプレビューを操作した様子を動画スクリーンショットで撮り氏に送付、フィードバックをもらって手直し。その手直しもFigma Makeで指示。平日の仕事の会議の裏でちょくちょく指示するだけでどんどんバージョンアップできるプロセスは革命と言って差し支えありません。

その様子を続け、テンプレートを決定付けるような4-5画面ほどをFigma Makeで作り、大きな合意を得たところで骨格の定義は完了。

ここからは長かった

次は実装を見据えた他画面の制作へと移行しますが、ここにFigma Makeの(少なくとも2026年4月時点での)弱点がありました。

まず、Figma Makeが吐き出すHTMLとCSSがちょっとアレでした。

• HTMLは、少なくとも自分の目には不要に見えるdivによるラッピングが多層化。自分の手で修正しました
• 特にCSSは、過去の修正指示による負の遺産が蓄積されており、最新版では不要な記述が多く残っていたので自分の手で修正しました。なんですが、今思えばその作業もプロンプトでできたのかもしれません
• カラーや文字サイズはカスタムプロパティで指定したかったのですが対応していなかったので、これも自分の手で修正しました。なんですが、今思えばその作業もプロンプトでできたのかもしれません
• なぜかFigma Makeのプレビューでの表示と出力したコードをブラウザで開いた時のレイアウトが揃わない箇所があり、これも自分の手で修正しました。この点は何度もプロンプトで修正を試みましたが解決しませんでした

ただ、メリットも十二分にあります。特に以下の点においては無視できない労力を削減してくれています。

• 基礎的なレスポンシブ対応は自動でやってくれている
• Javascriptも書いてくれている
• SVGも書いてくれている

という事で、これ以降はこのようなプロセスをとりました。

• まずFigma Makeで作成したメインの数画面のHTMLとCSSを手で修正し、意図通りのレイアウトを再現するよう調整、テスト環境(非Wordpress)で挙動チェック
• サブの数画面はHTMLを複製して1画面ずつ制作、同様にテスト環境でチェック
• 途中で発生したテンプレートレベルの修正に対しては、泣きながら該当画面のHTMLを1枚づつ修正
• これを全画面がFIXするまで繰り返す

言ってしまえばこちらが通常の、というか今までのウェブサイト制作のフローでなんですが、立ち上げプロセスとのスピード差が凄すぎて逆にびっくりしました。
このプロセスも本当はもっと効率化できるはずな気がします。

WordPress上でのリニューアル切替

最終工程として、静的htmlをWordpressに移植するプロセスですが、ここも効率化の余地を感じるものでした。このあたりはFigma Makeと関係ありませんが、備忘として残しておきます。

本職が激務系のコンサルをやっておりますので土日を含めても｢1回で｣移植をやり切る時間の確保は難しいと判断しました。ので氏に許可をとったうえで、1画面づつ移植していくプロセスをとりました。移行期間中は画面ごとにデザインが異なるという事態が発生します。

• テンプレートPHPやCSSを、現行のものを活かしつつ、別ファイルで用意
• 静的HTMLで付与していたclassなどの記述をif文で制御したり、コンポーネントPHPを作成したりなどのPHP管理化作業
• リニューアル完了した画面において、新CSSを読み込むよう逐一管理
• これをいちテンプレートごとに繰り返し

PHPの文法を忘れきっているので、Claudeに聞きまくりながら進めました。というかPHP部分はClaudeが示してくれたコードそのまま使ってる部分がほとんどです。AIすごい。

平日の空き時間にちょくちょく進めて、1週間で完了。
効率化余地として感じる部分としては、htmlのPHP化を該当箇所単位でやってしまったのを、テンプレートPHPをまるごとAIで差し替え、みたいにできないかな、というところです。今後精進。

余談。PHPとWordpressのバージョンアップ

5年くらいPHPとWordpressのバージョンアップを怠っており、気付いたらWordpress管理画面上でPHPファイルが編集できない状態となっていました。

ただ、幸いなことに？当サイト(imasashi.net)も似た状態を昨年経験しており、何が起こるかはだいたい分かっておりました。

アップデートしたところ予想通りエラーが起こるので、今回はClaudeに壁打ち相手になってもらいながら落ち着いて対処。1時間ほどで解決。すごい時代になったもんだ。