WEBデザイン初心者はなぜPhotoshopが難しいと感じるのか？という話

元WEBデザイナーが、デザインについてつらつらと書いていきます。今回はWEBデザイン初心者はなぜPhotoshopが難しいと感じるのか、について語ります。職業訓練・スクール等でWEBデザインを学んでいる人に読んでいただければ幸いです。

そもそもPhotoshopはWEBデザインのカンプ作りに向いたツールではない

PhotoshopをWEBデザインのメインツールだと勘違いしているデザイン初心者は多いと思います。ですが、実際のところは「丁度良いツールがそれまでなかったから、Photoshopをメインで使っていただけ」というのが実情かと思います。

最近はFigma、XDといったWEBデザインにより最適化されたツールが出回っているので、PhotoshopをWEBデザインのメインツールとして使う事はなくなりつつあると思います。とはいえ、Photoshopが不要になるかというと、そうともいかないのが現状です。

Photoshopの本来の機能、役割はカメラで撮影された画像の修正・加工であり、備わっている基本機能はかつてレタッチャーと呼ばれる職人が手作業で行っていた「フォトレタッチ」と呼ばれる作業に由来します。

デザインで使用する写真画像やイラストの制作、修正、加工に役立つ、強力かつ高度な機能を備えたPhotoshopは、クオリティの高いデザインを作る際には必要不可欠なものなのです。その地位はFigma、XD登場後もゆるぎないものとなっています。

絵画技法も写真技法も知らないなら、レタッチが難しく感じるのは当たり前

前述のとおり、Photoshopの基本機能は「フォトレタッチ」に由来します。それらは写真技法、どちらかというとカメラでの撮影よりも、撮影後の現像からプリントにいたるまでの工程に関わる技法に関連しています。

したがって、写真技法・技術を知っていないと本質的な部分が理解できない、何を意味しているのか、やっているのかが分からず、とりあえず画面上の見た目と結果だけで「なんとなくできる事がわかる」程度になってしまいます。

また、写真加工、修正の技術は絵画技法に通じるものが多く、ろくに絵を描いたことが無い、絵を描くのが苦手な人には難しく感じられる作業が多くなります。

「WEBデザインは絵が描けなくてもできる」と良く言われます。たしかに「絵を描く」事が仕事ではありませんし、上手くなくても務まりますが、WEBサイトやバナーを制作するうえで必要になるフォトレタッチ関連の作業では、絵が描ける人の方が理解も上達も早い内容が多く、絵を描くのが苦手、描いたことが無い人には理解しにくく、難しい内容に感じられます。

「トーン」を理解しているかがキモ

デザインで写真画像を扱う際、最低限「トーン」を理解していないと仕事になりません。

ここで言うトーンとは色彩の自然な変化の流れ、明から暗へと変化する光の自然な流れの事であり、「階調」とも表現されます。「レベル補正」「トーンカーブ」「ハイライト・シャドウ」といった機能、パラメータはこのトーンを扱うためにあります。

トーンの操作は「いかに自然な流れを破壊せずに操作するか」が基本になります。トーンの自然な流れ、いわゆる「連続調」が破壊されてしまうと、いかにも「デジタルで補正しました」感満載な仕上がりになってしまいます。

Photoshopとは関係ない話になりますが、精度の低いAIによる生成画像に不自然さを感じるのは、AIが光源、トーンの自然な流れを理解できていない、再現ができていない事に起因しています。

デザインの演出・表現においては、画面全体のトーンを求められる演出、表現にふさわしいものになるよう加工、コントロールする事がキモになります。

ちなみに、平面系のデザインの仕事においてトーンを理解していなくてもなんとかなるのは、プロダクト設計がメインになるUIデザイン、ロゴやアイコンといったベタ塗りが主体のグラフィックデザイン位です。

上手くなりたいならデッサン、写真を学ぶべき

トーンについて学ぶ、トーンの扱いが上手くなりたいのであれば、デッサンや写真を勉強するのが近道だと筆者は考えます。

デッサン、写真共に「光の流れ」を意識しないと上手くならないという性質があります。どちらも練度が上がれば上がるほど、光源と光の流れ、陰翳の表現に対する意識、感性、感度が鋭くなります。

Photoshopが苦手、というのは単にツール操作が不得意というだけでなく、その本質的な部分の理解、写真や絵画に関する知識、技術、感性が不足している事に起因しているのかもしれません。

デザインの作業において苦手なものがあった場合、デジタル技術の練習や理論の勉強だけでなく、それらの背景にあるものや、デザインの基礎部分を見直してみるのも良いかもしれませんね。

カンプ作りはWEBならFigma、紙媒体ならIllustratorが最適解

デザインの作業工程上で、WEBデザイン、グラフィックデザイン共にデザインカンプ、モックアップ、版下といった、「完成見本図」「設計図」的なものを作成する必要がでてきます。

デザインカンプ、モックアップ作成にPhotoshopを使う事も出来ますが、絶対にPhotoshopを使わなければならないのか？というとそういうわけではありません。

デザインカンプ、モックアップ作成はどちらかというとPhotoshopを使うのは向いていない作業ではないでしょうか。これらの作業にPhotoshopを使った場合、内容によっては他のツールと比べて操作が面倒、レイアウトの作業効率が悪い等のデメリットが発生することがあります。

WEBサイト、LP、UI等のデザインカンプ、モックアップ作成であれば、近年はFigmaを使用する事が推奨されています。

Figmaはコンポーネント等の最近の設計概念を実装する機能、デザイン、レイアウトの作業効率をアップする機能があるほか、開発者の作業をサポートする機能も充実しているため、デザイナーにとっても、コーダー、エンジニアにとっても、使うメリット満載の便利ツールとなっています。

紙媒体の版下作成の場合は、Illustratorを使うのが最適解だと思います。（エディトリアルの場合はInDesignを使った方が便利。）グラフィックデザイナーであればファーストチョイスは迷わずIllustratorかと思いますが、WEBデザイナーはPhotoshopを使ってしまう人も多い様です。

レイアウト作業は、Illustoratorの方が文字入力、オブジェクトの選択、移動、グループ化等の操作が簡単なので、Illustoratorを使う方が圧倒的に早く終わります。

バナーを作る際も、Photoshopのレイヤー効果を駆使しなければ作れないような、複雑な表現が必要な場合を除けば、Illustoratorを使った方が楽に作れます。

このように、Photoshopにも向き・不向きがあります。作業内容に合ったツールを選択・使用できるよう、デザインに必要とされるツールは一通り操作方法を覚えておくと良いでしょう。