web制作会社に就職が決まりました。
完全分業制でデザインのみを担当するのですが、webデザインの勉強方法がいまいちわかりません。
印刷物の正攻法でデザインしてしまうと、プログラムの実装段階で非常に苦労しました。他のサイトを見る限り、見た目は二の次で、cssでのコーディングが簡潔に行えることを優先しているように思えました。
実際にデザインカンプを制作する際は、行間やマージンの取り方はグラフィック的な考え方ではなく、コーディングのしやすさに準じて制作されているのでしょうか。また、その場合、どのように勉強することが効果的でしょうか。
自分は一応いくつかのサイトを制作してきましたので一通りのことは理解しているつもりですが、デザイナー専業の方にはcssやhtmlすらわからない方もいらっしゃるようで、どのようにデザインされているのか疑問を感じます。
長くなりましたが、よろしくお願いします。
みんなの回答 16 件
webデザインとフロントエンド実装両方やってるものです。
コーディングを考慮してデザインを考えたことはほとんどありません。
どんなデザインでも実装できないなんてことはないです。
html,cssで無理な部分はjavaScriptでもレイアウト部分のカバーを行えます。
基本的に「使い回し」の精神が最優先。「同じスタイル」かそれの「ほんの少しのカスタマイズ」で実現できるパーツをたくさん作り、それをレイアウトする感じ。「そこだけサイズを変える」とか「アキは通常10pxだけどここだけ15px」とかグラフィックのこだわりは一切通用しないと思った方がいい。それを言い張ればコーダーに嫌われる。グラフィックもやるから気持ちは解るが、WebにはWebのやり方がある。
コーダーやってるものの意見としてはどんなデザインでもコーディング出来て当たり前なのでデザイナーは気にする必要なし。ユーザーのことを考えたデザインが出来ていればそれでいいのです。
どんなデザインでもコーディングはできるけど、Webとしてのユーザビリティは必要。その部分は、紙とは大きく違う。
書籍からは学びにくいので、実例の載ったまとめサイトなどを見て、近い業種でうまくやっているものを参考にしていくといいと思う。（パクるのではなく、やり方を参考にする。）
別に作るだけならなんでも出来ると思う。
ただ、リテイクやリニューアルが発生したときに、
コーディングで吸収できる物とデザインからやり直さなければならない物では
頭を抱える人間が何人か増えるし、費用は下手すると一桁変わる。
1度コーディングしてみりゃいいじゃん。
Webデザインするのにやっておいて損はない。
Webデザインは紙デザインのように結果が固定ではありません。
カンバスの大きさ、フォントの種類、色再現の結果など、各環境によってかなり違います。従って、自分の制作環境にだけフィックスしてデザインしても、自己満足にしかなりません。大げさに言えば、100の環境差があるなら、100のデザインをする必要がある。それがwebと紙の違いです。だからと言って、100パターンのデザインをするかどうかと言えば、そんな訳がありません。webデザインをするものにとって最低限必要なのは、前提知識として、「フィックス可能なもの」と「フィックスしても意味がないもの」です。
だから、もし、html/cssコーディングをまったく知らないデザイナーに説明をするなら、まず、各環境差分のデザインをすることがどれだけ非効率かを教えてあげればいいと思います。たとえば、ウィンドウ幅1000pxで固定デザインをつくったなら、固定幅800pxの時、600pxの時、400pxの時、その全てのデザインを作ってください。MSゴシック、ヒラギノゴシック、游ゴシック、IPAモナゴシックの表示される可能性のあるすべてのフォントを対象に行高・字送り・カーニングのそれぞれのパターンを作ってください。などと、優しく脅せばいいです。
ここはコーダーが多いようだけどあんまり鵜呑みにしないで良いとおもうよ。
確かにマルチデバイスだから柔軟性のあるデザイン性は必要だけど、そうじゃないインパクトを求められる場面も多々ある。コーダーの意見を重視してたらそういう物が作れなくなる。
てかコーダーなら「任せとけ」くらい言えよ。あとデザイナーとちゃんと話し合ってデザイン作ってけ。
しっかりデザイン費取れるなら、強気でコーダーに注文。
とれないなら、まずコーダー様に相談とお願い。
スケジュールさえ守ってくれれば、いくらでも好きなように作っていいよ！
構成案やデザイン案で散々時間使っておいて、でも納期はズラせないからあとお願いってのが一番困るしハゲる
自分でフロントエンドも組めないんじゃウェブデザイナーだと思わないなあ。
コーダーファースト
主にデザインを担当しているwebデザイナーです。
『見た目は二の次で、CSSでのコーディングが簡潔に行えることを優先している』…だけではないと思うのです。
質問者さんがそう思ったサイトの中には、コーディングスピードへの影響より、「ユーザーが環境を問わず快適に見られ、目的を果たせること」を重視しているサイトも多いのではないでしょうか。
■ 回線速度の遅いユーザーや古いブラウザを使っているユーザーのために
無駄に画像を使わない、むやみにエフェクトをつけない等の心がけで、回線速度の遅いユーザーや古いブラウザを使っているユーザーの環境でも、読込や処理が終わらないストレスによる離脱をある程度防ぐことができそうですよね。
■ シニア等、文字を拡大したいユーザーのために
たまに字間やフォントのこだわりのために、見出しから本文からなんでも画像にするデザイナーさんのデータをもらうのですが、画像文字は拡大するとボケちゃったりそもそも拡大できなかったりで、ユーザーによっては苦痛です。
もうすでにそのへんは分かっておられて、「行間やマージンの取り方はコーディングのしやすさを重視するのか」だけ疑問に思われているようでしたらすみません。
そんなことはないと思います。細かい指定でも、大枠を組む前にざっと見渡せるガイドが別途用意されていればコーダーさんに気持ちよく対応してもらえると思うので、質問者さんがこれぞ！と思う感じでいいかと思います。
（指示なしで「カンプから全て読み取ってよ、このページだけ2pxアキがちがうでしょ」とかだと辛いです…）
文字や画像の光彩に乗算使うのやめてほしい。
デザイナー・コーダー・クライアント、それぞれにエゴがありますのでそれぞれ相談の上でデザイナーさんの思うようにデザインしたら良いと思います。どのようなデザインであっても、「CSSで組みにくい」だとか「文書構造的にどうだ」とかを二の次に出来る程にそのデザインに必然性と説得力があれば最善じゃないでしょうか？…で、勉強方法となると数こなすしか無いのでは…という風になるわけですが…
単純な解決策として、みんな仲良くするってのはどうだろう。
デザインする時に先輩Webデザイナーやコーダーの意見も聞いて、デザインに反映していったら、みんな幸せになるんじゃなかろうか。
関連するトピックス