BLOG

Skitch(スキッチ)「保存すると画像が大きくなる問題」は○○を外すだけで解決!ツールや拡張子の使い方もご紹介。

Skitch(スキッチ)「保存すると画像が大きくなる問題」は○○を外すだけで解決!ツールや拡張子の使い方もご紹介。

skitch-image-big

お疲れさまです!Webライターの伊藤です!

Web記事の作成や、クライアントへ画像で説明したいときに重宝する「Skitch(スキッチ)」というアプリ。画面上のほしい部分だけ切り取り、文字・矢印・ぼかしなどで簡単に加工できるのでとても便利ですよね。

今回、私がお伝えしたいのは「Skitchを使ったら画像が大きくなって保存される!」という困ったトラブルの解決方法。

撮った画像が思うように保存できない

保存した画像が大きくなってしまう

Skitchの使い方がいまいち分からない

という方に、ぜひ読んでいただきたい情報です!(※端末は、Mac Book Proを使っています)

Skitchで保存した画像が大きくなる問題

作成中の記事に画像を入れたいとき。とあるページの「あ、ここを保存したいな」ってことがありますよね。ふふ〜ん♪とスクショを撮って、ササッとファイルへ画像を保存。すると、それをWordPressに追加したら画像が大きくなってしまうというトラブルが起きました。

large

本当は、上側の画像のように保存したままの大きさがで表示させたいんですよね・・・

file size

ファイルサイズはこんな感じです。

この問題が解決できず、このときは結局ほかの画像編集サイトでサイズを縮小してもう1度保存。1枚だけならあまり気になりませんが、複数枚あったときは時間もかかり大変でした。

  • Mac本体の解像度?
  • スクショした部分の画像?
  • アップロード先のWordPress?

と、何が関係しているのかいろいろ原因を探ってみたのですがわからずじまい。でも、あるとき見つけてしまったんです!

解決はいたって単純!窓の下側にご注目

Uncheck

解決方法はいたって単純!Skitch下側のこの部分をクリックし、「高解像度のチェックを外す」だけでした。(こんなところに隠れてた・・・)ここのチェックを外せば、保存したままの画像サイズで保存OK。ね、簡単すぎるでしょ^^;

Skitchはファイル名・ファイル形式もすぐに変更できる

file name

ファイル名やファイル形式も、保存前の段階で変更できます。

通常、ファイル名やファイル形式を変えたいときは保存した画像ファイルを見にいっているのではないでしょうか。Skitchで保存するときは、ファイル名もファイル形式もその場で変更可能!これで、保存先で「あれ?どこいった?」なんてこともなくなりますね。

「高解像度」はなぜ画像ファイルが大きくなるの?

そもそも、なぜ「高解像度」という機能が付いているのでしょうか。

高解像度(英語:High resolution)とは、PCの場合、画面を構成する画素数が多いことをさします。画像解像度の単位は「dpi(Dot Per Inch)」といい、「1インチのなかにどれだけドットが敷き詰められているか」がわかるもの。つまり、解像度が高いものはドットがたくさん増える(密度が濃い)ため、画質が綺麗になるんですね。

画像を印刷する場合は、プリンタのドットの密度が変更できるので何かと高解像度が求められます。一方、ディスプレイでWebページを表示するときも高解像度に設定できますが、解像度(2880×1800など)が高くなるほど画面上の文字やイラストが小さくなります。

これは、プリンタと違って1インチのなかにあるドットの数が変えられないため。製造段階で数が決まっているので、表示範囲を狭くしてドットの密度を濃くするしかないんですね。そして、画像で保存するとファイルサイズが大きくなってしまいます。

つまり、「高解像度=画像のサイズが大きくなる問題」の原因は、「ディスプレイのドット数はもともと変えられないから」ということがわかります。反対にいうと、大きさはなんでもいいから綺麗な画像が欲しい!ときに高解像度を設定すればOKなんですね。

便利!Skitchの使い方

Skitch(スキッチ)とは、スクリーンショット・キャプチャで画像を撮り矢印や文字を書き込んだり保存・共有できたりするEvernote提供の無料画像編集アプリ。以前はWindowsやAndoroidでも利用できましたが、現在(2019年2月時点)はMac・iPad・iPhoneのみのサービスとなっているようです。

基本的な使い方を簡単にまとめましたので参考にしてください^^

画像加工が楽しくなる

画面上の囲った部分を出力し、さまざまな編集加工ができます。

主なツールバーは以下のとおり。

Toolbar  

  • 矢印
  • テキスト
  • 図形(□・○・線)
  • ペン(手書き・強調)
  • スタンプ(「×」「?」など)
  • モザイク
  • リサイズ(サイズ変更・トリミング)
  • 加工部分のカラー変更
  • 加工部分のサイズ変更

文字色はスタンダードが8種類、そのほかあらゆるトーンの色が選べます。矢印やテキストのサイズ変更は5段階。モザイクの大きさは変えられません。

1度加工した部分は、その上をクリックすることで再編集できます。色・サイズの変更や選択位置が変えられるのってとても便利!いろんなことが簡単にできるので、加工が楽しくなっちゃいます。

拡張子が豊富

file format

選択できる拡張子はこちらです。

PNG(ピン・ピング) スクショ・キャプチャ向き。リサイズしても画質をキープ。透明色対応。
JPG(ジェイペグ) 写真など色数の多い画像向き。リサイズで画質が劣化する。
HEIC(ヘイク) iPhone写真データ。JPGよりデータサイズが軽い。
TIFF(ティフ) タグを追加するとさまざまなビットマップ(BMP)画像が1度に扱える。
GIF(ジフ) 最大256色以下で構成。ロゴや図表など色数の少ない画像はJPGより画質が良い。透明色対応。
BMP(ビーエムピー) ビットマップから由来。未圧縮で画質は良いがファイルサイズが大きい。
PDF(ピーディーエフ) 「見ること・読むこと」が目的。閲覧ソフトが必要。

色の数や使い方によって、いろんな拡張子を選ぶと良いでしょう。ただ、Webページに使う画像はファイルサイズが大きいと致命的。ページの表示に時間がかかってしまうので、避けるほうが良いと思います。

ここで!気になるのが「Skitch ○○」という見慣れない拡張子。

  • Skitch PNG
  • Skitch JPG
  • Skitch HEIC

これは、Skitchで加えたテキストや矢印などが、もう1度Skitchを開くことで再編集できる画像形式です。「とりあえず文字を入れてみた」「またあとで色や文字を変えるかも?」と、あいまいな画像を保存するのにぴったりです。

ドラッグで簡単保存&共有

drag  

撮ったスクショの範囲や加工がOK!保存は、指定の場所へドラッグするだけ完了です。また、ChatWork・Slack・LINEなど情報伝達ツールとして使っているところのトーク部分にドラッグすれば、すぐに共有可能!Evernoteへ自動保存もしてくれます。

出先で撮ったSkitch画像が「保存」というアクションを起こさなくても保存されている・・・。打ち合わせ中や急ぎのときなどに役立ちそうですね。あとでじっくり編集できるのも魅力的。Evernoteのアカウントを持っている人はぜひサインインを^^

おまけ:「スクリーンショット」「キャプチャ」の違いは何?

実は今までちょっと気になっていたのが、

  • スクリーンショット
  • キャプチャ

の違い。どちらも「ディスプレイ上の表示状態をそのまま撮影して取り出して保存すること」で通じるのですが、ハッキリとは使い分けられない・・・。ということで、正確な意味を調べてみました。

スクリーンショット(スクショ) 画面のある瞬間を切り出した画像ファイル。スナップショットともいう。
キャプチャ(キャプチャー) 画面上の動きをとらえた画像ファイル。スクリーンキャプチャは動画ファイルをさす。

撮る対象のものが「画像」「動画」で違うということでしょうか・・・。ほぼ同義語なので、自分の言いやすい方で良さそうな気もしますね。

もっといろんな使い方をしてみたい!

Skitchで保存した画像が大きくなる問題。「チェックを外すだけ」という、とても単純&簡単な方法で解決できることがわかりました。編集ツールやファイル形式も豊富にあるので、さまざまなビジネスシーンで役立ちそうですよね。

ちなみに、今回紹介したSkitchの使い方はほんの一部分。画面キャプチャのほかにも、全画面・タイマースナップ・画像やPDF、空白のページといろんな取り出し方が可能です。

撮って・楽しく加工して・簡単に保存できる」という作業効率化アップも狙えるSkitch。これからも、フル活用していきます!

お問い合わせはこちら