1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:
今年も残すところあとわずかですね。いかがお過ごしですか?
スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。
このブログの編集委員なんかもやったりしています。

2011年8月にオープンした1 pixelですが、皆様のおかげでここまで更新を続けることができました。いつもありがとうございます!
本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します!

【デザイン】ピグアイテムのイラストレーションについて

長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。
ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上で成り立っています。多くのデザイナー・イラストレーターが在籍する弊社で、その世界観を壊さずに発展させていくことができているのは、この記事で紹介されているようなルールの上で制作を進めているからです。

http://ameblo.jp/ca-1pixel/entry-11191977597.html
(3月14日公開)

【開発】SPピグで見るCSS3活用事例

スマートフォン版アメーバピグで、HTML/CSS/JavaScriptなどのフロントエンド開発を担当する(*)森の記事。
スマートフォンの登場により、昔のブラウザでは使えなかった、HTML5やCSS3を多様したWebアプリケーションが作れる時代になりました。弊社では、多くのスマートフォンWebブラウザ向けサービスを展開していますが、こちらはその中でもかなり初期のプロジェクト。この記事では「フレキシブルボックスが便利すぎてやばい」件など、CSS3にフォーカスした活用事例をご紹介しています。

(*) 弊社ではディベロッパーと呼んでいます
http://ameblo.jp/ca-1pixel/entry-11215557737.html
(4月11日公開)

【デザイン】データ管理で作業効率がUPするデザインワーク

今年は、スマートフォン版Amebaが全面リニューアルした記念すべき年でもありました。こちらは、そのプラットフォーム(通称デカグラフ)で手腕を振るうデザイナー、おばたの記事。
大人数でも効率よくデザインワークを進めるために、データの管理方法1つを取ってみても、細かく気を配っています。UIをコンポーネント化してFireworksで管理するとどういったメリットがあるのか、またアイコンをCSS3から対応したWebフォントを使って実装するなど、スマートフォン開発ならではの工夫も書かれています。

http://ameblo.jp/ca-1pixel/entry-11281463120.html
(6月20日公開)

【開発】JavaScriptのテスト手法

Jasmine成功画面

先ほどの記事と同じく、スマートフォン版Amebaで、Node.jsとフロント側の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によるイラスト制作の基本操作

今年も多くの新卒エンジニア・新卒デザイナーが弊社に入社しました。こちらはその新米デザイナーの1人、マチダが執筆した記事。
当時はまだ彼女の担当サービスは未発表でした。ところが、研修で制作したイラストを例に執筆してみたところ、はてなブックマーク数で他の先輩社員を一気に突き放すという大偉業をやり遂げ、社内でもちょっとした話題になりました。内容は、Illustratorでイラストを描いたことがない方でも興味を持っていただけるような基本的なチュートリアルになっています。

http://ameblo.jp/ca-1pixel/entry-11327275121.html
(8月15日公開)

【開発】リッチスマートフォンWebアプリのメモリ管理

PCで提供している「ピグライフ」をスマートフォンでも楽しめる「どこでもピグライフ」の開発を担当しているmaginemuの記事。
このブログは一応クリエイターズブログなので、基本的にはエンジニアは記事を執筆しないのですが、実は彼はサーバーサイドもこなすエンジニア。フロントエンドの分野ということで特別に書いてもらいました。スマートフォンはHTML5/CSS3/JavaScriptが使えると言っても、やはりモバイル端末。メモリを消費しすぎると、ブラウザがクラッシュすることも。この記事では、ブラウザのWeb Inspectorを極限まで活用した、メモリ管理の方法をご紹介しています。

http://ameblo.jp/ca-1pixel/entry-11333270027.html
(8月22日公開)

【デザイン】女子中高生向けの「かわいい」キャラクター制作

こちらも今年入社したばかり、女子中高生向けのコミュニティサービスCandyを担当するデザイナー、松本の記事。
突然ですが「かわいいデザイン」とは何でしょうか?受ける印象・感じ方は人それぞれです。私たちは女子中高生ではないので、女子中高生がどんなものに「かわいい」と感じるかはわかりません。この記事では、彼女が持ち前の行動力を活かし、「女子中高生がかわいいと思うキャラクター」を追求したプロセスと、それを実際にサービスに登場させた事例が書かれています。

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をお願い致します!


いいね!した人  |  リブログ(0)
最近の画像つき記事  もっと見る >>
ページトップへ戻る