『ピグブレイブ・デザインの開発秘話』
ピグブレイブでアートディレクションを担当しているデザイナーの塚本(@lavitsea_art)です。 今日はピグブレイブの制作にまつわる裏話を色々と話せたらと思います。 箱庭式に囚われないRPGならではのフィールド表現 モンスターという未知の領域 「きせかえ」から「そうび」への進化 「PRG」向けのピグアバター化 クォータービューからの脱却 RPGと聞いて僕が最初に思い浮かべたのは「広大なフィールドを巡る旅」だったんですが、ピグブレイブはMMOのようにフィールドを駆け巡ることが技術的に難しかった為、どうにか今の仕様の中でも広大なフィールド感が演出できたらなぁという想いがありまして。 箱庭のピグエリア。クォータービューで壁に擬似的な遠近感を出している。 ピグブレイブのモック用エリア。高低差を使って遠近感を強調している。 ピグでは「当たり前」のクォータービューの表現方法では、壁に擬似的に遠近感
『Amebaアプリ Objective-CからSwiftへの移行』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。 iOS版のAmebaアプリを開発している @tasanobu と @nghialv2607 です。これまでのAmebaアプリはWebViewとのハイブリッド形式でしたが、UI/UXを改善すべくフルネイティブ化して大幅にリニューアルしました。 数ヶ月間に及ぶアプリの構成を大幅に変えるプロジェクトは、Objective-CではなくSwiftで実装を進めました。 このエントリでは、Objective-CのコードベースをSwiftへ移行していくために行った取り組みを紹介させて頂きます。 このエントリの公開時点では、Swiftを既存プロジェクトに
『ウチ姫世界のコンセプトディレクション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
『CSSConf.Asia・JSConf.Asia 2014 参加レポート』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。 Amebaでフロントエンドエンジニアをしております、ふっしー(@fushi_hd)です。 11/19~21の期間 CSSConf.Asia・JSConf.Asiaというフロントエンド系の技術に関する二つのカンファレンスに先輩方と参加させていただいたので、その参加レポートをします。 CSSConfが1日のみ、JSConfが2日間の合計3日間の開催でした。 それぞれ多くのセッションがありましたが、その中でも気になったものをいくつかピックアップして紹介します。 CSSConfCSSに関する発表で、技術トレンドから導入事例などの発表が行われまし
『今さら聞けないUXの基本と活用のしかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。CyberSS所属の水野 寛と申します。普段はディレクター/HCD専門家として、Webサイトの分析や改善を担当しています。 Webサイトやアプリ制作の現場では、UXを向上させるにはどうすればよいか、試行錯誤が求められます。しかし、そのUXについて、いまいち捉え方がわからないと感じられている方が多いのではないでしょうか。 UXとは何か」について、ご説明させていただきます。さらに、今すぐ制作に活かせる考え方として「UXをデザインするためのポイント」「UXを検証するための視点」について、事例を交えてご紹介いたします。 1.UXとは何か 国際規
『ガールフレンド(仮)を支えるスプライト画像生成ツール』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2013年新卒入社のTomと申します。 私は現在ガールフレンド(仮)(以下GF)で約1年程フロントエンドの運用を行っています。 今回はGFで使用しているスプライト画像生成ツールGlueに関して導入の経緯などを交えてお話したいと思います。 Glueのメリット ・柔軟 オプション数が豊富でテンプレートも設定でき、細かくカスタマイズ出来るのでプロジェクトの途中からでも導入しやすい。 ・簡単 コマンドライン上でファイルの入出力先を指定するのみで非常にシンプルに使える。 ・高速 基本的にスプライト画像、cssの生成のみ行うので高速。 導入経緯 ス
『CSS3でつくるキャラアニメーション』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー
『デザイナー視点のイベント開発』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！アメーバゲーム部門でデザイナーをしている筒井豊です。 スマートフォン向けゲーム「天下統一クロニクル」の開発・運用を担当しています。 現在3月25日から始まる新イベント「天下統一戦」の開発に関わっているのですが、 イベント開発の流れを追いながらデザイナーの作業の進め方や、意識していたこと等をご紹介したいと思います。 新イベント「天下統一戦」とは？「天下統一クロニクル(http://tnk47.ameba.jp)」はご当地の偉人や名物を擬人化したカードを集め、県の仲間と力を合わせながら日本一を目指すゲームです。 ゲームの基本システムに毎週日
『ChatWorkのデスクトップアプリ化！Growl通知まで！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！ 2013年度新卒入社の佐伯航平と申します。 現在私はギャングソウルというチームでフロントエンドの実装を担当しています。 日々の学びを自身のサイト、「kotazi.com」にて綴ってますので、よかったらこちらも訪れてみてください。 さて、私達のチームでは開発のチャットやタスク管理のツールとして「ChatWork」を利用しています。便利なサービスですが、時々メッセージに気づかず数時間放置してしまうとすごく申し訳ない気持ちになってしまいますね。 今回はそんな自分と同じ悩みを抱える皆様のためにChatWorkのデスクトップアプリ化とGrowl通
『女のホンネひしめく世界のつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、こんにちは。 GIRL'S TALKのデザインを担当している、見上です。 作業のほとんどをIllustratorで行っています。 今回は、女性たちの衝撃的なホンネあふれるサービスの世界観の作り方について、お話ししたいと思います。 GIRL'S TALKとは女性限定完全匿名掲示板サービス「GIRL'S TALK」は 恋愛、ナイトライフ、ココロやカラダの悩み... 「誰かに話したい、けど話せない」そんな悩みを抱える女性達のために生まれたサービスです。 ということで、早速詳しいお話に入ります。 ユーザーだけを見すぎないことサービスのターゲットをし
『ピグアイテムの進化』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。漆原と申します。 現在、アメーバピグ コンテンツグループのデザイナーとして、機能開発兼アイテムイラストのクオリティ管理を担当しております。 今回は、今年で5年目に突入したアメーバピグにおいて、『アバターアイテムがどのように進化しているのか？』というところを、リリース当初のアイテムと現在のアイテムを比較しながらご紹介させて頂きます。 各アイテムトレンドの流れ・きせかえ リリース当初は汎用的にコーディネート出来るシンプルなアイテムが求められました。トップスなら三つボタンのジャケットやチェックのワンピース、パンツならジーンズ、のような形で、カ
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
『新卒が初めてブログデザインにチャレンジしてみた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんはじめまして！ 2013年度新卒入社デザイナーの横尾麻衣と申します。 Ameba事業本部でJKJC向けコミュニティサービスCandyのデザインを担当しております。 今回は社内で行われた、ママ事業部主催のママブログデザインコンペに参加した際のデザイン行程や、制作時の工夫についてをお話したいと思います。 はじめに：ママブログデザインって!？ 私が参加する事になったのは、今年新設されたママ事業部の、アメブロでママがつながるコミュニティ『Ameba ママブロ』内で使用するブログデザインの社内コンぺです。 お題はずばり、ママに刺さるブログデザインの制作
『スマホデザインにおける、忘れがちな5つのルール』
皆様、こんにちは。 Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。 今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。 デザイナーロワイヤルとはデザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。 発表者以外にも、誰でも傍聴参加が出来るこの会議。 他のデザイナーの提案を間近で聞けるという事で、 回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。 そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂い
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
デザイン作業のスピードアップ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
『UI設計〜ディレクションの質を高める7つのポイント』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。社長室でUI/UXディレクターをしている渡辺（@mw19830720）と申します。現在は主にUI/UX視点でのAmebaスマホののクオリティ管理を担当しています。 普段ディレクターが本ブログで執筆することはあまりないと思いますので、今回はいつもと少し雰囲気を変えて、「サービス立ち上げ時におけるUI設計やディレクションの質を高めるポイント」というテーマで、あえて盲点になっているかもしれないと感じている点をまとめてみました。 まずは画面設計のフェーズにおいて2点ほど。 仕様書全体を都度見返す 画面仕様書の作成には数日～長くて数週間程度かかると
『スマートフォン向けブラウザゲームの開発について』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんばんは。アメーバ事業本部ピグディビジョン所属の久保です。 今回は6月5日にリリースいたしましたスマートフォンで遊べる「スマートフォン版ピグつりゲーム」(http://fishing.pigg.ameba.jp)の開発の一端をご紹介させていただきます。 スマートフォン版ピグつりゲームとは スマートフォン版ピグつりゲームとは、PC版アメーバピグの中で遊べるつりゲームをスマートフォンでも気軽に楽しんでもらえるように制作したブラウザゲームです。PC版はFLASHで動作しますが、スマートフォン版ではiPhoneの対応を考慮に入れてHTML/CSS/Java
『Airを使った運用管理ツール/ピグライフ』
こんにちは。 アメーバ事業本部でピグライフの開発を担当している竹ノ谷です。 シネマ シネマとは、ピグライフから新たに加わったゲーム内のキャラクターが話したりアクションしたりするのを物語として見れる機能です。 チュートリアルや毎々のイベントでストーリーを楽しむ事が出来ます。 ハロウィンイベント中のシネマ シネマの再生情報（登場キャストやアクション、台詞、タイミング等）は、時系列に従ってJSON形式のデータになっています。映画でいう台本の「誰が何をする」が、JSONで１アクションずつ書かれて並んでいるという感じです。 このJSONファイルを読み出し、ピグライフ内でシネマとして再生しています。 シネマジェネレーター シネマジェネレーターとは、上記のJSON形式データ（台本）を作成・保存・読み込み・再生プレビューをする、シネマオーサリングツールです。 シネマジェネレーター 一つ一つのアクションは、
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
