タグ

ブックマーク / ameblo.jp/ca-1pixel (21)

  • 『デザイナー新卒研修について』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2015年度新卒入社のデザイナーの松と申します。 私たち新卒のデザイナーは、4月から6月末までの約3ヶ月間、デザイナー研修を受けてきました。 今回はそのデザイナー研修の内容や成果物を紹介させていただきます! デザイナー研修の目的とは?新卒のデザイナー陣は、それぞれ得意分野やスキルに差があります。デザインの基礎はもちろん、それぞれの分野のデザインや考え方を学ぶことで、プロのデザイナーとして必要な力をつけていく、そんな目的があります。 インフォグラフィックスのポスター制作デザイナー研修の入り口は一見Webデザインとは関係ない制作でした。

    『デザイナー新卒研修について』
  • 『「AWA」のデザインはどのようにして作られたのか。』

    こんにちは。 AWAでアートディレクション/デザイン/ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは? AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初

    『「AWA」のデザインはどのようにして作られたのか。』
  • 『デザイナーでも知っておきたい美術史!』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、初めまして。コミュニティ事業部所属のマキと申します。現在は、575で気軽につぶやくアプリ、『ごーしちご』のデザイナーとして日々邁進しております。 今回は、いつもと違う1pixelとなります!美術史の捉え方です。 いきなりですが。デザインは、応用美術と言われるくらい、美術の発展と共にその技法が生み出されています。 ここでは、いざアートの話を持ち出されても、概要だけでも理解できるように、 特に美術を学びはじめの方向けに、おさらいをお話できればと思います。 1.大まかに掴む! みなさんが美術館、あるいは教科書で見たことがあると思う絵画や彫刻など

    『デザイナーでも知っておきたい美術史!』
  • 『ガールフレンド(仮)におけるボーンアニメーション実装』

    はじめまして。 ガールフレンド(仮)でアニメーションを担当しています。峯岸と申します。 日はガールフレンド(仮)のぷちガールアニメーションの制作に関してご紹介したいと思います。 ぷちガールちゃんとは? ガールフレンド(仮)ではぷちガールちゃんという機能があり、ゲーム内でバトルをしたりイベントに参加したりするときに応援してくれる小さなガールがいます。 "会いに行く"機能では、ぷちガールちゃんにアニメーションをつけて可愛く動くよう実装されています。 ボーンアニメーションとは? 体にボーンを階層的に設置してゆき、その骨格のつなぎ目を基準にキーフレームで動きをつけてアニメーションをつけていく技法のことです。 スケルタルアニメーションや、スキンドメッシュアニメーションとも呼ばれています。 ガールフレンドでは、アニメーション制作にFlashを使用しているため、ガールの各パーツを関節ごとにムービークリ

    『ガールフレンド(仮)におけるボーンアニメーション実装』
  • 『AngularJSを使用したゲーム開発』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。 今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。 ※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、1.2.16をベースに書かせていただきます。AngularJSとは https://angularjs.org/ Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。 同じような種類のフレームワークとして、Backbone.jsやKn

    『AngularJSを使用したゲーム開発』
  • 『デザインは8の倍数でできている』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか?」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ(サイズ)を指します。 【第1部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p

    『デザインは8の倍数でできている』
  • 『Web Componentsで行うHTMLのコンポーネント化』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。アメーバ事業部の泉水(@1000ch)です。 今日はHTMLをコンポーネント化するWeb Componentsという新しいHTMLの仕様と、 その機能を補完するPolymerというライブラリについてお話させていただきます。 Web Components Web Componentsについては、2013年のHTML5 ConferenceでGoogleの夷藤さんがセッションされていました。夷藤さんはChromeチームで、Web Componentの周りの実装をされていたり、Shadow DOMの仕様の編集をされています。 セッショ

    『Web Componentsで行うHTMLのコンポーネント化』
  • 『3分で分かるフラットデザイン』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに?まずはどんなものか、百聞は一見にしかず

    『3分で分かるフラットデザイン』
  • 『非エンジニアが知ってると得するUnityの知識』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさん、こんにちは。 アメーバ事業部の中川(@neko_manma1)と申します。 ドラマチック弾丸アクションRPG「ウチの姫さまがいちばんカワイイ」 (以下、ウチ姫)にてUIの制作、キャラ/モンスターデザイン、モデリング/アニメーション、 背景ステージ制作等を担当しております。 ウチ姫は『Unity』というゲームエンジンを使って開発されました。 エンジニア向けのUnity記事はあちらこちらでよく目にするかと思いますので、 今回は非エンジニアの目線で「ここは押さえておきたいUnityの知識」を書かせて頂きます。 Unity開発の強みUnityにつ

    『非エンジニアが知ってると得するUnityの知識』
  • 『PhantomJSを使ったスマホサイトテストの自動化(前編)』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは! スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも1年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto

    『PhantomJSを使ったスマホサイトテストの自動化(前編)』
  • 『JavaScriptの開発効率を高める7つのライブラリ』

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

    『JavaScriptの開発効率を高める7つのライブラリ』
  • 『ガールフレンド(仮)の「声」実装』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。こんにちわ。 「ガールフレンド(仮)」でフロントエンドの開発をしている秋山と申します。 「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく“声が出る♪”学園恋愛カードゲームです。各カードには、人気声優のボイスが付いていて、さまざまな演出に合わせてキャラクターの声を聞くことができます。スマホのブラウザ版カードゲーム × 声ガールフレンド(仮)の開発に入る時点で、スマホブラウザゲームで音声を出しているサービスは他にもありましたが、カードに声が付いているものは少なかったかと思います。 また、スマートフォンのブラウ

    『ガールフレンド(仮)の「声」実装』
  • フロントエンドエンジニアにおけるNode.jsのススメ | 1 pixel|サイバーエージェント公式クリエイターズブログ

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして!こんにちワン! スマートフォン版Amebaプラットフォームでフロントエンドの開発を担当している2012年入社の鳥山と申します。 そこで今回は、Node.jsを始める上で知っておくと便利な知識を現場での開発例を交えて紹介させていただきたいと思います。 想定している読者は、 ・普段HTMLCSSJavaScriptなどのクライアントサイドの開発をしている方 ・Node.jsに興味があり、始めてみたいと思っている方 ・サーバサイドプログラミングと聞くと身震いしてしまう方 です。 ※今回は、記事にも制限があるので、Node.jsについての説

    フロントエンドエンジニアにおけるNode.jsのススメ | 1 pixel|サイバーエージェント公式クリエイターズブログ
  • 『JavaScript開発時に便利なツールたち』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル

    『JavaScript開発時に便利なツールたち』
  • 『Fireworksを使った大規模ウェブサイトのデザイン設計』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ

    『Fireworksを使った大規模ウェブサイトのデザイン設計』
  • 『今年中に読んでおきたい!2012年人気の記事10本!』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか? スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します! 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上

    『今年中に読んでおきたい!2012年人気の記事10本!』
  • 『女子中高生向けの「かわいい」キャラクター制作』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして!2012年入社の新卒デザイナー松です。 現在、女子中高生向けのスマートフォンサービスのウェブデザインやイラストを制作しています。 ※Candyについては、こちらの記事をお読みください。 「女性向けソーシャルコミュニティサービス "Candy"」 女子中高生の実態Candyは女子中高生向けのサービスなので、女子中高生に刺さる「かわいい」と思ってもらえるキャラクターを作る必要がありました。 しかし私は女子中高生ではないため、彼女達が何をかわいいと思うのかがわかりません。 そこで、まずは今の女子中高生の文化や生活を知ることからはじめました。

    『女子中高生向けの「かわいい」キャラクター制作』
  • 『Illustratorによるイラスト制作の基本操作』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして!デザイナーのマチダです。2012年4月に新卒入社し、現在はスマートフォンゲームイラストを制作しています。 はじめに-Illustratorの仕組み-多機能によってグラフィックだけでなく文書作成などマルチに活躍できるIllustratorですが、機能の多さに最初は何をどのように使ったらいいのか戸惑うかと思います。 <illustratorでイラストを描く際に心がけていただきたいこと> 普通絵を描く時は線画を描いて着彩すると思いますがIllustratorは少々違い、"様々な形をした図形を配置"して絵を描きます。図形を上に重ねていくことで

    『Illustratorによるイラスト制作の基本操作』
  • 『Airを使った運用管理ツール/ピグライフ』

    こんにちは。 アメーバ事業部でピグライフの開発を担当している竹ノ谷です。 シネマ シネマとは、ピグライフから新たに加わったゲーム内のキャラクターが話したりアクションしたりするのを物語として見れる機能です。 チュートリアルや毎々のイベントでストーリーを楽しむ事が出来ます。 ハロウィンイベント中のシネマ シネマの再生情報(登場キャストやアクション、台詞、タイミング等)は、時系列に従ってJSON形式のデータになっています。映画でいう台の「誰が何をする」が、JSONで1アクションずつ書かれて並んでいるという感じです。 このJSONファイルを読み出し、ピグライフ内でシネマとして再生しています。 シネマジェネレーター シネマジェネレーターとは、上記のJSON形式データ(台)を作成・保存・読み込み・再生プレビューをする、シネマオーサリングツールです。 シネマジェネレーター 一つ一つのアクションは、

    『Airを使った運用管理ツール/ピグライフ』
  • 『人間中心設計のプロセスを採用したリニューアル』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、Amebaでデザイナーをしております植田(@uuepoo)です。 2011年8月9日にリニューアルしたAmebaプレゼントについて、Amebaプレゼントとはデジタルアイテムを贈り合えるサービスです。 プレゼントのほかに、プレゼントの周りを装飾できるフレームや、プレゼントを包むラッピングも一緒に選べます。 プレゼントは有料のもの、無料のものと両方あり、 種類も好きな文字を入れることが出来るものや、自分のピグが入るもの、動くプレゼントがあったりと様々です。 プロジェクトの流れユーザーアンケートの実施 RN前のサイトを使ったユーザビリティテスト

    『人間中心設計のプロセスを採用したリニューアル』