html.to.designの設定を使って既存サイトを取り込む際に確認していること
はじめに
既存サイトをリデザインする際、最初にページの構造をFigma上で把握しておくとその後の検討が進めやすくなります。ただし、1ページを手作業で再現するには時間がかかりレイアウトの特徴やスタイルの傾向を見落とすこともあります。
そのため今回、html.to.design を使い既存サイトを効率的にインポートしながらどの設定がリデザインの作業に向いているかを確認しました。設定によって取り込み後の扱いやすさが大きく変わるため、用途に合わせて適切に選ぶことが重要でした。
設定ごとの挙動と使いどころ
各設定を個別にオン・オフしながら検証し取り込み後の編集しやすさを中心に整理しています。
Use Autolayout（オートレイアウトを自動適用）
オートレイアウトを自動で適用する設定です。
インポート直後から編集しやすいケースもありますが、複雑なレイアウトの場合は意図しない崩れが発生することがありました。
- レイアウト構造をそのまま把握したい場合はオフ
- 取り込み後すぐに調整を進めたい場合はオン
構造の確認を優先する段階ではオフの方が扱いやすい印象です。
Create local styles & variables（ローカルスタイルと変数を生成）
ページ内のテキストやカラーをローカルスタイルとして生成します。
既存サイトのスタイル傾向を把握する際には有効ですが、不要なスタイルが増える可能性もあります。
- デザイン刷新に向けて既存の色・タイポグラフィを整理したい場合
- ブランディングの方向性を検討するための下地を作りたい場合
こうした場面ではオンにしておくと役立ちます。
Use existing local styles（既存のローカルスタイルを使用）
既にFigmaファイル内にあるスタイルと共通化する設定です。
ベースのデザインシステムが整っている場合は統一性が保てますが、既存ページの要素を正確に把握したい段階では不要なことが多いです。
リデザイン前の調査ではオフにしています。
For hover effects（ホバー状態も反映）
ホバー時の状態や UI の変化を反映します。
ボタンやナビゲーションなど、状態を正確に確認したい時には便利です。ただし、取り込み後の構造整理が複雑になることもあるため、必要に応じて選択しています。
High-res images（高解像度画像の読み込み）
ページ内の画像を高解像度で取り込む設定です。
主に視覚的な検証や、素材としてそのまま活用したい場合に有効です。
今回の検証では使用していませんが、画像の劣化を避けたいプロジェクトや、写真やビジュアル要素の印象を細かく確認したいケースでは役立つ場面がありそうです。
Add hyperlinks（リンク情報を保持）
取り込んだ要素にリンク情報を保持する設定です。
既存サイトの動線やページ構造を把握する際には役に立ちます。
リニューアルプロジェクトではオンにすることが多い設定です。
Automatically use this config for this domain（このドメインの読み込み時に設定を自動適用）
同じドメインのページを複数取り込む際に、毎回同じ設定を使いたい場合に有効な項目です。
一度選んだ読み込み設定を次回以降も自動で適用してくれるため、ページ数が多いサイトでは操作の手間を減らせます。
一方で、今回の検証ではページごとに大きく設定を変える必要もなく、毎回設定を選び直す手間もそれほど負担ではなかったためこの項目は有効にせず運用しました。
よく使う組み合わせ
リデザインの初期段階で扱いやすかったのは次の構成でした。
- Use Autolayout → オフ
- Create local styles & variables → オン
- Use existing local styles → オフ
- For hover effects → 必要に応じてオン
- High-res images → オフ（今回は使用せず）
- Add hyperlinks → オン
- Automatically use this config for this domain → オフ
構造の把握と動線の理解を優先し編集作業はその後へ回す流れが作りやすくなります。
おわりに
html.to.design の設定は、単純にページを再現するだけでなくリデザインの作業に進むための下地をどのように作るかによって使い方が変わります。
目的に合わせて必要な設定を絞ることで取り込み後の作業を無理なく進められると感じました。
既存サイトの構造把握を効率化したい場面で今回の検証が参考になれば幸いです。