Are you the publisher? Claim or contact us about this channel


Embed this content in your HTML

Search

Report adult content:

click to rate:

Account: (login)

More Channels


Showcase


Channel Catalog


Articles on this Page

(showing articles 161 to 180 of 239)
(showing articles 161 to 180 of 239)

older | 1 | .... | 7 | 8 | (Page 9) | 10 | 11 | 12 | newer

    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特有の要素を活かした、おもしろいものばかりでわくわくします!
     
    またビジュアル的にもきれいで、どの国の人が見ても気持ちがいい、理解しやすい動きや構成になっています。
    はじめから世界を意識して作っているのかもしれませんね。
     
    日本国内ももちろんですが、毎年開かれるこういった大きい賞をチェックするだけでも、ぐっと世界に近づいたデザインができるかもしれませんね!

    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ページを御覧ください!


    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マガジンに関しては
    昨年のデザイナーズブログのこの記事がオススメです。

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



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

    カヤック問い合わせ


    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とほぼ同じ感じで表示されるのが分かるかと思います。
    もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。


    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日まで募集しているのでぜひご参加ください!

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


    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


    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

     

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


    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
    ガッツがあればなんでもできる!

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

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

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

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

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

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

     

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

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

     

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


    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


    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もヨロシク!)


    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年のエイプリルフール


    0 0

     

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

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

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

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

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

    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も始まりますよ!チャレンジお待ちしています!


    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クリエイター募集。


    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年のエイプリルフール


    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


    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を使ってもいいですし、なんでもありのアイデア勝負コンテストです。こちらもぜひご参加ください!


older | 1 | .... | 7 | 8 | (Page 9) | 10 | 11 | 12 | newer