今回は「Elementor模写の手順」について解説していきます！
Webサイトの模写を行うことで、実際に動作しているWebサイトを自分の手で再現し、デザインや構成も学ぶことができます。
模写の手順
ElementorでWebサイトの模写を行う手順は以下のステップです。
- 模写サイトを探す
- スクリーンショットを撮る
- ピクセル数を計測
- テキスト情報を抽出する
- 画像を抽出する
- ３～５で情報を取得して、Elementor構築を行う
ステップ毎に手順を説明していきます！
①模写サイトを探す
まずは、模写を行うWebサイトの目的や範囲を決めていきます。模写するWebサイトが何を目的としているのか、どの程度のレベルで行うのかを決めておくことが重要です。Elementor初心者の方は、まずはElementorで作成されているサイトを探しましょう！
②スクリーンショットを撮る
模写を行うWebサイトを決めたら、Webサイトのスクリーンショットを撮ります。スクリーンショットを撮ることで、サイトの全体像を把握できるだけでなく、ピクセル数を測ることができます。ここでは、Googleの拡張機能の「GoFullPage」を使用していきます。（導入方法はこちらの記事で紹介しています。）
- Google Chromeの右上にある「拡張機能」から「GoFullPage」を選択します。
- スクリーンショットの作成が終了すると、右上のメニューが表示されます。メニューから、スクリーンショットの保存形式（画像ファイル）を選択して、ダウンロードします。
- 次に、レスポンシブ画面のスクリーンショットを撮ります。ディベロッパーツールを開き、スマホサイズにした状態で１～２の手順を行うことで、レスポンシブ画面のスクリーンショットを保存することができます。
③ピクセル数を計測
続いて、取得したスクリーンショットから、Webサイトのピクセル数を取得して各所の長さを測ります。ここでは、Windowsの「ペイント3D」を使用して、模写サイトのピクセル数を取得していきます。
- Windowsの検索バーから「ペイント3D」と入力し、ペイント3Dを起動します。
- ペイント3Dを開いたら、手順②で取得したスクリーンショットを選択し、「開く」をクリックします。
- スクリーンショットがペイント3Dに読み込まれたら、左上の「選択」をクリックします。
- スクリーンショット上でピクセル数を測定したい範囲をドラッグし、選択範囲を作成すると、ピクセル数を確認することができます。
④テキスト情報を抽出
続いて、Webサイト内のテキストの情報を取得していきます。ここでは、Googleの拡張機能の「WhatFont」を使用していきます。（導入方法はこちらの記事で紹介しています。）
- Google Chromeの右上にある「拡張機能」から「WhatFont」を選択します。
- Webページ上で、特定したいフォントをクリックします。
- フォントの情報がポップアップ画面に表示されます。
- ポップアップ画面から、フォントの詳細情報を確認することができます。
⑤画像を抽出
続いて、Webサイトのテキストの情報を取得していきます。ここでは、Googleの拡張機能の「Image Downloader」を使用していきます。（導入方法はこちらの記事で紹介しています。）
- Google Chromeの右上にある「拡張機能」から「Image Downloder」を選択します。
- 画像の情報がポップアップ画面に表示されます。
- ポップアップ画面から、ダウンロードする画像を選択し、ダウンロードボタンをクリックすることで画像をダウンロードすることができます。
⑥Elementor構築を行う
③～⑤で取得した情報を元に、Elementor構築を行っていきます！
以上が、Elementorを使用して他のサイトを模写する手順です。Webサイトの模写によって、学んだ知識を定着させることができます。模写をすることで、理解が深まり、応用力を高めることができるので、ぜひ挑戦してみて下さい！
