こんにちは、株式会社GIG広報の北村（ゆうゆう）です。GIGでは毎月さまざまなテーマで勉強会を開催しています。

今回は受託開発チームの清水僚太さんに、「コーディング短縮ツール Anima」をテーマにお話いただきました。以下でその内容をくわしくご紹介します。

■登壇者プロフィール

清水僚太（しみず りょうた）：受託開発チームのフロントエンドエンジニア。SIerの営業職からエンジニアに転身。SESでの複数のフルスタック開発経験を経て2020年にGIGにジョイン。現在は髪型が迷走している。Next.jsが好き。

「Anima」とは？

▲出典：Anima公式サイト

「Anima」というツールをご存知でしょうか。コーディングにかかる時間を圧倒的に短縮できるツールです。デザインデータからHTMLをマークアップしたり、画像を書き出したり、レスポンシブに対応したりする作業を自動化してくれます。

フロントエンドエンジニアの皆さんを含め、「Figma」を使っている方も多いのではないでしょうか。Figmaは自動でCSSを書いてくれるため、<font>タグ周りはとくに以下の工程を繰り返すことが多いはずです。

1. コピペする
2. 間に書かれたコメントを消す
3. 保存（フォーマッターで自動整形される）

「この工程は自動化できるんじゃないか？」と思いたち、さまざまなツールを比較してみた結果、もっともおすすめできると感じたのがAnimaです。

FigmaからAnimaへデザインデータを移行する方法

FigmaからAnimaへデザインデータを移行するには、「Anima - Export Figma to HTML, React - Manage Design Systems」と呼ばれるプラグインを使います。アートボードごとにデータが認識され、Anima側に移行されると以下のような画面になります。

それぞれのページにおいて、PC・タブレット・SP（スマートフォン）での表示形式が確認できます。

右上にある「Export scope」でモードを切り替えることで、選択した箇所のHTMLコードが表示されます。3つのモードがありますが、基本的にはすべてのコードが見られる「Full project」で問題ありません。

下部の「Selected Framework」を選ぶと、書き出し形式が選べます。

「React」または「Vue」形式でも書き出せますが、基本的には上記画像のようにHTML書き出し（Styling：Flexbox、Length unit：PX）でOKです。書き出したコードはZIP形式でダウンロードできます。

Animaによってマークアップエンジニアはいなくなる？

Animaのようなコーディング短縮ツールの台頭によって、「マークアップエンジニアは必要なくなる？」と思われる方もいるかもしれません。現状、Animaにはいくつかの課題点があるため、まだまだマークアップエンジニアは必要です。

たとえば、現時点ではレスポンシブ対応が「display:none;」によって書き換えられていますが、こちらはSEOの観点からはNGとのこと。また、Animaのプロジェクト画面で確認できるレベルのコードがそのまま抽出されるとは限らない点も、懸念点です。細部を見たら「あれ？」と思う箇所があることも。

Animaによって大きく負担は減りますが、微調整しなければならない点があるので要注意です。

Animaは必要ない？

課題の多いAnimaですが、Animaそのものが必要ないかと言われると、それも違います。先述したように、SEOの観点で留意すべき点なども多いため、フロントエンドエンジニアが介入しなければならないのは事実です。たとえば、ブレイクポイントの切り替えなどはエンジニア側で調整しなければならないでしょう。

しかし、フロントエンジニア側が手作業で直せる箇所を一つひとつ修正し、デザイナーさんに共有する過程を繰り返すことで、少しずつデザインの精度が上がっていくはずです。PCだけでもエクスポートできたら、フロントエンドエンジニアとしては相当な省エネ化ができるのではないでしょうか。

近頃のAI界隈を見ていると、ChatGPTの発達など、進化の速度が著しいと感じます。今回ご紹介したAnima以外にも、効率的なコーディング短縮ツールが登場するかもしれません。マークアップが自動化する日も近いのではないでしょうか。

Web制作なら株式会社GIG

今回の勉強会では「コーディング短縮ツール nima」をテーマに、受託開発チームの清水僚太さんに詳しくお話いただきました。

株式会社GIGは、Web制作、Webマーケティング、コンテンツ制作、サービス開発など、Web戦略をトータルで支援するデジタルコンサルティング企業です。ノーコードで使える・マーケティングに強いWeb制作ツール『LeadGrid』も展開中です。Web制作のご相談はお気軽にお問い合わせください。

■株式会社GIG
お仕事のお問い合わせはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

■Webサイト制作事例
Chatwork - サービスサイト制作 / マーケティング支援
ミクシィ - コーポレートサイト制作 / デザイン・保守運用
SmartNews - サービスサイト制作 / マーケティング支援

北村 有（ゆうゆう）

フリーライター。株式会社GIG メディア事業部所属、広報担当。 休日は映画やドラマを見たり、美味しいスイーツを求めて街をさまよったりしています。