これまでは、Webサイトのコーディングを一から自分で作成していました。

しかし、近年のAI技術の発達により、デザインデータをもとにHTMLやCSSなどのコードを生成してくれるAIツールが増えてきました。

そこで今回は、数あるAIコーディングツールの中から、特に気になった「Anima」と「Claude Code」を実際に使ってみました。

それぞれの使い方や、実際に使用して感じたメリット・デメリットをまとめます。

Anima

Animaは、Figmaのデザインデータからコードを生成できるツールです。

FigmaのプラグインやFigma MCP を利用すれば、FigmaのデザインデータをAIに読み込ませ、デザインデータをもとにコーディングしてくれることもできます。

PC、スマホのデザインを指定してコーディングすることも可能です。

使ってみた感想

実際に使ってみたところ、Figmaのデータを読み込ませることができるため、デザインの再現度はかなり高いと感じました。

一方で、レスポンシブ対応は少しが苦手な印象でした。

プロンプトで何度か修正することでレスポンシブ対応もできますが、思った通りのレイアウトになるまで調整が必要な場合もあります。

また、最初に生成されたコードでは、PC用とスマートフォン用でHTMLをそれぞれ作成し、CSSで表示を切り替える構成になっていました。

見た目を再現するという点では分かりやすい構成ですが、同じようなHTMLを2つ用意することになるため、コード量が増えたり、保守性の面で気になる部分がありました。

Claude code

Claude codeでは、Figmaのデザインを画像に書き出し、その画像をClaude codeに共有したうえで、プロンプトを入力しコーディングを進めました。

使ってみた感想

Animaと比べると、デザインの細かな部分まで完全に再現するという点では、やや物足りなさを感じました。

一方で、全体のレイアウトはデザインに沿って組まれており、レスポンシブにも対応したコードを生成してくれました。

実際に使ってみると、画像の差し替えや細かなCSSの調整は必要でしたが、HTMLの構造がある程度整理された状態で作られるため、生成されたコードをベースに自分で調整しやすいという印象でした。

特に、ある程度コーディングの知識がある人であれば、生成されたコードを確認しながら修正していく使い方が進めやすいと感じました。

まとめ

実際に「Anima」と「Claude Code」の両方を使ってみて、同じAIコーディングツールでも、それぞれ特徴が異なることが分かりました。

「anima」がおすすめの方

• コーディングの知識があまりない方
• Figmaのデザインをできるだけ忠実にコード化したい方
• デザインからコードを手軽に生成したい方

「Claude code」がおすすめの方

• HTML・CSSなどのコーディング知識がある程度ある方
• 生成されたコードを自分で調整したい方
• レスポンシブ対応やコードの構造も重視したい方

どちらが優れているというより、「デザインを忠実にコード化したいのか」「生成されたコードをベースに自分で調整したいのか」によって、向いているツールが変わると感じました。

AIによってコーディングの進め方は大きく変わってきていますが、現時点では完全にAIに任せるというよりも、AIにベースとなるコードを作ってもらい、必要な部分を人が確認・調整するという使い方が現実的だと思いました。