WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

デザインをしていて、「あれ、ここの線がぼやけてる…何でだろう？」と思う事はありませんか？
WEBデザインはPhotoshopで作られることが多いと思いますが、このPhotoshopのシェイプ機能を使って図形を作るとき、気をつけないと図形の境界線がぼやけてしまうことがあるのです。
今回は、そんな「ぼやけ」が起こらないための注意点をまとめてみました。

「ぼやけ」ってどういう状態？

対策の前に、そもそも「境界線がぼやける」とはどういうことかがよく分からない方も多いと思いますので、少し説明します。
パソコンなどの液晶画面が、小さな四角いドットで作られていることはご存知でしょうか？
写真などを拡大してみると、画面が小さな粒の集まりでできていることが分かります。
これを「ドット」と呼んだり「ピクセル」と呼んだりしますが、ここでは「ピクセル」と呼びます。

こういう四角い粒々でできています。

通常、Photoshopのシェイプ機能で図形を作ると、この「ピクセル」の境界線に沿って作られるので、ぼやけません。
ところが、状況によってシェイプの境界線が「ピクセル」の境界線と合わないケースが出てきてしまいます。
そんなときに、シェイプの境界線がぼやけてしまうのです。

と、言葉では伝わりにくいと思うので、下の図をご覧ください。

青い四角いシェイプが2つ並んでいます。よーく見てみてください。
左は境界線がくっきりしていますが、右は少しボヤッとしているのが分かりますか？

※分かりやすいように、ピクセルの境界線をピンクにしています。

ピクセルの境界線（ピンク線）を「グリッド」と呼びますが、このグリッドと、シェイプの境界線（黒線）がずれていると、シェイプがぼやけて見えてしまうのです。

「ぼやけ」ていると何が困るの？

見た目が悪い

まず、見た目が美しくありません。
イラストを描くのであれば、あえて線をぼかすという演出もアリですが、普通の四角形の線がぼやけていると「ずれている」「画質が粗い？」と思われてしまいます。

計算が合わなくなる

さらに、デザイン制作中にも困ったことが。
図形のサイズはピクセルの数で決まります。四角形の中に入るピクセルが、横に50個並んでいれば「横幅50px（ピクセル）の図」ということになります。
しかし、シェイプの線がずれていると、このピクセル数もずれてしまい、正確なサイズが分からなくなってしまいます。
「50.5px」というものはPhotoshopにはないため、「50px」または「51px」と表示されますが、もちろんどちらも不正確です。

すると、計算が合わなくなってきますね。
「900pxの枠の中に200pxの四角形を均等に並べたい」と考えて余白を計算しても、実際に並べてみると少しずつずれてしまい、そろわなくなってしまいます。

見た目も使い勝手も悪い「ぼやけシェイプ」、できるだけ作らないようにしたいですね。

では、本題です。
まずは、最初からぼやけたシェイプを作らないための対策をご紹介します。

「ぼやけ」対策その1・必ず100％表示でシェイプを作る

デザインを作るときにはほぼ必ずといって良いほど、ズーム機能を使いますよね。
細かい部分を拡大して確認しながら作ることが多いと思います。
しかし、キャンバスを拡大または縮小した状態でシェイプを作ってしまうと、境界線がずれてしまうのです。
そういうわけで、シェイプを作るときは必ずキャンバスを100％表示の状態にしてから作りましょう。

「ぼやけ」対策その2・最初から可能性を排除するよう設定

これは、1つ設定をするだけでOKです。
シェイプ機能中、メニュー下の図形が並んでいる部分で、下のような設定をしてください。

一番右のスライムのような図の横の▼マークをクリックすると、小さな設定ウィンドウが出ます。
ここの、右下にある「ピクセルにスナップ」にチェックを入れてください。

すると、新しく四角形のシェイプを作るときには必ずピクセルの境界線と合うようにしてくれるんです！
これはキャンバスが100％になっていなくても機能しますので、普段、拡大や縮小したまま作業することが多い方にオススメです。

「ぼやけ」対策その3・サイズ変更に「Ctrl＋T」を使わない

写真などを拡大・縮小する際、「Ctrl＋T」で対象を囲ってからグイッとドラッグする方法があります。

このような線で囲って、ドラッグするとサイズを変えられますよね。
これをシェイプで使ってしまうと、ぼやけてしまうのです。

このやり方で一番危険なのが「角丸四角形」。ぼやけるだけでなく、拡大すると角丸の丸みの大きさまで変わってしまいます。

黄色いシェイプは、ピンクのシェイプを「Ctrl＋T」で拡大したものですが、角の丸みが変わってしまっています。

そのため、シェイプのサイズを変更する時には、この「Ctrl＋T」を使わず、パスをきちんと動かして作業をしましょう。

パスを動かすのはマウスドラッグでもできますが、上手くやらないとやはりぼやけてしまいます。
矢印キーで丁寧に調整しましょう。

肝心なのは、気づくこと

シェイプのぼやけとその対策についていろいろとご紹介しましたが、一番肝心なのは、まず「ぼやけている」ということに気づくことだと思います。
よーく見ないと分からないことが多いですが、こういう細かいところもチェックできるように目を鍛えておくと、よりきちんとデザインが作れるようになると思います。
制作完了後、不自然にぼやけたシェイプがないかどうか、確認するクセをつけておきましょう！