どうもうめぼしめがねです。
Web系の就活をしていると、ポートフォリオの提出を求められることが多いです。
その時に自分の力量をアピールするための作品集に、制作したWebサイトのスクショを載せたいと思うことがあると思います。
非常に簡単なのでぜひ覚えておきましょう。
ブラウザはChromeを使用しております。
ちなみに今回目指してるものがこちら。
これは僕がポートフォリオ用に制作した架空の英会話教室のウェブサイトです。
ではさっそくやり方を紹介します。
ウェブサイト全体のスクリーンショットを撮る方法
①スクショを取得したいWebサイトを開きます。
②F12キーか、”Ctrl+Shift+I”を押してデベロッパーツールを開きます。
③その状態で”Ctrl+Shift+I”を押します。
④入力画面に”full”と入力します。
⑤(スライドがある場合は)任意のタイミングでEnterを押します。
これでウェブサイト全体の縦長のスクリーンショットが撮影できました。
詳しいやり方は以下で紹介します。
縦長のスクショを正方形にトリミングする方法
余談ですが、サムネイルにするなら長方形の画像も必要になるかと思いますので、
一緒に紹介いたします。
①先ほど取得したスクショをフォトアプリで開きます。
②上部にあるトリミングを選択します。
③右側の、”縦横比：カスタム”となっているところを選択します。
④正方形を選択する。
⑤任意の位置に移動して、コピーを保存する。
以上です。
お疲れさまでした。
※この方法ではgoogle mapはなぜか表示できなかってので、
Photoshopで合成してます。
