こんにちは。モバイルディレクターのカワムです。もう何回書いたか覚えていません。それだけ長いことディレクターブログをみなさんに読んでいただいているということなんですね。ありがとうございます。

さて、話は変わりますがみなさんはモバイルサイトのページをキャプチャするときどうしていますか?

たまに他部署の方や社外の方からも「モバイルサイトはどうやるの?」と聞かれることがあります。サイトによっては PC からアクセスできない場合もありますので一概に全てのサイトのキャプチャを取ることは難しいかもしれませんが、自社の媒体資料や仕様書を作成する際などディレクター業務の中で必要となる機会は多々あると思います。

そこで今回は弊社モバイルディレクターが実際に行っているキャプチャの取り方をお伝えしたいと思います。なお、ここでの内容はPC上でモバイルサイトを閲覧出来ている状態を前提としています。PC でモバイルサイトを確認したい場合は「モバイルサイトをPCで見るためのツールやFirefoxアドオン」を参考にしてください。

【1】「Pearl Crescent Page Saver Basic」
FireFox のアドオンでウィンドウに表示している範囲までをキャプチャしたり、スクロールを含めたページ全体をキャプチャしてくれます。

【2】「Capture It! ツールバー」
FireFox のアドオン (IE でも利用可) で全体・スクロールに加えてキャプチャ範囲を自由に指定できるため画像編集ソフトがない場合におすすめです。

【3】「CaptureXP」
フリーソフトで画像エディタでの編集が可能なためこちらも画像編集ソフトがない場合におすすめです。

【4】スクリーンショット
キーボードにある「Print Screen」キーを使って画像を取り、アクセサリのペイントで [貼り付け] → [保存] をします。この時ウィンドウの幅を実機サイズに近いものにしておくことがポイントです。「javascript:window.resizeTo(240,600);」とサイズを指定して縮小するのもありです。

【5】デザイナーに作成してもらう
キャプチャを取るという概念からは少し外れてしまうかもしれませんが、一番クオリティが高いサイトの画像を作成することが出来ます。媒体資料や営業資料を作成する際にはデザイナーにお願いして作成してもらうのがいいでしょう。

実際にいくつかの例をあげてみましょう。

sample1

社内のエンジニアに渡す仕様書を【1】の方法で作成したものです。【1】の場合、行間がPC仕様になってしまうため外部への出す資料に使用したい際はデザイナーに調節してもらう必要がありますが今回は全体の遷移イメージを伝える資料なのでこのまま使用しています。

sample2

これも社内用の資料で【4】の方法で作成したものです。この資料はリニューアル用のものだったため各コンテンツの内容がはっきり見えるように少し拡大してキャプチャされています。

では、最後に媒体資料用のキャプチャを見てみましょう。

sample3

一見、2 つ目のキャプチャと大差ないように見えるかもしれませんが、マーキーを全部見せるなど全体のバランスをデザイナーに調整していただいています。「ケータイlivedoor」というサイトをまだよく知らないクライアントの方々へお見せするものなので細かいところにも気を配って作成しています。

これら以外にも仕様書を書く場合はキャプチャを取らず PowerPoint 上で作成する場合もありますし、必要な場面・内容によって各々使い分けています。よろしければみなさんも参考にしてみて下さい。