新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Photoshop(フォトショップ)を使ったWebデザインで注意する点

      2014/11/12

  • このエントリーをはてなブックマークに追加

学校で生徒さん用にまとめたのですが、意外と重要な事だと思ったので公開することにしました。
みなさんは、Webサイトのデザインをどのように作られていますか?
Photoshop?Illustrator?それとも、ダイレクトにDreamweaver等で作られちゃっている人もいるかもしれません。
自分の場合は元紙媒体のデザインをやっていた関係上、IllustratorやPhotoshopを使うことが多いのですが、
WebであればまずはPhotoshopベースで全体のデザインを作ってしまうことが多いです。
(紙媒体であれば当然、Illustratorベースですね。)

PhotoShop

スポンサーリンク
 

そんな時、注意しなければならないことをいくつかあげておこうと思います。
紙媒体のデザイン時には思いもつかなかったことがWebサイトのデザインにおいては必要、そして重要なことだったりするんですね。
ということで、特に今まで紙媒体をやってきてWebもやりたいという方を対象に説明していきます。
いきなりWebの方にとってはピンと来なかったり当たり前だったりする部分もあるかもしれませんがごめんなさい。

まずは箇条書きで項目をあげた上、各項目について説明したいと思います。

  • ビットマップ(点)でデザインする
  • 全体の中でPhotoshopをベースにIllustratorを使う部分、HTMLでテキストにする部分を意識してレイアウト、デザイニング
  • Illustratorはロゴ、マップ等、限定的に使用しスマートオブジェクトとしてリンク
  • HTMLでテキストにする部分はOS標準のフォントでアンチエイリアスを切る。細かいサイズの指定はNG
  • シェイプを使う時は「ピクセルにスナップ」のチェックを忘れない
  • 色はRGB

ビットマップ(点)でデザインする

なぜ、Photoshopを使うのかというとWebは点(ビットマップ)でデザインする必要があるから。
Photoshopを使って単位を「px(ピクセル)」で統一、画面サイズを原寸大にしデザインしていく。
ときに拡大して点(ビットマップ)レベルのデザインが必要になっています。
一番の基本で、これが理解できないとWebデザイナーにはなれません。

全体の中でPhotoshopをベースにIllustratorを使う部分、HTMLでテキストにする部分を意識してレイアウト、デザイニングする

ここが印刷物(紙媒体)のデザインとの一番の違いだと思います。
印刷物の場合は比較的自由にデザインすることができましたが、Webの場合はビットマップという制約があるために、デザインにコツが要ります。
特に重要なのは文字にするか画像にするか。
その基準も印刷物と違い文字まわりはIllustratorを使ったほうが良いという話ではありません。
以下具体的に説明します。

Illustratorはロゴ、マップ等、限定的に使用しスマートオブジェクトとしてリンク

Illustratorが担うのは文字まわりというよりはPhotoshopでできない部分、Photoshopが弱い部分を担います。
そう考えると文字まわりもとなってしまいますが文字まわりはPhotoshopで作ってください。(後述します)
具体的にはアクセスマップやグラフなどはPhotoshopよりもIllustratorで作ったほうがいいでしょう。
これを、スマートオブジェクトとしてPhotoshopのデータにリンクさせるのがベストです。

HTMLでテキストにする部分はOS標準のフォントでアンチエイリアスを切る。細かいサイズの指定はNG

どういった意味かというとPhotoshop上で実際ブラウザ上で見たのと同じデザインの書体の設定にしてデザインしましょうということです。
このあたりはいきなりコーディング派の人には回りくどいと思われるかもしれませんが自分の場合は全体像をきっちりデザインしてからコーディングというかたちにしているのでこういった手法を使っています。
もちろん、デザインなれしている方であればいきなりDreamweaverを使ったあコーディングでも良いと思います。

シェイプを使う時は「ピクセルにスナップ」のチェックを忘れない

CS5以前のボタンなどのデザインを作るときにシェイプを使う機会があると思うのですが、特に長方形ツールを使うときなどは「ピクセルにスナップ」にチェックが入っているか確認する必要があります。
これにチェックが入っていないとピクセル単位でのデザインに支障が出てきます。
なお、CS6の場合は初期設定でその状態になっています。(環境設定で切り替える事が可能です)

色はRGB

基本ですが一応言及しておきます。
印刷物の場合はCMYKが当然でしたが、RGBの方が色域が広いので、Webの場合は基本RGBでデザインした方がクオリティ高いサイトが作れます。

といったところでしょうか。

紙媒体でPhotoshopを扱う場合はCMYKのデータで解像度が十分であれば、デザイン上の制約は特になく、比較的、自由にデザインすることができましたが、Webはそうはいかないんです。
この、デザイン上の制約をうまく理解していないとWebデザインは難しい。

つまり、これから先のコーディングも見越したデザインも必要になってくる。
これが紙媒体だけをやっているグラフィックデザイナーとの一番の違いだと思ってます。 

 - Photoshop(フォトショップ), Webデザイン, デザイン

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
ドメインリサイクル

ドメインリサイクル業者(個人?)を発見。

Yahoo!ボックス(Web版)は複数ファイルの一括ダウンロードができない

アプリを使えばできるのでいいのかもしれませんが、みんなで共有するパソコンに自分用 …

no image
人気blogランキングに参加

Webマーケティングの一環として、ランキングに参加してみました。 一日に2、3人 …

レストランで料理の写真を撮ってブログにアップすると違法?

などというドキッとするようなタイトルの記事を発見。結論はどっち? □  …

WordPressでプレビューが見れなくなったらプラグイン「WP File Cache」「WP Super Cache」を無効化→有効化

当ブログ、WordPressで運営、管理しているのですが、最近のWordPres …

本買いました

ポケットリファレンスシリーズの「Action Script」 MdNの「FLAS …

ブラウザで「Mac OS 7」、「Hyper Card」や「Kid Pix」も

自分が一番最初に触れ合ったパソコンはPC8001でしたが、本格的にパソコンをいじ …

no image
PLOT-FACTORYオープン!?

4月予定だった本家PLOT-FACTORYサイトの作成をようやく再開しました(汗

念願の佐々木岳久さんの個展に行ってきた

当ブログでも何度か紹介させていただいたシュールレアリスムの影響を多分に受けた芸術 …

富の分配の究極形、パトロンを得るなら「CAMPFIRE(キャンプファイヤー)」

こんなサイトがあったとは! 眼から鱗でした。 しかも、しっかり成り立っちゃってる …