自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。Tweet学校で生徒さん用にまとめたのですが、意外と重要な事だと思ったので公開することにしました。みなさんは、Webサイトのデザインをどのように作られていますか?Photoshop?Illustrator?それとも、ダイレクトにDreamweaver等で作られちゃっている人もいるかもしれません。自分の場合は元紙媒体のデザインをやっていた関係上、IllustratorやPhotoshopを使うことが多いのですが、WebであればまずはPhotoshopベースで全体のデザインを作ってしまうことが多いです。(紙媒体であれば当然、Illustratorベースですね。Amazon楽天ブックス7nethontoe-honスポンサーリンクそんな時、注意しなければならないことをいくつかあげておこうと思います。紙媒体のデザイン時には思いもつかなかったことが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デザインは難しい。これから先のコーディングも見越したデザインも必要になってくる。これが紙媒体だけをやっているグラフィックデザイナーとの一番の違いだと思ってます。コメントをキャンセルメールアドレスが公開されることはありません。謎多きTumblr(タンブラー)。Webの企画書を2点作っています。社内でサイト利用状況のアンケートを実施した。Webでモリサワフォントが使える日が既に来てました。以前話題にしたクリックジャッキングを実際行なっているサイトを見つけた。お久しぶりに画像編集ソフトGIMP2(ギンプ2)の話題。最近殆ど、Web専門となってきました。mixi(ミクシィ)怖い。POSTマクドナルドでホットコーヒーSサイズが無料。今後、機密情報はメール(デジタル)ではなく紙(アナログ)で。こんなニュースが話題になっていました。ピースサインで指紋が盗まれる。こんなことができるのでしたら、顔認証なんては穴だらけってことですよね。「楽天」でブランド品を買ってはいけない。(16)おすすめ商品いいね!よろしくお願いします。いいね!よろしくお願いします。自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。