| 書籍化されたで！ | 監修したで！(｀ω´) | 絶版なってしもた | 大好評発売中です！ | 少し書いたデ！(｀ω´) | これにもな！(｀ω´) | |
|
|
|
|
 |
 |
| YaneuLabs / YaneuraoGameSDK.NET / 掲示板 / やねうらおにメール / twitter / プロフィール |
サイトを構築していると、プログラマはWebデザイナーと共同作業をしなければならない。
しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。
そこで、一層、「すべてのプログラマはWebデザイナーになればいいんじゃね？」と思った。
今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。
|
|
まず、HTMLとCSS。いくら私でもW3C( http://www.w3.org/ )のすべてに目を通せとは言わない。 ブラウザ間で挙動が違うのでそれぞれのタグがどのブラウザで使えるのか一覧がまず欲しい。手軽なのは詳解HTML & CSS & JavaScript辞典。このハンドブックは見やすいのでお勧め。また、よく使うタグに関してはすべて覚えよう。覚えていると作業の効率が違う。 あと、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト。これは必読。この本よりCSSについて詳しく書かれている本というのは実在しないと思う。Webデザイナーならせめてこの本の内容ぐらいは理解していて欲しい。 |
|
|
プログラマなら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の入門書は不要。 |
|
|
■ レイアウトの基礎を学べ デザイナーと言うからには、デザインセンスが問われると思いがちだが、Webデザインに限って言えば、決してそうではない。 まず、画面レイアウト。これには、いくつか基本的な法則がある。その法則を守りさえすれば、レイアウトに関しては及第点。 私が参考にした本は7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)と編集デザインの発想法―動的レイアウトのコツとツボ570だ。前者は、レイアウトって感性でやるもんじゃなく、論理なんだなぁと私に教えてくれた本だ。後者は、レイアウトをする上で必要となるセオリーがいっぱい載っている本。この2冊は広告やチラシを作るときなんかにも参考になる。 |
|
|
■ 配色デザイン 配色に関しても、いくつかのセオリーがある。センスの良い人はセオリーなんか学ばずとも感性でなんとかやってしまうのだろうけど、デザインセンスのない人は、セオリーで足場を固めよう。 私が参考にしたのはWebプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)。配色デザインの本は多数出ているのでこの本にこだわる必要はないと思う。 |
|
|
Webデザインをする上で写真などがあると訴求力が違う。写真は写真の素材サイトなどで購入する。 素材集などいろいろ買い集めておくと表現の幅が変わってくる。 あとは文字フォント。これもいろいろ集めておくと見栄えのいいものが出来る。 写真は、ダウンロード販売をしているサイトがいくつかあって、そういうところを利用したほうが素材集をいくつも購入するよりは安くで済むと思う。 素材集としては素材辞典フォトバイブル 20000は結構お買い得だと思うのだけど、いまどきのWebサイト用として使うには画像の幅が足りないことがあるのが少し残念。 |
|
|
PhotoshopなんかなくてもGIMPでボタン素材などは作れると言えば作れるのだが、プロとして仕事をするつもりならGIMPを習得するのは全く無駄な時間になると思う。 ・Webデザイナーとして就職したときに、「Photoshop使えません」では話にならない。 ・お客さんからpsd,epsなどのデータを渡されて、「編集できません」とか、「読み込めません」では話にならない。 ・Photoshopなら入門書や解説書など情報が豊富だし、有償・無償を含めてプラグインも豊富。 そんなわけでPhotoshopを避けて通れないと思う。出来ればIllustratorも習得しておきたい。 ロゴデザインの本は多数出版されていて、いろんなロゴをさっと作れるようにしておくとWeb用のボタン素材などを作るときに役に立つと思う。ロゴを作る過程でPhotoshop/Illustratorのテクニックも学べるので一石二鳥。 Webプロフェッショナルのための黄金則 「旬」なサイトに学ぶ76のデザイン・エッセンス (Web Designing Books)は、いまどきのWebサイトでよく使われる画面パーツを作るテクニックがいろいろ載っていて参考になった。 |
|
|
■ ユーザビリティ ユーザビリティを高めるのは、Webデザイナーだけの仕事ではなく、プログラマも協力する必要がある。(Ajaxを用いて画面を更新するなどは、Webデザイナーがプログラマを説得してやってもらうことではなく、プログラマが設計段階で考慮すべきことである。) それゆえ、ユーザビリティに関する書籍は、Webデザイナーだけではなく、プログラマも理解しておく必要がある。 私が参考にしたのは ・Webユーザビリティデザイン Web制作者が身につけておくべき新・100の法則。 ・入門Webデザインユーザビリティ 使いやすさで成果を上げるプロのワザ の2冊だが、この本を特にお薦めするわけではない。 |
いままでWebデザイナーに頼んでいた仕事を自分でやってみて、まあ自分でもある程度のことは出来るんだなという感触を得た。
自分にWebデザインの知識があれば、サイト作りにあまり妥協をしなくて済むようになるし、Webデザイナーに説明するときもスムーズに話が進む。
Web系プログラマは、みな等しくWebデザインを学ぶべきだと思う。
■ はてブに対する返答
m_nagase 詳解HTML＆CSS＆JavaScript辞典←こんな本間違っても買うなよ。 2009/03/18
masakanou CSS, HTML, JavaScript 「詳解HTML & XHTML & CSS辞典」のほうがよいと思う。
最初、そちら(「詳解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
それは、全く、その通りですね。
■ 関連エントリー
このブログは釣り堀です。
デザインと言っても、単純なオペレーションならプログラマがやった方が早いでしょうね。
デザイナーにはデザイナーにしかできない、もっと前の行程であるサイトのコンセプトメークやユーザーシナリオ設計をやればいいと思います。
プログラマは絵が描けなくてはならない。眼に見える美しいオブジェクトを構築できなくてはならない。
ですが、プログラマはその事実に気付こうとすらしていない。
「絵心が無いですから」の一言で全練習すらしない。
この記事をきっかけにデザインの勉強するプログラマが増えれば良いですね。
今回紹介されたwebデザイン系の本が和書ばっかりなんですけど、
日本ってこの分野でそんなに先進的でなんですかね？だとしたら結構意外です。
デザイン関係の洋書で読んだのは、
・Web design - Before & After Makeovers
・Designing Web Navigation
・Web Design in a Nutshell
・Pragmatic Design Accessible Web Sites
・Web Design Garage
ぐらいです。これらの内容に関しては、まあ英語で無理して読むほどでもないかと思ったので、今回は日本語の本を中心に紹介しました。
Webを離れて、デザイン一般について書いてある本は洋書では読んでません。いい本があれば教えて欲しいです。
余談ですが、レイアウトの本を読んだあと繁盛しているコンビニに行くと、商品の配置に必然性というか論理性があるのに気づきました。いままで生きて、そんなこと考えたことは無かったので楽しい発見でした。
なんだか何気ない風景がいままでと違って見えますね。世の中は自分の知らないたくさんの論理によって駆動してるんだなぁと思うともっといろいろ勉強したくなりました。
私はWebデザイナーなのですが、この頃はFlashのActionScript3や、iPhoneでのObjective-Cなどやっています。
そこで色々発見しました。
例えば、プログラムでは、ここのユーザビリティーは向上できないなぁ。。
じゃあ、デザインでカバーしよう！っとか
このアニメーション一枚一枚描くのはしんどい。。。
よしプログラムしよう！っとか
本来このような仕事はSEの仕事かもしれませんが、
SEの見落としで、プログラマーが２日かかる仕事がデザイナーに任せれば１日半で終わる事もあります。
その逆も多々あります。
同じ「作る」仕事をしている人の知識を少しでも知っていれば、もっと良いものが作れると私はこの頃感じています。
アーティスト気取りのデザイナーと組むと最悪ですよね。
サラリーマンデザイナーと仕事がしたい。
我々システム屋は作業を定量化（工業化）したいんです。
#デザイン業でも同じだと思うんですけど
要は「物事を"要素還元的に分解しながら見る"」という話なわけですが、これはある意味、プログラマ適性にも通じるものがある気がします。
ただそれが行き過ぎると、映画など娯楽的な製作物を素直に鑑賞できなくなるのが璧に瑕ですがw