CSS3の発明により、WebデザイナーはPhotoshopを使用する必要がありますか？

多くのデザイナーがPhotoshopで美しいWebデザイン作品を作成していることがわかりますが、CSS3の登場により、HTMLとCSSに変更したい場合は、ゼロから始めて、CSS3を使用して最終デザインの約80％を作成します。

たとえば、境界線の半径、不透明度、背景のグラデーション、ボックスシャドウとテキストシャドウ、その他のCSS3ルールを使用して、Photoshopで作成したものを取得します。多くの場合、彼らはPhotoshopから画像をインポートするだけです。これは、ブラシワークやロゴ、またはそのようなものに似ています。

私の質問は、Webデザイナーが何かを作成するためにPhotoshopを使用する必要があるかどうかということです。そのうち20％しか役に立ちません。

Webデザイナーは、Photoshopでデザインを作成する中間層をもう1つ追加することなく、HTMLおよびCSSでデザイン全体を直接作成し、そこに残りの要素を単純に作成できますか？

みんなに同意しないといけない。PhotoshopはWebサイトを設計するためのツールではありません。Webサイトをスケッチするためのツールです。Webサイトは、CSS、HTML、およびJSになりがちな媒体で設計する必要があります。

Photoshopを使用しないという意味ではありません。しかし、あなたは確かにそうする必要はありません。

私はフォトショップでクライアントにウェブサイトのデザインを見せないという大ファンです。サイトが住む媒体ではありません。Photoshopコンプは、相互作用、デバイスの違い、ブラウザーの特異性、クリック可能性、応答性などを伝達する機能を提供しません。

確かに、実際には多くの場合、JPGモックアップを表示する必要があります。いいよ そのためにPhotoshopを使用します。ただし、そのPSDファイルを取り込んで、それをWebサイトに切り取ってはいけません。それは1999年に理にかなっています。今日はそんなに大したことではありません。代わりに、そのPSDを取得し、それをガイドとして使用してください。これは「おおよそサイトはどのように見えるかですが、CSS / HTML / JSで構築されており、必要に応じて対応しているという事実を考慮してください。

したがって、質問に答えるには：

Webデザイナーは、Photoshopでデザインを作成する中間層をもう1つ追加することなく、HTMLおよびCSSでデザイン全体を直接作成し、そこに残りの要素を単純に作成できますか？

はい。確かにそれを行うことができます。PSDデザイナーと並行してそれを見たことがあります。PSDアプローチの最大の問題は、アジャイルチームで作業している場合です。ドキュメント（PhotoShopなど）に使用される重いファイルは、アジャイルプロセスにとってかなり大きな負担となり、最終的には解決するよりも多くの問題を追加することになります。その後、逆に作業する傾向があります。必要に応じてPSでスケッチし、HTML / CSS / JSで設計および構築します。その後、会議の視覚的な更新をすばやく行う必要がある場合は、作業中のプレゼンテーションレイヤーマークアップをスクリーンショットし、PhotoShopで平手打ちして、すばやく調整します。

**編集**

新しいクライアントですか？

絶対-新しいクライアント/サイトのデザインを提案している場合。素人は一般に、自分の頭の中にあるものを見るのに苦労します。ワイヤフレーム、図面なども常にカットするとは限りません。ロゴ、写真、コーポレートフォント、UIを備えたモックアップを与えられたときよりも、WFやスケッチだけを持っているとき、クライアントから「Xをやろうと思っていた」と聞きます。

その他のシナリオ：

そうでないかもしれない-ジョブの要件に一致する既存のHTML / CSS / JSを使用できる場合、または既存のクライアントのコンテンツを編集している場合は、コードだけで作業する方が良いでしょう。そうでない場合、Photoshopでかなりの時間を無駄に費やすことになります。スクリーンショットとPhotoshopを介した微調整が承認プロセスを本当にスピードアップしたり、アイデアを打ち出したりすることができる（言及した@ DAO1のような）インスタンスがあります。

** 終わり **

はいと言う-

デザインが単純化されていても、ビジュアルを使用してデザインを販売する方がはるかに簡単です（コンプを作成するのがはるかに速くなります）。PSが私の仕事に最も役立つ場所です。

また、グリッドシステムにレイヤーを組み込むことで、物事のレイアウトを確認し、必要な場所にすばやくドラッグできます。繰り返しますが、これは、コンプ、およびクライアントが要求した変更に役立ちます。

一般的に使用される要素のPhotoshopライブラリを保持する場合：ベクトルベースの丸いコーナー入力ボックス、グリッド、「ロゴはここに」ボックス...すべて単一ファイルまたは複数ファイルのレイヤー（選択）-ホームページやインテリアページをコーディングするのにかかる時間の何分の1かで構築できます。

一般的なCSSファイルを（一般的な設定で）保持することは、コーディングの際にも役立ちますが、CSSの堅牢性に関係なく、ワークフローからPSを削除する価値はありません。

あなたのユーザーの100％が、あなたのサイト（またはもっと重要なのはクライアント）が意図したとおりにサイトを見ることができるブラウザーを持っていると保証できますか？番号？それから何パーセント？90％？80％？

残りの10％（20％？40％？）で見られる代替バージョンが受け入れられるように、適切に劣化することを確認できますか？

これらの問題のいずれかまたは両方が問題である場合は、Photoshopが必要です。

考えるべきこと：

• これらの派手なデザインをウェブ上に載せることには多くのことが関係しています。少なくともより複雑なものについては。Photoshopを使用すると、最終結果をすばやく確認できます。

• 仕事中のデザイナーにとって、Photoshopでモックアップを作成する方が通常はより速く、正当化されます。これは、1日中HTMLやCSS3をハッキングすることに費やす必要がないためです。

• あなたが述べたように、彼らはCSS3でそれの80％を行うことができますが、その後、彼らは最終的にPhotoshopを何らかの形で必要とします。

• あなたがデザイナーであり開発者であれば、Photoshopでモックアップを行うのを控え、それが時間を節約し、そうでなければ常にPhotoshopでモックアップを行うと主張します。