上記のように考えている方は、Figmaのプラグインである「html.to.design」が役立つかもしれません。html.to.designを使うと、WebサイトのデータをFigmaで編集できるデザインデータへ変換できます。
本記事ではFigmaプラグイン「html.to.design」の特徴と使い方について詳しく解説します。
html.to.designとは
html.to.designはWebサイトをFigmaの編集可能なデザインに変換するツールです。このプラグインを使うことでWebサイト上のデザイン要素を素早く取り出し、Figmaで編集可能な形式に変換できます。
たとえば退社やトラブルなどでデザインカンプの引継ぎがうまいくかなかったときや、以前のデザインカンプがFigma以外で作られていた時などに役立ちます。
また、複数のビューポートに対応しており、デスクトップ画面からスマホ画面までデバイスごとのデザインを生成できるのが魅力です。
html.to.designの料金プラン
| プラン | 料金 | 詳細 |
|---|---|---|
| FREE | 無料 |
|
| プロ | 月額18ドル |
|
FREEプランでも毎月10件のWebサイトをインポート可能。Google拡張機能も提供しており、手軽に利用できるのが魅力です。
html.to.designの使い方
はじめにFigmaへアクセスします。
Figma公式URL: https://www.figma.com
html.to.designより
自身のアカウントページ下部にある「コミュニティを見る」をクリックします。
html.to.designより
コミュニティ欄の検索欄へ「html.to.design」と入力し、該当する上記のプラグインをクリックしてください。
html.to.designより
html.to.designのトップ画面が表示されます。右下にある「場所を指定して開く」をクリックし、任意のファイルを選択します。
html.to.designより
html.to.designの画面が表示されるので「実行」をクリックしましょう。
html.to.designより
すると、Figmaのデザインへ変更したいWebサイトのURL入力画面が表示されます。任意のURLを入力してimportボタンをクリックしてください。
今回はテストとして本メディア「trends（トレンズ）」のURLを入力します。
html.to.designより
しばらくすると、URL元を忠実に再現したデザインがFigmaのデザインボードへ作成されました。
html.to.designより
URL先のHTMLデータを基に再現しているようで、スクリーンショットのような1枚の画像ではなくテキストと画像を別のオブジェクトとして認識できるのが魅力です。
html.to.designより
上記のようなグラデーションカラーにおいても、どのようなカラーコードが採用されているのか確認できます。
html.to.designより
ヘッダーからフッターまで詳細に再現されており、テキストの内容も間違えが見当たりません。
html.to.designより
デザイン上の画像を選択してエクスポートすることも可能。Webサイトをデザインデータにする機会は珍しいですが、デザインカンプの引継ぎがうまくできなかったときなどに役立ちそうですね。
html.to.designはGoogle拡張機能でも利用できる
html.to.designより
html.to.designはGoogle拡張機能でも利用可能。下記のURLからアクセスできます。
html.to.designのGoogle拡張機能: https://chromewebstore.google.com/detail/htmltodesign/ldnheaepmnmbjjjahokphckbpgciiaed
html.to.designより
ビューポートを設定できるので、スマホ画面のデザイン化も対応可能です。
html.to.designより
Google拡張機能でデザイン化した内容は、h2dデータとしてダウンロードされます。
ダウンロードされたデータを反映させる方法は下記の手順です。
- デザインを反映させたいFigmaファイル開く
- html.to.designプラグインを実行
- 「Drag-and-drop your .h2d files」欄へデータをドラッグ＆ドロップ
あらかじめGoogle拡張機能を追加しておくことで、Webサイトをスムーズにデザイン化できます。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
パソコンのキーボード操作一覧表【Windows編】
FeloとCanvaが連携！数分で高品質プレゼンを作成・編集可能に。具体的な使い方を詳しく解説
テキストを音声化できるスマホアプリ「Reader by ElevenLabs」を使ってみた。
ポータブルAIボイスレコーダー「PLAUD NotePin」の評判は？具体的な機能やPLAUD Noteとの違い
停滞する日本経済とIT後進国の現実。IT技術の理解から始まるAI活用の可能性
