意外と重宝するかも?FireworksのPDF書き出しでモックを作ろう!

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

意外と重宝するかも?FireworksのPDF書き出しでモックを作ろうのメイン画像

こんにちは、カッシーです。

最近ブログ更新を復活させようとネタを溜め込んだり色々と準備中です。そんな最中「Fireworks Lover Advent Calendar 2012」なるものを知ったので12/16にエントリーしてみました。(夜10時を超えてからの更新ですみませんorz)

Fireworks Loverの一人として色々伝えたいことはあるのですが、今回はディレクション面で役に立ったFireworksで作ったPDF形式の書き出しについてご紹介してみたいと思います。

※注:サンプルはワイヤーフレームですが、徐々にデザインを乗っけて後はコーディングするだけ的な状態にまで持っていけるのでモックという形で紹介しています。

それではご紹介していきます!

1.FireworksはPDF書き出しができる。

CS4ぐらいからでしょうか?
FireworksがPDFの書き出しに対応にしてくれました。
これまで制作していたデザインをお客さんなどに見せるためには各ページを画像として書きだしたりしていたのですが、 Firewokrsの便利な「ページ機能」を使ってデザインしているとすべてのページを一枚のPDFデータにすることができます。

何はともあれまずはコチラのサンプルを開いて
メニューをクリックしてみて下さい↓

[サンプルPDFダウンロード>>]

やり方は
1.メニューバーの[ファイル]から[書き出し]を選びます。

2.プルダウンで「Adobe PDF (.pdf)」を選択します。

3.ページの項目で「すべてのページ」にを選択していることを確認し、「書き出し」を選択します。

こうすることで、サンプルと同じようにすべてのページを含んだPDFデータを作成できます。

とある現場で僕はプログラマーがほとんどの開発側の人間だったのですが、よくあるExcelで作られた「設計書」では依頼側(※ここでは社長や営業やマーケティング系の人)の人にイメージがつき難く、「とりあえず作ってよ」的な空気があったので、間に入って機能説明などを削ぎ落したワイヤーフレーム資料みたいなものを作ってあげたらスムーズに業務が進むようになりました。

開発スキルの無い依頼側からしたらプログラムの設計に関わるような画面設計書では、やはり想像力が豊かだったり、慣れていないとなかなかイメージを共有できません。かといって画面を作ってしまうとプログラマーにも負担がかかります。そこでサクっとイメージを作れちゃうFireworksの出番ってわけですよ!
※1点残念な点としては書き出しのスライスが追加される「Webレイヤー」は共通レイヤー化できないので、リンクの更新した場合各ページに反映が必要になります。

2.PDFに簡単にリンクを設定することができる

そしてPDFに出力した際に便利だったのがこのリンクを設定できる機能。先ほどのサンプルでも設置してあるのでお気づきの方もいるかもしれません。

1.普通に短径スライスを切る
2.プロパティパネルからリンク先を設定(各ページ名が表示されてます)

たったこれだけ!
これだけで書きだしたPDFがリンク付きになります!
.htmとか拡張子がついてますが、気にしてはいけません!w
※やったことないけど、このままHTML書き出ししたらリンク付きのHTMLが書き出されるんでしょうね。

このPDFの資料では、ちゃんとボタンを押したらその先のPDFに切り替わっていくので、ワイヤーフレームレベルでも、 触れる楽しさがあり、Excelの画面設計書だけでは「いったいどういうのになるんだろうか?」と”もやもや”していた人たちは徐々に意見を出しやすくなり、またプログラム側も実際に操作できる画面になったことで、足りないものを発見したり、整理したりといったことにも繋がりました。

3.PDFにパスワードも設定できます!書き出しオプション設定

ワイヤーフレームなどはやはり開発中など制作途中の案件なので、余計な漏洩をさけるためパスワードとか設定したいですよね!

Fireworksの書き出し設定の画面で以下の手順のでパスワードを設定できます。

1.Fireworksの書き出しで「Adobe PDF(.pdf)」を選択
2.[オプション]をクリック
3.[ドキュメントを開くためのユーザパスワード]にチェックをいれる
4.[文書を開くパスワード]に パスワードを設定する。

これで簡単にパスワードをかけることができます。
他にも「画質」「グレースケール変換」など容量を下げたいときに使えるオプションもあります。

あとは文字をアウトラインにしなければたとえキャッチコピー画像でも文字列で検索することができますので何かの役に立つかも知れませんね。

4.この記事でお伝えしたいこと

サンプルは簡易的な企業サイトをベースにしていますが、これらの話はもっとプログラマーメインの開発寄りな案件でのお話でして、0からそこそこな規模のサービスを組み上げる案件だったため、何度も画面を作成したり、その画面にちょっとした説明を加えて解説したりなどして依頼側と開発側の共有イメージを一致させて行きました。

FireworksではHTML/CSS書き出しもありますが、いきなりブラウザで操作できちゃうと「え?こんなに簡単にできちゃうの?」って勘違いする人もでてきますし、ファイルを送る際にzipにしちゃうと解凍させたり手間ですし、Webサーバにアップしたとしてもオンライン環境じゃないと見えないとあるので、なんだかんだPDFにできるのって便利なんですよw

そして気がつけばいつの間にかこのPDFで書きだしたPDFのモックがやりとりの中心となりました。他の部署から「あの資料はどうやって作るんですか?」と問い合わせが来たぐらいです。

そのプロジェクトは僕が更新を担当してそのまま完走できたプロジェクトだったので良かったのですが、もしこれが仮に僕以外の人がPDF資料を更新したいとなった場合、やはりFireworksが必要になります。

FireworksはPhotoshopやIllustratorと比べるとかなり初心者にも優しい操作でグラフィックが作れるソフトだと間違い無く断言できます。2時間ぐらいあればある程度レクチャーできそうなぐらい簡単です。

だからこそ、ちょっと資料を作るようなディレクターや営業さんや、最低限は自分でちょっとした画像を用意したいと思っているプログラマーさんなど幅広い人がFireworksをいれたらいいんじゃないかなーと思っております!

というわけで伝えたいのは「PDF書き出し便利!」と合わせて

簡易グラフィックツールとしてFireworksを
Webデザイナー以外にももっと普及して欲しい!

そう思っているカッシーが16日目の記事を提供させて頂きました!

P.S.
一応参考程度に元データもDLできるようにしておきます。昔スタートKITとしてよく使う構成にしたファイル(途中放棄w)です。かなり中途半端なんですが使えるものがあったら好きに使ってもらって構いません。

元Fireworksデータダウンロード>>

※Macで作ったのでヒラギノ角ゴProのフォントデータを聞かれると思いますが、その場合はwindowsの方はMSPゴシックとかにしてもらえばと思います。

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

この記事を書いた人

カッシー(樫本祐輝)

カッシー(樫本祐輝)

株式会社クリエイティブユニバース代表取締役。
クリエイターはもっと幸せになってもいいんだ!と「クリエイティブな人に幸せを」を理念に活動。

2017年に法人化。現在は事業戦略クリエイティブ・プロデューサーとしてコンサルや、クリエイター・フリーランスギルド「TheCreative」を主宰。大阪東京合わせて80人を超える。フリーランスカレッジ、クリエイター200人祭りなど主催。

twitterにて「#カッシーのフリーランス講座」というハッシュタグでフリーランス向けのノウハウ・お役立ち情報発信してます。クリエイター・フリーランス支援の独自の統計をもっていることを強みに発信しています。イベント・セミナー情報もTwitterが一番早いのでぜひフォローください!

クリエイターで独立・副業を目指す人へ

長年のフリーランス支援の知識を元にフリーランス向けのメディア「次世代フリーランス研究所(通称フリラボ)」を立ち上げました。