今年も残すところあとわずかですね。いかがお過ごしですか？
スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。
このブログの編集委員なんかもやったりしています。
2011年8月にオープンした1 pixelですが、皆様のおかげでここまで更新を続けることができました。いつもありがとうございます！
本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！
ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上で成り立っています。多くのデザイナー・イラストレーターが在籍する弊社で、その世界観を壊さずに発展させていくことができているのは、この記事で紹介されているようなルールの上で制作を進めているからです。
http://ameblo.jp/ca-1pixel/entry-11191977597.html
（3月14日公開）
スマートフォンの登場により、昔のブラウザでは使えなかった、HTML5やCSS3を多様したWebアプリケーションが作れる時代になりました。弊社では、多くのスマートフォンWebブラウザ向けサービスを展開していますが、こちらはその中でもかなり初期のプロジェクト。この記事では「フレキシブルボックスが便利すぎてやばい」件など、CSS3にフォーカスした活用事例をご紹介しています。
(*) 弊社ではディベロッパーと呼んでいます
http://ameblo.jp/ca-1pixel/entry-11215557737.html
（4月11日公開）
大人数でも効率よくデザインワークを進めるために、データの管理方法1つを取ってみても、細かく気を配っています。UIをコンポーネント化してFireworksで管理するとどういったメリットがあるのか、またアイコンをCSS3から対応したWebフォントを使って実装するなど、スマートフォン開発ならではの工夫も書かれています。
http://ameblo.jp/ca-1pixel/entry-11281463120.html
（6月20日公開）
最近でこそJavaScriptはサーバーサイドでも使われていますが、元々はブラウザで動くスクリプト言語です。HTMLとの関連もあるため「ボタンがクリックされたら正しくポップアップが表示されるか」といったテストコードを書くといったことはなかなか難しい。ですが、近年はそういったテストを可能にしてくれるテストフレームワークが出ています。この記事ではそのひとつ「Jasmine」を例に、利用方法をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11279972790.html
（6月27日公開）
フロントエンドのJavaScriptでは、業界的に見てもいくつか課題がありますが、その1つにDOM操作の問題があります。時にはCSSでも共用するidやclassを利用してDOMを取得し、それに対してイベントを紐づけたりとしていくうちに、Viewとロジックが切り離せなくなる・・・そういった苦い経験をお持ちの方は少なくないはず。この記事では、それを解決するフレームワークの1つ、「knockout.js」について初歩からご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11298459074.html
（7月25日公開）
当時はまだ彼女の担当サービスは未発表でした。ところが、研修で制作したイラストを例に執筆してみたところ、はてなブックマーク数で他の先輩社員を一気に突き放すという大偉業をやり遂げ、社内でもちょっとした話題になりました。内容は、Illustratorでイラストを描いたことがない方でも興味を持っていただけるような基本的なチュートリアルになっています。
http://ameblo.jp/ca-1pixel/entry-11327275121.html
（8月15日公開）
このブログは一応クリエイターズブログなので、基本的にはエンジニアは記事を執筆しないのですが、実は彼はサーバーサイドもこなすエンジニア。フロントエンドの分野ということで特別に書いてもらいました。スマートフォンはHTML5/CSS3/JavaScriptが使えると言っても、やはりモバイル端末。メモリを消費しすぎると、ブラウザがクラッシュすることも。この記事では、ブラウザのWeb Inspectorを極限まで活用した、メモリ管理の方法をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11333270027.html
（8月22日公開）
突然ですが「かわいいデザイン」とは何でしょうか？受ける印象・感じ方は人それぞれです。私たちは女子中高生ではないので、女子中高生がどんなものに「かわいい」と感じるかはわかりません。この記事では、彼女が持ち前の行動力を活かし、「女子中高生がかわいいと思うキャラクター」を追求したプロセスと、それを実際にサービスに登場させた事例が書かれています。
http://ameblo.jp/ca-1pixel/entry-11375074847.html
（10月10日公開）
JavaScriptの設計の話題は頻繁に議論に上がりますが、CSSの設計についての記事を目にしたことのある方はそう多くないかと思います。近年では、CSSこそDRY(Do not Repeat Yourself)やオブジェクト指向の考え方を取り入れ、メンテナンス性、柔軟性を実現することが不可欠と考えられています。この記事では、それを踏まえた上で、実際にCSSをコンポーネント化する具体例をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11413319214.html
（12月5日公開）
この記事は、なぜか公開直後の社内での盛り上がりが凄まじかったのですが、それも彼の人柄の賜物でしょうか。ある日、彼は社長との会議中「このボタンはコアな機能だから、もっと目立たせた方がいい」と言われ、試行錯誤するも上手くいかず頭を抱えます。その試行錯誤の日々と、ある先輩デザイナーから言われた一言で問題が解決した経験談について語っています。
http://ameblo.jp/ca-1pixel/entry-11424360340.html
（12月12日公開）
他にもご紹介したい記事は山ほどあったのですが、特に皆様からの反響の大きかった記事や、ページビュー数の高い記事を10本厳選させて頂きました。
イラストやUIデザインを題材にした記事もあれば、JavaScriptをはじめとした、フロントエンド開発の技術寄りな記事も多く読んで頂いているようで、大変嬉しく思います。
来年も、少しでも興味を持っていただける記事をお届けできるように、クリエイター一同努力していきますので、今後とも1 pixelをお願い致します！
スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。
このブログの編集委員なんかもやったりしています。
2011年8月にオープンした1 pixelですが、皆様のおかげでここまで更新を続けることができました。いつもありがとうございます！
本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！
【デザイン】ピグアイテムのイラストレーションについて
ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上で成り立っています。多くのデザイナー・イラストレーターが在籍する弊社で、その世界観を壊さずに発展させていくことができているのは、この記事で紹介されているようなルールの上で制作を進めているからです。
http://ameblo.jp/ca-1pixel/entry-11191977597.html
（3月14日公開）
【開発】SPピグで見るCSS3活用事例
スマートフォンの登場により、昔のブラウザでは使えなかった、HTML5やCSS3を多様したWebアプリケーションが作れる時代になりました。弊社では、多くのスマートフォンWebブラウザ向けサービスを展開していますが、こちらはその中でもかなり初期のプロジェクト。この記事では「フレキシブルボックスが便利すぎてやばい」件など、CSS3にフォーカスした活用事例をご紹介しています。
(*) 弊社ではディベロッパーと呼んでいます
http://ameblo.jp/ca-1pixel/entry-11215557737.html
（4月11日公開）
【デザイン】データ管理で作業効率がUPするデザインワーク
大人数でも効率よくデザインワークを進めるために、データの管理方法1つを取ってみても、細かく気を配っています。UIをコンポーネント化してFireworksで管理するとどういったメリットがあるのか、またアイコンをCSS3から対応したWebフォントを使って実装するなど、スマートフォン開発ならではの工夫も書かれています。
http://ameblo.jp/ca-1pixel/entry-11281463120.html
（6月20日公開）
【開発】JavaScriptのテスト手法
最近でこそJavaScriptはサーバーサイドでも使われていますが、元々はブラウザで動くスクリプト言語です。HTMLとの関連もあるため「ボタンがクリックされたら正しくポップアップが表示されるか」といったテストコードを書くといったことはなかなか難しい。ですが、近年はそういったテストを可能にしてくれるテストフレームワークが出ています。この記事ではそのひとつ「Jasmine」を例に、利用方法をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11279972790.html
（6月27日公開）
【開発】knockout.jsでさくさくWebアプリ開発
フロントエンドのJavaScriptでは、業界的に見てもいくつか課題がありますが、その1つにDOM操作の問題があります。時にはCSSでも共用するidやclassを利用してDOMを取得し、それに対してイベントを紐づけたりとしていくうちに、Viewとロジックが切り離せなくなる・・・そういった苦い経験をお持ちの方は少なくないはず。この記事では、それを解決するフレームワークの1つ、「knockout.js」について初歩からご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11298459074.html
（7月25日公開）
【デザイン】Illustratorによるイラスト制作の基本操作
当時はまだ彼女の担当サービスは未発表でした。ところが、研修で制作したイラストを例に執筆してみたところ、はてなブックマーク数で他の先輩社員を一気に突き放すという大偉業をやり遂げ、社内でもちょっとした話題になりました。内容は、Illustratorでイラストを描いたことがない方でも興味を持っていただけるような基本的なチュートリアルになっています。
http://ameblo.jp/ca-1pixel/entry-11327275121.html
（8月15日公開）
【開発】リッチスマートフォンWebアプリのメモリ管理
このブログは一応クリエイターズブログなので、基本的にはエンジニアは記事を執筆しないのですが、実は彼はサーバーサイドもこなすエンジニア。フロントエンドの分野ということで特別に書いてもらいました。スマートフォンはHTML5/CSS3/JavaScriptが使えると言っても、やはりモバイル端末。メモリを消費しすぎると、ブラウザがクラッシュすることも。この記事では、ブラウザのWeb Inspectorを極限まで活用した、メモリ管理の方法をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11333270027.html
（8月22日公開）
【デザイン】女子中高生向けの「かわいい」キャラクター制作
突然ですが「かわいいデザイン」とは何でしょうか？受ける印象・感じ方は人それぞれです。私たちは女子中高生ではないので、女子中高生がどんなものに「かわいい」と感じるかはわかりません。この記事では、彼女が持ち前の行動力を活かし、「女子中高生がかわいいと思うキャラクター」を追求したプロセスと、それを実際にサービスに登場させた事例が書かれています。
http://ameblo.jp/ca-1pixel/entry-11375074847.html
（10月10日公開）
【開発】モバイル時代におけるCSSの設計と実装
JavaScriptの設計の話題は頻繁に議論に上がりますが、CSSの設計についての記事を目にしたことのある方はそう多くないかと思います。近年では、CSSこそDRY(Do not Repeat Yourself)やオブジェクト指向の考え方を取り入れ、メンテナンス性、柔軟性を実現することが不可欠と考えられています。この記事では、それを踏まえた上で、実際にCSSをコンポーネント化する具体例をご紹介しています。
http://ameblo.jp/ca-1pixel/entry-11413319214.html
（12月5日公開）
【デザイン】280万回押されるボタンのデザインとは
この記事は、なぜか公開直後の社内での盛り上がりが凄まじかったのですが、それも彼の人柄の賜物でしょうか。ある日、彼は社長との会議中「このボタンはコアな機能だから、もっと目立たせた方がいい」と言われ、試行錯誤するも上手くいかず頭を抱えます。その試行錯誤の日々と、ある先輩デザイナーから言われた一言で問題が解決した経験談について語っています。
http://ameblo.jp/ca-1pixel/entry-11424360340.html
（12月12日公開）
まとめ
いかがでしたでしょうか。他にもご紹介したい記事は山ほどあったのですが、特に皆様からの反響の大きかった記事や、ページビュー数の高い記事を10本厳選させて頂きました。
イラストやUIデザインを題材にした記事もあれば、JavaScriptをはじめとした、フロントエンド開発の技術寄りな記事も多く読んで頂いているようで、大変嬉しく思います。
来年も、少しでも興味を持っていただける記事をお届けできるように、クリエイター一同努力していきますので、今後とも1 pixelをお願い致します！