WebDesigner's Memorandumウェブデザイナーの備忘録

Xnapperを使って、他人に共有するときに見栄えの良いスクリーンショット画像を作成する

Xnapperで共有用のキレイなスクリーンショット画像を作成する

スクリーンショットを撮ってSNSなどにシェアしたい場合に、ただ撮るだけでなく、シャドウを調整したり、背景に色がついていると見栄えが良くなります。

最近「Xnapper」というアプリを見つけて、これを使うとスクリーンショットを撮影してその場で簡単な調整ができます。

Xnapper

Xnapper

Xnapperは撮影したスクリーンショットを見栄え良く編集できるアプリです。
読み方は「snapper(スナッパー)」と同じような読み方だそうです。

編集と言っても、テキストの追加などの撮影した画像自体の編集はできないので注意が必要です。
あくまで画像周辺の見栄えをよくしてくれるアプリになります。

公式サイトではウェブサイト上の棒グラフを撮影して編集して、Twitterにアップするまでの流れが動画になっています。
このように、ただスクショを貼るだけだと味気ないときに、サクッと装飾を入れられます。

Setappの利用

Xnapperは一番安いプランでMac1台で利用する場合に$29.99かかりますが、有料アプリが使い放題になるサブスクサービスのSetappにも登録されています。

Xnapper以外にも使うアプリがある場合は、Setappを利用した方がお得です。

基本的な使い方

デフォルトだと、control + option + command + 4でスクリーンショットを撮影後に編集画面を開きます。
撮影したスクリーンショットに装飾が付けられます。

Xnapperの編集画面

項目内容備考
Padding背景画像の幅 
Inset撮影したスクリーンショットと背景画像の間の幅 
Border Radius角丸の大きさ 
Shadowシャドウの強さ 
Background背景画像「Custom」をクリックすれば好きな画像を設定可能
Ratio / Size好きな比率・画像サイズに変更する「Twitter」「Facebook」などSNSでよく使うサイズに切り替え可能
Redact email address  
Show watermark透かしテキストの表示下のテキストボックスで好きなテキストに変更可能

数値設定できないのが微妙ですが、右上の「Your Preset」をクリックして「New Preset…」を選択すれば、プリセットの保存ができるので、同じ設定を簡単に使い回せます。

編集後はcommand + Sで保存したりcommand + Cで画像をクリップボードに保存できますし、ドラッグアンドドロップでそのままファイルに添付もできます。

環境設定

メニューバーの[App]→[Preferences…(command + ,)]で環境設定が開きます。

基本的にアプリケーションの環境設定は[Xnapper]などのアプリケーション名のメニューバー内にある場合がほとんどですが、[Xnapper]→[Preferences…]は何故かつねに非活性になっています。

Xnapperの環境設定

項目内容備考
Take screenshot and open editorスクリーンショットを撮影して編集画面を開くcontrol + option + command + 4
Take screenshot and copy to clipboardスクリーンショットを撮影してクリップボードに保存するcontrol + option + command + 5
Default save locationcommand + Sで保存時にデフォルトで保存される場所を設定する 
Launch at loginMacログイン時にXnapperを起動するようにする 
Always hide this window at launchアプリ起動時にはウインドウ非表示の状態にする 
Compress to JPG image when save to file保存時にJPG画像を圧縮するオンにしていても、保存時にoptionを押すと未圧縮にできる
Hide dock icon
when the last window is closed
すべてのウインドウを閉じたときはDockアイコンを非表示にする 
Hide all Xnapper windows
when taking screenshot
スクリーンショット撮影時にXnapperのウインドウを非表示にする 
Close screenshot after Copyスクリーンショットコピー後はウインドウを閉じる 
Enable sound effectsサウンドをオンにする 
Save screenshot history過去のスクリーンショットを保存する場所を設定する編集前・編集後のスクリーンショットや、
デスクトップ画像が保存される

撮影のショートカットキーですが、通常のスクリーンショットのショートカットキーはshift + command + 4なので、それにoptionを追加したshift + option + command + 4に変更しました。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね