プログラマーの視点で学ぶ、Webデザインのおすすめの本とサイト


てぃーはアプリ開発やツイッター分析などのプログラミングや統計分析をしつつ、サイトやブログのデザインにも凝ってきました。

 

  • イベントツイート地図(主にTwitter Bootstrapで作成)

イベントツイート地図bs

 

  • ブログのトップページ(fc2ブログで使用されるMovable Type APIのコードを改良して作成)

newblogdesign

 

 

プログラマーの作るサイトはダサい。。。

 

プログラマーの作るサイトは一般的にダサいですね。。。

 

それはWebデザインにセンスがいると思っているから。あるいはプログラミングに時間を取られてWebデザインはHTMLを書いただけになってしまうから。

 

一般的なデザイン自体にはセンスは必要でしょう。美大で色彩調和やらパースやらを学んだ人たちに勝てるわけがありません。しかし、Webデザインにセンスは不要です。なぜならWebデザインにはテンプレートがあるから。1から作る必要はありません。時間もかかりません。そのテンプレートは簡単に改良でき、自分のサイトコンセプトに合ったデザインにすることができます。それなのにWebデザインに凝らないなんてもったいない!

 

 

プログラマーの強み、それは既にコードを書けること

 

Webデザインは発想力が重要ですが、それを具現化するにはコードを書く力が必要になります。我らプログラマーはコードを書く力は備わっているわけで、それをデザインの世界に広げれば自然とWebデザインはできるようになります。デザインのコードは勉強すれば身に付きます。言語は違えどプログラマーにとってはたやすいことです。

 

てぃーがブログやサイトのデザインをすぐにできるのはコードを書くのに慣れているからです。プログラムの基礎が備わっているので位置合わせやアニメーション関連の吸収が早くなっています。

 

 

ということで、今回はプログラマーの視点で学べるWebデザインのおすすめの本とサイトを紹介します。なお、プログラミングがメイン、デザインはサブという位置づけでの話です。

 

 

おすすめのサイト

 

dotinstall

 

以前このブログでも紹介しました。

 →おすすめすぎてヤバイ! 3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール

 

紹介記事にも書いたように、てぃーはこのドットインストールのおかげでjQuery、Twitter Bootstrap、Google Web Fonts、Google Feed API、Google Chart Tools、Chrome Developer Toolsをたった1日で初心者レベルをマスターすることができました。

 

Webの基礎であるHTML、CSS、JavaScript、PHPの講座もあるのでどんどん身につけていきましょう。プログラマーの皆さんなら普通のWebデザイナーを目指す普通の人よりかなり早く習得できますよ。

 

なお、最近コードを見るのは有料になったようですが、格安なので有料版を購入されるのをおすすめします。お金の対価に得られるものが多すぎます!!

 

 

buzzword

 

プログラマーならお馴染みの伊倉さんの講義サイト。Webデザインと関係があるのは次の3つです。

ホームページとCSSの学習ならWebWord

ApacheとWordPressの解説ならAdminWeb

PHP入門 - 基本構文の解説からデータベースへのアクセス方法まで

 

 

slideshare_image

 

てぃーもTiwtter勉強会のときのスライドをアップしたこともあるスライドのサイト。

 

デザインとテクノロジーのカテゴリではプログラマー視線のデザインについて公開されるときがあります。定期的にチェックしておきましょう。

 

 

SpeakerDeck

 

最近アップ数が増えてきたスライドのサイト。日本語のみのスライドを抽出できないのは残念。そのため、デザインのカテゴリを定期的にチェックしてプログラマー視線のデザインについて情報を得ましょう。

 

 

おすすめの本

 

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デザイン手法~
これからのサイト構築では不可避のレスポンシブ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を基本から応用に至るまで非常に分かりやすく学べます。

 

 

↓この記事が参考になったら拍手(どなたでも可)、ツイート、いいね、はてブ、いずれかをお願いします。

今後のブログ作りに役立てたいので。

関連記事

コメントの投稿

非公開コメント

プロフィール

てぃー

Author:てぃー
詳しい自己紹介:こちら
Twitter:@teapipin


follow us in feedly 
にほんブログ村 IT技術ブログへ にほんブログ村 PC家電ブログへ
現在の閲覧者数:

ブログ内検索
今日のアクセス数の多い記事
カレンダー

09月 | 2017年10月 | 11月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
過去記事ダイジェスト
お知らせ
ツイッター分析の分析結果が新潟大学教育学部の論文に引用
教育の実証研究の場でも高く評価!

ツイッター分析の分析結果が和歌山大学防災研究教育センターの論文に引用
防災の研究において評価!

2015年版ツイッター分析(世界編)が始動!
今回は世界の国別・言語別ツイートを分析!

ツイッター分析の分析結果が慶應義塾大学有名教授の研究論文などに引用
文系の研究までも制覇!

Interval Timer EX
有名雑誌「Mac Fan 2015月2月号」に「インターバルタイマーEX」が3度目の掲載!ポモドーロテクニックに有効!

自作Macアプリ3部作が2014年 Vector 年間ダウンロードランキング Mac トップ100にすべてランクイン

TimeCalcを公開しています!
時間計算、年齢計算、学歴欄作成など。

ツイッター分析の分析結果が人工知能の研究に!
ブログが学会発表で引用されました。

今まで開発したiPhoneアプリのソースコードを公開しています!
勉強に役立ててください。


2013年 Vector 年間ダウンロードランキング Mac トップ100に「デジカメ変更日を撮影日に一括変更 for Mac」と「インターバルタイマーEX」がランクイン

Interval Timer EX
有名雑誌「Mac Fan 2013月4月号」に「インターバルタイマーEX」が2度目の掲載!!

リアルタイムツイッター地図
リアルタイムツイッター地図を公開しています!
位置情報付きツイートをリアルタイムに表示します。

新たなツイッター分析としてイベントツイート分析を行っています!

2012年8月1日(水)開催の「Twitter勉強会」で発表
ツイッター調査:約173万ツイートを調査して分かったTwitterの利用動向 #twtr_hack from teapipin


Interval Timer EX
有名雑誌「Mac Fan 2012月3月号」に「インターバルタイマーEX」が掲載!!



 

はてなブックマークの人気記事