今回は「Elementor模写の手順 ～活用ツール～」について解説していきます！
模写を行うためには、Webサイトの様々なデザイン情報を知る必要があります。そこで、Webサイトのデザイン情報を簡単に取得することができる、Googleの拡張機能を活用していきます。
ColorPick Eyedropper
Colorpick Eyedropper はGoogleの拡張機能で、Webページ上の色を簡単に取得できるツールです。
導入手順
- Google Chromeを開き、Chrome Web Storeにアクセスします。
- 検索バーに「ColorPick Eyedropper」と入力して、拡張機能を選択します。
- 「Chromeに追加」ボタンをクリックすることで、導入が完了です。
利用手順
- Google Chromeで模写を行うサイトにアクセスします。
- Google Chromeの右上にある「拡張機能」から「ColorPick Eyedropper」を選択します。
- Webページ上で、取得したい色をクリックすると、ポップアップ画面に選択した色の情報が表示されます。
- 表示されたポップアップ画面から、カラーコードをコピーすることができます！
What Font
WhatFontはGoogleの拡張機能で、Webページ上で使用されているフォントを簡単に特定することができるツールです。
導入手順は ColorPick Eyedropper と同様です。
利用手順
- Google Chromeで模写を行うサイトにアクセスします。
- Google Chromeの右上にある「拡張機能」から「WhatFont」を選択します。
- Webページ上で、特定したいフォントをクリックします。
- フォントの情報がポップアップ画面に表示されます。
- ポップアップ画面から、フォントの詳細情報を確認することができます！
Image Downloader
Image DownloaderはGoogleの拡張機能で、Webページ上に表示されている画像を簡単にダウンロードすることができるツールです。
導入手順は ColorPick Eyedropper と同様です。
利用手順
- Google Chromeで模写を行うサイトにアクセスします。
- Google Chromeの右上にある「拡張機能」から「Image Downloder」を選択します。
- 画像の情報がポップアップ画面に表示されます。
- ポップアップ画面から、ダウンロードする画像を選択し、ダウンロードボタンをクリックすることで画像をダウンロードすることができます。
GoFullPage
GoFullPageはGoogleの拡張機能で、Webページ全体をスクリーンショットとして撮影し、PDFファイルや画像ファイルとして保存することができるツールです。
導入手順は ColorPick Eyedropper と同様です。
利用手順
- Google Chromeで模写を行うサイトにアクセスします。
- Google Chromeの右上にある「拡張機能」から「GoFullPage」を選択します。
- スクリーンショットの作成が終了すると、右上のメニューが表示されます。メニューから、スクリーンショットの保存形式（PDFファイルまたは画像ファイル）を選択して、ダウンロードすることができます！
- また、ディベロッパーツールを開き、スマホサイズにした状態でGoFullPageを使用すると、レスポンシブ画面のスクリーンショットも保存することができます。
これでツールの準備が整いましたので、これらのツールを用いて模写を始めていきましょう！
