プログラマーの視点で学ぶ、Webデザインのおすすめの本とサイト
てぃーはアプリ開発やツイッター分析などのプログラミングや統計分析をしつつ、サイトやブログのデザインにも凝ってきました。
- イベントツイート地図（主にTwitter Bootstrapで作成）
- ブログのトップページ（fc2ブログで使用されるMovable Type APIのコードを改良して作成）
プログラマーの作るサイトはダサい。。。
プログラマーの作るサイトは一般的にダサいですね。。。
それはWebデザインにセンスがいると思っているから。あるいはプログラミングに時間を取られてWebデザインはHTMLを書いただけになってしまうから。
一般的なデザイン自体にはセンスは必要でしょう。美大で色彩調和やらパースやらを学んだ人たちに勝てるわけがありません。しかし、Webデザインにセンスは不要です。なぜならWebデザインにはテンプレートがあるから。1から作る必要はありません。時間もかかりません。そのテンプレートは簡単に改良でき、自分のサイトコンセプトに合ったデザインにすることができます。それなのにWebデザインに凝らないなんてもったいない！
プログラマーの強み、それは既にコードを書けること
Webデザインは発想力が重要ですが、それを具現化するにはコードを書く力が必要になります。我らプログラマーはコードを書く力は備わっているわけで、それをデザインの世界に広げれば自然とWebデザインはできるようになります。デザインのコードは勉強すれば身に付きます。言語は違えどプログラマーにとってはたやすいことです。
てぃーがブログやサイトのデザインをすぐにできるのはコードを書くのに慣れているからです。プログラムの基礎が備わっているので位置合わせやアニメーション関連の吸収が早くなっています。
ということで、今回はプログラマーの視点で学べるWebデザインのおすすめの本とサイトを紹介します。なお、プログラミングがメイン、デザインはサブという位置づけでの話です。
おすすめのサイト
以前このブログでも紹介しました。
→おすすめすぎてヤバイ！ 3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール
紹介記事にも書いたように、てぃーはこのドットインストールのおかげでjQuery、Twitter Bootstrap、Google Web Fonts、Google Feed API、Google Chart Tools、Chrome Developer Toolsをたった1日で初心者レベルをマスターすることができました。
Webの基礎であるHTML、CSS、JavaScript、PHPの講座もあるのでどんどん身につけていきましょう。プログラマーの皆さんなら普通のWebデザイナーを目指す普通の人よりかなり早く習得できますよ。
なお、最近コードを見るのは有料になったようですが、格安なので有料版を購入されるのをおすすめします。お金の対価に得られるものが多すぎます！！
プログラマーならお馴染みの伊倉さんの講義サイト。Webデザインと関係があるのは次の3つです。
・ApacheとWordPressの解説ならAdminWeb
・PHP入門 - 基本構文の解説からデータベースへのアクセス方法まで
- SlideShareのDesignとTechnology
てぃーもTiwtter勉強会のときのスライドをアップしたこともあるスライドのサイト。
デザインとテクノロジーのカテゴリではプログラマー視線のデザインについて公開されるときがあります。定期的にチェックしておきましょう。
- Speaker DeckのDesign
最近アップ数が増えてきたスライドのサイト。日本語のみのスライドを抽出できないのは残念。そのため、デザインのカテゴリを定期的にチェックしてプログラマー視線のデザインについて情報を得ましょう。
おすすめの本
Webページのテンプレートを改良しながら勉強していくのがいいと思います。Webページのテンプレートを手にした上でWebデザインに関する文法＆ルールを学んで行きましょう。
Webページのテンプレート
- おしゃれなWebサイトテンプレート集
豊富なテンプレートが魅力！そのままでも使えますが、改良しやすいようにどの箇所を書きかえればよいか丁寧に解説されていて分かりやすいです。
- 自分で作れる! おしゃれなWebサイト
こちらはテンプレートがメインというよりも、各章で題材となるテンプレートを元に具体的なカスタマイズを実現していく構成となっています。そのため、これまでに培ったコードの力を駆使してより個性的なサイトを作ることができるようになります。
HTML、CSS
- よくわかるHTML5+CSS3の教科書
これからHTMLとCSSを学びはじめる人向けの入門書です。最新の動向であるHTML5+CSS3についても分かりやすく入っていけます。
- HTML5 & CSS3ステップアップブック
HTML4.0やXHTML1.0で制作したサイトをHTML5とCSS3に移行するための方法が解説されています。今までHTML4.0やXHTML1.0で制作をしてきたという方がHTML5とCSS3を基礎から学ぶ本ですね。
- HTML&スタイルシート ポケットリファレンス
HTMLとCSSを別な本で習得した後、辞書として引くときに重宝します。
jQuery
- Web制作の現場で使うjQueryデザイン入門
通称「ドーナツ本」。jQueryを使いこなす上で基礎から応用まで学べます。前導入としてCSSについても紹介されています。
レスポンシブWebデザイン
- レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~
- iPhone+Android スマートフォンサイト制作入門
通称「マカロン本」。レスポンシブWebデザインのうち、スマホに特化しています。スマホのデザインを基礎から学ぶにうってつけの良本です。
WordPress、PHP
- WordPressデザインブック3.x対応
ブログ用途だけでなくサイト構築にも使われるWordPressについて、基礎から丁寧に紹介されています。デザインだけでなくサイト構築についても書かれているのでプログラマーなら胸が高鳴ることでしょう！
- 本格ビジネスサイトを作りながら学ぶ WordPressの教科書
WordPressの勉強では有名な本。有名すぎてパート2が出ました！パート1ではサイト構築、パート2ではスマホ中心です。内容はより実践的にWordPressを学べる本です。ビジネスサイトを作るということで身が入りますね。
- よくわかるPHPの教科書
PHPの入門書としてダントツの売れ行きです。てぃーもこのブログで紹介したことがありました。
→分かりやすくあっさり習得できる！「よくわかるPHPの教科書」のレビュー
内容はデザインよりもPHPの文法とデータベースの利用が中心です。PHP自体はデザイン用の言語ではないですが、先に挙げたWordPressで記事の管理をするときに使われています。PHPを知っておけばWordPressの利用の幅が広がります。
Dreamweaver
- 効率的なサイト制作のためのDreamweaverの教科書
Dreamweaverのやや発展的な使い方について書かれています。Dreamweaverを使えばコードを書かずにサイトを構築できますが、ちょっとでも凝ろうとするとコード（HTML、CSS、JavaScript）の知識が必要になるので一冊ほしいですね。
Sass
- Web制作者のためのSassの教科書
SassはCSSのメタ言語であり、コードをより効率的に記述することができ、メンテナンス性の向上などに大変役立つ技術です。本書はSassを基本から応用に至るまで非常に分かりやすく学べます。
↓この記事が参考になったら拍手（どなたでも可）、ツイート、いいね、はてブ、いずれかをお願いします。
今後のブログ作りに役立てたいので。
- 関連記事
