皆さんこんにちは、1 pixel運営委員の宇納(@TasukuUno)です。最近ハマっていることはSkype bot開発です。
暦の上ではディセンバー、というわけで、2013年最後の週となりましたが、いかがお過ごしでしょうか。本日は、昨年に続きまして、今年特に反響の大きかった記事をピックアップしてご紹介いたします！これを読まずに年は越せませんよ！
【デザイン】Fireworksを使った大規模ウェブサイトのデザイン設計
若手ながら、スマートフォン版Amebaで活躍しているデザイナー、通称パジェロの記事。
マークアップの分野では、CSSの設計やモジュール化といったトピックを多く見かけるようになりましたが、それはデザインにおいても大切なことです。Fireworksには（残念ながら開発終了とのことですが）、デザインパーツを一元化したり、状態を「ページ」や「ステート」といった単位で管理することができる機能があります。これを上手に使って、効率よくデザイン管理する方法が解説されています。
【開発】CSS3アニメーションで心地良いモーションを作る
実はこの1pixelの運営委員の1人でもあるディベロッパー、山内の記事。
CSS3でアニメーションを表現できることはもはや常識になっています。ですが、どうやったら心地いいアニメーションを作れるか、というのは実は別のセンスが必要だったりします。そこが手触りを表現するディベロッパーの腕の見せ所。現実世界の物体の動きをよく観察して、それに「如何に近づけていくか、どこまでマネできるか」ということが重要とのことです。サンプルのCSSをぜひお試しください。
【開発】ガールフレンド（仮）の「声」実装
2013年は、声が出る学園恋愛カードゲーム「ガールフレンド（仮）」のTVCMが多く放映されました。こちらは、そのフロントエンド開発を担当した秋山の記事です。
HTML5から新たに追加されたAudioオブジェクトを使って、スマートフォンブラウザで音声を再生しているわけですが、OSや端末などによって実装が異なる部分も多く苦労したとか。ファイルフォーマットや、陥りやすい罠にも触れながら、サンプルコードを例に実装のポイントをご紹介しています。
【開発】JavaScriptの開発効率を高める7つのライブラリ
jQueryが当たり前だった時代は既に終わり、スマホ向けの軽量で便利なライブラリが多く開発され、社内でも導入されることが増えました。実サービスで採用しているライブラリを惜しげも無く紹介しているのは、社内で最も“熱い”ディベロッパーと話題の本間の記事。
こちらの記事で紹介しているゲームは残念ながら終了してしまいましたが、当時採用していたライブラリの機能と用途を紹介しています。むやみにライブラリを導入するのではなく、きちんと検証してサービスに合ったものを選択する目もディベロッパーには求められます。日々新しいサービスが作られるサイバーエージェントでは、その都度現場の開発者が工夫を凝らして設計しています。
【ディレクション】UI設計～ディレクションの質を高める7つのポイント
UI/UXディレクターの渡辺が執筆したこちらの記事は、いつもの1 pixelとは異なる視点から書かれています。
Amebaの多くのプロジェクトを横断して見てきた立場から、フェーズごとに大切なポイントを挙げています。UI設計やディレクションにおける心構え的な要素が強いですが、実はそれこそがUI/UXディレクターの「スキル」であり、それらをきちんと徹底できるかどうかが大きくプロダクト自体の質を左右するのだと思います。
【デザイン】デザイン作業のスピードアップ
今年公開された記事の中で特に圧倒的なシェア数だったのが、デザイナー鬼石が執筆したこちらの記事。
デザインの基礎とも言える内容で、デザイナーでない方にもわかりやすい記事になっているのでは、と思います。まずは構成要素として何が必要かを考えることからはじめて、土台をしっかり作ること。それこそが結果的にスピードアップに繋がる、というアプローチです。ビギナーの方も、玄人の方もぜひご一読を。
【開発】スマートフォンで動くリアルタイム3Dグラフィック
3D理論に興味のある方にオススメしたいのは、ゲーム部門の技術の中枢コア室で3Dアニメーションライブラリの開発を手がける新屋の記事。
openGLやDirectXと言ったリアルタイム3Dを扱う言語はあるものの、スマートフォンブラウザでは動作しません。ですが、3Dの理論さえ理解していれば、canvasで代用することが可能とのこと。「3次元アフィン変換」と言った3D理論の基礎にも触れながら、サンプルコードも交えて解説しています。jsdo.itのサンプルも是非見てみてください。
【デザイン】運用効率を向上させるサイト構築の3つのポイント
今年はサイバーエージェント コーポレートサイトのリニューアルもありました。もちろん自社開発です。こちらはそれを担当した広報・IR室のディレクター兼デザイナー、山下の記事。
Amebaではコミュニティやゲームといった、ユーザー参加型の「Webサービス」を作ることが主で、いわゆるこういったタイプの「Webサイト」を作ることはあまりありませんが、会社の顔であるコーポレートサイトだからこそ、日々の運用はつきものです。CMSなどを使いながら、それを省コスト・高クオリティで運用するために工夫した点をまとめています。
【デザイン】スマホデザインにおける、忘れがちな5つのルール
Amebaのコミュニティサービスを手がける部門では、デザイナーがプロジェクトの枠を超えてデザインの改善案を出し合う「デザイナーロワイヤル」というバトル形式の会議があり、毎回白熱した議論が繰り広げられています。それを先導しているのが、チーフクリエイティブディレクターのサトウ。
こちらの記事では、その「デザイナーロワイヤル」の様子と、スマホのデザインにおいて大事な5つのポイントについてご紹介しています。それぞれは当たり前のことだと思っていても、実際にデザインしてみるとうっかり見落としてしまうポイントも多いはず。
【開発】近日公開予定 JSフレームワークBeez
先の紹介記事でもあった通り、どんなライブラリを選択するかはディベロッパーの腕にかかっているわけですが、それ自体を開発してしまう、という選択肢を選ぶプロジェクトも少なくありません。その1つとして紹介しているのが吉成の執筆した「Beez」の記事。
「Beez」は先日オープンソースとして公開したスマホの大規模開発向けフレームワークです。Backbone.jsやZeptoといったおなじみのライブラリを取りまとめて一貫性のあるAPIで提供しています。こちらの記事では「なぞってピグキッチン」を例にBeezの設計思想や利用方法について解説しています。
http://ameblo.jp/ca-1pixel/entry-11726798813.html
（12月18日公開）
まとめ
いかがでしたでしょうか。なかなか10本に絞るのが難しく、紹介しきれなかった記事もありましたが、特に皆様からの反響の大きかった記事をピックアップさせて頂きました。
このまとめ記事を書くにあたって、去年のまとめ記事も読んだのですが、フロントエンド開発のテーマにおいては、以前にも増してコアな内容がより注目されているように感じました。デザインの面でも、設計や運用の工夫を模索するような記事が多く、短期間で数多くのスマホ向けサービスを作ってきた年だった、ということを表しているようにも思えます。
さて、2014年は一体どんな年になるでしょうか。
2011年夏からオープンした1 pixelですが、おかげさまで一度も定期更新を欠かすことなくここまで来れています。いつも応援してくださる読者の皆様ありがとうございます。
来年も有益な情報をお届けできるようがんばって参りますので、来年も宜しくお願い致します！