Photoshop(フォトショップ)を使ったWebデザインで注意する点
2014/11/12
1年以上前の記事です。内容が古い可能性があります。
学校で生徒さん用にまとめたのですが、意外と重要な事だと思ったので公開することにしました。
みなさんは、Webサイトのデザインをどのように作られていますか?
Photoshop?Illustrator?それとも、ダイレクトにDreamweaver等で作られちゃっている人もいるかもしれません。
自分の場合は元紙媒体のデザインをやっていた関係上、IllustratorやPhotoshopを使うことが多いのですが、
WebであればまずはPhotoshopベースで全体のデザインを作ってしまうことが多いです。
(紙媒体であれば当然、Illustratorベースですね。)
そんな時、注意しなければならないことをいくつかあげておこうと思います。
紙媒体のデザイン時には思いもつかなかったことが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デザインは難しい。
つまり、これから先のコーディングも見越したデザインも必要になってくる。
これが紙媒体だけをやっているグラフィックデザイナーとの一番の違いだと思ってます。
アドセンス広告メイン
関連記事
-
-
ネットで印刷、印刷通販の「グラフィック」を使ってみた【発注編】
1年以上前の記事です。内容が古い可能性があります。ある人に頼まれてA4三つ折のリ …
-
-
Dreamweaver(ドリームウィーバー)で見かける緑の波線の正体とは?
1年以上前の記事です。内容が古い可能性があります。「Dreamweaver」のソ …
-
-
デザイン変更
1年以上前の記事です。内容が古い可能性があります。ブログのデザイン変更の詳細が分 …
-
-
最近の仕事
1年以上前の記事です。内容が古い可能性があります。最近殆ど、Web専門となってき …
-
-
あまり直帰率が改善されないので「関連記事」の場所を変えた
1年以上前の記事です。内容が古い可能性があります。以前、「直帰率対策で関連記事を …
-
-
「LINE Creators Market(ラインクリエイターズマーケット)」の人気スタンプ。「かわベーコン」さんの「にゃっちーず」他
1年以上前の記事です。内容が古い可能性があります。「LINE Creators …
-
-
PHPが凄い!!
1年以上前の記事です。内容が古い可能性があります。今まではCGIといえばPerl …
-
-
DreamweaverとFC2ホームページで作るサイト定義(サイト公開編)
1年以上前の記事です。内容が古い可能性があります。前編 → 後編 → 公開編 最 …
-
-
2011年「初日の出」画像まとめ
1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)で …
-
-
HTML5とそれまでのHTML(HTML4.01)との違い(追記あり)
1年以上前の記事です。内容が古い可能性があります。訓練校でも徐々にHTML5の話 …