花子は、Web制作に役立てるか(第2回)

前回の「第1回」の記事では、グラフィックソフトでウェブ対応の画像を作成するときに一般的に期待するところを説明しましたが、今回は花子にフォーカスを当てることにします。

しかしその前に、ピクセルというものについて、復習という意味で少し基礎知識を説明したいと思います。(すでに理解されている方は飛ばしてください・・・。)

■ピクセルとは?RGBとは?

ウェブ(俗に言う「ホームページ作成」)の世界において標準の表示単位とは、ピクセル(pixel)のことです。「ピクセル」という言葉になじみがない人はそれなりに存在すると思いますが、言い換えれば画面の小さい点の事です。どの画面もそうですが、顕微鏡か虫眼鏡で見てみると、その映像全体は無数の小さな点で構成されていることがわかります。

RGB twitter closeup
Courtesy of Alberto Roura via Creative Commons license

実は、ここでいう一つ一つの「ピクセル」は、3つの別々の色(赤・緑・青、つまり三原色の red, green, blueで「RGB」と呼ぶ)で構成されていることがこの画像でよくわかります。それぞれ赤・緑・青の光加減によって、何千万のうちのどれか1つだけの色を表示することができます。これはちょっとした目の錯覚でもありますが、通常の人間の視力ではその小さいRGBの点をあわせて1つの色として認識します。この合わさったものがピクセル(またはドット)と言います。 上記の説明からいうと、ホームページ用の素材(イラスト、動画など)を作成する時には、センチメートルとかインチではなく、ピクセルで考える必要があります。もちろん、印刷物を作るときは、cmやmmでいいのですが、紙と画面とは全く違う性質を持っているため、寸法単位も異なります。

■「ピクセル」の大きさは、どの画面でも一緒?

ここからが重要なポイントですが、画面でいう「ピクセル」は、すべての画面で一定の大きさという訳ではありません。

例えば、高さ100ピクセル×横幅100ピクセルの画像を画面に表示したところ、画面の解像度(dpiすなわち1インチあたりのドット数)と画面自体の大きさ(一般的なネットブックは8インチ~12インチ、ノート型パソコンは13インチ~17インチ、モニターは18インチ~30インチ)によって、ピクセルの実寸が変わります。(ウィキペディアの記事が参考になります。)

100x100px test

ちょっとした実験ですが、左の画像を定規で測ってみるとどういった寸法になるのでしょうか。

当方のパソコンの画面(17インチ)では、高さ18.5mm×幅18.5mmです。しかし、画面の解像度を低くしてみると、同じ画像が高さ21.5mm×幅21.5mmになり、大きく見えます。また20インチのモニターでは、幅が25.5mmです。ここでわかることは、「ピクセル」というものは、画面の仕様と解像度によって違って見えており、物理的にはあまり正確な寸法単位ではないことです。

つまり、ピクセル(画面仕様)と、mmまたはcm(印刷物仕様)というのは、まったく別物です。印刷物を作るには、ページのサイズ(例:A4,B5など)を意識してページレイアウトを組みます。またウェブページを作るときは画面の大きさ(ユーザによって千差万別)を想定して、それに見合ったサイズで画像を作成するのが一般的です。

■ピクセル・cm/mm、両方を扱えるグラフィックソフトとは?

第1回の記事でも説明しましたが、今の時代はグラフィックソフトで画像を作成するときに、ウェブ対応が期待されます。画面(パソコン、スマートホーン、iPadなどを含める)で見る場合が多くなってきているのではないかと思います。

その中、描画した画像を画面仕様(ピクセル単位)に出力することができるソフトは、ほとんどどのメーカーのものはできます(実力の差はありますが)。例えば、ドローソフトの内、花子、マイクロストビジオ、アドビイラストレーター、コーレルドロー、またOpenOfficeのDrawとInkscapeなど、GIF・JPEG・PNGといったウェブ仕様の画像の出力が可能であり、出力寸法をピクセルで指定することもできます。

しかし、問題は作成するときの寸法単位です。

最終的にピクセルで書き出したいのなら、ピクセルの単位で作業したい・・・と思います。

簡単に言うと、花子は、残念ながらスケールはピクセル単位で表示できません。そのため、作成途中で画像が実際に画面でどう表示されるのか、正確なピクセル単位で作業することに難があります。

でも、実は・・・。

■花子でピクセル単位の作業がしたい!ときに使う3つの小技

花子は主に簡易印刷物に対応したソフトですが、やはりドローの世界で作っておいて、アイコンやボタンなどの絵コンテンツも利用しながらウェブ用の素材を作ることには花子を使えばいろいろなメリットがあります。

ただ、花子はちょっとした工夫(小技)が必要です。

  1. 100%のズーム率での作業に徹底すること。花子は、表示を100%ズームにしておくと、図面を画面の解像度で表示されます。そのため、画像は見た目どおり、すでに画面表示仕様、つまりピクセル等倍となります。  

    もうひとつの実験ですが、花子の新規図面を作って(Ctrl+N)、上記のテスト画像(100px×100px)を読み込みましょう。→(ファイル―挿入読込―重ね合せ) そして、その同じ画像を別ウィンドウで、エクスプローラから開きます。

    100px comparison

    花子に挿入した画像と、元のPNGファイルは画面で見るサイズがぴったりと合っていることがわかります。(ただし、100%ズームのときのみ)

  2. カスタムのスケールを使用すること。花子の「スケール」(ルーラー)は、単位オプションが限られている。そのため、サイズが正確なピクセル単位の定規を花子の図面に挿入し、それを背景ページに挿入して作業をしておくとよいでしょう。

    (イメージを背景ページに入れる方法は少しわかりにくいので、下記の画像を 参照してください。)

    Insert in haikei

    一応、900px × 700pxの定規を作ってみました。ダウンロードして使用していただけます。

    なお、花子に画像を挿入するときに、「イメージ枠のサイズ指定」のダイアログが出ることがあります。必ず「キャンセル」をクリックして貼り付けましょう。  

    あと、この小技を使うときは花子自体のスケールを隠しておくとわかりやすい。 CTRL + (マイナス)、あるいはスケールの上に右クリックして「スケール」をクリックすれば非表示になります。もっとシンプルな画面で作業したいときは表示メニューの「マージンの表示」のチェックを外せば、こんな画面になります。

    Hanakoforweb screen sample

  3. スクリーンショットをとって花子以外でウェブ素材を個別に書き出すこと。これは少々厳しい条件のように聞こえるが、花子の画像出力機能には次の難があります。 

    ① 白いふち(余白)が一緒に出力されてしまい、図形のもともとのサイズは保持されない。
    ②「Web画像の切り出し」の機能を使って「ドロップシャドウ」などの図形効果が出力できない。
    ③ 透過色が設定できない。
    ④ JPEGの圧縮設定は4段階(最高・高・中・低)しかない。

    なお、これらの制限と不具合があっても、またプロ級の精度を求めないのなら、花子の標準搭載の画像出力機能を使ってもよいでしょう。

    スクリーンショットのツールは、Windows標準搭載のPrint Screen機能(解説)をつかってとることもできますし、市販の「SnagIt」のようなちょっとオシャレなツールでも花子の画面のスクリーンショットをとり、必要に応じて加工し、PNGやJPEGなどの形式で簡単に保存できます。 

    あと、花子の図面にある複数の画像を一気にウェブ仕様で個別のファイルに書き出したいときに、花子の図面のスクリーンショットを取ったあとに、結果ファイルをAdobe Fireworksでスライスをつくり出力してもよいでしょう。ただFireworksは現状価格で4万円もするため(動作もお値段も、やはり重い…)、もっとお手頃なAlternativeRealities社のWeb Slicer(USD$14.99、シェアウェア)でも十分に(そして安価に)対応できます。(なお、スライスの作成は本格的にウェブ制作に取り掛かりたい人のためのテーマなので、後日の記事で紹介したいと思います。)

何はともかく、花子(+市販ツール)はピクセル単位の画像作成には制限付きでそれなりに対応できることがわかりました。工夫(そして多少の苦労)が必要な部分、うまくやれば1~2万円くらいの範囲内で花子を中心としたWeb制作環境が揃えるのは、お財布にやさしい。