ウェブサイトをコピーする方法：デザインの複製と利用

ウェブサイトのコピーをコンピュータに保存したいですか？ウェブサイトを丸ごとダウンロードして保存したい場合も、ウェブページをテンプレートとして使ってみたい場合も、ウェブサイトのコピーは思ったより簡単です！このWikiHowでは、WebサイトのクローンをPCやMacにダウンロードする2つの簡単な方法と、HTMLとCSSだけをコピーして自分のコードに使用する方法をご紹介します。

知っておくべきこと

• ウェブサイトからコードをコピーすることで、既存のウェブデザインを自分のサイトのテンプレートとして使うことができます。これは、初心者のコーダーにとって一般的な方法です。
• ウェブサイト全体をクローンするには、PC上でHTTrackのようなウェブサイトコピーツールを使用します。
• ウェブサイトの構造の大部分をコピーすることはできますが、複雑なコードのため、パソコン上で同じように見えないことがあります。
• 開発者がお互いのコードを試してみるのはよくあることですが、自分のサイトを公開する際には、決してコンテンツを盗用しないでください。

方法1

Chrome デベロッパー ツールを使用してコードをコピーする（デバイスを問わず）

1. Google Chromeでクローンしたいウェブサイトにアクセスします。ウェブサイト全体とそのサブフォルダをダウンロードせずにウェブサイトのコードをコピーしたい場合は、Google Chromeウェブブラウザで簡単にできます。

   • この方法は、HTMLとCSSに慣れていて、ウェブサイトのすべてのコンテンツをアーカイブするのではなく、コードだけに関心がある場合に最適です。サイトのHTMLとリンクされたCSSファイルをコピーして、自分のコンピューターにローカルコピーを作成することもできるが、壊れた参照を修正するためにコードを少し修正する必要があるかもしれない。
   • 法的な理由から、他のデザイナーのウェブサイトをそっくりそのまま複製することは避けたいでしょうが、既存のHTMLや他のサイトのものを自分のコードに組み込んでも問題はありません。
2. ページを右クリックし、Inspectを選択します。Chromeのデベロッパーツールが開き、スタイルシートやウェブページ全体のコードを表示できます。
3. 要素ピッカーをオンにします。右側のパネルの上部に、右下に矢印が付いた正方形のアイコンが表示されます。このアイコンがグレーの場合は、クリックして青にします。これで、ページ上の特定の要素を選択できるようになります。ページをスクロールすると、各要素が青くハイライトされ、その要素の基本的なプロパティが表示されます。
4. 要素をクリックすると、基本的なプロパティが表示されます。ページの領域をクリックすると、右側のパネルにコードが表示され、テキストカラー、フォント情報、アクセシビリティ情報などの基本的なスタイル情報が表示されます。

   • スクロールしていくと、エレメントピッカーでポイントしている場所を反映して、右パネルのコードも変化していくのがわかります。
5. 右上の3つの点をクリックし、「ファイルを開く」を選択します。あるいは、PCではCtrl + P、MacではCmd + Pをクリックすることもできます。サイトのindex.htmlやstyles.cssなど、現在のページにリンクしているファイルのリストが表示されます。
6. indexファイルをクリックします。indexまたはindex.htmlと呼ばれるファイルを探します。ウィンドウの右上に、今見ているページのコードが表示されます。
7. コードをコピーしてテキストエディタに貼り付けます。コードを手に入れたら、「索引」ウィンドウでそのコードをハイライトし、ハイライトした部分を右クリックして「コピー」を選択すれば、クリップボードにコピーできます。

   • 長いページのコードは、コードを含むボックス内をクリックし、Ctrl + A（PC）またはCmd + A（Mac）を押して、すべてのコードを一度に選択します。次に、選択した部分を右クリックし、コピーを選択します。
   • コードをコピーしたら、メモ帳やテキストエディットのようなアプリで、コンピュータ上の新しいテキストファイルに貼り付け、拡張子を.htmlにして保存します。
8. CSSファイルをコピーする。CSSコードをインデックス・ファイル自体に組み込んでいるウェブサイトもあれば、レイアウト、スタイル、フォーマットのコードを1つまたは複数のCSSファイルに分けているウェブサイトもあります。そのコードをコピーするのは簡単です：

   • 右上の3つの点をクリックし、ファイルを開くを選択します。
   • styles.cssやdefault.cssなど、末尾が.cssで終わるファイルを探します-コピーしたインデックスページは、レイアウトとスタイルをこれらのCSSファイルのコードに依存しています。
   • ファイルを選択し、コピーしてコンピュータ上の新しいテキストファイルに貼り付けます。ダウンロードしたインデックス・ページがそのファイルを参照する方法を知っているように、必ず本番のウェブサイトに表示されるのと同じ名前を付けてください。
   • さらに、CSSファイルのあるディレクトリにも注意してください。ウェブサイトをオンラインで表示されているのとまったく同じように表示したい場合は、リモートサイトのファイル構造を真似るか、サイトがCSSファイルを参照する方法を知っているようにする必要があります。

方法2

SiteSuckerを使ってサイトをクローンする (Mac OS)

1. Mac App StoreからSiteSuckerをダウンロードします。SiteSuckerは、ウェブサイトの完全なコピーを簡単にダウンロードできるMacアプリです。このアプリは無料ではありませんが、その利便性のために少額の料金を払う価値があるかもしれません。.NETからダウンロードできます。

   • SiteSuckerは一般的にウェブサイトのJavaScriptを無視するので、JavaScriptに依存しているサイトはダウンロード後に同じように見えないかもしれない。しかし、HTMLとJavaScriptを知っていれば、壊れたレイアウトや参照を修正できるかもしれない。
2. SiteSuckerを開き、コピーしたいウェブサイトのURLを入力します。SiteSuckerのデフォルト設定では、ウェブサイトのすべてのページがあなたのコンピュータにダウンロードされます。SiteSuckerはすべてのリンクをたどりますが、同じWebサーバーからしかファイルをダウンロードしません。
3. SiteSuckerを開き、設定をクリックします。ここでカスタムオプションを設定することができます。例えば、サイトをMacに保存するフォルダ、ダウンロードの制限、無視するファイルの種類などです。

   • 保存先フォルダを選ぶには、Generalタブの下のメニューから場所を選んでください。
   • 大きなサイトをダウンロードしていて、ハードドライブをいっぱいにしたくない場合は、[制限] をクリックして、ディレクトリレベルの最大数、ファイル数、ファイルサイズなどの制限を設定できます。
   • ファイルの種類]タブをクリックして、ダウンロードするファイルの種類と無視するファイルの種類を選択します。例えば、画像をダウンロードしたくない場合は、「画像」オプションのチェックを外すことができます。
   • 上級者はSiteSuckerの設定を調整できますが、ウェブサイトをコピーするだけなら何も変更する心配はありません。
   • 終わったらOKをクリックしてください。
4. ダウンロードボタンをクリックすると、ウェブサイトの保存が始まります。SiteSuckerはウェブサイトからすべてのコンテンツをダウンロードし始めます。SiteSuckerのウィンドウの下の方で進行状況を見ることができます。

   • ログインにユーザ名とパスワードが必要な場合は、プロンプトが表示されたら入力してください。デフォルトでは、SiteSuckerはまずKeychainをチェックし、ログイン情報がすでに保存されているかどうかを確認します。もし保存されていなければ、手動で入力する必要があります。
5. ダウンロード完了後、コピーしたウェブサイトを見る。サイトのダウンロードが完了したら、オンラインと同じようにオフラインで見ることができます。SiteSuckerはページをローカライズし、元のオンラインアドレスではなく、ダウンロードしたファイルを指すようにします。これにより、インターネットに接続しなくてもサイト全体を見ることができます。

   • ログボタンをクリックすると、ダウンロードできなかったファイルなどのエラーをチェックできます。

方法3

HTTrack を使用してサイトをクローンする（Windows または Linux）

1. HTTrack をダウンロードしてインストールします。WindowsまたはLinuxシステムで、サイト全体、またはサイトの多くのページを一度にコピーしたい場合は、自動サイトダウンローダーの助けが必要です。人気のあるウェブサイト・コピーのひとつに、WindowsとLinuxで利用可能なオープン・ソース・プログラム、HTTrackがある。このプログラムは、サイト全体、あるいはインターネット全体をコピーすることができる！.NETからHTTrackをダウンロードする。

   • ウェブサイトの構造の大部分をダウンロードすることはできるが、ダウンロードされたファイルがまったく同じに見えるとは限らない。最近のウェブサイトの多くは、サイトレイアウトを向上させるために精巧なコードを使用しており、このコードはコンピュータに保存されたときに正しくダウンロードされなかったり、実装されなかったりすることがあります。
2. HTTrack を開き、Next をクリックします。HTTrack には簡単なウィザードがあり、ウェブサイトをダウンロードする手順を説明します。
3. プロジェクトを作成し、Nextをクリックします。まず、ダウンロードするサイトの名前など、プロジェクトの名前を入力します。次に、ダウンロードしたファイルを保存するコンピュータ上のフォルダを選択します。

   • デフォルトのダウンロード先のままにしておくと、 HTTrack はその場所にプロジェクト名の新しいフォルダを作成し、その新しいフォルダに Web サイトを保存します。
4. ドロップダウンメニューから Download web site(s) を選択します。これにより HTTrack は、画像やその他のファイルを含む、ウェブサイトの全コンテンツを確実にダウンロードします。

   • ストリーミングビデオなど、一部のファイルはダウンロードされません。
5. コピーしたいアドレスを入力します。同じプロジェクトディレクトリ内の複数のサイトをコピーしたい場合は、複数のウェブサイトを入力することができます。デフォルトでは、HTTPSrackは同じウェブサーバー上にあるウェブサイトから可能な限りのリンクを取得します。

   • コピーしたいウェブサイトにログインが必要な場合は、"Add URL "ボタンでウェブサイトのアドレスとユーザー名、パスワードを入力してください。
   • オプションの設定...」ボタンをクリックすると、除外する特定のファイルタイプや拡張子を選択できる「スキャンルール」などの詳細オプションを設定できます。また、最大ダウンロード レートや合計最大ダウンロード サイズなどの制限を設定することもできます。
6. 次へ] をクリックし、[完了] をクリックしてダウンロードを開始します。URLを入力したら、コピープロセスを開始できます。ウェブサイトのサイズによっては、ダウンロード処理にかなりの時間と帯域幅を要する場合があります。HTTPSrackは、コンピュータにコピーしているすべてのファイルの進行状況を表示します。
7. コピーしたウェブサイトをチェックするダウンロードが完了したら、コピーしたウェブサイトを開き、コンピューターから直接閲覧することができます。HTMまたはHTMLファイルをウェブブラウザで開くと、オンラインと同じようにページを表示できます。ファイルはデフォルトでローカライズされているため、リンクはウェブサイトではなく、ダウンロードしたファイルを指しています。

   • また、これらのファイルをウェブページやテキストエディタで開くこともできます。
   • ログファイルの表示]をクリックすると、取得できなかったファイルなどのエラーをチェックできます。

この記事は、" How to Copy a Website： この記事は、CC BY-NC-SAの下で公開された「How to Copy Website: Cloning & Using Designs as a Template 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。