Web制作に携わる人は見ておくべき、2011年のはてブ1500数以上の良記事31選

mayumine (2011年12月15日 09:45)

2011年のWeb制作トレンドをはてブのホットエントリから振り返ってみました。 2011年でトレンドは、スマートフォン向けサイトやアプリの制作関連、HTML5関連、あとはFacebook対応のためのノウハウといった感じでした。はてなブックマーク「コンピュータ・IT」カテゴリ内で、1500以上ブクマがついた記事を選出、その中からさらに私の主観も入りつつ、2011年Web制作系のエントリーの中でもベストな31記事をピックアップ、Webデザイン系、SEO系、HTML+CSS系、プログラミング系、スマートフォンサイト制作系、企画、ツール、その他系、素材系にそれぞれ分類しました。

Webデザイン系

1. 色彩センスのいらない配色講座　
配色と色についてひじょーに分かりやすく、論理的に解説されたスライド。はてブ数ダントツ。
2. デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き　
「デザイン」の基本について丁寧に分かりやすく解説されている良記事！
3. デザインが苦手なWebサービス開発者に朗報！今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件 | IDEA*IDEA　
これは良いな！すでに動作環境済の最新ソースコードのデザインテンプレートがつくれる！このブログもこれでつくり直そうかと本気で考え中。
4. [Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

Best2011_01

5. 「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント Parkn Park　
はじめてウェブサイトやブログを作ろうとしている人は一度読むべしっ！
6. Webデザイナー必読？！著作権について知っておくべき10のこと : Web Design KOJIKA17　
著作物についてクライアントととかとモメた時にスッとこのURLを。あと、「これの素材や写真、勝手に使っていいんだっけ？」とふと迷ったときにも目を通したい。ブクマ推奨。
7. デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）*ホームページを作る人のネタ帳　
まるで本記事のように良記事をまとめた記事です。

SEO系

1. インターネットでカネを稼ぐ方法は五ツしかない : ミームの死骸を越えてゆけ　
すごく参考になった。インターネットのビジネスモデルは大体5つの分類しか無い、というお話。
2. 半年で月5万円稼ぐアフィリエイトサイトを作る為の24の手順 | SEOテンプレート比較　
すげー！アフィリエイト本一冊文の内容を1記事でまとめてる。アフィリエイトサイトつくるのも一朝一夕じゃいかないってわけですよ。
3. WEB屋が使う最高の無料SEOツール40個 | SWAT9　
良まとめ。
4. 本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Life　
もうタイトルからして釣り上手！いや、記事の中身もちゃんとわかりやすくてコンテンツ発信者にとっては非常に有益な内容でした。
5. 儲かるランディングページの作り方を公開！LP会社さんごめんなさい。 | Webコンサルティング　
ランディングページを作る時になったら参考に。

HTML+CSS系

1. HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)　 HTML5って何？て、実はよくわかって人は読んでおこう、5分でHTML5について理解できます。
2. CSSの知識をもっと深める30+2の小技テクニック集｜Webpark　
特にマークアップエンジニアの方はメモメモな内容ですね。
3. CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ　
こちらも特にマークアップエンジニアの方はメモメモ。
4. いまさら聞けない＞＜；基礎から学ぶ「HTML5」超入門！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話　
HTML5についての情報がわかりやすくまとめられております。
5. ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog　
世の中にはこんなに便利なツールがあったのか！

プログラミング系

1. プログラミング言語人気TOP10の簡易解説　
プログラミングよく知らなくてもなんかすごいわかりやすい！言語の概要について分かった気になれる！
2. 高速でプログラミング言語をマスターするのに有効な記事まとめ - NAVER まとめ　
あますところなくまとめられております。
3. 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス　
この小技集、素晴らしい。サンプルコードもわかりやすく紹介してもらえてる！
4. 「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと. net　
わかりやす！
5. CSSは分かるけど jQuery は苦手 ... という人が jQuery に親しんでくれるといいなーと思って書きました　
ほんと丁寧にわかりやすく書かれた記事だなあ。（労力の程がわかる）

スマートフォンサイト制作系

1. 初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 | 株式会社インフィニットループ技術ブログ　
わ、私でもiPhone アプリつくれちゃうかしら...
2. 1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineers' Blog　
ほんとに1時間で実装できそう...試してみよう。
3. ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう　
良まとめ系記事。
4. ASCII.jp：絶対見ておきたい有名企業のスマホサイトまとめ　
デザインの参考になりますね。
5. 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる－ Publickey　
今年の2月の記事。今では正式版がリリースされました。

企画、ツール、その他

1. Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳　
まとめレベル超一級記事。Web制作のためのネタが詰まっています。
2. ネットで見られる提案書のまとめ | Webデザインのタネ　
よその提案書って、興味津々ですよね。真似したい（パクリたい）図や言い回しが盛りだくさん。
3. 企画書を作るのに便利なWEBサービスまとめ - NAVER まとめ　
どれもこれも便利そう！ブクマブクマ。
4. Web屋の私がブックマークしているサイト65 | Webクリエイターボックス　
ずるいくらい良くまとまってるし、参考になります。
5. WEB制作者なら必ず知っておきたいWEBツール21選 | designaholic -Creative Column-　
まとめ系です。
6. フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記　
いまやウェブサイトのmetaにはいれとけOGP、ですが、わかりやすくまとまってます。実際のところ非常に参考にしてました。

素材系

自称まとめニスト

【２０１１年】【Webエンジニア向け】はてブ数ランキング厳選超人気記事87 / Devslog

このページは、mayumineが2011年12月15日 09:45に書いた記事です。

ひとつ前の記事は「サンタコスしてお台場走って来た！」です。

次の記事は「ブランデーを楽しむ新スタイル「ブランデースピリッツァー」はシャレオツで美味しいのでオススメだよ！」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。