ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し

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 について基礎から

ということで、2011年の三大広告賞と国際的デザイン賞を簡単に、日本受賞作品とともにまとめてみました！

4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer

カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。 いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！ Public-image.org Public-imageは、ANSWR代表の針谷氏によって創められたWebマガジン。 ひとつひとつの記事に、執筆者名が記載されており、 単なるインフォメーションでなく、ひとつの視点によるエディットされた情報が堪能できる。 その独自視点によるコラムは脳汁モノ。 現在は、オルタナティヴスペース「Public-image3D」など、オンラインメディアを飛び出して、 メディアと現場をクリエイティブスクラッチした実験を日々発信中！だそうです。 2次元メディアにとどまらないその心意気にクラップハンズ。 Public-image3D: http://3d.public-image.org 以下サイト

Photoshopの秋 時短の秋 ひぶたポケモンが進化しておおひぶたポケモンて。セキネです。 みなさんショートカットは好きですか？ぼくはどっちかというと好きです。 そこで、今回は王道ショートカットではなく、知っておくと実は使える／知っていても使うまでいかない／ボタン押した方が早いじゃないかというようなちょっとB級臭のするショートカットや小ネタを紹介します。ちなみにB級かそうでないかは独断と偏見で選んでます。そのへんよろしくお願いします。 目指せ、カンバス以外非表示系男子。 ※Macキーボードでの記載となります。Windowsの方はCommand→Ctrl／option→altへと脳内変換をお願いします。 ※OSやバージョン違いによって差異があるかもしれません。 ツール まずは意外と使いこなせていない人が多いツール切り替えショートカット。 ツールパレットまで移動する時間を省ければ全体で大きな

11月ですね！今年も残り2ヶ月！ 本社のある鎌倉は紅葉の季節にさしかかり、いい景色に元気をもらっているbarimiです！ Facebookって流行って…る？！ ってことで、私も先月からぼちぼち使いはじめました！ …が、ファンページってどうやってつくるの？とかデザインってどんなのがあるの？ などなど、まだまだ分からないことが沢山。 そこで今回は、デザインがかわいいファンページや、デザインギャラリーサイトをご紹介したいと思います！ いいね！ボタンを押させたい！ってときに一工夫しているファンページ ってことで、印象的なウェルカムページ。 Redbull まずはRedBull。かわいいグラフィックで思わず押したくなります。 Teesey Tees こちらは、いいね！を押すと、、、、(押してみましょう！) Desigual オーソドックスな画面ですが、独特の浮遊感のある色合いが綺麗ですね。 ファンに

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

【2位】A：オレンジ オレンジは、暖色系で高彩度なので、 興奮色、進出色として使うことができます。 △背景のベージュに対して、オレンジは同じ色みなのでなじんでしまいます。なので、この場合は2位にしました。 【3位】C：緑 背景の黄色に対して、緑は隣り合った色相なのでなじみます。 写真の植物とも近いので調和がとれています。 △きれいにまとまりますが、インパクトは弱まるかも。 デザイナーが陥りがちな色彩のワナ 目立たせたいとき、ワンパターンに、赤やオレンジをつい使ってしまう 目立たせたいのに、きれいにまとめてしまう 【目立たせルール！】反対色を試してみよう！ 暖色の背景には寒色の文字、 寒色の背景には暖色の文字を使うと引き立ちます。 それ以外の中性色の場合は隣接していない色を選んでみましょう。 【目立たせルール！】グレースケールでコントラストを確認！ ここで注意したいのは、反対色を使うだけでは

「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」に登壇することになりました。 はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。 今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。 話の内容は、最近なにかと目にする「HTML5」について。 その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。 HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。 これを利用して

僕はどうやったらRetina Displayが綺麗に表示されるか必死に模索する毎日です。（保護シート含め） ということで、今後のiPhone開発に”必須!!!"のRetina Display対応のデザインデータの作り方のコツについてご紹介します！

マークアップエンジニア（以下、ME）のtacamyです！(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 （いつもありがとうございます！） そんなワケで、本格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ！ 携帯コーディングの基本 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定（タグに直接style属性を追加する） 画像を含むページ容量100KB以内（HTML自体の容量は9KB以内） 画像はgifか

納豆はわさび派のくにーです。こんにちは。 みなさん雑誌って読みますか？ 個人的には先日、大好きな雑誌 Lmagazine（休刊）が webにて復活していたのが衝撃でした。 そんなこんなで、 今回はデザイン系雑誌をまとめてみたいと思います。 では、つづきからどうぞー。