Claude Codeプラグイン「frontend-design」は本当にAIっぽいデザインを避けることができるのか？
※本記事は広告を含みます
筆者が運営しているサイトは3つありますが、どれもフロントエンドのスタイルについては基本的にAIにまかせてコーディングを行っています。
自分で頑張ってスタイルシートを書かなくて済むのでめっちゃ便利な反面、世間でも言われている通り、どうしても「AIっぽいデザイン」に収束してしまうのが玉に瑕なんですよね。
今回はこの「AIっぽいデザイン」を回避できると噂のClaude Codeプラグイン「frontend-design」を利用して、どのようなものが出来上がるのかを確かめてみたいと思います。
まずは元の状態から
もともとのデザインはこんな感じ。ちなみに、簡易的なWEBツールを配置しているサイトになります。
https://iris-on-tools.net/
実はこのサイト、AIでデザインを行った際の特徴がふんだんに盛り込まれています。
例えば
- なんとなく紫が貴重になっている
- グラデーションが利用されている
- 絵文字が多様されている
という要素はAIに良くみられる特徴です。やったことある方には分かるはず！
frontend-designを試してみる
今回の主題です。ちまたで騒がれてるfrontend-designの力を試してみましょう。なお、今回はインストール方法を割愛します。そんなに難しくないので、ネットで調べたらすぐできると思います。
使用したプロンプト
今回は以下のプロンプトをベースにしました。
ギークなイメージでエンジニアっぽいデザインにしてください
凄い雑なインプットですね。まあClaudeCodeが不十分だと思ったら追加で質問してくれるので、最初はこんな感じでいいでしょう。なお、スタートの時点でできるだけイメージを言語化しておいた方が、よりスムーズなUI調整ができるはずです。今回はあくまで実験というとこで勘弁してください。
完成したもの
完成版は以下のようになっています。色合いはコマンドライン風になり、絵文字が撤廃されました。
何回か調整はしましたが（背景とフォントカラーの嚙み合わせが悪い箇所を直しました）、それ以外はほぼ何もいじらないで出力されたものがこれです。
サイトの表示要素自体はもとのデザインの時と変わらないものの、かなりAIっぽさは薄れた印象かと思います。特に前述した紫を基調としたグラデーション、多用されていた絵文字が完全になくなったのが大きいのかなあと思います。
素のClaudeCodeではこうはいかないので、間違いなくfrontend-designが生きていそうです。トータル20分くらいでこの状態まで持っていくことができるのはシンプルにすごい。もっと時間を使ってプロンプトを作りこめば、自分の理想により近づけることができるという確信を得ましたね。ごいすー。
デメリットというかなんというか？
今回は個人的には上手くいったと思っているんですが、今後AIがより発達していった場合、結局出力結果が平準化していくような気がしています。
このままAIの進化が進んでいくと「AIがいろんなパターンのデザインを覚えて、よく採用されているデザインを提案してくる」状態になるのではないかという話ですね。良くも悪くも学習能力に関しては人間より上ですし、人間と違ってデータソースも多めです。そして、人間のように好き嫌いはなく、より大衆に選ばれるような返答するのがAIでもあります。
もちろん手軽に、見やすいUIが完成するというメリットは大きいのですが、「一味違う」デザインにするにはかなりの工夫が必要なのかと思ってます。
結論
あくまで「現時点では」という枕詞はつくけれど、frontend-designを利用するのと利用しないのでは、明確に差は出るのかなというのが結論です。これからAIが普及するにつれて徐々に同じようなデザインが増えていくんだろうなあって予想していますが、逆に言うと普及しきった後には、人間が新たに革新的なデザインを考案するんじゃないかって気もしてます。ファッションの流行りみたいになるのかなあ。
AIは優等生だけど概念をぶっ壊すことはできないと思うので、結局のところ人間のデザインセンスってのは必要になるのでしょう。なんせ利用者も閲覧者も人間ですしね。
デザイン性があまり求められない業務システムとかにはちょうどいいんでしょうけど、そういうシステムの開発ってまだまだAI使えないことが多いんだよなあ。この辺が今のジレンマかな。
最後に
所感はかなり良かったので、これから他のサイトのデザインもfrontend-designでリプレイスしていきたい！