WebプログラマのためのHTMLデザイン(その1)

おいら今までの会社ではプログラマとデザイナーに分業して作業していたので、いわゆるシステム絡みのものについては一通り出来るんだけど、デザインに関してはMS Wordに負ける自信があるくらいできない。

まぁ、自慢にもならないし、周りのフリーランサーに聞いても「やっぱデザインが出来ないってのは大きいね」だし、実際今困ってるし(たいした事なくても外注に出すの?とか)、完璧じゃなくてもある程度までは覚えなきゃだめかなぁと思ったので、勉強してみた。

で、考え方とコツさえつかめば、今まで現場でシステムを作ってきたプログラマが、ある程度デザインを出来るようになるのは、あまり大変な事じゃないような気がしてきたので、ここでその成果をまとめてみる。

覚えなければいけない理由

まず、WebプログラマがHTMLデザインを押さえなければいけない理由をまとめます。

• システム構築に当たりクライアントとよーく話し合って、顧客の要求を一番理解している(どんなものを作ればいいか具体的にイメージできている)のは誰?
• そして、その要求に対してシステムが支援できる範囲を把握しているのは誰?　
• そして、それを実際の画面構成として、フォームなどを配置したHTMLベースのモックなどに落とし込む作業を行うのは誰?
• たとえば、今まではプログラマとデザイナで分業していたけど、デザイナが辞めちゃったとか、自分が独立した場合などに困るのは誰?
• Ajaxを絡めた動的なレイアウトを、デザイナに丸投げするのは危険。てか、フツー無理。この場合デザインも考えながら作らなきゃいけなくなるのは誰? (デザイナにAjax用ライブラリの詳細まで把握して追っかけとけってのは無理でしょう)
• せっかくすばらしいシステムを作っても、見た目が悪ければ流行らないという現実。逆もまた然り。
• Flexにもスタイルシートという概念があって、これもHTMLにおけるソレに近いけど、Ajaxと同じで、こだわるところじゃないなら、プログラマが作った方が早いと思うよ。少なくとも、HTMLより分業はしずらい
• 動的にコンテンツが変更されるシステムのSEOチューニングって、プログラマしかできないよね
• デザイナのワークフローを押さえることで、ちょっとしたノウハウ(素材を残しておくとか)や、ちょっとした修正を自分でこなしたり、工数をイメージできるようになることで顧客折衝がうまく進むようになるかもね
• Webプログラマ自らがデザインの基本部分を作ることで「システムの見た目についての仕上げをデザイナに任せるための下地部分の整備」とできるならば、「おいらプログラマだから見た目部分はデザイナよろしく」って感じで作業するより、全体的な効率が圧倒的に良いよね
  
• てか、プログラムを理解してないデザイナに丸投げすると、壊されるよね。(そして壊れてないか総当たり的にテストしたり、再度コードレビューするのってとても苦痛だよね。プログラマじゃないと出来ないし)
• てか、うちの会社ってどんな場合でも分業できるほど人員居たっけ?
• 内情・トレンド的にも、そろそろプログラマとデザイナの分業って時代じゃなくなってきてるのかもね
• てか、CSSみたいなインフラ的技術を理解してないのって、そろそろヤバくない? 　危機感抱いてるっしょ?

おー。結構あるじゃん。ヤバイわおいら。

スタートライン(つーか対象読者)

絶対的なモノではないけど、記事の立ち位置として前提条件は以下のような状況を想定しています。

• Web系プログラマとして、HTMLベースのWebアプリはそこそこ作れる。サーバサイドやクライアントサイドのプログラミングそのものについては、あまり問題意識はない。
• プログラマとデザイナが分業しているなど、システム構築経験はあるがデザイン部分については経験が足りない。
• おいらにはデザインは無理と思っている。というか、できるかもしれないけどセンスが無いと思っている。table周りをちょこちょこ修正するならできるけど、全体的なデザインは自信がない。
• 特にCSS周りはよくわかんなくて怖い
• inputタグとかimgタグとか、一般的に使っているタグの意味や書き方については困っていないし、書ける。(てか、これできないとプログラミングできないし)

ゴール(is NOT 理想)

これをふまえて、ゴール(= 現実的妥協点)は以下のように設定します。

• HTMLはコンテンツの意味付け、CSSは装飾と割り切る
• ただし、W3Cの思惑通りすべてCSSでデザインしようなんて考えない。実際、プログラマ視点で見ると「それtableでいいんじゃないの?作るの楽だし」と思うことや、管理者視点から見ると「そんなところに拘らないで(旧来の方法で)さっさと仕上げてよ。その方がブラウザ間の互換性も高いでしょ?」と思うことは多々ある
• 画像を新たに起こすのは諦める。Webプログラマが求めるようなレベルのモノは、ちょっと真剣にググるか、画像ジェネレータなどで作って、ちょこっと編集すれば間に合うことが大半だし。(偏見?)　てか、あーたそんなセンス無いでしょ?
• 「完璧じゃなくても、まぁまぁおかしなことをしてないレベル」もしくは「あとで全体的な仕上げをデザイナに行ってもらうための下地として問題ない(手戻りのない)レベル」を目指す
  
• CreativeCommonsモノを積極的に利用する。特にエンドユーザの目に触れない管理画面なんて、CreativeCommonsで十分なんじゃないの?(てかエンドユーザ用の画面よりキレイに見えたりね)
• CSS Hack的なものはどーでもいいし、ブラウザが進化していくことを考えれば、使うべきではない。無駄無駄。

極論的には

• HTMLの基本レイアウトはあらかじめ用意しておいたテンプレートを用意するか、パクる。よってここにかける時間は極端に短いはず。 (大丈夫、すべてそのまま使えるほどパクれる範囲は多くない。そこに意匠権が存在するほどいろんな表現方法があるわけでもない。見た目は別だし)
• 色の使い方も、なれればキレイで早いはず(センスがよいかどうかはともかく、理論を知れば外れることも少ないはず)
• アイコンや背景画像など、汎用パーツ的なモノも、探し方さえまとまっていれば手間ではないはず
• CSSの当て方(どこでどのプロパティを当てて、どう継承させるかなど)や、ユーザインターフェイスに時間がかかるし、かけるべき
• てか、あーたプログラマなんだから、(デザインはそこそこに)ちゃんとテストして、セキュリティにも気をつけれよ。(ユーザインターフェイスに時間をかけるのはいいとしても)

ポイント(学習方向性)

ゴールへ最短で向かうための方向付けは以下のように設定します。

• HTMLタグの意味付け重要。SEOとしても効果が望めるため一気に把握&積極利用すべし (同時にSEO系の知識も仕入れるべし)
• エンジニアのためのWebデザイン教室を読んでCSSの基本概念を押さえるべし。特に一般的用法とボックス概念と継承概念とセレクタ概念
• CSSがらみはブラウザの対応度合いの話もあって、ノウハウの宝庫。逆に言うと、作ってみないとわからないことが多い気がする。チュートリアル程度だと壁に当たることも少ないので、ここは実践あるのみ?(ここが難しいと思う原因?)
• 色に関する基本知識を押さえるべし。暖色寒色程度ではなく、陰影の付け方や色同士のマッチングなども
• PhotoShopやイラレやドリなどの使い方は、知らなくてもなんとかなるし、ちゃんと知りたければ本もある。要はあまり重要ではない
• Ajaxライブラリ(特にExtJSやjQueryなど)を使えば、デザインも含めて一気に楽になる可能性がある(ので、これの把握は重要)
• HTMLテンプレート集、アイコン集、挿絵や背景画像用写真集、色決めに使う各種ツール、FireBugやそれに類する開発ツールなどをまとめておく事は超重要
  
• で、こられはCreativeCommonsLicenseを採用していることが多いので、基本理念と使わせてもらい方(変な日本語?)を把握することが重要
• それよか、レイアウト幅は何ピクセルにするのがトレンドとか、このツールを使うとこんな事ができるとか、こういうサイトではこのブラウザを使っている比率が高いとか、このブラウザではこんな風に解釈されるのでこうした方が良い、的なノウハウが超超重要。これは継続的にそれ系サイトをチェックするか、聞ける人に(聞けるときに)聞くのが良いかも。(フリーになるとここが辛い)

まー、HTMLとCSSの基本的な知識なんて数日あれば、いいとこ把握できるし、応用範囲広いぜー

おいらどっちかっていうとAjaxよりFlex派なんだが、HTML+CSSのようなインフラ的な部分は絶対無視できないし、択一な関係じゃないから、覚えなきゃだぜー

なんとか集とか、なんとかツール類は、おいらがまとめておくからよー

じゃあ、次回の記事でもうちょっと突っ込もうか。