HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件
jsdo.itで「SPEC」というコーディングコンテストを開催しています。 今回のテーマは以下の二つ。 CSSだけを使って必殺技の演出を加えてください ローディングの演出を考えてください 「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…！」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。 開催期間中ですが、ぼくが個人的に「これは！」と思った作品をピックアップして紹介したいと思います。（コンテストの審査とは関係ないですよ！） CSSだけを使って必殺技の演出を加えてください スーファミのRPG風 えい！：forked: CSSで必殺技！ - jsdo.it - share JavaScript, HTML5 and CSS 光が集まる必殺技 forked: CSSで必殺技！第2弾！ - jsdo.it - share JavaScript, HTML5 a
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
Facebookのクエスチョンとインサイトを使い、イマドキのWebクリエイターに迫ってみた！
Facebookのアンケートなので、もちろん1位はFacebookですが、2位はTwitter、3位はmixi、4位はGoogle+と続きます。 どうやってデザイナーになりましたか？ 結果はこちら！圧倒的に独学の方が多いようです。 メインマシンを教えて下さい いろいろ機種があるので、わかりやすく色をつけてみました。 やっぱりイマドキのクリエイターはmacですね！ シゲルって何!? 持っている携帯電話の機種は？ みんなiPhone持ちすぎやろ！ってくらい、iPhone率高いですね～。 クリエイター向けのキャンペーンなら、iPhoneアプリを作るのが良さそうです。はい。 自分の仕事の内容を、家族や友人にどのように説明していますか？ 私は家族にはインターネットの仕事と言っていますが、みなさんはどうなのでしょうか？ Facebookページインサイト Facebookページのインサイトから、様々なユ
おさえておきたい国際広告賞2011 おさらい
ということで、2011年の三大広告賞と国際的デザイン賞を簡単に、日本受賞作品とともにまとめてみました！
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
これからの主流？ jQuery Mobileに触ってみよう - ADC MEETUP ROUND01に登壇してきました | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話
今回の主題は「モバイルを攻略せよ」 先週の土曜日（6/11）に、Adobeが主催する、ADC MEETUP ROUND01に登壇してきました。 主題は「モバイルを攻略せよ」ということで、DreamweaverやFlashなどを使って、スマートフォンアプリやサイトの制作についての話に焦点が当てられました。 今回自分が話した内容は、「ネイティブアプリに変わる、新しいアプリ開発スタイル」というタイトルで、今まのでアプリ開発（言語）から、HTML5+JavaScriptを使った開発へのシフトする可能性、それらを実現するフレームワークや注意すべき点などを発表させて頂きました。 プレゼン資料もHTML プレゼン資料もHTML5です！ と言えればいいのですが、実際はHTML5の要素はほとんど使っていませんｗ あえて言うならCSS3でしょうか。（HTML5ではないですが） なので、土曜日のセッションで使用
もしもフロントエンジニアがSVG女子をイジったら。音声認識やfpsコントローラなど本気だしすぎな件
SVG女子が公開されて2週間がたちました たいへん多くの方に視聴していただいているようで、感激しています！ 「SVG」がすっかりバズワードになっていますね。 まだの方はぜひご覧ください！ SVG女子を見る SVG女子にはユーザーが自由にイジってオリジナル作品を作れるモードがあります。 いわゆる「神モード」というやつです。 この「神モード」に公開直後から多くの作品が集まっています。（嬉しい！） SVGはJavaScriptから操作できることが特徴です。 色を変えることはもちろん、オブジェクトを変形させたり 再生速度を変えることもJavaScriptからできてしまうんですね。 このSVG女子がすごい！今見ておくべきフロントエンジニアの本気！ セピアカラー カラフルなSVG女子の世界がセピア色になってます。 再生する（SVG女子のページに飛びます） コードを見る SVG女子の消失 アイちゃんが消
第0回 HTML5プログラミング＆クリエイティブ コンテストに作品を応募しました
HTML5の可能性を示すコンテスト ども、久々に投稿になります。ME課の比留間です。 さて、先日開催された「第0回 HTML5プログラミング＆クリエイティブ コンテスト」に作品を応募してみました。 結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。 しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。（コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています） 自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。（※音が鳴るので注意） 実際に展示された作品 Meteorite Shooting Games - jsdo
初めての企画書が、最終選考に残った アイデアの出し方
販促会議賞という企画コンペに出させていただき、ファイナリストに残ることが出来ました！ 本職デザイナーが、どうやって考えて企画を立てたか。思考の足跡をつらつらと書きます。 ちなみに出した企画はこちら。 ただいまWeb投票もしているので、企画見てオモロイ！と思った方は、ぜひ投票お願いしまーす！ まずは販促会議賞ってなに？という人にご説明。 販促会議賞は、いろんな企業から「この商品の販促アイデアを考えて下さい」という感じでお題が出され そのどれかに応募するというものです。 企画をパワーポイントにA4サイズ10枚以内で、容量は5MB以内にまとめてくださいというルール。 誰でも参加可能、いくつでも提出OKです。 今回は、全27社から28課題出てました。 1.まずやったこと どうしたら勝てるか研究しました。 販促会議賞は第2回目だったので、1回目の受賞作品をざざっと拝見。 思ったこと 第１回の優勝者、
ユーザーを逃さない！海外Webアプリの入力フォームいろいろ
このフォームのポイント！ 上部のボックスでエラー表示 入力時にリアルタイムのエラー判定 それぞれのフォーム下部にエラー文言 項目名を赤く目立たせる
卒制採用にのっかって「コーディング推薦」やります！就活よりコーディングを頑張ったあなたを推薦します！
卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています！ とはいえ、、、 ME志望の学生さんの中には 「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・！ ぜひとも、そういう学生さんにもエントリーしてほしい・・・！ ということで、担当にかけあってきました！ 「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います！ 就活よりコーディングを頑張ったあなたを推薦します！「コーディング推薦」！ 対象は 2011年3月に卒業予定の方 jsdo.itで「課題」に挑戦していただきます（課題については後ほど説明します） 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部（ME課・コーティング推薦）」とご記入ください 集まった作品をME課のみんなで見させていただき、「これは！！」という作品を投稿
HTML5でつまずきやすいasideとsectionの使い方
HTML5分かりにくいですよね。 初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！ 自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。 さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。 そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。 まずその前に 本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。 文字コードの指定はmeta要素のcharset属性で 今までは以下のようにmeta要素の中に長々と属性を
運気アップのiPhoneアプリ！２つ同時リリース！
こんにちは、カヤックのラボチームBMKids（ブッコミキッズ）のねじです。 先日マッシュアップアワードで優秀賞をいただいた「安心レーダー」に続いて、新作iPhoneアプリを２本同時リリースしました。「つまらない話でも爆笑してくれるアプリ『笑い袋』」と「持ってるだけで運気アップ間違いなしの縁起が良いアプリ『縁起物』」です。 笑う門には福来る！爆笑アプリ『笑い袋』！！ 笑い声が響き渡る幸せな空間は素敵ですね。昔から笑う門には福来るとはよく言ったものです！この優れものアプリは、画面をタップしたり、揺らしたり、周囲 の音や声に反応して笑ってくれるのです。子供の楽しい遊び相手に、合コンの盛り上げ役 に、 寂しい一人暮らしに、会議やブレストのお供に。是非、笑いで世界をハッピーワールドにしましょう！ ちなみに、僕が個人的に気に入っている「外部の音に反応して笑ってくれる機能」。これによって、僕のつまらない
カヤックソーシャルアプリ『ぼくらのワールドリーグ』がマッシュアップアワード受賞！！
こんにちは！ 携帯中毒のゆりっぺです✿ 早速ですが、カヤックでつくったソーシャルアプリ、 『ぼくらのワールドリーグ』が、マッシュアップアワードで賞をいただきました！！！！！ パチパチパチ(拍手)！！！！！！ →『ぼくらのワールドリーグ』受賞作品ページはこちら こちらが先ほど行われた授賞式の様子です！ ディレクターは、今年入社したばかりの新入社員！北川君(左)です！ 賞品はなんと、webマネーのモバコイン5万円分！(笑) 『ぼくらのワールドリーグ』のここが面白い！！！をざっくりご紹介 こちらのＱＲコードからアクセスできます↑↑↑ 『ぼくらのワールドリーグ』は、サッカーで世界一のクラブチームを目指すモバゲーのソーシャルゲームです！ 世界中のクラブチームから所属チームを選択し、仲間と切磋琢磨し合いながら、試合に出場し、勝ち抜いていきます。 地域予選を勝ち抜くと、世界の強豪が集うワールドリーグに出
ソーシャルゲームでキャラクターができるまでを公開してみる
ちょっとツイてないキャラが定着してるhashimotoです。でも運は強いです。サイコロ給出目２冠達成しそうです。 今回はソーシャルゲームでキャラクターができるまでを公開(一部)しちゃいます。 今回公開しちゃうのは、 今月（2010年11月)ローンチしました、ぼくらのワールドリーグです。 このソーシャルゲームは、サッカーで世界一のクラブチームを目指すゲームです。 モバゲーで絶賛稼働中です。 ユーザーは、所属するリーグと、チーム、好きなキャラクターを一人選んで、スキルを上げて、 試合を勝ち抜き、世界一を目指す、というものです。 スキルを上げるためには、リフティングやドリブルなどの特訓ミニゲームをうまくこなす必要があります。 このミニゲームはFlash liteで出来ていて、キャラクターが登場するのですが、 今回はこのゲームで登場するキャラクターができるまでを公開しちゃいます！ では早速、、 １
全4000種類以上！ケータイペット「コンチ」のアイテム＆背景デザインギャラリー
カヤックで運用している、「ポケットフレンズ コンチ」というケータイで育てる珍感覚なペットサービスがあります。 着せ替えアイテムが4000個を超えていて、組み合わせのパターンが豊富なので、ギャラリー的な感じでコーディネートの一部を紹介したいと思います。 コンチのコーディネートを見るだけで、ほっこりしたり、クスっとしたりするので、暇な時にだら～んと見るだけでもきっと楽しいです♪ コンチのアイテムは以下の種類で分かれています。 頭アイテム（髪型や帽子など） メイクアイテム（口や顔肌の色など） 上半身アイテム（上着やスカートなど） 下半身アイテム（ズボンや靴など） 首飾りアイテム（ネックレスなど） 右手用アイテム 左手用アイテム 壁紙アイテム コンチの目も10種類以上あって、各種類にはその時の表情に併せて10パターン以上あります。 動きも50種類ほどあって、無限、までは行かないけど、沢山の組み合わ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のミサワがCSS3の勉強に最適と話題に