WebデザインでPhotoshopを使う際のポイント解説！Illustratorとの使い分けも

Photoshopは写真の補正をしたり、グラフィックを作成したり、さまざまな作業ができる便利な画像編集ソフト。Webデザインでの画像加工は、Photoshopを使うのが業界標準です。Webデザインにおいて欠かせないツールですが、使い方がわからないという方も多いでしょう。

ここではWebデザインでPhotoshopを使うとき参考にしたいことについて紹介していきます。

なぜWebデザインではPhotoshopが標準のデザインソフトとして使われるのか？

WebデザイナーがWeb制作で使用する必須のソフトにはいくつか種類がありますが、Webデザインでは主にPhotoshopが使われています。Photoshopは写真加工ソフトの印象が強いですが、その他にも多くの機能を持ち合わせており、Photoshopだけで多くのデザイン作業を行えます。

WebデザインでPhotoshopを使うメリット

Photoshopは画像の編集だけでなく、さまざまなWebデザインに適した機能を備えています。ここではWebデザインでPhotoshopを使うメリットについて紹介します。

メリット1：レイヤーカンプ機能

レイヤーカンプ機能とは、ボタン1つで複数のデザインパターンを簡単に切り替える機能です。Webデザインを行う場合、デザイナーは複数の案やページを作成します。

Photoshoのレイヤーカンプ機能を活用すれば何パターンでも登録でき、書き換えも自由で大変便利になります。また、表示非表示を切り替えるパーツの階層が深い場合でも、レイヤーカンプなら切り替えが可能です。

メリット2：画像を複数に分割するスライス機能

スライス機能とは、Photoshopに搭載されているオーソドックスな画像書き出し方法です。1つのデザインデータをパーツごとに切り分け、それぞれファイルとして保存する機能のことで、Web制作では多く用いられます。

スライス機能はスライスツールに切り替えて手動で行う場合や、定規からガイドをドラッグして切り分ける方法、さらにレイヤーに基づく新規スライスなどの方法があります。

メリット3：強制的なフォント変換が行われない

Photoshopでは強制的なフォント変換が行われません。

Webデザインでは、デザイナーやコーダーなど多くの作業者が同時に作業を行う場合もあります。そういった場合、それぞれ作業者のフォント環境が異なっている場合でも、Photoshopなら強制的なフォント変換が行われないため、見た目のスタイルを保持しながら作業が進めることが可能です。

Webデザインでは、PhotoshopとIllustratorのどっちを使う？

このように、便利な機能が揃っているPhotoshopですが、Webデザインを行う時、Photoshopと合わせてIllustratorも必須スキルとよく聞きます。いったい、どちらを使うのがいいのでしょうか。

結論：WebデザインではPhotoshop＆Illustratorどっちも使います

結論から言えば、WebデザインではPhotoshopもIllustratorもどちらも使います。

Illustratorを使ってWebデザインをすることもできますが、Photoshopの機能と使い分けをすることで、より効率よくWebデザインを行うことができるようになります。

WebデザインにおけるPhotoshopとIllustratorの使い分けとは？

Photoshopは、全体の色味を統一したり、オブジェクトを配置したりする際に便利なソフト。画像の編集やWebデザインカンプ（Webサイト全体のデザインのこと）を作る際に使われます。

また、先述したスライス機能もあるので、全体のデザインが完成した後に、デザインデータを傷つけることなく、パーツの切り出しを行うことができ、その後のコーディング作業にスムーズに移ることができます。そのため、全体的なデザイン作りに多く活用されます。

逆にIllustratorは、アイコンやロゴなど、ウェブサイトのパーツを作るのに適しています。Illustratorは画像のサイズを変えても、画質が変化しない「ベクター」を使うソフトです。そのため、実際に図柄などを描いていく作業に適しています。

大まかなデザインや画像編集はPhotoshop、細かなパーツ作りはIllustratorで、というのがWebサイト制作の一般的な方法です。

Webデザインでは、PhotoshopとXDのどちらを使うべき？

最近はWebサイト制作用ソフトとして、同じAdobe社からAdobe XDというソフトが販売されています。Web制作会社などでは、採用選考の基準としてXDの知識を問うところもあり、Web制作の現場で広く使われているソフトだと言えます。

それでは、Web制作では、PhotoshopとXDをどのように使い分けたらいいのでしょうか？

結論：Photoshopでデザインを作ったあと、XDを使おう

結論からいうと、Photoshopでデザインカンプを作った後に、XDを使うのが効率的です。XDには、Photoshopにはない機能がたくさんあり、Webサイトを実装していく際に使うことで、効率化をはかることができます。

XDはプロトタイプ作りや共同編集などの便利機能がある

XDにはプロトタイプ機能があり、複数のアートボード間をつないで、実際にWebサイトを通じてユーザーがどのような体験をするか（UX）を確認できます。

また、タッチジェスチャーやトランジションなどの動きも、プロトタイプ機能を使って実際と同様にデザインすることができるので、自分のイメージをより具体的に形にしやすくなります。

さらに、共同編集機能があるのも特徴です。同じファイルを複数人が共同で編集でき、変更も即座に同期されるので、ストレスフリーに作業を進められます。Webサイトの進化によって、複数の人が作業に関わるようになったため、こうした機能を使いこなせることが重要です。

無料でXDを触ってみることができる「スタータープラン」もありますので、Webデザイナーを目指しているけれど、まだXDを使ったことがない方は、ぜひ一度試してみてください。

Photoshopの初期設定で気をつけておくこと5つ

Webデザインをしていると、何かと細かいことでつまづいてしまうもの。ここでは、Webデザインを進めていく上で役に立つ、Photoshop初期設定のポイントを5つご紹介します。

単位をpxにする

Photoshopを最初に起動すると、デフォルトで単位が「mm」に設定されています。通常、Webデザインではpx（ピクセル）を使いますので、「編集＞環境設定＞単位・定規」から「定規」と「文字」の項目を「pixel」に変えておきましょう。

フリックパン機能とアニメーション機能をOFFにして動作を軽くする

Photoshopには、おしゃれなアニメーションがつけられているのですが、こうしたアニメーションがPCに負荷をかけ、作業を遅くしてしまう可能性があります。

そのため、「編集＞環境設定＞ツール」に移動し、「フリックパンを有効にする」のチェックと「アニメーションズーム」のチェックを外しておきましょう。こうすることで、PCの負担を軽くすることができます。

レイヤー名に「〜のコピー」を入れない

レイヤーとは、加工したい画像に重ねる層のことです。レイヤーを重ねることで、元画像を傷つけることなく、様々な変更を加えることができます。その際、レイヤーをコピーして使うことが多いのですが、いちいち「〜のコピー」という言葉が入ると目障りなので、この文言を入れない設定をするのがおすすめ。

「レイヤー」パネルの右上の四本線をクリックして、「パネルオプション」から、「コピーしたレイヤーとグループに「コピー」を追加」のチェックボックスを外しておきましょう。

カラーモードを設定する

Photoshopは、「カラーモード」というカラーの表示方法を設定できます。カラーの表示方法には様々な物がありますが、WebデザインならRGB（写真や印刷媒体ならCMYK）に変えておきましょう。

ツールバーの「イメージ＞モード」から変更することができます。

保存設定をする

Photoshopで作業をしていると、途中でPCが固まって今までの作業が全て無駄に…なんてこともありかねません。そうした状況を防ぐためにも、保存設定を変えておきましょう。

「編集＞環境設定＞ファイル管理」に移動し、「復元情報を次の間隔で自動保存」にチェックを入れておきましょう。また、合わせて「ファイルの拡張子」を「必ず追加」にし、「小文字を使用」にチェックを入れておくと、ファイルを間違った形で保存するトラブルも防げますよ。

Photoshopを使ってWebデザインを学びたい人におすすめの本

最後に、Photoshopを学びたい人におすすめの学習本をご紹介します。

デザインの学校 これからはじめるPhotoshopの本 [2020年最新版]

まだPhotoshopを触ったことがない、という人におすすめの一冊。「デザインの学校　これから始めるPhotoshopの本」は、起動・終了、ファイルの開き方、画像の拡大・縮小など、非常に初歩のところから解説をしてくれている本です。

写真の合成やPhotoshopを使ってポストカードを作ってみるという実践編まで載っているので、とにかくわかりやすい入門書が欲しいという人はこちらから初めてみましょう。

Photoshopレッスンブック CC2017/CS6/CS5/CS4対応 (日本語)

一歩踏み込んだ入門書がいいという人には、「Photoshopレッスンブック　CC2017/CS6/CS5/CS4対応」がおすすめ。こちらは入門書ながら、プロが使う実践テクニックまで網羅しており、初心者がつまづきやすいレイヤーやマスクに関しても丁寧に解説をしています。

初心者だけど、Photoshopを使って本格的な作業ができるようになりたいという人は、こちらを手にとってみてはいかがでしょうか。

世界一わかりやすいIllustrator & Photoshop & XD　Webデザインの教科書 世界一わかりやすい教科書

Webデザインで使うソフトを一通りマスターしたい人は、こちらの「世界一わかりやすいIllustrator & Photoshop & XD　Webデザインの教科書 世界一わかりやすい教科書」がおすすめです。Photoshopだけでなく、Illustrator、XDまでカバーしているので、Webデザインの基本を一通り学べますよ。

まとめ

WebデザインとPhotoshopの使い方について解説をしてきましたが、いかがでしたでしょうか。

Webデザインでは、PhotoshopやIllustratorなどのツールが主に使われていますが、Photoshopの方がWebデザインに適した機能が多く、便利であると言えます。そのため、これからWebデザイナーになろうと考えている方は、まずはPhotoshopのスキルを習得するところから始めてみてはいかがでしょうか。