タグ

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

  • 『デザイナーでも知っておきたい美術史!』

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

    『デザイナーでも知っておきたい美術史!』
  • 『フロントチューニンガソン 最速を目指すには』

    11:10~ 課題ページの確認&PageSpeed Insightsの実行目的:チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20~ 画像ファイルの最適化目的:画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの

    『フロントチューニンガソン 最速を目指すには』
  • 『派手なだけじゃ意味が無い!魅力を伝える訴求デザイン』

    皆様はじめまして、2013年新卒入社の小笠原と申します! 現在アメーバゲーム部門にて、県vs県のカードバトルゲーム・天下統一クロニクルのデザイン全般を担当しています。 今回は、ソーシャルゲームの運用には欠かせないガチャの訴求デザインについて、 天クロが大切にしている考え方やノウハウをご紹介出来ればと思います。※この先登場するガチャはこの記事の為に用意したサンプルなので、実際にゲーム内で引く事は出来ません…!ご容赦下さい。 天下統一クロニクルとは 「坂龍馬」「日光東照宮」「ぬらりひょん」など、各地の名物や偉人をテーマにしたカードを武器に、全国47都道府県が戦いを繰り広げるバトルゲームです。 全国の皆様に支えて頂き、この9月にめでたく2周年を迎えます! ガチャの訴求デザインとはソーシャルゲームの中で販売されるガチャの魅力を伝えるための、 バナー等のデザインの事を指します。 ゲームのテイストや

    『派手なだけじゃ意味が無い!魅力を伝える訴求デザイン』
  • 『CSS3でつくるキャラアニメーション』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして! アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド(仮)」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド(仮)でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド(仮)に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド(仮)とは 「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー

    『CSS3でつくるキャラアニメーション』
  • 『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のコンポーネント化』
  • 『JavaScriptで始める関数型プログラミング 1 - 1』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま初めまして。 私、2011年4月に中途で入社、現在はアメーバ事業部でピグ×スマホ×Webの開発を担当している平松 @co_sche (co-sche)と申します。 家では楽器を弾いて自力で疲れを癒すアラサー男子です。 想定している読者は、JavaScriptの基的な構文を理解している方JavaScriptで関数を定義・使用したことのある方LLと総称される言語を扱っているが、関数型プログラミングを意識したことのない方です。 はじめに早速ですが「関数型プログラミング」という字面が長く、タイピングが辛いので所々FP(Functional Pro

    『JavaScriptで始める関数型プログラミング 1 - 1』
  • 『難しくないデザイン効率化のすすめ』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド(仮)でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは? と、なかなか一筋縄ではいかない問題です。 ガールフレンド(仮)デザインチームの場合、1年目~3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう

    『難しくないデザイン効率化のすすめ』
  • 『StyleDoccoによるCSSスタイルガイドの導入』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、アメーバ事業部 teens事業部の谷です。業務ではフロントエンドデベロッパーとして、主にHTML/CSSの設計・実装をおこなっています。 今回は、以前斉藤が書いた「モバイル時代におけるCSSの設計と実装」という記事で触れられていたコンポーネントリストもといスタイルガイドについてのお話です。 スタイルガイドの事例と、スタイルガイドを生成するツール StyleDocco の紹介をします。スタイルガイドとは先の記事より引用すると、ページ上の部品(コンポーネント、モジュール)を集めたリスト、ページのことです。どれがコンポーネントで、どれがモジ

    『StyleDoccoによるCSSスタイルガイドの導入』
  • 『色を色で見ないで』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事趣味とリンクさせながら理

    『色を色で見ないで』
  • 『nodeベースでGUIアプリを開発する「node-webkit」』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。Ameba事業部の杉と申します。 業務では「天下統一クロニクル」というチームでフロントエンドのディベロッパをしています。 今回は、「node-webkit」という一風変わったアプリケーションを紹介させていただきます。 私達は普段、gruntといったnode.js製のツールを使ってJavaScriptの結合や圧縮、画像の減色といった処理を自動化していますが、node-webkitはこれらnodeのモジュールを使ってGUIアプリケーションを作れるツールです。nodeの資産をそのまま利用できるので、私のようなディベロッパには嬉しいですね。

    『nodeベースでGUIアプリを開発する「node-webkit」』
  • フロントエンドエンジニアにおけるNode.jsのススメ | 1 pixel|サイバーエージェント公式クリエイターズブログ

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

    フロントエンドエンジニアにおけるNode.jsのススメ | 1 pixel|サイバーエージェント公式クリエイターズブログ
  • 『モバイル時代におけるCSSの設計と実装』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ

    『モバイル時代におけるCSSの設計と実装』
  • Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel|サイバーエージェント公式クリエイターズブログ

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう! 基的な使い方 Chrome DevTools Overview 基はやはり公式ドキュメ

    Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel|サイバーエージェント公式クリエイターズブログ
  • デザイン作業のスピードアップ

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。

    デザイン作業のスピードアップ
  • 1