Arkhe公式サイトで使用事例をいくつか公開したんですが、各サイトの様子をデスクトップ風・スマホ風に表示して並べて掲載してみました。
この時に、各サイトのスクリーンショット画像をどうやって撮るか？ってことに少し悩んだので、手順をメモっておきます。
今回のスクショ手順
Chromeでのデベロッパーツールを使ってスマホサイズでプレビューしたりするやつありますよね。
あのプレビューサイズ、実は自分で定義できるようにもなっているので、そこでスクショ用サイズを定義しちゃいます。
自分は desktop → 1920 : 1080、mobile → 400 : 720 サイズ で定義しました。
↓
↓
「デバイスのピクセル比」を1にしておくとそのままのサイズでスクショが取れる。
（サイズダウンの処理を後からしなくてよい）
これは任意の方法で。先に画像編集して作ってもいいし、CSSで表現してもいいでしょう。
CSS知りたい方はArkheサイトからデベロッパーツールで調べてください（今後Arkheのライブラリサイトで配布予定）
ベストプラクティスあるぜ！って方はぜひコメントで教えてください…！
その他のやり方
比率固定でスクショできるアプリを使う
SWELLでもサイトをいくつか載せさせていただいているのですが、そのときはKapというアプリを使ってました。
Kapは比率を 16:9 に固定したり、好きなサイズで指定して画面の任意のエリアをスクショ・録画できる無料の神アプリです。
という感じ。
ただ、なぜか自分のKapが使えなくなってしまって再インストールもできない状態になってしまったため、SWELLの時と同じことができなくなってしまいました。
今は CleanShot X という類似の有料アプリを使ってるのですが、動画は同様のことができるんですが、なぜか画像のスクショに関してはKapと同じことができなかったんですよね…。（やり方分からなかっただけでできるかも）
→ 「All in One」という項目を選択すると、Kapと同じようなことができました！
ラッコツールさんを使う
WebスクリーンショットURLからキャプチャ画像生成 というサイトで、URL入力するだけでスクショ取ってきてくれる。
（たまに使えないサイトがあった）