プログラマが1ヶ月でWebデザイナーに転身する方法

web


サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。
しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。


そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。
今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。



詳解HTML & CSS & JavaScript辞典


Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
■　HTML,CSSを覚えよう

まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。


ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えていると作業の効率が違う。


あと、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト。これは必読。この本よりCSSについて詳しく書かれている本というのは実在しないと思う。Webデザイナーならせめてこの本の内容ぐらいは理解していて欲しい。

JavaScript 第5版


JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
■　JavaScript

プログラマならJavaScriptはすぐに習得できるはずだ。プログラマからWebデザイナーに転身するなら、是非、JavaScriptを身につけよう。それが大きなアドバンテージになる。


JavaScriptに関して必読書は2冊だけ。
JavaScript 第5版(→ http://d.hatena.ne.jp/yaneurao/20081202 )とJavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスのみ。後者は、JavaScriptの悪い部分を使わなければ、JavaScriptはとても良い言語だということを私に教えてくれた本。


あとは、prototype.jsとかscript.aculo.usのソースを読むこと。まあそれくらいでJavaScriptは卒業。
C++/Javaなどで鍛え上げたプログラマなら勉強開始後2,3日あればたいていのことは出来るようになる。


■　ActionScript 3.0


Flashも作るだろうから、ActionScriptもマスターしておいたほうが良い。JavaScriptだけでは何かと限界がある。
ActionScript 3.0はJavaScriptを少し改良した程度の言語だ。


コマンドラインで入力してコンパイルするなら、無料の開発環境で出来る。
JavaScriptをマスターしたあとなら習得にそれほど時間はかからない。ActionScriptの入門書は不要。

7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)


編集デザインの発想法―動的レイアウトのコツとツボ570
■　レイアウトの基礎を学べ

デザイナーと言うからには、デザインセンスが問われると思いがちだが、Webデザインに限って言えば、決してそうではない。
まず、画面レイアウト。これには、いくつか基本的な法則がある。その法則を守りさえすれば、レイアウトに関しては及第点。


私が参考にした本は7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)と編集デザインの発想法―動的レイアウトのコツとツボ570だ。前者は、レイアウトって感性でやるもんじゃなく、論理なんだなぁと私に教えてくれた本だ。後者は、レイアウトをする上で必要となるセオリーがいっぱい載っている本。この2冊は広告やチラシを作るときなんかにも参考になる。

Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)


Webデザイン 色の辞典 魅せるWebサイト 売れる配色
■　配色デザイン

配色に関しても、いくつかのセオリーがある。センスの良い人はセオリーなんか学ばずとも感性でなんとかやってしまうのだろうけど、デザインセンスのない人は、セオリーで足場を固めよう。


私が参考にしたのはWebプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)。配色デザインの本は多数出ているのでこの本にこだわる必要はないと思う。

素材辞典フォトバイブル 20000
DynaFont TrueType600+欧文3000 Vista対応版
■　写真・フォント

Webデザインをする上で写真などがあると訴求力が違う。写真は写真の素材サイトなどで購入する。
素材集などいろいろ買い集めておくと表現の幅が変わってくる。
あとは文字フォント。これもいろいろ集めておくと見栄えのいいものが出来る。


写真は、ダウンロード販売をしているサイトがいくつかあって、そういうところを利用したほうが素材集をいくつも購入するよりは安くで済むと思う。


素材集としては素材辞典フォトバイブル 20000は結構お買い得だと思うのだけど、いまどきのWebサイト用として使うには画像の幅が足りないことがあるのが少し残念。


フォント集はDynaFont TrueType600+欧文3000 Vista対応版がお買い得。

Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)


Photoshopプロフェッショナル ロゴデザイン CS3/CS2/CS/7.0対応


Photoshop10分間ロゴデザイン―Photoshop Elements 3.0対応版


クリエイターのための3行レシピ ロゴデザイン Illustrator (クリエイターのための3行レシピ)


3日で腕が上がった(ように見える)グラフィックデザインの技とコツ―その実力をワンランク上の腕前に見せられる秘技が満載! (エムディエヌ・ムック―インプレスムック)
■　Photoshop/Illustrator

PhotoshopなんかなくてもGIMPでボタン素材などは作れると言えば作れるのだが、プロとして仕事をするつもりならGIMPを習得するのは全く無駄な時間になると思う。


・Webデザイナーとして就職したときに、「Photoshop使えません」では話にならない。
・お客さんからpsd,epsなどのデータを渡されて、「編集できません」とか、「読み込めません」では話にならない。
・Photoshopなら入門書や解説書など情報が豊富だし、有償・無償を含めてプラグインも豊富。


そんなわけでPhotoshopを避けて通れないと思う。出来ればIllustratorも習得しておきたい。


ロゴデザインの本は多数出版されていて、いろんなロゴをさっと作れるようにしておくとWeb用のボタン素材などを作るときに役に立つと思う。ロゴを作る過程でPhotoshop/Illustratorのテクニックも学べるので一石二鳥。


Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)は、いまどきのWebサイトでよく使われる画面パーツを作るテクニックがいろいろ載っていて参考になった。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。


入門Webデザインユーザビリティ 使いやすさで成果を上げるプロのワザ
■　ユーザビリティ

ユーザビリティを高めるのは、Webデザイナーだけの仕事ではなく、プログラマも協力する必要がある。(Ajaxを用いて画面を更新するなどは、Webデザイナーがプログラマを説得してやってもらうことではなく、プログラマが設計段階で考慮すべきことである。)


それゆえ、ユーザビリティに関する書籍は、Webデザイナーだけではなく、プログラマも理解しておく必要がある。


私が参考にしたのは
・Webユーザビリティデザイン Web制作者が身につけておくべき新・100の法則。
・入門Webデザインユーザビリティ 使いやすさで成果を上げるプロのワザ
の2冊だが、この本を特にお薦めするわけではない。

■　私が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