Hatena::ブログ(Diary)

やねうらお−ノーゲーム・ノーライフ このページをアンテナに追加 RSSフィード

GT-Rの買取ならここですわ。どこよりも高く買取ってもらえるはず。お勧め!GT-R 買取
電王戦出場記念! 書籍化されたで! 監修したで!(`ω´) 絶版なってしもた Kindle版で復活!! 記事書いたで!
解析魔法少女美咲ちゃん マジカル・オープン!

YaneuLabs / やねうら王公式 / やねうらおにメール / twitter / プロフィール

 | 

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

[] プログラマが1ヶ月でWebデザイナーに転身する方法  プログラマが1ヶ月でWebデザイナーに転身する方法を含むブックマーク  プログラマが1ヶ月でWebデザイナーに転身する方法のブックマークコメント


サイトを構築していると、プログラマWebデザイナーと共同作業をしなければならない。

しかし高度なRIAを実現しようとすると思っているようにWebデザイナーに素材を作成してもらうだけでもとても骨の折れる作業だ。


そこで、一層、「すべてのプログラマWebデザイナーになればいいんじゃね?」と思った。

今回は、私の実体験に基づき、「プログラマが1ヶ月でWebデザイナーに転身する方法」というのを考えてみた。



詳解HTML & CSS & JavaScript辞典


Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト

■ HTML,CSSを覚えよう


まず、HTMLCSS。いくら私でも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 詳解HTMLCSSJavaScript辞典←こんな本間違っても買うなよ。 2009/03/18

masakanou CSS, HTML, JavaScript 「詳解HTML & XHTML & CSS辞典」のほうがよいと思う。

リファレンスレベルでもHTMLCSSの記述の厚みが違う。 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

iPhoneriPhoner 2009/03/18 12:23 全くのド素人版もみたいですw

NAKENAKE 2009/03/18 13:29 Photoshopもいいですけど、Fireworksもなかなか。

trshugutrshugu 2009/03/18 15:28 ということは仕事量(作業量)が2倍に・・・!?

arimacarimac 2009/03/18 15:58 通りすがりです。
デザインと言っても、単純なオペレーションならプログラマがやった方が早いでしょうね。
デザイナーにはデザイナーにしかできない、もっと前の行程であるサイトのコンセプトメークやユーザーシナリオ設計をやればいいと思います。

通縋通縋 2009/03/18 17:34 「Webプログラマ」というくくりはまだ一般的じゃないんすか?

hakobhakob 2009/03/18 20:12 この程度は自分でやってしまいますよね。コミュニケーションロスや、いただいた画像資料を再加工する手間を考えれば十分間に合う。

alisuealisue 2009/03/18 23:17 正直言って自分でやってしまったほうが楽っちゃ楽ですよね。ただ画像加工等はプロの方が得意だと思うんで、自分で適当にアイコンや画像作った(or 拾ってきた)後、最後の段階でそれらをデザイナに任せています。

結城 瀬名結城 瀬名 2009/03/19 02:22 私個人のこれまでの経験かわ言わせていただくと、PhotoshopやIllustrarorの他にDreamWeaverがかなり重宝しました、WEBデザイナーにとっては必要不可欠な気がします。

yosapon65535yosapon65535 2009/03/19 23:33 まさに私が思っていたことです。
プログラマは絵が描けなくてはならない。眼に見える美しいオブジェクトを構築できなくてはならない。
ですが、プログラマはその事実に気付こうとすらしていない。
「絵心が無いですから」の一言で全練習すらしない。

共同作業共同作業 2009/03/19 23:39 プログラマーとデザイナーがお互いの仕事についてかなり深い部分まで理解しあえたときに初めてそれぞれの力を存分に発揮した質の高い仕事が出来るんでしょうね。

この記事をきっかけにデザインの勉強するプログラマが増えれば良いですね。

anonyanony 2009/03/19 23:39 以前やねさんが紹介していたプログラミング関係の本が洋書(またはその翻訳)ばかりであったのに対して、
今回紹介されたwebデザイン系の本が和書ばっかりなんですけど、
日本ってこの分野でそんなに先進的でなんですかね?だとしたら結構意外です。

yaneuraoyaneurao 2009/03/19 23:55 デザイン関係の洋書は私はほとんどチェックしていないので、よくわかりません。

デザイン関係の洋書で読んだのは、
・Web design - Before & After Makeovers
・Designing Web Navigation
・Web Design in a Nutshell
・Pragmatic Design Accessible Web Sites
・Web Design Garage
ぐらいです。これらの内容に関しては、まあ英語で無理して読むほどでもないかと思ったので、今回は日本語の本を中心に紹介しました。

Webを離れて、デザイン一般について書いてある本は洋書では読んでません。いい本があれば教えて欲しいです。

余談ですが、レイアウトの本を読んだあと繁盛しているコンビニに行くと、商品の配置に必然性というか論理性があるのに気づきました。いままで生きて、そんなこと考えたことは無かったので楽しい発見でした。

なんだか何気ない風景がいままでと違って見えますね。世の中は自分の知らないたくさんの論理によって駆動してるんだなぁと思うともっといろいろ勉強したくなりました。

wadadanetwadadanet 2009/03/20 02:16 すごい良い事だと思いますよ。
私はWebデザイナーなのですが、この頃はFlashのActionScript3や、iPhoneでのObjective-Cなどやっています。
そこで色々発見しました。
例えば、プログラムでは、ここのユーザビリティーは向上できないなぁ。。
じゃあ、デザインでカバーしよう!っとか
このアニメーション一枚一枚描くのはしんどい。。。
よしプログラムしよう!っとか

本来このような仕事はSEの仕事かもしれませんが、
SEの見落としで、プログラマーが2日かかる仕事がデザイナーに任せれば1日半で終わる事もあります。
その逆も多々あります。

同じ「作る」仕事をしている人の知識を少しでも知っていれば、もっと良いものが作れると私はこの頃感じています。

tissitissi 2009/03/20 09:35 この路線でいいと思います。
アーティスト気取りのデザイナーと組むと最悪ですよね。
サラリーマンデザイナーと仕事がしたい。
我々システム屋は作業を定量化(工業化)したいんです。
#デザイン業でも同じだと思うんですけど

YouchanYouchan 2009/03/20 16:57 ま た 、 や ね う ら お か!

guldeenguldeen 2009/03/22 22:30 俺もかつてDTP会社のパシリだった事はダイアリーを見れば分かる話ですが、例えば「車内吊りなどの印刷物を見て、つい"レイヤー構造"だとか『ドロップシャドウ』などの"画像効果"に頭が向かう」といった笑い話が2ch系まとめサイトに載っていたのを見た際には、思わず「あぁ、俺もだ」と感じてしまいました。
要は「物事を"要素還元的に分解しながら見る"」という話なわけですが、これはある意味、プログラマ適性にも通じるものがある気がします。
ただそれが行き過ぎると、映画など娯楽的な製作物を素直に鑑賞できなくなるのが璧に瑕ですがw

ダーツマニアダーツマニア 2009/07/16 13:04 あとは、DreamWeaverがあれば完璧かと。

gakyugakyu 2009/09/13 01:17 素人が1ヶ月でWebデザイナーに転身するにはどのくらいかかるんだろ??

spsp 2009/09/29 01:23 遅いですが、SEO対策についてはどうお考えですか?

 | 

1900 | 01 |
2004 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 06 | 08 | 10 | 11 | 12 |
2015 | 01 | 02 |


Microsoft MVP
Microsoft MVP Visual C# 2006.07-2011.06