プログラマが1ヶ月でWebデザイナーに転身する方法
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。
しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。
そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。
今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。
  |
■ HTML,CSSを覚えよう まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えていると作業の効率が違う。 あと、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト。これは必読。この本よりCSSについて詳しく書かれている本というのは実在しないと思う。Webデザイナーならせめてこの本の内容ぐらいは理解していて欲しい。 |
  |
■ JavaScript プログラマならJavaScriptはすぐに習得できるはずだ。プログラマからWebデザイナーに転身するなら、是非、JavaScriptを身につけよう。それが大きなアドバンテージになる。 JavaScriptに関して必読書は2冊だけ。 あとは、prototype.jsとかscript.aculo.usのソースを読むこと。まあそれくらいでJavaScriptは卒業。 ■ ActionScript 3.0 Flashも作るだろうから、ActionScriptもマスターしておいたほうが良い。JavaScriptだけでは何かと限界がある。 コマンドラインで入力してコンパイルするなら、無料の開発環境で出来る。 |
  |
■ レイアウトの基礎を学べ デザイナーと言うからには、デザインセンスが問われると思いがちだが、Webデザインに限って言えば、決してそうではない。 私が参考にした本は7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)と編集デザインの発想法―動的レイアウトのコツとツボ570だ。前者は、レイアウトって感性でやるもんじゃなく、論理なんだなぁと私に教えてくれた本だ。後者は、レイアウトをする上で必要となるセオリーがいっぱい載っている本。この2冊は広告やチラシを作るときなんかにも参考になる。 |
  |
■ 配色デザイン 配色に関しても、いくつかのセオリーがある。センスの良い人はセオリーなんか学ばずとも感性でなんとかやってしまうのだろうけど、デザインセンスのない人は、セオリーで足場を固めよう。 私が参考にしたのはWebプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)。配色デザインの本は多数出ているのでこの本にこだわる必要はないと思う。 |
  |
■ 写真・フォント Webデザインをする上で写真などがあると訴求力が違う。写真は写真の素材サイトなどで購入する。 写真は、ダウンロード販売をしているサイトがいくつかあって、そういうところを利用したほうが素材集をいくつも購入するよりは安くで済むと思う。 素材集としては素材辞典フォトバイブル 20000は結構お買い得だと思うのだけど、いまどきのWebサイト用として使うには画像の幅が足りないことがあるのが少し残念。 フォント集はDynaFont TrueType600+欧文3000 Vista対応版がお買い得。 |
     |
■ Photoshop/Illustrator PhotoshopなんかなくてもGIMPでボタン素材などは作れると言えば作れるのだが、プロとして仕事をするつもりならGIMPを習得するのは全く無駄な時間になると思う。 ・Webデザイナーとして就職したときに、「Photoshop使えません」では話にならない。 そんなわけでPhotoshopを避けて通れないと思う。出来ればIllustratorも習得しておきたい。 ロゴデザインの本は多数出版されていて、いろんなロゴをさっと作れるようにしておくとWeb用のボタン素材などを作るときに役に立つと思う。ロゴを作る過程でPhotoshop/Illustratorのテクニックも学べるので一石二鳥。 Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)は、いまどきのWebサイトでよく使われる画面パーツを作るテクニックがいろいろ載っていて参考になった。 |
  |
■ ユーザビリティ ユーザビリティを高めるのは、Webデザイナーだけの仕事ではなく、プログラマも協力する必要がある。(Ajaxを用いて画面を更新するなどは、Webデザイナーがプログラマを説得してやってもらうことではなく、プログラマが設計段階で考慮すべきことである。) それゆえ、ユーザビリティに関する書籍は、Webデザイナーだけではなく、プログラマも理解しておく必要がある。 私が参考にしたのは |
■ 私が1ヶ月間、Webデザインを勉強してみた感想
いままでWebデザイナーに頼んでいた仕事を自分でやってみて、まあ自分でもある程度のことは出来るんだなという感触を得た。
自分にWebデザインの知識があれば、サイト作りにあまり妥協をしなくて済むようになるし、Webデザイナーに説明するときもスムーズに話が進む。
Web系プログラマは、みな等しくWebデザインを学ぶべきだと思う。
■ はてブに対する返答
m_nagase 詳解HTML＆CSS＆JavaScript辞典←こんな本間違っても買うなよ。 2009/03/18
masakanou CSS, HTML, JavaScript 「詳解HTML & XHTML & CSS辞典」のほうがよいと思う。
リファレンスレベルでもHTMLとCSSの記述の厚みが違う。 2009/03/18
最初、そちら(「詳解HTML & XHTML & CSS辞典」) を紹介させてもらおうかと思ったのですが、アマゾンでは売り切れ中(絶版？)なので、「詳解HTML & CSS & JavaScript辞典」のほうを詳解させてもらいました。
本の内容自体は、どちらの本も正直言ってあまりいい類の本だとは思わないのですが、各ブラウザでの対応状況が一覧になっているので自分で試す労力を考えれば一冊持っておくのは悪くないと思いました。
frankly あとで消す なんでこんなとこでtable使ってんの？見出しの"■"もおかしいなぁ。HTMLを基礎の基礎から学びなおしたほうがいいと思うけど…。こんなまとめ記事書いて天狗になってる場合じゃないよ。 2009/03/18
3年前に作った自作の「はてなエディタ」(→ http://d.hatena.ne.jp/yaneurao/20060604 )を使って更新してるので、そのへんはご勘弁を。
itochan アクセシビリティについては特に言及なしorz
Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)を買ったものの、こちらは積ん読なので紹介しませんでした。すみません。何かいい本があれば教えてください。
kojitron *webデザイン デザインは（ある程度までは）セオリーだと私も思います。「おかしくない」ものはすぐできるようになる。でも「かっこいい」ものはセオリーがわかったくらいじゃ作れないので、デザイナーさんをなめたらいかんです 2009/03/18
ningenotoko デザインはセンスいらないけど、経験は圧倒的に必要。いきなりすごいデザインは作れない。 2009/03/18
それは、全く、その通りですね。
■ 関連エントリー
このブログは釣り堀です。
http://d.hatena.ne.jp/yaneurao/20090319
