html.to.designの使い方。どんなHPでも一発でFigmaのデータに変換できます!

   web入門, 初心者のためのHTMLとcss| 

こんにちは、webの森のモモンガです。
最近youtubeチャンネルで、Figmaについての動画を作っています。
今回、めちゃめちゃ便利なプラグイン「html.to.design」を紹介したので、動画で使い方をご覧ください。

00:52 – ❶html.to.designの紹介

html.to.designは、フィグマの プラグインですが、すでに公開されている ホームページのデザインをそっくりFigmaに持ってくることができます。
試してみたのですがものすごく簡単で便利で びっくりしました!

02:13 – ❷有料プランとの違い

2023年9月現在の情報になりますが、無料では30日ごとに10件までインポートできると書いてあります。
公式サイトはこちらです。

>Figmaのコミュニティ
html.to.designの公式サイト
>html.to.designのマニュアル

03:29 – ❸プラグインの使い方

プラグインの使い方は簡単で、Figma上から呼び出したら、URLのところにインポートしたいページのURLを入れて実行するだけで、そのページがまるっとFigmaのデータに変換されて、テキストと画像と、HTMLコードに変換されます。cssもそっくりもらってくることができます。

05:23 – ❹開発モードで調べる方法

右上の開発モードをonにすると、インスペクタが出てくるのでそこから、cssやコードを調べることができます。
めちゃめちゃ便利です!

html.to.designが何に使えるか

08:38 – メリット1/これをもとにリニューアルデザインを作る

動画の上でも紹介していますが、Wireboxというプラグインを実行すると、一発でワイヤーフレームに変換できてしまいます。
見本にしたいサイトの良いとこ取りをしながら、新企画を考えるのにぴったりですね!

 

08:50 – メリット2/リニューアル前のサイトのバックアップ

リニューアルする時って、サイトのバックアップを取りたいですよね。
今までは見た目のバックアップは、プラグインで画面を長く全画面スクショできるブラウザのプラグインで行い、テキストデータなどは、右クリックで名前をつけて保存、をしていました。

それが、このプラグインhtml.to.designを使えば両方がボタン一発でできてしまいます。(1ページごとに少し時間がかかります)
しかも、スタイルシートや、HTML構造まで全部保存できます。
自分が作ったサイトじゃない旧サイトをバックアップするのにも役立ちます。

09:09 – メリット3/要素やコードの調査をする

カートシステムをレンタルしていて、そのサービスのテンプレートなどをカスタマイズしたい時、テンプレートですので、ものすごくたくさんのクラス名が使われていたり、切り替えポイントがたくさんあったり、cssもどれが適用されているのか?わからなかったり、どんな階層構造になってるのか調査するのは結構大変です。
特に自分が作ったサイトではない場合、本当に時間がかかる作業です。
これがFigma上で分析できるのはものすごいメリットだと思います。

10:09 – メリット4/指示書を作る時に使える

取得したページに、Figma上で指示を入れて、指示書を作るのに便利そうです。

10:29 – メリット5/もちろんプレゼンにも便利

Figma本来の使い方としては、このFigma上にクライアント様や、共同作業をする人を招待して、リアルタイムで変更をかけながら、コメントを入れたり、修正して仕上げていくのが、本当のFigmaの狙いだと思います。
わかってはいるのですが、私の周りのアナログな方々をそんなところに招待しても、招待メールを見ただけで涙目になってしまう方が多そうです。
実際のテストサイトをお見せしたとしても、確認するためにどこをクリックしたら良いか、さえわからない場合もありますので
そんな時に一番役立つのが、見た目を整えて、PDFで印刷できる形での確認です。
Figmaなら、スマホサイトも見た目しっかりと取得してくれるので、それが可能です 🙂 

 

   web入門, 初心者のためのHTMLとcss| 

  関連記事

WordPressの2段階認証が失敗する場合

WordPressのセキュリティを上げるために、2段階認証を導入しましたが、 よくご質問を受ける失敗 ≫続きを読む

【Q】リアル店舗もってるネットショップは、Googleマイビジネス(マップ)の登録が必須だと聞きました。どうすればいいのでしょう?

地域名 + サービス名で検索してみてください まずは試してみてください。Googleで「駒ヶ根市 税 ≫続きを読む

同じ部屋の別のWindows10とフォルダを共有したい場合

今回ものすごく苦労して、パソコンの先生に教わりながら設定したのですが、いろいろ備忘録しておきます。( ≫続きを読む

画像のファイルサイズ、小さくしていますか?

webの森からお客様にウェブサイトを納品した後、お客様ご自身で更新している場合、画像の容量のことを考 ≫続きを読む

【フィッシング詐欺】メールアドレスを確認してください 現在のパスワードを保持

今朝、ベッドの中でぼーっとスマホをいじっていて、このメールを開いたとたん、「何だっけ、Googleが ≫続きを読む

長野ADC主催のデザイン会議

昨日は長野ADC主催のデザイン会議に出てきました。会場が素敵で、古い酒蔵をくつろぎスペースに改造・再 ≫続きを読む

no image
[リクルートID]定期ニュースの停止

[リクルートID]定期ニュースの停止ができずイライラマックス!   ポンパレで一度買い物しただけなの ≫続きを読む

千畳敷カールで2612体験してきました

10月3日、下界はまだ夏のなごりが残る初秋。この日、中央アルプス駒ケ岳ロープウェイにのって、2612 ≫続きを読む

画像が表示されないと困ったら(HTML初心者の方へ)

「画像が表示されません!どうして???」HTML初心者の方によく質問をされるんですが、いくつか理由が ≫続きを読む

ネットショップ経営者のための売上向上セミナー(松本)

8月に開かれた長野県主催のネットショップ店長さん向けセミナーですが、9月は松本市で開かれます。興味の ≫続きを読む

▲ページ先頭へ