2012年の人気記事と、今年ブックマークして心に残ってる記事総まとめ！

2012年は、WordPressに出会えた年でありWeb系のことに本気で足を踏み入れた年です。よちよち歩いていた娘が喋れるようになってきて、そして何より、このブログを開設した年でもあります。インドアな生活を送っていた私にとって、今までにない1年でした。

このブログの今年の人気記事！

それではまず、この1年間でPVが多い記事を5つ。

第一位

• 日本の伝統色の組み合わせ、襲色目（かさねいろめ）の色コードまとめ

初めての大規模なSNS爆発。うわぁー、初めて100はてブ超えたー、うれしー(*´ω｀*) などと思っていたらみるみるうちに1,000を超え…。。他の記事の追随を許さぬレベルでぶっちぎりの1位ですw

第二位

• サイトにtwitterウィジェットを表示、カスタマイズする

公式twitterウィジェットも完全に変わり、情報が古くなって紛らわしくなってしまったので削除しました。ありがとうございました！

第三位

• 私がIllustratorで絵を描けるようになるのに有効だった練習方法

非常に思い入れの強い記事なのですが、ブログ開設当初に投稿したのであまり伸びずに埋もれてしまって残念でした。と思っていたら、最近じわじわと検索上位に食い込むようになってきたようで、ここ1ヶ月ではこのブログの検索流入第一位になりました。ありがとうございます！

第四位

• 大人の服を子供用ロングTシャツにリメイクした話 2枚目

かなり根強く読んで頂いてる記事。夫の服捨てるのもったいないという気持ちから作ってみたものですが、同じ考えの方はたくさんいらっしゃるようで嬉しいです。職場復帰してからなかなか作れなくなっちゃってるんですが、また作りたいですねー。

第五位

• Excelで作成したグラフ等を自動でPowerPointへ貼り付けるExcelVBA

仕事でExcelVBAも使ってるのでそれについて書いた記事。pdf変換を抑えてppt貼り付けの勝利ですねー。Excelってただの表計算だけじゃなくてVBA使うとかなりいろいろできるんですよね！

今年ブクマした中から

twitterやfacebookなどで紹介させて頂いたものの中から、心に残っているものを厳選して列挙させて頂きます！ブログ名まで入れるとすごく雑多な感じで読みにくくなってしまったので、エントリー名だけにさせて頂きました。代わりと言ってはなんですが、jQueryでfaviconを表示させてもらっています。

Web系

デザイン

本格的に勉強するようになって、1pxのハイライトとか、質感とかのプロのこだわりに震えました。

• 新卒webデザイナーがとりあえず見といたほうがいいブログ・記事まとめ10個
• 100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本
• 写真のごく基本的な取り扱い方法と見た目の印象について。
• カラーツール「0to255」で色を決めてメニューを作ってみる
• 「私だったらイヤ」から一歩抜け出すことへの気づき。
• 様々なサイトやソーシャルメディアをモチーフにしたアイテムやデザイン
• Webサイトの作り方のまとめ！トップページ完成まで。

色

色だって、意味がある。適当に、なんとなく良さそうな色だからとかで決めちゃダメと思い知った1年(´ω`)

• 色彩センスのいらない配色講座～色は理論的に説明できる～
• デザイナーだから考える。赤色が与える27の効果と6つの活用例
• ウエディング・結婚式の色使いから、女性向けの華やかで清楚なカラーインスピレーションを磨く
• 色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ
• Webデザインの配色について学ぶときに読んでおきたい14の記事

フォトショ・イラレ

学生時代から長年使ってきていたものの、ほんとーーに知らないことだらけ。機能をもっと知ってないともったいない。

• 【小技メモ】Photoshopで綺麗に長方形シェイプを描く方法
• 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む)
• Photoshopのブレンドモードがよく分からない人のための手引き その①
• イラストレーターでアイコンを作る時によく使う機能いろいろ。
• イラストレーターのパスとレイヤーをそのままフォトショップに移動する方法。

レイアウト

結局このブログはレスポンシブにはせずにユーザーエージェント切り替えにてスマホ対応してるんですが、やはり興味はあり…。レスポンシブだけじゃなく、レイアウトの奥の深さにも唸らせられっぱなし。

• ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
• 見やすい・使いやすいレイアウトの為に考えるべき事。
• はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ

html

このブログもhtml5を意識してつくってはみたものの、やっぱりまだよく分かっていない感…。もっと勉強せねば。

• HTML5についてのおさらい
• 「Google HTML/CSS Style Guide」を適当に和訳してみた
• ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！

css

css3の自由度に心奪われ、色々やりたい気持ちと、ExcelVBAも扱ってるせいかIEユーザーも少なくないこのブログでどこまで実装していいかという気持ちに揺れる乙女心。

• CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
• CSS3のボックスシャドウを使って写真のフチの装飾をするサンプル作りました。【サンプルコード付き】
• marginの正しい理解 (CSSのmarginが難しい)
• 画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
• CSSのみでふわっと浮かび上がる吹き出し風のツールチップを表現する
• CSSセレクタの効率的、効果的な使い方をいろいろ
• まとめて書くことができるCSSプロパティの8つのパターン
• フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
• これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
• width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。
• CSSスプライトについてあれこれ。

WordPress系

オリジナルテーマをつくるときに穴が空くほど読ませてもらった記事や、便利なプラグイン系などなど。

• WordPress オリジナルテーマの作り方 3.0+
• WordPress の Contact Form 7 のフォームをテーマに直接埋め込む方法
• WordPressで画像アップロードしたときにムダなサムネイルを自動で作らせなくする方法
• Google Analytics APIを使って、プラグインに頼らずに記事のアクセスランキングを表示しよう
• WordPressテーマ作成に役立つ記事＆学んだことまとめ（テーマ作成編）
• これがやりたかった！WordPressで月別アーカイブの折りたたむ方法
• WordPressで埋め込んだツイートを幅ピッタリに合わせられるカスタマイズテクニック
• 新しいテーマを作ったりするときにローカル環境無しでWordPressのテストが出来るTheme Test Drive
• プラグインは使わない！Wordpress カスタマイズまとめ４０
• 高速にWordPressを動作させる網元を使うべくAWSにブログを移転しました。その手順を備忘録として残します。

jQuery系

幅が広がって楽しいjQuery。自分でも作れるようになりたいなー！

• サムネイル付スライドショーギャラリー　jQueryプラグイン-Galleriffic
• 滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい
• アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
• 画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」p
• ソーシャルメディアの不揃いなボタンを統一した美しいデザインでブログに設置するスクリプト -Koottam
• これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！
• Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め！
• スペースを有効に、jQueryでスクロールすれば現れるコンテンツ
• jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法
• とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」
• 今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選

tips

ツールだったり発想だったり。

• 画像のノイズをきれいに簡単に軽減する方法
• 写真の一部を動かすシネマグラフを使ったGoogleイベントのカバーが素敵！
• Twitter 公式APIで、プロフィール写真を簡単に取得する方法
• URLだけでサイトのスクリーンショットを取得して簡単にサムネイル画像がつくれるサービスやAPIを調べてみた
• 色覚障害のあるユーザーに、Webサイトがどう見えているかをザックリと教えてくれるWebツール・Chromanope

お役立ち系

この分類で合ってるか自分でも微妙なんですが、まとめておきたかったこと。

• Google Chromeのスタートページに置いておきたい便利なアプリ15選
• メールを送るだけの日記習慣「ohlife」が楽しい。毎日リマインドもしてくれる。
• 自分だけのフォントが作れる！手書きでフォントを利用して絵文字なんかを作ってみたよ
• 【Windows】フォルダを開く時、保存する時の面倒な階層選択を軽減！フォルダの足あと（フリー）が超絶便利
• デザイナー・Webデザイナーさんのためのネットショップサービス
• すごく簡単！オリジナル Chrome 拡張機能を作ってみよー！manifest version 1編
• Webで生きていくなら絶対にあった方が良い道具のまとめ

ブログ

ブログ運営に関するいろいろ。

• あなたのブログの再訪問者を増やす50の方法
• 副収入としてアフィリエイトやブログで稼ぐ為の17のルール
• ブログをどう始めたらいいか分からない人へ。目的とテーマ
• 何をすればホームページの表示速度が向上されるのか？検索順位にも関係する改善方法3つとチェックツールまとめ
• ブロガー必見。画像の著作権（クリエイティブ・コモンズ）についてのまとめ。
• 高品質なコンテンツとはどのようなものか
• あなたのネタはあなたしか扱えない。文章とネタと発想のこと。
• ブログのネタかぶった！→あれ？あっちはホッテントリしてる・・を検証してみた。

素材系

もうなんていうの、PhotoshopVipさんとコリスさんのタグ検索したほうが早いんじゃないのっていうくらいの…ここまで偏ってるとピンバック送りすぎてスパムにならないか心配…すみません(;´Д`)

テクスチャ・パターン

• 商用可、質感系で継ぎ目のないパターン素材11枚セットLight Subtle Patterns
• シームレスに使える、布地ベースのざらっとした癒し系のパターン素材
• デザイン質感アップ、継ぎ目のない無料ピクセルパターン素材16個まとめ
• ホームページの質感をアップする、継ぎ目のない質感系無料パターン素材40個セット
• 1920x1200pxの高解像度だから背景にも安心、ざらっとした布地のテクスチャ素材
• 背景デザインに困らない、継ぎ目のない無料パターンテクスチャ素材30個まとめ
• [ダウンロード]商用無料、108個のピクセルベースパターン素材作りました
• カテゴリー別、自然をテーマにした無料テクスチャ素材30個セット
• 質感アップの隠しテクニック、無料ピクセルパターン素材70枚まとめ
• 色使いが美しい和柄のパターンを使ったテクスチャ素材のまとめ
• 商用利用も無料！紙や布地・デニム地などの癒し系のパターン素材

フォント

• 全部、商用も無料！高級感のある細字のフリーフォントのまとめ
• 2012年版、漢字も揃っている日本語のフリーフォントのまとめ

フォトショアクション

• 極上の写真加工、無料Photoshopアクション素材25個まとめ
• 写真をキラキラ一発加工、レンズフレアのPhotoshop無料ブラシ10個セット
• [Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作った

その他

• 商用利用も無料！手書き風アイコン122種類！
• ウェディング関連のWebデザインにおすすめの商用フリー素材まとめ。
• 夏を感じる、木や葉っぱなど植物系の無料ベクター素材450個まとめ
• 約60種類の動物たちのシルエットを模ったPhotoshopのシェイプ素材 -Animal Custom Shapes
• 和のデザインに使える！国内商用可フリー素材・素材サイトまとめ
• Web屋さんやブロガーさん御用達な画像素材サービスまとめ34サイト（2012年冬版）

仕事系

Webに限らず、日常の仕事で役立ちそうなこと。

• 相手に嫌われない上手な叱り方 6つのポイント
• 第一印象を劇的に改善！「また会いたい」と思われる人になる7つの方法
• 驚くほど効果的！ほんの一瞬で気持ちをガラっと切り替える６つの方法
• あっと驚く凄い問題解決方法！あなたの悩みを消し去る７つの手段
• 行きつけのスタバのマネージャーがすごかったという話
• 「ノマド = 幸福 会社員 = 不幸」ではない！会社員が不幸になる9の勘違い
• プレゼンの上手い人がいつも意識している７つのルール
• WEB制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています
• A4用紙で「ぽち袋」など紙作品が簡単につくれる「Ａ４折形」がすごい
• いち早く70%～80%程度の完成度で人に見せられるものを作ることがいかに重要か、という話

読み物系

面白かった、考えさせられたこと。

• カワイイはツクレルし、時間とお金もツクレルというお話
• 私は広告賞を獲りたかった
• デジタル一眼レフを持て余している人がまず読むべき記事やサイトまとめ
• 意外にも、めちゃくちゃ励まされる叶恭子の名言集
• いわゆる男の娘が社会的に女の子として生活し始めて思ったこと
• 【保存版】必見！知らない人は損していると思うことまとめ
• 至高の名キャッチコピー集（ゲームソフト・ハード・メーカー編）
• 人生で重要なことはドラゴンクエストが教えてくれた。ドラクエから教わった9つのこと
• 国際結婚についての私の考え
• 批評屋が嫌い（だった）
• 「育児は育自」とかって、どうよ。

お料理系

ついつい集めてしまうレシピ系もまとめてみました。

• COOKPADで見つけた知らないと損する激旨レシピ５４選
• クックパッド史上、最もはてなブックマークのついたおかず＆ご飯系レシピ25選
• 普段ウイスキーを飲まない人にお勧めのシングルモルト
• 冷凍保存で朝もラクチン！「作り置きおかず」レシピまとめ64個

ネタ

遭遇する率は高くても、だいたいは1度見たら満足してしまうネタ系記事のなか、また見たいなーと思ったもの！

• 全然可愛くないネコの画像ください
• 悶絶。フォントを猫で例えたら・・・　25選
• 汗をかかずに着ぐるみで登山できるのか？
• [ライフハック]あなたのTwitterを美女や哲学者で埋め尽くす方法
• 伝説のウェブデザイナーを探して
• 知らなきゃ損！アレを使って家事を効率化する6つの方法。
• 営業時間外の対応につきまして
• 森のくまさんの謎
• 話題の（……きこえますか…きこえますか…）まとめ

大きく視野が広がった、2012年

このブログを開設する前、つまり去年までの私の知識レベルは、htmlとcssが「なんとなくいじれる」程度でした。見出しのhタグもul,olのリストも知らなかったレベル。phpなんかさわったことすらありません。

そんな私は今年はじめて、WordPressというものを知りました。去年までの私の「ブログ」というものへの認識は、アメブロとかそういう系の、芸能人が書いてファンがそれを追いかけることに需要があるもので、個人のブログは自分か知り合いしか見ない日記のようなものだと思っていたんです。（今思うとこれってmixiですねw）現在の「ブログ」という媒体は、私の固定概念をぶち壊し、視野を大きく広げてくれました。

地方でWeb系ですらない業種の中、ひとりで勉強してきましたが、全然孤独を感じませんでした。検索してたどり着くブログはすべて教科書であり参考書でしたし、twitterを通じて書いているご本人とお話させて頂いたりするのは、今まで経験したことのない喜びでした。本当にありがとうございます。重ねて、facebookでつながって下さっている方、そして、まだお話したことのない、このブログに足を運んでくださっている方へ、厚く御礼申し上げます。

文章にしてしまうと、ありきたりで安っぽくなってしまいますが、皆さんのおかげでとても充実した楽しい時間を過ごせました。2013年も、宜しくお願い致します。良いお年をお過ごしくださいませ。