ワシはワシが育てる

週刊少年ジャンプと任天堂のゲームが三度のメシより好きです。

Photoshopウェブデザインの長所・短所

まず前提としてPhotoshopは全て独学で半年未満の経験しかないので、多分色々間違っていることもあるかと思いますが、その上で現時点での意見を書かせていただきます。

ウェブサイト作成の工程を順に追うと

  • ワイヤーフレーム
  • デザインカンプ
  • コーディング
  • フロントのJS
  • (サーバサイドの)テスト
  • プログラムの実装
  • サーバへデプロイ

(実際には重なったり前後することも多いでしょうが)こんな具合になるかと思います。

Photoshop(Fireworks含む)でデザインカンプを作成するメリットとしては、工程を分けることでデザイナーとプログラマの分業が明確化され、それぞれの役割に徹することができることです。
当然のことながらそれぞれの得意分野に特化してプロジェクトを進めることができるので、品質も生産性も向上するでしょう。

しかしながら少人数(あるいは1人)で、短時間での作業となると必ずしもそうではありません。
昨今ではライブリロードやCSS3の普及によって、コーディングのみでも高度なグラフィックを実現できるようになり、インブラウザデザインがPhotoshopのを代替する流れが出てきています

インブラウザデザインはプログラミングを交えるとさらに強力で、繰り返し動作、条件分岐による描画に非常に強いです。(Photoshopでもアクションがありますが、プログラミングの方が楽でしょう)

例えば数値ごとにクラスを指定し、それを10回繰り返す場合

# rubyのテンプレートslimを想定
# 意味もなく10回繰り返しているだけで全く実用的ではないです
ruby:
  case value
  when 20
    class_name = ['yellow', 'small']
  when 40
    class_name = ['orange', 'midium']
  when 60
    class_name = ['red', 'midium']
  when 80
    class_name = ['black', 'big']
  end

- 10.times do
  div class=class_name
    = value

とだけ指定すれば、値の大小に応じてクラスが指定され、文字色やサイズを動的に変更することができます。
これをPhotoshopで実現するとなると、テキスト色や文字サイズを数十回に渡り手動で設定しなければならず、時間をいたずらに浪費しがちです。

それゆえ少人数で素早く開発する際には、工程をごちゃまぜにしてインブラウザでゴリゴリデザインしたほうが効率的なケースも想定されます。

※ グラフィカルな部分ではPhotoshopはサイズやカラーの条件分岐ができるので、一概にインブラウザの方が動的処理に強いといえるわけではありませんが

一方でページ数や構成が複雑になると、インブラウザの場合CSSが肥大化し、細かな余白の調整にさえ、ファイルや行の調査に時間を要し、直感的に操作することは困難になります。
そこまで来ると高度なデザインをインブラウザで素早く行うことは至難でしょう。

つまり規模やバリュエーションが増えるほどPhotoshopのカンプを作成して工程を分断するメリットが上回るようになってきます。

昨今リーンスタートアップが注目されていますが、これは端的に言うと事業者の思い込みに頼らず、早い段階で製品を世に出してフィードバックを得ては改善していくことを繰り返す手法です。
新規事業の多くはその製品が世間の検証を経ておらず、リリースするまでは事業者の予測や実際に対人してインタビューをする他ありません。そして多くはリリース後のフィードバックによって当初とは姿形を変えて成長していきます。

その事業特性上、リリース段階ではPhotoshopでデザインを作りこまずとも、インブラウザで工程を少なくすることで検証フェーズを長く取ることも戦略として大いに有り得るかと思います。

人的リソースやその技能、想定する品質や製作期間など、様々な外的要因によって左右されるので一概に決められることではないのは言うまでもありませんが。