ブラシで描いて前面オブジェクトで型抜きができないの対処法
hirotomo
さんくすデザイン
Webサイト模写に最低限必要なgoogle拡張機能
hirotomo
webデザイン上達に必要だと言われる「 webサイト模写」。
模写といってもwebサイトのスクリーンピクチャーや画像が必要だったりします。
そのために必要な最低最小限必要なgoogleChrome拡張機能をご紹介します。
Contents
スポンサーリンク
Chrome拡張機能
まず拡張機能をゲットするために、webストアにアクセスします。
他には、お開きのChromeブラウザの右上にその他アイコン「
」がある場合は、そちらから [その他のツール] 
[拡張機能] で入ることができます。
左上の「ストアを検索」で必要な拡張機能を探すことができます。
あわせて読みたい
SVG画像をChrome検証ツールで自分のPCに保存する
おすすめの拡張機能
以下におすすめの拡張機能をご紹介します。
Window Resizer
Window Resizer
まずは見ているサイトを任意の大きさにリサイズできる拡張機能です。
上の画像右下にある青いボタンをクリックすると、拡張機能を追加することができます。
ブラウザのアドレスバーの右にパズルのピースのような形の拡張機能のアイコンがあると思います。
それをクリックするとダウンロードした拡張機能一覧が見れるので、ピンマークをクリックしてアドレスバーの横にいつでも使えるようにピン留めしておきます。
そうしてダンロードしたWindows Resizerのアイコンをクリックすると、任意のサイズに画面をリサイズすることができます。
awesome screenshot
この拡張機能は「素晴らしいChatGPTスクリーンショット＆録画」という名前で拡張機能が表示されているのですが、screenshotと検索しても出てきます。
素晴らしいChatGPTスクリーンショット＆録画
スクリーンショットを撮らないと模写できないですよね。この拡張機能はとても簡単にフルページのスクリーンショットを撮ることができます。
拡張機能アイコンをクリックすると、表示部分かフルページかなどキャプチャする場所を任意に選択できるので、 フルページでキャプチャしてダウンロードします。
Image Downloader
３つめの拡張機能です。
Image Downloader
サイトの画像をダウンロードして、模写しながら同様に画像を配置することができます。
著作権の問題がありますので、ローカルで作業するときに使用します。
本当に最低限になりますが、これだけで模写することができます。
私は検証ツールで確認しながら、この３つの拡張機能で模写しています。
あわせて読みたい
jsとsassで文字を一文字ずつ表示させる
参考サイト
参考サイトはいくつもありますが、i/O 3000はさまざまなサイトが一覧になっていてとても見やすいです。
ここから気になったサイトをピックアップして、ここはこうしているのかと考えながらひたすら模写していきます。
私が最近模写したサイトはこちらです。
1440pxにリサイズしてアートボードの横に並べ、実際のサイトを確認しながら模写していきます。
模写をするだけでなく、並行してアウトプット。
同じように内容だけ変えたり、フォントを変えたり。
実践しないとなかなか身につかないと実感しています。
スポンサーリンク
ABOUT ME
横浜市を中心に、個人でチラシやリーフレット・名刺制作などを小さくしています。
人生には感謝がいっぱいなので、感謝を返していきたい、そんな思いから「さんくすデザイン」という名前にしました。
わたしは独学から始まったので、同じようにデザインを独学するみなさんを応援します。
デザインとは関係ないお話も気軽に投稿しています。どうぞよろしくお願いいたします。
