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
- 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、ですが、わかりやすくまとまってます。実際のところ非常に参考にしてました。
- 1. 無料かつ商用可で約2万枚のハイレベルな写真を提供する「Luc Viatour」 - GIGAZINE
- 2. これだけあればシンプルアイコン探しには困らないかも！全部フリーのシンプルアイコンを一挙紹介！ | バンクーバーのWEB屋
- 3. 無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと. net
- 4. デザイナーなら必ず知っておきたい国内素材サイト22選 | designaholic -Creative Column-
- 5. Photoshop VIP 商用可、豊富すぎる711個のピクトグラムアイコンを無料公開している「Noun Project」
素材系
スポンサード リンク
