Quantcast
Channel: KAYAC DESIGNER'S BLOG - TOPICS
Viewing all 239 articles
Browse latest View live

おさえておきたい国際広告賞2011 おさらい

$
0
0

はじめまして、意匠部のメイドさん・セリーヌです。

さて、今年もカンヌ広告際のグランプリが発表されました!
みなさんカンヌカンヌっておっしゃいますけど、それ以外の賞ごぞんじ?
カンヌ以外の国際的な広告賞も面白い作品ばかりですよ!
 
ということで、2011年の三大広告賞と国際的デザイン賞を簡単に、日本受賞作品とともにまとめてみました!
 
 
 

三大広告祭

カンヌ国際広告祭

 
世界でもっとも有名で、格調高い広告祭、おなじみカンヌ!
まず、こちらの日本の受賞作品を見てみましょう
日本では、森の木琴(フィルム部門)、UNIQLOCK(グランプリ)が受賞しています。
 
世界三大広告賞のうち「One Show」「CLIO AWARDS」でもグランプリを受賞し、国内、国外様々な賞を受賞!
世界を制した作品といえるんじゃないでしょうか。
 
UNIQLOCK
 
 
 

one Show

 
世界三大広告賞のうちの1つがこちら、oneShowです。
 
なんと今年は日本作品が6つの賞を獲得。
UNIQLO LUCKY LINE
 
 
 

クリオ賞

 
別名、広告界のピューリッツァー賞。 
1999年の第40回目のクリオ賞からインターネット部門が創設されました。
 
以下、日本の受賞作品です。
ネット部門では入賞なりませんでしたが、ツイッターを使ったキャンペーン、
Nike Tasuki Twitterがコンテンツ部門で銀賞を受賞しています。
 
こんな風に、ツイッターに投稿された応援メッセージが、
たすきにミシンで刻み込まれます!
このたすきとともに選手の皆さんは走ったわけです。熱いですね!
 
 
 

こちらの賞も見逃せない!

ウェビー賞

http://www.webbyawards.com/

 
ネット界のアカデミー賞とも呼ばれます。 WEBサイトに限定した賞です。
今年で15回目と回数は少ないですが、インターネット界のオスカー賞と呼ばれるくらい権威のある賞です!
 
5単語の受賞コメント、この10年間で大きいWEB上でのできごとを発表したり、いろいろユニークな活動をしています。
会員や専門家ではない、一般の人の投票によって決める、People's Voice 賞がある。
今回、この賞を、こちらSOUR ‘日々の音色 (Hibi no neiro)’日本が獲得!
 
SOUR ‘日々の音色 (Hibi no neiro)’
 
 
 
 

ニューヨークフェスティバル

 
1957年からの歴史を誇るニューヨークフェスティバル。 
残念ながら日本はゴールドをとれませんでしたが、銀・銅賞にかがやきました!
カヤックといえばマンガ!ということで、マンガを演出に使った、adidas SKY COMICをご紹介。
 
sky comic
adidas SKYCOMIC

 

 

アジア太平洋広告祭(アドフェスト)

 
アジア太平洋圏のみで行われる、アジア一大きな賞です!
日本作品が多く入賞しています。
映し鏡Utsushi Kagami’ (Mirror) は3部門で入賞、見逃せないので今すぐ見ておきましょう!
 
映し鏡Utsushi Kagami’ (Mirror)
 
 

まとめ

どの作品も、ビジュアル表現豊か!
TwitterやFacebookなどのSNSのログを使ったり、
WEBカメラで参加したり、自分というものをメインにし、
自分がそこに存在すると思わせるようなコンテンツ。
WEB特有の要素を活かした、おもしろいものばかりでわくわくします!
 
またビジュアル的にもきれいで、どの国の人が見ても気持ちがいい、理解しやすい動きや構成になっています。
はじめから世界を意識して作っているのかもしれませんね。
 
日本国内ももちろんですが、毎年開かれるこういった大きい賞をチェックするだけでも、ぐっと世界に近づいたデザインができるかもしれませんね!

Facebookのクエスチョンとインサイトを使い、イマドキのWebクリエイターに迫ってみた!

$
0
0

食欲の秋、9月が到来しました!

いつも元気なbarimiです。
 
みなさん、Facebookのクエスチョンや、Facebookページのインサイトって使っていますか?
Facebookの機能の一つであるクエスチョンは、気軽に作成&回答ができるのと、
拡散され易いく、回答が多く集まりやすいというポイントがあります。
面白い反応が出てくるので、私はよく質問をしています☆
 
またFacebookページのインサイトも、ページを運用していく中で貴重なデータが見れるので重宝しております。
 
というわけで、このブログのFacebookページでのクエスチョン結果とユーザーインサイトから
イマドキのWebクリエイターに迫ってみたいと思います!

まずは、クエスチョンの結果から。

よく使うソーシャルサービスは?

まず、よく使うソーシャルサービス。
結果はこちらです!

q_social.gif
 

Facebookのアンケートなので、もちろん1位はFacebookですが、2位はTwitter、3位はmixi、4位はGoogle+と続きます。

どうやってデザイナーになりましたか?

結果はこちら!圧倒的に独学の方が多いようです。

q_career.gif

メインマシンを教えて下さい

いろいろ機種があるので、わかりやすく色をつけてみました。
やっぱりイマドキのクリエイターはmacですね!

q_pc.gif

シゲルって何!?

持っている携帯電話の機種は?

みんなiPhone持ちすぎやろ!ってくらい、iPhone率高いですね~。
クリエイター向けのキャンペーンなら、iPhoneアプリを作るのが良さそうです。はい。

q_phone.gif

自分の仕事の内容を、家族や友人にどのように説明していますか?

私は家族にはインターネットの仕事と言っていますが、みなさんはどうなのでしょうか?

q_job.gif

Facebookページインサイト

Facebookページのインサイトから、様々なユーザーのインサイトが見ることが出来ます。
下にあるのはこのブログのFacebookページのユーザー属性。

男性で20~30代が一番多いようです。

q_data2.gif

まとめ

というわけで、イマドキのWEBクリエイターは、Facebookを見ながら、iPhoneを持っていて、macを使いこなす独学でホームページを作るアラサー男子!

ってことが分かりました。

sugyan.gif

※イメージです。

他にもクエスチョンしていますので、結果を知りたい方は、Kayac Designer's BLOGのFacebookページを御覧ください!

いまさら聞けない><; 基礎から学ぶ「HTML5」超入門!

$
0
0

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 について基礎から学ぶ方のために、参考サイト・資料、ギャラリー、勉強法などなどまとめてみました!

それでは、続きからどうぞ!

申し遅れました。

初めまして橋本雄也と申します。今年の2月から意匠部ME課で楽しく! 働かせていただいてます。
入社したときカヤックには既に橋本が三人在籍していたため、ABCD の構成になってます。
橋本レンジャイッ!

どうぞよろしくお願いいたします!


献立

Ⅰ.HTML5 基本的知識のまとめ

Ⅱ.HMTL5 凄いギャラリーサイトのまとめ

Ⅲ.HTML5 実践的勉強法のすすめ


いまさら HTML5 のこと聞けない><; という方にもご安心の3本立てでお送りしたいと思います!


Ⅰ.HTML5 基礎的なことのまとめ

HTML5!・HTML5! って周りは騒いでるけど、実際何があたらしいのか把握してない><;
という方に、とても分かりやすい資料・サイトを5つまとめてみました!

HTML5, きちんと。.jpgのサムネール画像

HTML5, きちんと。

HTMLの歴史やこれまでの流れ、記述のサンプルや今後の動向まで分かりやすく一通り書いてあります。
ぜひ一度は目を通されることをオススメします!
 
 
今からハジメるHTML5マークアップ.jpgのサムネール画像

今からハジメるHTML5マークアップ

HTML5におけるマークアップのやり方について事細かにわかりやすく解説してあります!
 
HTML5.JP.jpgのサムネール画像

HTML5.JP

日本で HTML5 熱が高まる前から存在する HTML5 に特化した情報サイト!
 
 
HTML5リファレンス.jpgのサムネール画像

HTML5リファレンス

HTML5で追加・変更されたタグを調べるならコチラ!
 
 
CSS3リファレンス.jpgのサムネール画像

CSS3リファレンス

CSS3で定義されたスタイルのことを調べるならコチラ!
 

Ⅱ.HTML5 ギャラリーサイトのまとめ

HTML5 で何ができるのー!?というのを知るときに、
ギャラリーサイトを見るのが一番手っ取り早いですね!

ということで「え!HTML5 ってこんなことできるの!?すげー!」な、ギャラリーサイトを5つ、まとめてみました。
 

html5_gallery.jpgのサムネール画像

HTML5 Gallery

HTML5 で作られた世界中の面白いサイトが集まっています!
 

Chrome Experiments.jpgのサムネール画像

Chrome Experiments

Google による HTML5 で作られた凄いサイトのギャラリー。
 

Internet Explorer 10 Test Drive.jpgのサムネール画像

Internet Explorer 10 Test Drive

Microsoft による HTML5 で作られた凄いサイトのギャラリー。
 

Apple - HTML5.jpgのサムネール画像

Apple - HTML5

Apple による HTML5 で作られたリッチなウェブコンテンツのギャラリー。
 

Demo Studio | Mozilla Developer Network.jpgのサムネール画像

Demo Studio | Mozilla Developer Network

Mozilla による HTML5 で作られた凄いサイトのギャラリー。
 



Ⅲ.HTML5 実践的勉強法のすすめ

HTML5 が全盛になってきて覚えることが増えてきましたね><;
ところがどっこい世の中便利になったもので、その1つにジェネレーターがあります。

ジェネレーターを使うメリットは、「このコードを使うとこうなるんだ!」と、
逆算的にかつ視覚的にコードを覚えられるということが挙げられると思います。

そんな便利なジェネレーターをご紹介します!

 
LAYERSTYLES.jpg

Layer Styles

Photoshop のようなUI、操作感で直感的にドロップシャドウや角丸のコードを出力してくれるジェネレーターです。
細かい調整が効く分それなりにコードも複雑になりますが、勉強になります!
 

Ultimate CSS Gradient Generator.jpg

Ultimate CSS Gradient Generator

こちらも Photoshop のような操作感でグラデーションに特化したジェネレーターです。
グラデーションに対応していないブラウザ向けにも対応したコードが出力されるのでとても勉強になります。
 

border-image-gen.jpg

border-image-generator

CSS3 の border-image のコードを出力してくれるジェネレーターです。
border-image プロパティは少し分かりづらい指定方法をしなければなりませんが、
このジェネレーターで直感的に操作することで自然とプロパティの指定を覚えられる!かもしれません。
 

CSS3 Generator.jpg

CSS3 Generator

CSS3 の多くのプロパティを網羅した素晴らしきジェネレーターです。
使っているうちに時短にも勉強にもなります。ありがとうございます。
 

(番外編)

html5 - jsdo.it.jpg

html5 - jsdo.it

番外編で、ジェネレーターではありませんが、jsdo.it
 "HTML5" タグに集まった数多くのサンプルの中から、

実際のコードを見つつ手を動かすのも、とてもいい勉強になります!
お手本にしたいコードを「Fork」するだけで、簡単に自分だけの作品が作れます。一石二鳥ですね!
 



いかがでしたでしょうか。ぜひぜひこの機会に HTML5 の理解を深めていきましょう〜!

そして、最後に宣伝!

HTML5 の勉強はじめようかな、HTML の理解どれぐらいかな…という方は
ぜひ HTML5 実力テストをお試しください!もちろんカヤック企画開発!)
※いま点数が悪くても、勉強後に再チャレンジして高得点を目指すこともできますからご安心を

HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS.jpg

HTML5 実力テスト

15分ほどでお手軽にプレイできますので、ぜひぜひお試しください!
 



さて、唐突に冒頭でもお伝えさせていただいた通り、カヤックではこれからの HTML5 時代を戦っていくべく
HTMLファイ部 が設立されました。その名のとおり HTML/CSS マークアップ、JS 開発をバリバリやっていきます!

HTMLファイ部では戦隊ものごとく、新しい隊員も大大募集中!
 

興味のある方はエントリー受付中です!


 

知らないと人生損してる!デザイナーのための必見ブログまとめ

$
0
0

はてブたくさんついちゃいました(・∀・)

お久しぶりの意匠子です。

先日のHTML5に関する記事がとんでもないブクマ数ついちゃいました。

今の世の中はHTML5旋風吹き荒れてますね!

このような最新情報を集めるのもデザイナーの大事なお仕事!

そこで今回は知らないと人生を損しているであろうデザイナー必見のサイトをまとめました!

続きをどうぞ!

まずは鉄板サイトから!!

 

Webクリエイターボックス

チュートリアル系の記事が豊富。
まぁWebデザイナーはほぼ100%見てるいると思って間違いなし。
webクリエイターボックス.png

 

コリス

Webデザイナーやマークアップエンジニアで、
このサイトを知らないのはモグリと思われてしまうくらい有名なサイト。
CSS3やJavaScriptの話題が豊富。ちなみに某りすこさんとは関係ありません。

コリス.png

 

ホームページを作る人のネタ帳

Webデザインを学ぶ人はみんな一度は見たことがあるぐらい有名なネタ帳。

ネタ帳.png


ビジュアルやばい!!

 

Webデザインレシピ

まさに「女の子」という感じのとても可愛いサイト。

かわいさに負けない情報量!

Webデザインレシピ.png

 

Web Design KOJIKA17

文字大きい!斬新!1カラム!

Web Design KOJIKA17.png

 

Stocker.jp / diary

はてブ数の表示がかわいすぎ!

Stocker.jp : diary.png

 

BLOG × WORLD ENDING

デザインがキレイ!RSS禁止!これはサイトを閲覧するべし!

BLOG × WORLD ENDING.png

 

07desigh.blog

ピンクの配色がかわいいサイト。
ちなみに中の人は人事のなつめぐと誕生日が7日違い。

07 desigh.blog.png
 

ウェビメモ

色使いがかわいすぎる
ちなみにゴゴゴゴゴとなっているアイコンが特徴的です。
ウェビメモ.png

 

実践してみた系もたくさん!!

CSS HappyLife

実際に実践してみた系の記事がたくさんあります。
見ているとやってみたくなること間違いなし。

csshappyLife.png

 

DesignDevelop

デザインを開発するという新しい視点のブログ。素材が多い!

DesignDevelop.png

 

WWW WATCH

ここミスっちゃうよなぁ、というポイントを見事についてくるサイト。
ちなみにME課の久保田は
CSSセレクタに関するおさらい記事
に人生の危機を救われたそうです。

www.WATCH.png

 

CSS Lecture

CSS3、HTML5、Movable Typeのまとめサイト。
最近WordPress系の記事が増えている中でMovable Typeの記事は貴重

CSS Lecture.png

 

sakura.net

JavaScriptやjQueryの情報満載

sakura.png
 

CSS-EBLOG

何を隠そう弊社の監督こと比留間のブログ。
手前味噌ながらなかなか良記事が集まっています!

比留間.png
 


役立つ情報が満載!!

デザインどゃ!?

Web制作に役立つ情報がたっぷり。

デザインどや.png

 

ITキオスク

Webデザインやライフハックなど
黄色い看板さながらの品揃え。

ITキオスク.png

 

Web活メモ帳

そのまま教科書になってもおかしくないレベルの情報量。

Web活メモ帳.png

 

Webpark

ウェブサイト作成に役立つことをいろいろ!

Webpark.png

Web Design Library

webニュースは朝起きてまず読みますよね。

Web Design Library.png

ウェブルニュース

とりあえずこれ読んでおけばどうにかなる。
そう思えるぐらいWeb界隈の情報を網羅しているサイト。

ウェブルニュース.png


ここでちょっとだけ告知です!!

ここで告知!現在カヤックではWebデザイナーを大募集中です。
エントリーはこちら!!

愉快なカヤックのWebデザイナーたちがたくさんいます!

デザイナー.png

大切なことはもう一度。エントリーはこちらから!!
 


閑話休題。専門分野ならこれ!!

 

Photoshop VIP ☞

ヘッダがブルブルするんだよ!やってみて!!

Photoshop VIP ☞.png

 

Fireworksマニア

Fireworksに関する情報は勝手ながら世界で一番だと思っています。
参考になりすぎてやばい。

Fireworks.png

まとめ系も要チェック!!

Designaholic

まとめ方が秀逸。

Designaholic.png

男子ハック

毎日更新でわかりやすくガジェット好きにはたまらないサイト。

男子ハック.png

Webデザインのタネ

まとめ系の記事がたっぷり!
FireworksやDreamweaverに興味のある人必見!

webデザインのタネ.png


他にもいろいろ!!

Don't be lame

Webデザインの情報はないけど、読むと最近のWebのトレンドがしっかり把握できるブログ

Dont.png
 

DesignWorks

プロダクトやDTPの情報も豊富。

DesignWorks.png

 

YATのBLOG

Webデザインだけではなく幅広い情報がいっぱい!

YATのBLOG.png
 

 

いかがでしたか?

全部RSSに登録すると楽しい朝が迎えられること間違いなし。
リサーチ協力のくぼしょうありがとう!
ちなみにいま読むべきWEBマガジンに関しては
昨年のデザイナーズブログのこの記事がオススメです。

もっとすごいブログ知ってる!または自分ならもっとすごいデザインのブログができる!
カヤックに興味のある!といった方はこちらからエントリーをお願いします!



少しでもカヤックに興味をお持ちの方は
まずは問い合わせお待ちしています!

カヤック問い合わせ

光から移動まで、すべてCSSで作る光るアニメーション

$
0
0

光から移動まで、すべてCSSで作る光るアニメーション

 

ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」

意匠部ME課あらため、HTMLファイ部所属となった比留間です。

今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。

簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。

さて、今回この記事でご紹介したいのは、
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。

これを追加したことによって、だいぶ雰囲気が出ました。(アーバンリサーチのゲームページで雰囲気を確認
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。

ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS

ホタル風オブジェクトのベースを作る

ということで、早速作り方に入って行きます。
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。

実際に使ったコードは以下。

	.fireflyDot {
        width: 4px;
        height: 4px;
        background-color: rgba(255, 241, 202, 0.8);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    }
    

見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
これを適用したものが↓
firefly.png

ベンダープレフィクス(-webkitとか)とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。

実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。

ホタル風オブジェクトを動かす

上記のCSSを適用することでホタル風オブジェクトが表現できました。
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。

使用している主なプロパティは以下。

	opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 2.5s;
        transition-timing-function: ease-out;
    

これだけです。
動きの実装で重要なのはtransitionプロパティだけ、ということになります。(移動の際の位置指定はJavaScript側で自動生成しているため)
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値(サンプルではtransform、opacity)に変化があった際、トランジション(遷移)を伴って変化を表現する、というものです。

つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。

もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。(animateメソッド)

iPhone / Android対応

今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。

Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。

もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

CSSだけで必殺技を作るコンテストのクオリティーが高すぎる件

$
0
0

jsdo.itで「SPEC」というコーディングコンテストを開催しています。
今回のテーマは以下の二つ。

  • CSSだけを使って必殺技の演出を加えてください
  • ローディングの演出を考えてください

「こんなマニアックなテーマだけど参加してくれる人がいるのだろうか…!」と心配していたのも杞憂に終わり、続々とすごい作品が投稿されています。

開催期間中ですが、ぼくが個人的に「これは!」と思った作品をピックアップして紹介したいと思います。(コンテストの審査とは関係ないですよ!)

CSSだけを使って必殺技の演出を加えてください

スーファミのRPG風

えい!:forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS

光が集まる必殺技

forked: CSSで必殺技!第2弾! - jsdo.it - share JavaScript, HTML5 and CSS

スパッと切れる演出

パカッと! forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS

回復魔法

forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS

もはや必殺技というよりCSSだけでRPG

ワンクリックRPG。forked: CSSで必殺技! - jsdo.it - share JavaScript, HTML5 and CSS

ローディングの演出を考えてください

気持ちのいいアニメーション

Rolling forked: ローディング - jsdo.it - share JavaScript, HTML5 and CSS

波紋のように広がるアニメーション

waves forked: ローディング - jsdo.it - share JavaScript, HTML5 and CSS

跳ねる人

Human Arrow - jsdo.it - share JavaScript, HTML5 and CSS

コンテストの締切は16日!

コードを書くのが苦手でも、アイデア勝負で参加できるイベントです。16日まで募集しているのでぜひご参加ください!

超豪華賞品もありますよ♪

最速かも?!第15回文化庁メディア芸術祭受賞作品まとめ!

$
0
0

本日、第15回文化庁メディア芸術祭の受賞作品が発表されました!

そこで、受賞作品の中から、Webで見れるものをまとめて紹介します!
画像クリックでサイトに飛べます!

アート部門

優秀賞

「particles」 真鍋 大度 / 石橋 素 

横幅8メートル、高さ8メートルのLEDを内蔵したボールを使ったインスタレーション。
その製作の様子は、以下の記事で紹介されています。

 

「つながる天気」 片山 義幸

2010年8月から2011年7月の天気を写真をつなげ構成された映像とWebコンテンツ。

httpktym.png

 

「BLA BLA」 Vincent MORISSET

画面をクリックして遊べるコンテンツ。6つのチャプターが用意されていて、いろいろと遊べます。

blabla.png

エンターテインメント部門

大賞

「SPACE BALLOON PROJECT」 大八木 翼 / 馬場 鑑平 / 野添 剛士 / John POWELL

GALAXY S Ⅱのキャンペーンサイト。
GALAXY S Ⅱに気象観測用バルーンをつけて、上空三万メートルの成層圏に打ち上げるプロジェクト。
キャンペーン期間中はその様子が生中継されていました。

spaceballoon.png
 

優秀賞

「The Museum of Me」 田中 耕一郎 / 谷川 英司 / 斎藤 精一 / 坂本 政則 / 村山 健

Facebookを使ったWebキャンペーン。
Facebookに投稿した写真やユーザー情報を使い、自分の美術館を観覧できるもの。
美しい映像が印象的です。

museum.png

 

新人賞

「Hietsuki Bushi」 Omodaka ひらのりょう

毎回面白いコラボでMusicVideoを制作するOmodakaの最新作。
個人的には牧鉄兵とのコラボの「kokiriko bushi」が好きです。

 

「リズムシ」 成瀬 つばさ

人気iPhoneアプリでお馴染みのキャラクター、リズムシのプロジェクトが受賞。このキャラクターのシリーズのアプリはどれも可愛くておすすめです!

otomushi.png

インスピレーションを刺激する!Facebook新タイムラインのデザイン51選!

$
0
0

あっという間に12月!
さて、こんな年末の年の瀬迫るちょー多忙期に、なんとFacebookのタイムラインが新しくなることに!
カバー写真とプロフィール写真を工夫することで、面白い見せ方をしているデザインを51個ご紹介します!

新タイムラインの設定方法やカバー写真の変更方法についてはこちらがおすすめです!

また面白いプロフィールページだけを集めたFacebookのグループもおすすめ!

Ekkapong Techawongthaw

fb_0000_ekkapong.png

fb_0001_ekkapong2.png

fb_0002_ekkapong3.png

Mohammad L. Azzam

fb_0003_mohammad.png

Andrew Grojean

fb_0004_andrew.png

Yale Zhao

fb_0005_yale.png

Sune Adler Miltersen

fb_0006_sune.png

Sven De Bruyne

fb_0007_sven.png

Thoman A. Reinert

fb_0008_thomas.png

Jan Tetteroo

fb_0009_jan.png

Tsi Remo

fb_0010_tsi.png

Michal Brat

fb_0011_michal.png

Vignesh Shady

fb_0012_vignesh.png

Josh Burnett

fb_0013_josh.png

Shaun Chandran

fb_0014_shaun.png

Lanfranco Nantele

fb_0015_lanfranco.png

fb_0016_lanfranco2.png

fb_0017_lanfranco3.png

Bobby Fischer

fb_0018_bobby.png

Benito Lopez

fb_0019_benito.png

Eric D Wheeler

fb_0020_eric.png

DJ Spyder

fb_0021_djspyder.png

Vandy Pesaeillo

fb_0022_vandy.png

Shashikant Bohat

fb_0023_shashikant.png

Pietor Dom

fb_0024_pietor.png

fb_0049_pieter.png

Wilfred Parmar

fb_0025_wilfred.png

Draco Chu Zhe Yang

fb_0026_draco.png

Emanuele Bartolomucci

fb_0027_emanuele.png

Max Chee-Horng Law

fb_0028_max.png

Tanner Ringerud

fb_0029_tanner.png

Maurizio Mazzanti

fb_0030_maurizio.png

Ivan Marino

fb_0031_ivan.png

Giuseppe Draicchio

fb_0032_giuseppe.png

Gianmarco Carrieri

fb_0033_gianmarco.png

Annalisa Modotto

fb_0034_annalisa.png

Victor Zapanta

fb_0035_victor.png

Sudipto Mahato

fb_0036_sudipto.png

Louise Lundberg

fb_0037_louise.png

Herb Cloutier

fb_0038_herb.png

Manoj Varghese Mathew

fb_0039_manoj.png

Vinh Nguyen

fb_0040_vinh.png

Sune Adler Miltersen

fb_0041_sune.png

Maggie Lin

fb_0042_maggie.png

Brian Sanders

fb_0043_brian.png

Arch John Philip Uy

fb_0044_arch.png

Andy Hirsch

fb_0045_andy.png

Travis Keith

fb_0046_travis.png

Jeremy Bronson

fb_0047_jeremy.png

Umair Latif

fb_0048_umair.png

Tom Lambie

fb_0050_tom.png

 

ちなみに私のプロフィールも若干の工夫しています!


超定番の jQueryプラグインをサンプルと一緒に集めました。(商用利用OKなもの多め)

$
0
0

超定番のjQueryのプラグインを厳選して集めました。
商用利用が可能なものを優先的にピックアップしています。
(利用する際はそれぞれライセンスをご確認くださいね)

超定番プラグイン

アニメーションのイージングを簡単に扱えるプラグイン

jQuery.easing

スマートフォン用フレームワーク

jQuery Mobile

jsdo.itでも何度か紹介している定番のスマートフォン用フレームワーク。簡単な指定でスマートフォンライクなUIを実装できます。

合わせて読みたい

「初回訪問時にだけ表示する」といったcookieを簡単に扱えるプラグイン

jquery.cookie.js

CSS3のtransformのような変形ができるようになるプラグイン

jquery-css-transform.js , jquery-animate-css-rotate-scale.js

入力フォームの文字数をカウントしたり、入力済のときにだけボタンを有効にできるプラグイン

jquery.textchange.js

URLの末尾の「#hoge」の変更を監視するプラグイン

jquery.ba-hashchange.js

ハッシュを使って開くタブを指定する場合などに使えます。

背景をアニメーションさせるプラグイン

jquery.backgroundPosition.js

マウスのホイールを扱うライブラリ

jquery.mousewheel

ホイールの移動量などを取得できるのでアイデア次第でいろいろできます。

連続した大量のイベントを一つにまとめて重くならないようにするプラグイン

jquery.ba-throttle-debounce.js

最近のちょっと気になるプラグイン

Lion のような慣性のついたスクロールを実装

jQuery NiceScroll plugin


jsdo.it を使えば気になるライブラリをサクッと試せます!

閃いたアイデアやコーディングの練習にも使えて、「KAYACのサービスにしては珍しく実用的」と評判です!無料で使えるのでぜひお試しください♪

ドット絵描く楽な方法見つけた!気がする

$
0
0

kayac 閃光部 クリエイターの嶋田より寄稿です。

モンスターを集めてまいれ!」というiPhoneアプリを
プロデュースしたんですが、イラストレーターのタスクが多く
ドット絵を自分で描く事になりました。

初ドット絵だったので
このノウハウ共有に何の意味も無いかもしれませんが
きっと何処かに需要はある!と、思い込んで記事を書いております。

使用ソフトはPhotoshopです。

余談ですが
バイトのドット絵得意な子に聞いたところ「Photoshopはやめておいたほうがいい」
との回答。

・・・・。

さあいってみよう!

 
m01.png
 
まず下絵を準備 自分、ワンコしか描けないので
イラストレーターにさらっと描いてもらいました。
 
m02.png
 
モンスター画像は最終的に150×150px で使用するんですが、
ドット絵の荒さを出す為に50×50pxに縮めます。
 
 
m03.png
 
輪郭の線をポチポチなぞっていきます。 
 
 
m04.png
 
レイヤーを分けて下地になる色を塗ります。
 
ここで
初心者の私はぽちぽちやるのに疲れ
楽な方法は無いものか考えました。
 
そして
ドット絵師達には邪道だと
言われそうな方法を思いつきました。
 
 
m05.png
 
利用するのはレイヤー効果のソフトライト
 
 
m06.png
 
ソフトライトに設定したレイヤーで影になる部分を黒で塗ります
色を変える必要がないので楽ちんこ
 
 
m07.png
 
レイヤー増やしてソフトライトでもう一回影をヌリヌリ
 
 
m08.png
 
レイヤー増やして白でハイライトの部分をヌリヌリ
 
 
m09.png
 
最後に仕上げをぽちぽち
 
 
m010.png
 
 
で "ニアレストネイバー法!!"で150×150pxに拡大します。
"バイキュービック法!!!"だと
拡大した時に余計なグラデーションがつくので注意です。
 
m11.png
 
 
最後に登場モンスターチラ見せ!全部同じ手法で描いてます
 
 
m12.png
 
 
"モンスターを集めてまいれ!"では 
5r4ce2のぱんかれさんが作成した
ファミコン風の"GD-DOTFONT-DQ"フォントを使用しています
ぱんかれさん快諾していただいてありがとうございました!
おかげさまでリリースする事ができました。
フォントをダウンロードする時はこちらから
この分かりやすい図を参考にどうぞ!

m13.pngのサムネール画像
 
 
※この記事は_level0に載せた記事と同じ物を載せています

カヤック内定者が本気で作った!面接に効く「おいしいポートフォリオ」

$
0
0

おいしいポートフォリオを作ろう!

どうも、はじめまして!!
縁あって面白法人カヤックで働くことになりました、デザイナー内定者のハットリです。

ところでみなさん!ポートフォリオ、作ってますか?
ポートフォリオって作るの難しいですよね…。

今回はそんなポートフォリオのことを
ちょっとでも楽しく、料理に例えつつ紹介したいと思います。
自己流レシピですが、皆さんの参考になれば嬉しいです!

ちなみにカヤックにはこんなポートフォリオを送りました。

portofolio01.jpg

1.下ごしらえ: 素材を準備しよう!

作品リストをつくろう!

まずは、ポートフォリオの下ごしらえです。


portofolio02.jpg

今までの作品をリスト化してみましょう!
「どの作品なら使えそうか?」が分かるように書くといい感じです。
こうしてチェックしておけば、いざ作り始めて
「クオリティはOKでも、写真データがない!」とあたふたしなくてすみます。

キーワードを探そう!

さて、これで材料がそろいました。
つぎはコレでどんな料理を作るか、つまり
「こんなポートフォリオにしたい!」というテーマを考えましょう!

テーマの決め方

私がオススメするのは
「作品のキーワード」から決めるやり方です。

作品づくりで、いつも大切にしていること。
それが「作品のキーワード」になります。
そして、キーワードを読む人に分かりやすく伝えることが、
ポートフォリオのテーマになります。

私はそのキーワードを探すときに、コレを使いました。

》1人ブレストアプリ「lonly idea」

portofolio03.jpg

使い方はカンタンで、かつ楽しいです!

ブレストテーマを決めよう!

portofolio04.jpg

まず作品を1つ選んで、ブレストのテーマにします。
そして作品のことなら「なんでもいいので」書いていきます。

どんどん書いていこう!

portofolio05.jpg

連想ゲームのように、どんどん書いていきましょう!
もう書ききれない!となったらやめます。
他の作品も同じように繰り返します。

すると「この言葉、いつも出てくるなぁ」というものに気づくと思います。
それが、あなたが作品づくりで大切にしているキーワードです!

私の場合は「組み合わせの発想」がキーワードでした。
なので「組み合わせの発想が、よく伝わるように作ろう!」
というテーマを立てることができました。

2.味付け: 素材にスパイスを加えよう!

アイコンをつくってみよう!

キーワードをカタチにしてみよう

決まったテーマを元に、ポートフォリオにスパイスを加えましょう!
例えばアイコンを作ってみるのもいい感じです。

私はこんなアイコンで作品を紹介してみました。
portofolio06.jpg
私のキーワード「組み合わせの発想」から、
「組み合わせ」→「ジグゾーパズル」!
となり、ジグゾーパズルをモチーフにアイコンを作ろう!となったわけです。

他の作品もジグゾーパズルのアイコンを使って紹介しています。
portofolio07.jpg

みなさんも、キーワードにぴったりのアイコンを作ってみてはどうでしょう?
ポートフォリオに統一感がでますよ!

さて、アイコンなどでスパイスを加えたら
いよいよ写真や文章を加えて、仕上げていきましょう!

・・・なのですが、ここではアドバイスはしません!
いい写真や文章の書き方は、色々なところで語られているので・・・。
そんなわけで今回は最後に、ひと工夫でよりおいしくなるアドバイスをしていきます。

3.隠し味:サイドメニューを追加してみよう!

作品数少っ!となっても諦めない

サイドメニューでおなかいっぱいにしよう!

「作品数少なくて、載せるものがない…!」と悩んでいる人がいるかもしれません。
全然心配いらないですよ!!!
私も作品数ひっぱりだしてきて、10点しかありませんでした…!少ない!!

そんなときは、メインのポートフォリオのほかにサイドメニューをつけましょう!
portofolio08.jpg
私はカヤックの1次面接に、このミニブック「わんさく」を持って行きました。
「わんさく」というのは「one day one sakuhin」の略で
「1日1つ何か作品をつくる」という企画をまとめたものです。

ただこの企画、面接のほんの3週間前にはじめたものなんです。
「作品数少ないなら、毎日何か作れば増えるんじゃ?」
と考え、たった3週間でしたが21個の作品ができました。

なので、もし作品数が少なかったら増やせばいいんです!
面接までにガンガン増やして持っていきましょう!!!

因みに2次面接時には、1週間で電子書籍を作って持って行きました。
portofolio09.jpg
ガッツがあればなんでもできる!

おいしいポートフォリオができたら・・・

ポートフォリオを届けよう!

せっかく作ったおいしいポートフォリオ
アツアツのうちに、届けましょう!

やってます!面白法人の面白採用!

新卒の方は、是非!こちらからエントリーしてみてください!

就活のムダをなくす!今年の新卒向け採用コンテンツは「節就」!

 

もちろん!中途採用の方も募集しています!

求む!カヤックを変えてくれる方!!

 

それではよろしくお願いします。
おいしいポートフォリオ、できたら是非みせてください!

HTMLに恋したい!「コーディング推薦」はじめました!

$
0
0

好きなプロパティは「-webkit-animation-delay」の渕上です。

昨年、卒制採用にのっかって行った「コーディング推薦」。今年もやることになりました!

コーディング推薦って?

KAYACの採用キャンペーンの一つです。
コーディング推薦用の課題にHTML・CSS・JavaScriptで回答していただき、弊社のHTMLファイ部のメンバーが「キュン」としたコードを書いた方を全力で推薦します!就活よりも卒業制作よりもコーディングを頑張ってしまった学生さん、履歴書よりもHTMLを書いていたい求職中のコーダーさんにぜひオススメしたいキャンペーンです!!

課題

以下の原稿をあなたらしくマークアップ・装飾してください!

HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

  • 写真袋」というiPhoneアプリのランディングページを想定しています
  • 検証環境はGoogle Chromeの最新版です
  • 画像の使用は自由です
  • 内容が伝われば、原稿の内容を多少イジっても構いません

素材

写真袋のマスコット「むらかみさん(クマ)」のウェブフォントが公開されています。自由に使ってください!

HTMLファイ部 コーディング推薦 フォント素材 - jsdo.it - share JavaScript, HTML5 and CSS

参加方法

jsdo.itでアカウントを作成し、課題のコードを「フォーク」して参加してください。
(フォークとは、元のコードを改変してあなたなりの作品を作ることです。)
作品が投稿されると自動的にエントリーとなります。

結果発表

投稿されたコードはファイ部のメンバーが随時チェックしていきます。
メンバーが「キュン」としたコードの制作者にはjsdo.itのマイページからご連絡いたします。

締切は3/31です。

ファイ部の @calmbooks が挑戦してみました

好きなタグは「em」、好きな女性は「PSDがキレイな人」だそうです。

回答サンプル forked: HTMLファイ部 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

意外と知らない?アイコンはWebフォントでつくるとこんなに便利!

$
0
0

Webフォントでアイコンをつくろう!

ゆとりジェネレーションのほんだです。

最近、Webフォントを使用する仕事に多く携わった関係で、
Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。

ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。
(以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。)

jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS

 

アイコンを作成するだけだと、あまり新鮮さはありませんが、
CSS3時代のいま、これはとっても有効なマークアップ方法となっています。

詳しくは、つづきからどうぞ!

色をつける

フォントなのでCSS「color:」で指定するだけで色をつけられます。
もちろんマウスオーバー時に色を変更するのも、CSSでちょちょいと指定するだけです。

色をつける forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS

 

画像なら複数ファイル用意する必要があるところですが、
フォントで作成しておけば色変更もとても簡単にできます。

フォトショでカラーオーバーレイをつける100倍簡単ですね。

CSS3を使えば、マウスオーバー時にむわっと色変化させたり、
アニメーションで7色に変化させる、なんてことまでできちゃいます。

大きくてもきれい

フォントはベクターファイルなので、大きくしてもきれいです。

大きくしてもきれい forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS

 

後述もしますが、WebフォントはSVGの対応していないIE6〜8でも使えるという利点を持っています。

CSS3を駆使して色々な装飾を

CSS3の使用を前提としたサイトであれば以下のような装飾もできます。

CSS3を駆使して色々な装飾を forked: jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS

 

画像は使用せず、フォントとCSSだけで実現しています。

CSSだけでここまで装飾できるのであれば、
デザイナーとしても取り入れやすいのではないでしょうか。

自分のオリジナルイラストで!

以上まではjsdo.itのシンボルフォントを用いてデモをしましたが、
自分の作成したイラストもフォント化できます!(イラレでつくりました。

Webフォントイラストでつくる色々スタイリング (サル全部フォント) - jsdo.it - share JavaScript, HTML5 and CSS

 

実例☆

先週、弊社運営のjsdo.itが新機能リリースしました。(開発コードネーム「Mountain jsdo.it」)
投稿されたコードをカテゴリ分けするプライマリータグ機能です。

プライマリータグを表示しているボタンには
Webフォントで作成されたアイコンが使用されています。

検索機能もハイスペックになったので、是非使ってみてください!・u・

Webフォントでアイコンをつくる利点

Webフォントでアイコンをつくることの利点をまとめてみました。

CSSだけで色変更可能

色を修正をしたいときや、transitionでむわっと変化させたいときに便利です。

CSS3を使うとさらに色々

CSS3を使用できるならさらに応用の幅が広がります。
「虹色に着色してグラデーションを動かす」、「マウスオーバーで徐々にぼかす」などの画像ではできない演出も可能になります。

過去のIEにも対応(SVGはIE9以上

なんと驚き、WebフォントはIE4から対応しているそうです。

画像より軽い(ことが多い

使用の場面にもよりますが、画像より軽いことが多いです。
大きく使う場合はフォントのほうがだいたい軽いです。

複数に使うとリクエストを減らせる

フォントは1ファイルにまとめられるので、本来は複数画像を用意する所に使用すると、
サーバへのリクエストが減り、より早くWebページを表示できるようになります。

マット色を気にする必要がない

ベクターファイルなので、GIF画像やpng8画像を書き出す際のマット色を気にしなくて済みます。

Webフォントでアイコンをつくる欠点

単色のみ

お察しのとおり、写真のように色が複数になる画像はフォント化できません。
基本的にはベタぬりだけです。

HTMLの文書構造がおかしくなる

ビジュアルのためにテキストを入れるので、HTMLの構造的には適切でないものになってしまいます。
(IE8から対応の疑似クラス「:after」「:before」を使用すれば回避できます。)

ロード時にタイムラグがあることが

読み込んだ部分から表示される画像とはことなり、
Webフォントはフォントファイルが読み込み完了してから表示されます。

環境ごとにファイル形式が違う(woff, ttf, eot, otf, svg)

ブラウザやデバイスの環境によって、Webフォントのファイル形式が異なります。
多くの環境で対応させるには少し面倒です。(ファイル形式の変換ツールは後述で紹介します。)

参考サイト・ツール

Webフォントの使い方

Webフォントを使う際の最新記述方法 - フォントブログ

Webフォントの指定方法の参考になります。

フォント作成ソフト

OTEdit

30日間無料で使用できるフォント作成ソフトです。

個人的にはとても使いやすかったので、正規版を購入しようかなぁと思っています。

画像はMac版ですが、Windows版もあるようです。

フォント形式変換

WOFFコンバータ

otfやttfから、woffやeotを生成できます。
画像はMac版ですが、Windows版もあるようです。

FreeFontConverter

上記のWOFFコンバータと併用すれば、Webフォントに必要な全形式が揃うと思います。

フォントでつくったアイコンでエフェクト

Creative CSS3 Animation Menus

CSS3でつくったアニメーションエフェクトが紹介されているページ。
アイコンにWebフォントを使用しているようです。

アイコンWebフォント提供サイト

Web Icon Fonts

アイコンWebフォントを提供しているサイトです。

コーディング推薦はじめました!

最後に宣伝!

HTMLに恋したい!「コーディング推薦」はじめました!

コーディング推薦は弊社HTMLファイ部が行っているKAYACの採用キャンペーンの一つです!
jsdo.itに掲載された課題をForkしていただき、HTMLファイ部のメンバーを「キュン」とさせるコーディングをしてくれた方を採用チームに全力で推薦します!!

愉快軽快なメンバーがあなたのForkをお待ちしています!!

HTMLファイ部のTwitterもヨロシク!)

Facebook新タイムラインを使って、エイプリルフールのネタページを作ってみた!

$
0
0

タイムラインが変わった!

先日、すべてのFacebookページが新タイムラインに変わりました!
見た目の変化もさることながら、投稿の機能としては、個人ページなら「ライフイベント」、
ページなら「大事な出来事」として過去の出来事を投稿できるようになります。
また普通の投稿でも、日付を変更できるなど、過去にさかのぼりやすくなります。

エイプリルフールに新タイムラインを使いました!

そこで、今年のエイプリルフールは、Facebookの新タイムラインを使ってページをつくろう!ということで、
「もし幕末にFacebookがあったら?」というテーマで、武士の日常を作ってみました。

渾身の新タイムライン、是非ご覧ください!

幕末武士卯月一之介のFacebookページhttps://www.facebook.com/ichinosuke.uduki

過去への投稿方法

投稿・写真は「時計マーク」を押すと、日付が指定できます。

1.png

「大事な出来事」は西暦1000年から投稿できます。

Clipboard03.png
 

気を付けたいポイントとして、投稿&写真については1905年からでしか投稿できません。

2.png
 

また、誕生・設立などのイベントを設定して投稿をしていると、それ以前の年での大事な出来事の投稿はできなくなります。

3.png
 

それでは、みなさま、Facebookの新タイムライン生活をお楽しみください!

2012年のエイプリルフール

2011年のエイプリルフール

おーい、100KBの宇宙を泳いでみないか?

$
0
0

 

こんにちは!カヤック閃光部の來島です。
カヤックでは現在「100KB採用」とうたい、
Flasherを募集しています。
どしどしエントリーしてください!
 
「いや、ここ、デザイナーズブログだし、
 なんでFlasherの募集の告知なんてすんの?」
 
と、思いのみなさん、ちがうんです!
Flashやアニメーションをつくったことのある
デザイナーさんも探しているので、
つくったことあれば、ぜひエントリーしてください。
 
以下、「100KB採用」の全文を転載します。
 
 

「100KB採用」FlashLite1.1クリエイター募集。

「動く履歴書」を見せてください。
 
100KB以下の世界で、
工夫をこらして生きるクリエイターは、
未来でも生きていける。
カヤック閃光部は、そう思っています。
 
5年以上も前から、
過去の技術と言われていたFlashLite1.1ですが、
ソーシャルゲームブームが続く昨今、
その技術は、まだまだ必要とされています。
 
さまざまな制限の中で試行錯誤しつつ、
サクサク動くアニメーションをつくる技術と、
ユーザーを楽しませる効果的な演出。
これは、すべての日本人が
スマートフォンを持ったとしても、役に立つ。
 
そのことを信じているカヤック閃光部は、
FlashLite1.1クリエイターを募集します。
 
携帯Flashコンテンツや、Flashアニメーションを
つくったことのある方、カヤックで働きませんか。
 
閃光部の「閃」は、ひらめくという漢字です。
カヤックのFlasherは、Flashやアプリを
ただつくるのではなく、企画から考えます。
 

カヤックのソーシャルゲーム

 
カヤックがつくっているゲームは、こちらからご覧ください。
 
チームワークを大切にしているソーシャルゲームチームで、
チームワークを体験できるゲームをつくりましょう。
 
あなたがつくった100KB以内のswfファイルを
見せてください。(gifアニメでも可)
 
採用に関する疑問点がありましたら、
こちらから、ご遠慮なくお問い合わせください。
 
長くなってすみません!
以上、鎌倉のよく行くお店のガパオの味を
家で再現するのにハマっている來島でした。

コーディングコンテストに集まったTODOアプリが「本気出しすぎ」と話題に

$
0
0

jsdo.itでコーディングコンテスト「Web Creator's Contest Q」が開催中です。

現在募集中のテーマは「ブラウザで動くTODOアプリ」。
お手本コードをフォークして書き始めてもいいし、ゼロから書いても参加してもOKなコンテストです。
締切は今週の水曜日、3月28日です。

1位「MacBook Air」、2位「Apple TV」、3位「Web Money 5000円分」と賞品も超豪華なのでぜひぜひご参加ください!

と、いつものテンプレPR文はここまでにして、続々と集まっている投稿作品の一部をご紹介したいと思います。今回も皆さんかなり、本気出し過ぎですね…!

萌えキャラ+対話型のUI

toDoll - jsdo.it - share JavaScript, HTML5 and CSS

「もうちょっと離れてくれる?」

ということなので、離れましょう。→ フルスクリーン

タスクを消化すると気持ちいい演出

forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS

超かわいくて、Chrome用の拡張機能にも!

forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS

Siriちゃんハァハァ

forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS

アニメーションが気持ちいいTODOアプリ

forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS

音声で入力

todo.it / forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS


vol.1「TODOアプリ」はまだまだ募集中!木曜日からはvol.2も始まりますよ!チャレンジお待ちしています!

面白いだけじゃない!カヤック内定者が考えたポートフォリオ 5つの理論!

$
0
0

理論的にポートフォリオを作ろう!

はじめまして。
4月から面白法人カヤックで働くことになりました、デザイナー内定者のツカダです。

ハットリさんのポートフォリオ記事
カヤック内定者が本気で作った!面接に効く「おいしいポートフォリオ
に引き続き、実際にカヤックに送ったポートフォリオについて、
僕のポートフォリオを例に、そのポイントを紹介したいと思います!
ところでハットリさんの記事500近くもはてブついてるんですけど...。なんというプレッシャー。

今回はポイントごとの特徴から、

  1. 方針
  2. 形態
  3. 内容
  4. 遊び
  5. 話題

の5+αのポイントで見ていきたいと思います!
ポートフォリオは作品集で間違いありません。
ですが、就活用の用途といえば自分のアピールです。
その辺りを考慮し、理論的に考えていきたいと思います。

ちなみに僕はこんなポートフォリオを送りました。

portfolio_t001.jpg

バッラバラ。ちなみにコレ本当は全部で11冊あります。
なぜこの形に落ち着いたのか。5つのポイントで伝わるとありがたいです。

それでは続きからどうぞ!

1.方針-Concept

内容=自分自身

portfolio_t002.jpg

ポートフォリオというのは制作物を見せると同時に、
「自分がどういった人間なのか」を見せるものでもあります。
もちろん、作品からそれが読み取れるというのはありますが、
テーマを決めてポートフォリオを作ることでもっと明確にすることが出来ます。

僕の場合は、「ambiguous/多義的な」をテーマに、
イラスト、デザイン、映像、webなど、
自分が「マルチプレイヤー」であるということを見せる方向で決めました。

最初にポートフォリオ全体の方針が明確になっていると、
のちのちまとめやすくていいと思います。

2.形態-Shape

見やすい形と見られやすい形

次は、ポートフォリオの形を考えましょう。

portfolio_t003.jpg

作品をリスト化し、どの作品を載せるのか決まったところで、
恐らくポートフォリオの大きさなどを考えると思いますが、
この時に考えるべきは、

  • どのような状況で見られるか(見やすい形)
  • どのような形が合っているか(見られやすい形)

の2つだと思います。
どのような形が合っているか、については人によって変わってくるので、
ここではもうひとつの方を考えてみたいと思います。

どのような状況で見られるか(見やすい形)

ポートフォリオは恐らく複数人に見られると思います。
それは、提出後だったり、集団面接であったり。会社の方全員かもしれません。
その時に見やすいというのは重要です。

portfolio_t004.jpg

大きければ複数人で見るときに楽かもしれません。
蛇腹状ならもっと広げられるかもしれません。
分割してもいいでしょう。
メイン一つと複数の小さい冊子でもいいかもしれません。
ファイリングするのか、手製本にするのかなども重要でしょう。
多くの人の目に止まりやすい奇を衒った形でもアリです。

何が言いたいかというと、見てくれる人のことを考えて作るということです。
会社の人はどういうものに興味を示すか、見やすいと思うか。
相手の事を考えると、自然と自分の中でも納得する選択肢に絞られていきませんか?

それでも複数の選択肢が残ると思いますが、
この時に最初の方針が指針となります。
僕の場合「マルチプレイヤー」であることを示すために、
それぞれの作品を一冊の冊子として独立させるように決めました。
一度A3縦サイズの大きさでつくってみたこともありますが、
やはり色々な種類の制作が混じっていて分かりにくかったので、 A4横サイズで作り直しました。

+αで応用を

色々なシチュエーションを考えるという意味ではもう少し工夫もできます。
今回僕はポートフォリオを作り直すときに横位置に直したんですが、
横位置にしたのは、一度作ってみたら横長の画像が多かったから、ということもありますが、
もう一つは横長の画面上で見たときに見やすいからです。
実は、冊子を作るのと同時に、PDFでweb上から落とせるようにしていました。

portfolio_t005.jpg

多くの人の目に止まるようにという点ではweb上で公開・配布するのは重要な手段です。
モバイル端末に入れればポートフォリオが手元にないときでも見せられるので、そういう意味でもかなり有効です。
その辺りも上手く使って上手にアピールしましょう!

内容-Contents

一貫性を持たせ、目を惹き、飽きさせない

技術書などの本をよく読む方は分かるかもしれませんが、
内容を把握するためにパラパラと見ると思います。
どういう内容で、どういう雰囲気で、分かりやすいか。

ポートフォリオも同じです。 同じ流れで見ることが明確ならば、以下のようなことが導きだされます。

  • 一貫性があることで、内容を把握するコストは最小限になる
  • 目を惹くヴィジュアルがあれば、そこに興味をもつでしょう
  • ただし、同じ過ぎるのは避ける。飽きさせないテンポを心がけてコマ割りをしましょう。

portfolio_t006.jpg

文字で内容を入れるのは重要ですが、ほとんど読まれないと思ったほうがいいです。
面接時などで初めてポートフォリオを見る方がほとんどなので、
詳しい話は自分で直接話せるようになっていれば十分だと思います。
それよりも制作物を魅力的に見せるヴィジュアルに力を入れましょう!
プラスで素敵なキャッチコピーや見出しがあれば完璧です。

portfolio_t007.jpg

その際に、出来れば自分で簡易撮影スタジオを作りきちんとしたカメラで撮影することをおすすめします。
(このぐらいアナログなスタジオでも撮り方次第で上手く撮れます!)
また、手製本にする際には、印刷が映える紙選びなどもきちんとするといいと思います。
(僕は染色インクのインクジェットプリンタでFKスラットR・IJの紙に両面印刷していました)
その辺りは個人のこだわりの部分になりますが、綺麗に見せるこだわりはできるだけしたいですね。

もうひとつ

よく勘違いしてる人がいるのですが、
ポートフォリオに載せる作品をその会社の事業に関係のある制作物のみにする必要は無いと思います。
自信のある作品を関係ないからといって外すのは非常にもったいないです。
そのくらいならば、
自分の作品のポートフォリオ+会社用に合わせたポートフォリオの2つにしたほうがいいでしょう。
企業はあくまでも人を見ています。自分がいいと思うものは恐れずガンガン入れましょう!

遊び-Play

楽しませる仕掛け

portfolio_t008.jpg

内容が大体出来てきたら、アクセントに遊びを仕込みましょう!
ちょっとしたアイコンを仕込むだけでも印象はかなり変わりますし、
それで内容を分かりやすくしたり、自分への特徴付けも出来ます。
ハットリさんも「ジグソーパズル」使ってましたね!

portfolio_t009.jpg

他にも、オイルペーパーやトレーシングペーパーを使った仕掛けを仕込んだりして、
冊子に変化をつけたりしてました。ポップアップや仕掛けを仕込むのもいいと思います!

話題-Topics

会話をすることを前提に

個人的に面接まで進むのがポートフォリオの難しいところだと思っています。
面接まで進んでしまえば、後は自分で制作について語ることができるので。
その際、出来れば相手との会話が弾むような制作があるといいでしょう!
例えば僕は友達の出産祝いにプレゼントした絵本の話や、
大学でイラストレーションコース専攻なのにActionScriptやPythonを独学で勉強してること、
大学2年、3年でWeb系企業にインターンに行っていた話など、 を用意していました。
制作と結び付けたられたエピソードを用意してると、いざという時に役に立つでしょう!

+α

最後に、プラスで気をつけたいのは物量です。
ボリュームはあればあるほどいいと思います (見にくくない範囲でですが)。
今回僕は20〜40ページの手製本のA4冊子を11冊持って行きましたが、
近くの人は大体既製のファイルに入れたA4冊子が一冊でした。
この時点で恐らく決定付けられてしまうものもあると思いますし、
自分が周りよりボリュームが多いというだけで自信も出ます。
そういう意味でA3などの大きいサイズで作る人も多いので、戦略的に行きたいですね。

まとめ

以上、ポートフォリオの5つ+αでした。
ポートフォリオの作り方は最初悩むかもしれませんが、
作品同様作ってみれば分かってくることも多いと思います。
あまり時間をかけすぎずに、どんどん作ってみると見えてくるものもあると思います。
(ちなみにこの11冊のポートフォリオは1週間でA3サイズから作り直しました)

いかがでしたでしょうか。
当てはまらない部分も多いかもしれませんが、参考にしていただけると幸いです!

 

つくることに打ち込んでいた方!エントリーお待ちしています!

就職活動より卒業制作を頑張ったあなたを採用します。『卒制採用2012』

 

ちなみにカヤックでは動く履歴書も募集しています!

「100KB採用」FlashLite1.1クリエイター募集。

これはすごい!新型iPadには隠しアプリがあった!(動画あり) #エイプリルフール

$
0
0

すごい動画を発見!

みなさん、まずはこの動画を見てください。

なんと新型iPadには、裏アプリが隠されていたのです。
 

(日本語で解説)

コナミコマンドで、隠しアプリが出現!?

スペイン出身のダニエルさんは、社内でも有名なiPad信者。
そんな彼が、ある日大好きなiPadを愛でていたところ、すごい発見をしました。

april_ipad_0000_01.jpg

それは、新型iPadをコナミコマンドに見立てて上下左右に振ると、
今までに見たことのないアプリのアイコンが出現したのです。

april_ipad_0001_02.jpg

仮装の衣装が現実に。「iChange」

見た目は普通のカメラアプリの「iChange」。

april_ipad_0002_03.jpg

衣装を選んでカメラを撮ると、なんと現実に着せ替えができるのです!

april_ipad_0003_04.jpg

もちろん、着せるだけでなく、脱がすにも対応。
※よい子の大人の皆さんはくれぐれも捕まらないように。

料理ができる!? そう、新iPadならね。

Mac Book Airを中華包丁にする」なんて記事もありましたが、
このアプリを起動すれば、あっという間にiPadがコンロに早変わり。

april_ipad_0005_06.jpg

出来上がった鍋に大満足のダニエルさん。鍋パーティーにはiPad。新時代の幕開けですね。

april_ipad_0006_07.jpg

矢追さんもびっくりの「Find my UFO」

ゆとり世代の方々には矢追さんはわからないかもしれませんが(Wikipedia:矢追純一)、
最後に紹介されるのは、なんとも怪しいアプリ「Find my UFO」。

その名の通り、自分の近くにいるUFOを見つけてくれるアプリです。

april_ipad_0007_08.jpg

起動すると早速近くにUFOのアイコンが!

april_ipad_0008_09.jpg

ダニエルさんはその後どこへ行ったのでしょう。心配ですね。
でもiPadを持っていれば、追跡できるので安心ですね。

これからも、よろしくおねがいします!

さて、2012年のKAYAC Designer's Blogによるエイプリルフール記事はいかがだったでしょうか?
今後も、デザイナーのみなさんにちょっと役立つ記事を書いていきますので、
どうぞよろしくお願いします!
 
※この記事はエイプリルフール用に書かれたジョーク記事です。実際のiPadの機能とは一切関係ありません。
 

またカヤックでは、面白いエイプリルフール企画にノリノリで参加してくれる演技派のデザイナーを募集しています。april.png

 

2012年のエイプリルフール

2011年のエイプリルフール

HTML5関連の情報源のまとめ(2012年4月版)

$
0
0

こんにちわ。HTMLファイ部のふちがみです。

HTML5のすごいコンテンツやニュースをキャッチアップしきれない!知らないところでバズってる!と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。

HTML5関連の情報源のまとめ(2012年4月版)

ソーシャルブックマーク

コミュニティー

ニュースサイト

ゲーム・ガジェット系

ギャラリーサイト

ショウケース

イベント情報

資料

有名クリエイターのポートフォリオ


HTML5コンテスト開催中!

最後にPRです。弊社が運営するHTML5, CSS, JavaScriptのソーシャルコーディングサービス jsdo.it でコーディングコンテストを開催中です。

どんなコンテスト?

世界のFlash図鑑 wonderfl に投稿された以下の二つのFlash作品をHTML5, CSS, JavaScriptを駆使してリメイクしてください。

Web Creator's Contest Q - vol.2

Flashの作品をHTML5でリメイクをするコンテストです。課題のコードはイベントページをご覧ください!

賞品はあるの?

jsdo.it史上、一番豪華な賞品を用意しました!3D BRABIA 40インチやPlaystation VITAなどなど!

こんなコードがコンテストに投稿されています

散り舞うSAKURA - jsdo.it - share JavaScript, HTML5 and CSS

皆様のご参加お待ちしています!

banner1_4.jpg

HTML5花見の会場はこちらになります

$
0
0

コーディングコンテスト "Q" vol.2を開催中です!

jsdo.itで開催中のイベント「Web Creator's Contest "Q"」で「桜」を募集したところたくさんの投稿が集まっています。まだ募集期間中ですが、花見シーズンが終わる前に投稿作品の一部を紹介したいと思います!

Flashの名作をHTML5でリメイクしてください

このFlashで作られた作品をHTML5でリメイクするのが今回の課題です。

SAKURA - wonderfl build flash online

投稿作品の一部を紹介!

PLAYをクリックすると実行できます。STOPすると制作者のコメントとコードを閲覧する事が出来ます。

散り舞うSAKURA - jsdo.it - share JavaScript, HTML5 and CSS

奥行きのあるSAKURA - jsdo.it - share JavaScript, HTML5 and CSS

桜の四季 - jsdo.it - share JavaScript, HTML5 and CSS

Chrome推奨

さくらをフォントで表現してみた。 - jsdo.it - share JavaScript, HTML5 and CSS

水面へ落ちる桜 - jsdo.it - share JavaScript, HTML5 and CSS

クリックでつむじ風

桜の絨毯とつむじ風 - jsdo.it - share JavaScript, HTML5 and CSS

曲率さくら - jsdo.it - share JavaScript, HTML5 and CSS

【桜姫】〜 SAKURA HIME 〜 - jsdo.it - share JavaScript, HTML5 and CSS

桜前線 on Google Map - jsdo.it - share JavaScript, HTML5 and CSS

SAKURAは逃げだした! - jsdo.it - share JavaScript, HTML5 and CSS


「Flashの名作をHTML5でリメイクしてください」の募集は 4/18(木)まで!

桜以外にも、サウンドビジュアライザーでチャレンジできる部門もあります。賞品は3D BRAVIAなど超豪華!ぜひぜひご参加ください!


vol.3「ハマるブラウザゲームを作ってください」も同時に開催中です!

今度のお題はゲーム!話題のenchant.jsを使ってもいいですし、なんでもありのアイデア勝負コンテストです。こちらもぜひご参加ください!

Viewing all 239 articles
Browse latest View live




Latest Images