• Reading time:15 mins read

タイトルがよくわからんな……。ここんとこPDFと画像と格闘している私(@saosaoyamayama)です。

前回の記事で、WordPressにアップロードすると画像が色褪せてしまう原因と対策について語りました。

その中で「PDFを画像化するAutomatorアプリを使うと、カラープロファイルがsRGBにできる」とチラつかせたんですが、これはこれでいろいろ問題があったりします。

ということで今回のメニュー。

  • AutomatorでPDF/PNGコンバーター作り
  • プレビューを使って画像の各種設定をいじる方法
  • PDFを画像化すると画像が部分的に欠ける原因と対策

この辺りを突いてみまっせ。

すべてが正しい方法かはわかりませんが、少なくとも私は困っていないので大丈夫だと思います。

知りたいことはありますか?

Automatorってどう使うのよ。それにプレビューで画像調整って基本中の基本過ぎて誰も教えてくれないんだけどどうすればいいのよ。

AutomatorでPDF/PNGコンバーターをつくろう!

Automatorのアイコン
Automatorのアイコンかわいすぎる罪深い

突然夏の自由研究みたいなノリでお届けします。

Automatorでアプリが作れるようになったのっていつから? 以前は単なる「フローの自動化」だったと思うんですが……。

今回はドラッグ&ドロップでPDFをPNG化するアプリを作りまっせ! PDFのページ数が膨大でも、ほんの数秒で画像化しちゃいます!

まずはMacのアプリケーション内に可愛らしいアイコンがあるので、探してみましょう。

PDF/PNGコンバーターの作り方

Automatorのアプリ作成方法はとてもシンプルです。

  1. アプリを開いて新規書類作成
  2. アプリに入れたい機能を選んでドラッグ&ドロップ
  3. 数値やフォーマットを設定
  4. 保存
新規書類

Automatorアプリを開き、左下「新規書類」をクリックします。

アプリケーション作成

何の書類を作るか聞かれるのでアプリケーションを選択します。

使い方は、左側から使いたい機能を選んで、右側にドラッグするだけ。

今回は1つ目の機能に「アクション→ライブラリ→PDF→PDFページをイメージとしてレンダリング」を選びました。

2つ目は「フォルダ→Finder項目を移動」です。

カラーモデル指定

「PDFページをイメージとしてレンダリング」はいくつか設定が変更できます。

カラーモデルはグレイ or RGBです。CMYKは選べませんでした。

ファイルフォーマット指定

フォーマットは選択肢が豊富! 今回はPNGですが、PDF→PDFで圧縮かけたりもできそう。

なお解像度は200にしています。canvaの96dpiに合わせたかったんですが、下限値に引っかかって設定できませんでした。

レンダリング画像の保存先指定

「Finder項目を移動」は、レンダリングした画像をどこに保存するか、です。

今回は作業の都合上「デスクトップ」に。

ここまで設定したら保存しましょう。ファイル名はアプリ名として登録されるので、アホっぽいのは避けたほうがいいかな。

アプリ化完了

保存した書類はアプリケーション内に格納されています。

アイコンはまぁ、Automatorのまんまですけどね。

PDF/PNGコンバーターの使い方

ほいじゃ、早速アプリを使ってPDFをPNGに変換してみますよー!

作成したアプリを開く

Finderをカラム表示にして「アプリケーション」内にあるアプリを選択。右側にアイコンが表示されますよね。

オレンジのあたりにPDFをドラッグ&ドロップします。

カラム表示しなくても、アプリアイコンにPDFファイルをドラッグしてもイケるんじゃないかな(適当)。

画像ファイルが作成される

秒というより一瞬でPNGが生成されます。

ページが多いPDFでもほんの数秒です。めっちゃ便利。

Automatorで作成した画像は解像度200dpi、カラープロファイルsRGBです。解像度に合わせて画像の大きさが変わっている可能性があるので、必ずファイルの情報を確認しましょう。

解像度を変えたい! 大きさを変えたい! って時はプレビューアプリの出番です。

なお、AutomatorでPDF→画像化した場合に画像の一部が欠けてしまう現象にぶち当たりました。その解決方法はコチラで説明しておりますよー。

プレビューでPDFを画像化・各種調整してみよう!

プレビューのアイコン
プレビューのアイコンもかわいいけど意味はわからない

この際だから、プレビューを使った画像調整についても書いておきますよ。

  • PDF→PNG変換
  • 解像度確認・変更
  • 大きさと解像度変更
  • カラープロファイル変更

この4つのやり方ですね。

プレビューでPDFをPNGに変換するよ!

カラープロファイルは何でもいいからファイル形式をサクッと変更したい。そんな時はプレビューが便利です。

以下ではPDFをPNGに変換しますよー。

プレビューで画像を開く

画像化したいPDFファイルをプレビューで開きましょう。

書き出しを選択

メニューバーの「ファイル」から「書き出す」を選択します。

フォーマットの変更

こちらがデフォルトです。PDFをPDFに書き出す設定になっていますね。

フォーマットをPNGに変更しましょう。

解像度指定

PNGにする場合は解像度が指定できます

canvaのPNGの解像度が96dpiなので、ここでは96dpiを指定して保存しまーす(実際はdpiではなくppiっつーのかね)。

画像の情報

保存した画像です。プレビューで生成した画像のカラープロファイルは「Adobe RGB(1998)」ですね。

幅1,920pxなので大きさは正しい。しかしなぜか解像度が表示されていません。

都合が悪いものは隠せばいいと思ってんでしょ💢どこのお偉いさんなの💢

ついさっき解像度を96dpiに指定したのに、実はこの段階で解像度が狂っているんですよ……。そんなん気付くかよ。

ということで、解像度の確認方法と変更手順を載せておきます。

プレビューで画像の解像度を確認・変更するよ!

サイズの調整

プレビューで画像を開いたら「ツール」から「サイズを調整」を選択します。

イメージの大きさ表示

お気付きでしょうか。解像度が72になっています。

解像度を指定させたのは何だったの! 遊びだったの!

解像度変更

画像の幅は正しいので手を加えず、解像度だけ96に変更して「OK」を押し、保存します(保存しないと反映されません)。

解像度指定完了

そうすると、大きさは変わらず解像度が96×96になりました。

カンタン!

プレビューで画像の大きさと解像度を変更するよ!

解像度と大きさ確認

こちらはAutomatorで書き出したPNGです。

Automatorでは解像度200dpiで画像化しました。ファイル情報を確認すると正しく変換されているようです。

ただしサイズがおかしい。幅4,000pxて……。そんな時もプレビューです。

イメージの大きさ確認

縦横比を固定」にチェックを入れておけば、縦横比を保ったまま大きさが変えられます。

今回は幅を「1920」にしたいので、幅だけ入力。高さは自動計算です。解像度を「96」にして「OK」を押し、保存。

ファイル情報確認

その結果、画像の幅が1,920pxに変わり、解像度は96になりました!

プレビューでカラープロファイルを変更するよ!

前回の記事であーだこーだ言ったカラープロファイルですね。

カラープロファイルを変更する場面ってあんまりないと思うんですが。

WordPressにアップする画像の変色を防ぐためにプロファイルをsRGBにしたい!

というピンポイントのご要望にお応えするのがプレビューアプリです。

プロファイルの割り当て

プレビューで画像を開き、「ツール」内の「プロファイルを割り当てる」を選択します。

colorsyncプロファイル

こんな画面になります。

「ColorSync プロファイル」のプルダウンを開いてみると……。

プロファイルを選択

Macやディスプレイが持つカラープロファイルがズラーっと表示されます。

今回はsRGBを選択して「OK」、保存です。

ファイルの情報

もともとカラープロファイルがAdobe RGBだった画像ですが、プレビューを使ってsRGBに変更できました!

canvaのPDFをPNG化すると画像が欠ける→フラット化しよう

canvaでPDFを作ってAutomatorで画像化すれば、WordPressにアップしても色が変わらない。素晴らしい。

ただし1つだけ、やべー問題点を見つけました。

Automatorで画像化すると画像の一部分が削れてなくなります

とはいえAutomatorが悪いわけじゃありません。それにどんな条件でも削れてしまうわけでもありません。

PDFをフラット化(ラスタライズとかレイヤー統合のイメージ)すれば解決します!

画像の欠け状況

どちらの画像も元のPDFファイルは同一で、左はプレビュー・右はAutomatorでPNG化しました。

2枚を見比べてみると、画像の上部に黄緑色の細い帯に差がありますよね。Automatorで画像化したほう(右)は、上部がちょっとだけ切れているんです。

いろいろ条件を変えて検討した結果、なんとAutomatorの設定ではなく、canvaの設定をいじるのが正解

そんなん気付くかよ💢

canvaでPDFをフラット化する

PDFのフラット化
canvaのダウンロード画面です

回避策はPDFの「フラット化」です。レイヤーの統合みたいなものとお考えください。フラット化にチェックを入れてからPDFとしてダウンロードすればOKです。

ではフラット化なし・ありのPDFをAutomatorでPNG化し、WordPressで比較してみましょう。

左はフラット化ナシのPDFです。黄緑色の帯が切れていますね。右はフラット化したPDF。黄緑色の帯が残っています。へー、そうなんだ〜。

わかるわけないやろがい💢

ちなみにフラット化あり・なしによって、濃い文字の明瞭度・白系文字の明瞭度などに差が出ます。

この辺はアップロードする画像の大きさや、どちらの色をよりハッキリ見せたいかで変えたほうがいいので、条件を変えてご検討くださいまし。

Automator便利過ぎん?

アプリ一覧
Automatorを使いこなしたい欲

今回Automatorでアプリを作ったんですが、いろいろできそうじゃないですか、Automatorのアプリ。

以前はAutomatorの「ワークフロー」を使って、Web画面のテキスト取得→ページャーを進める→Web画面のテキスト取得→ページャーを……という設定して「はあ便利じゃ便利じゃ」と思ったことがあります。

ただ、クリック位置を覚え込ませるような仕様なので他の作業に使い回せないし、別のアプリ立ち上げたら止まるしでしばらくAutomatorは放置していたんですよね。

アプリ作成だったら結構いろいろ遊べそうっすね。ふむふむ。

S.Nakayama

一帖半執筆工房代表。 デジタルマーケ企業のフリーランスPMとして計9サイトのコンテンツ制作を並行指揮した経験を持つ。 現在は企業の人材育成コンサルやメディア進行管理をしながら、グラフィックデザイン・文章校閲・校正者・ライターとしても活動中。 DigitalCameraWorld認定フォトグラファー、臨床検査技師。