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


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

    0 0

    HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート!

    HTMLファイ部ほんだです。

    カヤックの新規開発事業部「ブッコミジャパン」が、
    HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました!

    jsdo.it(弊社運営のHTML5コード共有サイト)からHTML5ゲームを簡単に投稿でき、
    他のクリエイターによって投稿されたゲームを無料で遊べます!

    また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる
    JavaScriptライブラリ「jsdoitController.js」もリリースしました。

    今回は「jsdoitController.js」で使えるようになる
    jsdo.it WebSocket Controller」(以下:jsdo.it コントローラー)の
    仕組みについてお話ししたいと思います!

    まずはUFOを操ってみてください!

    「jsdo.it WebSocket Controller」のページでは、jsdo.it コントローラーでUFOを操るデモを体験できます。
    お手持ちのスマートフォンで、ページ右のQRコードを読み取ってください。
    (対応環境が限られているのでご確認のうえ、ご利用下さい。)

    スマートフォンのブラウザでURLにアクセスすると、コントローラーが表示されます。
    WebSocket通信の確立まで数秒お待ちいただくと、コントローラーでPC画面のUFOを動かせるようになります。

    カミナリを出したり、Bダッシュも!

    スマホコントローラーの仕組み

    jsdo.it コントローラーは、PCブラウザ側とスマートフォンブラウザ側を
    サーバを介してリアルタイムに通信させることで実現しています。

    リアルタイム通信にはHTML5関連技術の「WebSocket」とJavaScriptを用いました。

    WebSocketは、ソケットサーバにデータを送信すると、
    サーバがデータを受け取り、WebSocket通信を確立しているクライアントにデータを送信する、という仕組みです。

    WebSocketではこんなJavaScriptを使いました。

    WebSocket通信を行うため、クライアント側(PC、スマートフォン)では以下のようなJavaScriptを使いました。

    var webSocket = new WebSocket( /* WebSocket通信を行うためのアドレス */ );
    

    WebSocketオブジェクトを作成し、接続をリクエストするための処理です。
    jsdo.it コントローラーでは、PC側とスマートフォン側の両方に記述しています。

    WebSocket通信の確立が成功すると、WebSocket独自のJavaScriptイベントが発生するようになります。

    webSocket.send( /* 送信するデータ */ );
    

    サーバにデータ送信する際は上記のようにします。
    jsdo.it コントローラーでは、スマートフォン側から「Aボタンが押された」「スティックが90°傾いた」
    といった情報を送っています。

    webSocket.addEventListener("message", function(event) {
    
        /* メッセージを受け取った時の処理 */
    
        var socketData = event.data; /* 受信したデータ */
    
    }, false);
    

    サーバからメッセージを受信したときの処理は上記のように記述します。
    jsdo.it コントローラーでは、スマートフォン側から送られてきた情報をPC側が受け取り、
    「UFOを動かす」「カミナリを発射する」といった処理に変換しています。

    サーバサイド側の実装が必要!

    WebSocket通信を実現するにはクライアント側だけではなく、サーバサイド側の実装が必要です。
    (今回の制作では僕と同じ新規開発チームの @acidlemon が実装しました。)

    jsdo.it WebSocket Controller」は僕のようにサーバサイド属性のないマークアップエンジニアでも
    リアルタイム通信を使ったJavaScriptを楽しめる、夢のようなコントローラーなんです!

    本気でWebSocket通信を使いたい方へ

    この記事ではWebSocketの仕組み部分のみをざっくりと解説しています。
    本気でWebSocket通信を使ってサイトをつくりたい!という方には以下のリンクがおすすめです!

    おまけ、コントローラーのスティック部分

    スマートフォン側のコントローラーもJavaScriptで実現しています。

    jsdo.it WebSocket Controller のスティック部分 - jsdo.it

    スティック部分のみを抜きだしてデモをつくってみました。
    (「Play」ボタンからデモ再生後、「Stop」ボタンでコードを閲覧できます。)

    • スマホでもきれいにアニメーションするように「transform」や「transition」を使用
    • 指を話したら中央に戻る
    • スティックの傾きの角度を算出

    などの面白い処理を書いているので、よかったら参考にしてください!

    「jsdo.it HTML5-Games」への投稿お待ちしています!

    jsdo.it HTML5-Games」はjsdo.itのアカウントさえあれば誰でも簡単に投稿できます!

    コード閲覧画面の「Post to jsdo.it games」ボタンをクリックすると、
    投稿用フォームが現れます。

    投稿お待ちしています!

    最後に宣伝!

    いまなら賞品ゲットのチャンス!

    Webクリエイターのためのコーディングコンテスト"Q"第3回を開催中です!

    第3回のテーマはブラウザゲーム!
    豪華賞品もあるので是非チャレンジしてみてくださいね!!!

    「HTMLファイ部」の採用説明会を行います!

    カヤックでは、フロントエンドエンジニア、マークアップエンジニアを大募集中!
    HTMLファイ部の説明会を行う予定なので、気になる方はぜひ応募してみてください!


    0 0

    はじめまして。

    まだカヤックでは新顔ですが、意匠部最年長!?の山下です。
     
    「つくるための三種の神器」
    というテーマということで、
     
    僕の方からは、つくる(デザインする)ときにとても意識して参考にしているものを
    三つのメディア別にご紹介したいと思います。

     

    雑誌部門

    archives

    海外の広告を紹介する雑誌です
    ウィットの富んだ表現が豊富に紹介されています。
    http://www.luerzersarchive.net/

     

    Colors Magazine

    相変わらず尖りまくっています。
    BENETTONが発行するMagazine
    http://www.colorsmagazine.com/

     

    ハナツバキ

    SHISEIDOさんから
    なんと、75年の歴史です。
    アプリもあります。
    http://group.shiseido.co.jp/hanatsubaki/

     

    MONOCLE

    UK発のハイセンスなデザイン雑誌です。
    http://www.monocle.com/

     

    d design travel

    前勤めていてとてもお世話になったD&DEPARTMENTから。
    デザインの視点で旅する雑誌。
    47都道府県中、7府県発売中。
    http://www.d-department.jp

     
     

    映像・インタラクティブ

     

    LOGAN

    Apple の iPodのCM制作会社
    このCMは、一番好きです。音楽と映像のプロダクトの三位一体…。
    いつみても素晴らしい作品です。
    http://logan.tv/
     
     

    United Visual Artists

    UK アーティスト集団
    インスタレーションやミュージックビデオなど、ロンドンならではの、
    尖りまくった作品がとても素敵です。
    http://www.uva.co.uk/
     
     

    Motion Theory

    派手な演出が素敵です。
    本当素晴らしい合成テクニックとクリエイティブに毎度圧巻です。
    http://www.motiontheory.com/
     
     

    New Industry Arts

    多くの有名ディレクターを抱えています。
    映像だけではなく、
    PHOTOGRAPHY, VIDEO, FASHION, INDUSTRY & CREATIVE
    の分野で活躍しているクリエイターの作品が閲覧できます。
    http://newindustryarts.com/
     
     

    Drawing and Manual

    そして、前の会社で大変お世話になった菱川勢一さんの事務所
    http://www.drawingandmanual.jp
     
     
     

    WEB・アプリ部門

     

    Apple

    現在のWEBサイトの完成系!?
    すいません…特筆すべきことはありませんが、クリエイティブやっていればやっぱり意識しますよね。
    プロダクトから、コンテンツまでありとあらゆる部分で参考にしています。
    http://www.apple.com/
     
     

    cannes lions

    WEBサイトとしては特に仕掛けられていません。
    単純にコンテンツの充実度でWEB部門に選んでしまいました。
    http://www.canneslions.com/
     
     

    LOUIS VUITTON -JORNEYS AWARDS-

    何のしかけもありません。
    色と余白とコンテンツのクオリティだけです。
     
     

    Flipboard

    しょうもない記事もなんか格好よく読めてしまう…
    本当にこのアプリは「読む」を楽しくしたアプリだと思います。
    UI/UX、写真や文字のレイアウトの参考に
    http://flipboard.com/
     
     
     

    Our Choice

    インタラクティブ読み物としての完成度は本当高いです。
    また、コンテンツ内容についても「Global Warning」という視点で分かりやすく表現されています。
    http://pushpoppress.com/ourchoice/
     
     

    面白法人カヤック

    いつでも、WEB業界に旋風を巻き起こす我がカヤックサイト
    そろそろ、とんでもなく新しいものへ生まれ変わる準備がはじまると思います。
    シンプルなデザインの中に組み込まれた最先端のテクノロジーは必見です。
    http://kayac.com
     

    その他にもfacebook、pinterestなど、今をときめくSNSサービスのサイトは参考にしています。
    WEBサイトについてはまだまだ、伸びしろがあるのかと思っています。
    HTML5 がメインストリームになりつつありますので、そこを如何にうまく表現していくか、あるいは自分たちで開発できたらと思います。
     
     
    と、締まった!?ところで…
    日頃から、トップクリエイティブというものに触れる事はいいデザインをアウトプットする最良の方法だと思っています。
    自分の目指す、神のリファレンスを今一度整理してみるといーかもしれません。
     

    May The Good Designing Be With You


    0 0

    jsdo.itで書いたコードをブログに埋め込んで紹介することができます。

    使い方

    jsdo.it 新ウィジェット

    1. 紹介したいコードのページで、「ブログに埋め込む」ボタンをクリックします
    2. 必要があれば、最初に見せたいパネルとウィジェットのサイズを指定します
    3. 埋め込みタグをコピーして表示したい場所に貼付けます

    Sample

    新機能

    最初に見せるタブ・ウィジェットのサイズを設定できるようになりました

    これまでは一番行数の多いコードのタブを表示していましたが、見せたいタブを選べるようになったので記事の中で紹介しやすくなりました。

    画面いっぱいに表示できるようになりました

    右上の最大化ボタンをクリックすると新しいタブでウィジェットを大きく表示できます。コードをじっくり読みたいときや、大きな画面でプレビューしたいときに便利です。

    シェアしやすくなりました

    Readmeのタブにシェアボタンを追加しています。


    お知らせ!Retinaディスプレイモデルの MacBook Proがもらえるコーディングコンテストが始まりました!

    今回のお題はスマートフォンのゲームの演出です!ミニゲームが始まる導入部分のアニメーションを、JavaScriptやCSSのアニメーションなどで作るコンテストになっています。

    賞品はMacBook ProのRetinaディスプレイモデル他、超豪華です!ぜひぜひご参加ください!


    0 0

    777ブログウェイ始まりましたー!

    この記事は面白法人カヤックの七夕のイベント「777」に向けたリレーブログです。

    技術系のアドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、
    4つの職能ブログ ( エンジニアデザイナーフロントエンドエンジニアディレクター ) を横断し、更新します。

    テーマは「つくるための三種の神器」。

    カヤック有志による、それぞれの切り口で記事を投稿していきます。
    では期間中、どうぞお楽しみにください。

    * アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは

    私の厳選定番ソフト3つ!

    というわけでトップバッターとなりますが、新しいPCを買った時に最初に入れる3つのソフトをご紹介します。

    私は手に入れやすい定番ソフトが好きなので、超基本的なものをご紹介します。
    ハイブロウな高機能なものや、マニアックなソフトではないので、ご了承ください。

    IrfanView

    画像ビューワ。もう10年くらい使っています。無料ですが(*)、息長くアップデートを重ねています。
    簡単なフィルタなどかけれるのはもちろん、プラグインを入れれば、
    動画や音声など様々なファイルが見ることができます。
    もちろん日本語版もあります。
    *商用は有料です。個人からの寄付も受け付けていますよ!

    Clipboard01.png

    Wikipedia:IrfanView

    EmEditor

    ずっと「いーえむえでぃた」と読むと思っていたのですが、正式名は「エムエディタ」だと知りました。
    定番のテキストエディタツールです。年々高機能になっていますが、購入後は常に無料でアップデートができます。
    90日間のフリー版もあります。

     
    emeditor.png

    Wikipedia:EmEditor

    Foxit J-Reader

    高速起動PDFビューワ。
    なんかもう最初にこのPDFビューワが入ってないと、落ち着かないくらい軽くてびっくりするソフトです。

    Clipboard05.png

    Wikipedia:Foxit Reader

    最後に

    というわけで、必ず最初に入れるソフト3つでした。

    次にやるのは、デスクトップの整理です。
    スタイルをクラシックにして、デスクトップを50%グレーにしてアイコンを少なくします。

    desktop.png

    これですっきり!

    それでは、みなさんも快適なパソコンライフを!


    0 0

    この記事はカヤックの七夕のイベント「777カヤック☆フェスティバル」に向けたリレーブログです。
    今回は、いつもと趣向を変え、スペイン人デザイナーのダニエルが母国語で書きました。どうぞお楽しみください。

    3 programas para reducir el tamaño de tus png.

    Normalmente en mi trabajo diario tengo que preparar un monton de material para los programadores. Generalmente se trata de pngs transparentes que van a ser utilizados dentro de Flash, de iOS, Android o directamente web.
    Como te descuides, tu applicacion puede multiplicase en tamaño, o tu web va a  tardar infinito en cargar.
    Con tres herramientas te voy a ense;ar como reducir en algunos casos el 75% del volumen de un png y comprobar la calidad del mismo. (No queremos sacrificar la calidad de nuestro trabajo!)
     
    El proceso incluye los siguientes programas:
     
    Archivo original (567kb
     
    Empezamos exportando nuestro PNG-24 (8bits por canal, incluyendo uno para el alpha) desde Photoshop, segun mi experiencia los mejores resultados con color son los siguientes: checkea "convert to sRGB" y "Internet standard RGB (No color Management)", Metadata "none" (no queremos inflar el png con informacion que no queremos).
     
    01-photoshop-settings.png
     

    Image Alpha

     
    El objetivo de esta aplicacion es convertir un png de 24 bits en uno con una paleta de menos de 256 colores pero con un canal alpha completo para reducir el tama;o del archivo. Bien no?
    Dependiendo de nuestra imagen esto es factible o no.
     
    Dentro de la aplicacion seleccionamos el numero de colores al que vamos a reducir nuestra paleta, y el tipo de algoritmo que vamos a utilizar:
    Median cut: Normal, reduce el numero de colores basando en la media.
    NeuQuant: Funciona mejor con gradientes.
    Posterizer: Realmente reduce la intensidad de niveles en png de 24 bits no el numero total de colores.
     
    Image Alpha Settings
     
    En nuestro caso seleccionaremos "Median cut" y 128 en el numero de colores.
     
    "Save as" y seleccionamos donde queremos grabar nuestra imagen. Aqui viene un detalle importante: Activamos la casilla "optimize with ImageOptim", automaticamente, el programa abrira y grabara la imagen utilizando ImageOptim.
     

    ImageOptim

     
    Realmente aqui no tenemos que hacer nada, solo esperar que el programa ejecute las optimizaciones necesarias en el png. Si no estamos satisfechos podemos pasar los filtros otra vez pulsando "Again"
     
    ImageOptim incluye un monton de herramientas de optimizacion, si quieres saber mas sobre ellas: http://imageoptim.com/
     

    Kaleidoscope

    http://www.kaleidoscopeapp.com/

    Despues de exportarlo, me gusta comprobar que no estamos sacrificando la calidad de nuestras imagenes (o por lo menos no mucha) y para eso tenemos Kaleidoscope.
     
    Kaleidoscope es una herramienta que te permite comparar dos imagenes para ver la diferencia, si unas "Versions", programa de control de versiones, es la herramienta perfecta.
     
    03-kaleidoscope.jpg
     
    Para comprobar la diferencia de calidad, amplio a una cantidad razonable la imagen, hago un split y me muevo por zonas donde la imagen ha podido ser comprometida. Despues de eso, siempre compruebo si al 100% es perceptible esos fallos.
     

    Conclusion

    La imagen original de 567kb ha quedado reducida en 111kb, algo mas del 81% reducida!
    Imaginate la cantidad de imagenes que tienes para tu aplicacion en iOS o en esa web que usa tantos png. Puedes reducir de un 50-80% en tama;o sin reducir la calidad, y las herramientas estan en tu mano.
     

    Extra

    Si quieres reducir jpgs, echale un vistazo a jpegmini.

    最後に

    この記事は面白法人カヤックの七夕のイベント「777カヤック☆フェスティバル」に向けたリレーブログです。

    技術系のアドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、
    4つの職能ブログ ( エンジニアデザイナーフロントエンドエンジニアディレクター ) を横断し、更新します。

    テーマは「つくるための三種の神器」。

    カヤック有志による、それぞれの切り口で記事を投稿していきます。
    では期間中、どうぞお楽しみにください。

    明日は、フロントエンドエンジニアのブログになります!

    * アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは


    0 0

    はじめまして、
    今年度新卒のジョンこと、ショウダです。

    只今KAYACの自社サービス、koebuにてモリモリ制作させていただいてます!

    例えばこんな絵を書いたり、
    img_lifenet_webcreation_page_455_221.png

    こんなアプリを作ったり

    icon_atereko_512_512.png

    ページやグッズのデザイン等々させていただいてます!

    五月病脱却法について

    はい!ということで、 「五月病 脱却」で検索して来てくださった方、ごめんなさい。m(_ _)m

    今回は普通の脱却方法はお話いたしません。「新卒Webデザイナーが考える五月病脱却法」になります。

    新卒だから書けること

    今回777ブログウェイのお話をいただいて、正直何を書こうかかなり悩みました。
    なぜなら私はまだ丸裸で、皆さんに教えられるような役立つ知識が豊富ではないからです。

    悩みに悩んで「新人だし、新人ぽいことを書こうかな!」と思ったのと、
    周りの友だちが結構陥っていたこともあり、若干時期はずれていますが
    私が考える「五月病」を脱却する方法を紹介させていただこうと思います。

    私と5月病

    私は内定が決まってから入社日まで、インターンとして仕事に慣れていたこともあり、
    奇跡的に5月病にはなりませんでした(もちろん、若干の不安はありましたが)。

    ですが、大学時代の友人と話すと、やっぱり凹んでいたり、
    会社に行きたくなくなっていたりする子も結構いました。

    そもそも五月病とは?

    五月病(ごがつびょう)とは、 新人社員や大学の新入生などに見られる、新しい環境に適応できないことに起因する精神的な症状の総称である。(Wikipedia調べ)

    どうにかしてあげたい!
    だけど、なってしまったからには仕方ない!

    だから、すぐに気持ちを切り替えて楽しく働きたいですよね。

    五月病脱出のための3つのポイント

    というわけで、Webデザイナーとしての環境と、毎日を自然に楽しめる簡単な方法を考えてみました。

    とにかく純粋にクリエイティブなものに触れるべし!

    映画、漫画、展示会、LIVE、ミュージカル、とにかくなんでもたくさん行くべし!
    クリエイティブなものにと言いましたが、きっとどんなものにでもものづくりのヒントは隠されているので、
    楽しみながら、アンテナをいつも張っていることが大事なのかなと思います。

    この時に大事なのは、仕事のためだから、行かないと!と思わないこと。
    心から楽しむことが大事です。そして、実際に体を動かしてみることが気分転換の効果が高そうです。

    美術館情報を探すのにオススメ!

    art beat http://www.tokyoartbeat.com/

    artbeat.png

    最新Web業界の動向を知るなら">

    cbc net http://www.cbc-net.com/

    CBCNET.png

    こういったサイトで、情報を仕入れ、実際に見に行くのが気分転換につながると思います。

    毎日素敵なものや好きなものをストックする癖をつけるべし!

    Tumblrやピンタレスト、その他何かアプリやサービス、手帳、なんでもいいから、
    グラフィックやサイト、アイコン、イラスト、映像、印刷物、などなど、
    見て少しでも「お!」と思ったものはどこかにストックする 癖をつけるべし!

    素敵なものが沢山たまるのは気分が楽しくなりますよ!

    気に入った画像を簡単にストック!

    Pinterest http://pinterest.com/

    Pinterest - Home.png
     

    毎日作業するデスク周りは楽しくすべし!

    デザイナーたるもの常にクリエイティブな空間に身をおくべし!
    一番よく過ごす自分のデスク周りこそ自分にとって一番の空間にしておきたいですね。

    じゃあ他の人はどんなデスク周りだろう!って気になった人は以下のサイトがオススメです。

    デスク周りのシェアサイト

    他の人のデスクが見れたり、自分のデスクを公開できるサイトです。

    DESK http://desk.cmiscm.com/

    desk.png

    まとめ

    心得的な内容になってしまいましたが、私が考えた脱却方法は以上になります。

    そもそもデザイナーになったということは皆さんものづくりが好きだと思うので、
    クリエイティブなものに触れていたら勝手にワクワクしてきて五月病も吹き飛のでは?!
    というところで考えてみました。

    それでは皆さん楽しいデザインライフを!

    最後に

    この記事は面白法人カヤックの七夕のイベント「777」に向けたリレーブログです。
     
    技術系のアドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、
    4つの職能ブログ ( エンジニアデザイナーフロントエンドエンジニアディレクター ) を横断し、更新します。
     
    テーマは「つくるための三種の神器」。
    カヤック有志による、それぞれの切り口で記事を投稿していきます。
    では期間中、どうぞお楽しみにください。
     
    * アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは

    0 0

    先日、東京学生広告研究団体連盟の総会にて、
    「インターネットでつくる人を増やす」というテーマでお話させていただきました!
    その時に紹介したサービスをまとめます。

    この記事のターゲットは、インターネットでまだ作ったことがない人。
    興味があってこれから始めよう!と思っている人向けです。
    ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。

    アイデア・インスピレーションをストックしよう

    まずは、アイデアのストックやインスピレーションを高めるサービスを紹介します。

    EVERNOTE

    簡単なメモから、写真や動画まで記憶し、整理整頓ができるサービスです。

    image (11).png

    tumblr

    オンラインでできるスクラップブック。Web上の記事や画像・映像などを簡単にストックできます。
    また他のユーザーの投稿もストックできるので、面白いユーザーをフォローするのがオススメです。

    image (10).png

    Pinterest

    画像を貼りつけて共有できるサービス。綺麗な画像がぼーっと眺められていいですね。

    image (7).png

    道具を揃えよう!

    ソフトを買わなくても、オンライン上で完結できるサービスになります。

    Cacoo

    サイト制作には欠かせない、サイトマップやワイヤーフレームの制作がWeb上でできるサービスです。
    しかも、複数のユーザーと同時に編集ができるのが便利です。

    image (4).png

    aviary

    ブラウザだけで、画像・音声・HTML・動画などの制作、編集ができるサービス。

    image (3).png

    知識を得よう!

    ということで、オンライン上でプログラミングが学べるサービスを紹介します。

    ドットインストール

    初心者向けのプログラミング学習サイトです。オンライン上で3分の動画を見ながらプログラミングが学べます。

    image (1).png

    jsdo.it

    HTML5、CSS、javascriptに絞ったソーシャルコーディングサイト。ソースコードを投稿し共有することができます。
    画像を使わないボタンから、複雑な表現まで、様々なソースコードが公開されているので、
    初めての人は、どうやって作っているのか見たり、コードを実際に触ってみて、表示の変化を楽しむのがいいと思います。

    image (2).png

    github

    初心者向けというとちょっと語弊があるかもしれませんが、エンジニアを目指す人なら知っておいて損はなし。
    ソフトウェア開発プロジェクトのための共有サービスです。

    image (6).png

    仲間を探そう

    Wantedly

    ソーシャルリクルーティングサイト。Facebookのアカウントが必要ですが、
    個人、企業問わず、人を募集することができます。
    プロジェクト単位での募集も可能です。

    image (9).png

    支援者を増やそう

    日本でもクラウドファウンディングが盛り上がってきています。
    クラウドファンディングとは、ネットを通じて、多数の支援者から資金を集め、プロジェクトを実現させるものです。
    500円などの少額から支援ができるので、個人が気軽に参加できるところが特徴です。

    日本での代表的なサービスを2つ紹介します。

    CAMPFIRE

    CAMPFIRE(キャンプファイヤー)とはアーティスト・映画監督・ミュージシャン・作家・スポーツ選手・プロダクトデザイナー・ジャーナリストといったクリエイターのためのクラウドファンディングプラットフォームです。
    - CAMPFIREとは より

    image (5).png

    READYFOR

    READYFOR?(レディーフォー)とは、"実行者"を支援する日本初のクラウドファンディングです。
    音楽・映画・アート・テクノロジーなどのクリエイティブな活動はもちろん、夢を持つすべての"実行者"がアイディアをサイト上でプレゼンテーションすることで、多くの人から支援金を集めることができます。
    - READYFOR? とは? より

    image (8).png

    インターネットにはなんでもある!

    と言うことで、ものづくりするときに役に立つサイトを紹介しました。
    この他にももちろん沢山の支援サイトや便利サービスがあるので、質問サービスを使って聞いてみたり、
    検索エンジンなどで探してみるといいでしょう。

    また、カヤックのデザイナーに質問や聞いてみたいことがある方は、こちらからどうぞ!
    デザインでつくる人を増やす - 面白法人カヤックのデザイナーインタビュー

    ※質問内容は公開されます。また全ての質問には答えられない場合もありますのでご了承ください。


    0 0

    HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」!

    HTMLファイ部の「HTML5の鬼」ことほんだです。

    カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。
    スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。

    今回は「高級ペライチ」とググると1位に表示される、
    僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します!

    まずは王道!縦に長い高級ペライチ

    La Moulade - Creative Studio

    色々なパターンの動きが入っているのにスムーズに動きます。
    スクロールに連動して動く右上のメニューもかわいいです。

    Sony Tablet S - An Android Tablet Like No Other

    SONYタブレットの紹介ページ。
    画面中央にタブレットの位置を固定させているとこが面白いです!

    Volkswagen Beetle

    スクロールに合わせた自動車が走っているような演出など、写真がダイナミックに使われています。

    株式会社コンテンツ Contents Co.,Ltd.

    スクロールでの動きもさることながら、随所に用いられたcanvasでの演出もすごいです。

    Edits Quarterly × Ian Coyle

    各セクションが上下に重なっているように見える演出しています。コンテンツの構造に合わせているとこが素敵です。

    YouTube - One Hour Per Second

    「YouTube には、1 秒間に 1 時間分の動画がアップロードされます。つまり...」という紹介を、ダイナミックな演出で表現しているサイトです。

    東京スカイツリー TOKYO SKYTREE

    スカイツリーの高さを縦に長いページで表現しています。
    スクロールしていくと髪型が星の女の子がついてきます。
    何者なのでしょうか?

    Slavery Footprint

    カラフルな腕が文章を持ってきてくれます。

    オロ新卒採用サイト2013

    Web制作会社オロの2013年度新卒採用サイト。
    ページ最下部から上にスクロールしていきます。
    上に進むにつれて地球から宇宙に!

    パララックス(視差効果)を上手くに取り入れている高級ペライチ

    TOILET BIKE NEO | TOTO

    究極にエコで未来なバイク型トイレ「トイレバイクネオ」
    のサイト。

    バストイレ一緒の部屋の僕でも見入ってしまいます。

    Bamboo Pop - みんなでクリエイティブを楽しもう -

    よく見ると細かいところに動きがあってとてもかわいい!

    Dentsu Network

    たくさん要素を動かしているのにスムーズに動いています。
    こんな雰囲気のサイト見たことない!というぐらいパララックスのクオリティが高いです。

    Soleil Noir 2012

    スクロールでの演出だけでないく、随所に散りばめられたアニメーション演出も素敵ですね。
    個人的にはサイト全体の色使いやイラストも大好きです。

    横スクロール高級ペライチ

    Mario Kart Wii Experience

    横にスクロールするだけではなく、斜めに進んだり、ぐにょっとなったり、コースを走っている感じを演出しています。

    カートに乗った気分だ!

    The evolution of the web - ウェブの進化

    Web技術やブラウザの歴史を表現したサイト。

    菊地凛子 Webサイト

    横にスクロールしても、縦にホイールスクロールしてもページが進むように実装されています。
    コンテンツ的にもユーザビリティ的にも素敵なサイト!

    奥スクロール高級ペライチ

    山本高史 コトバ

    スクロールで奥に進んでいくサイト。
    CSS3の「transform: translate3d」を利用して実装しているようです。

    BeerCamp at SXSW 2011

    上に同じくスクロールで奥に進んでいくサイトです。
    縦スクロールでも横スクロールでもなく奥スクロール。
    「奥スク」!?

    — Marco Rosella, Interactive Designer.

    奥スクロールだけでなく、随所に施された演出も
    HTML+JavaScriptとは思えないクオリティです。

    変化球形高級ペライチ

    京急蒲田処女小説文藝大賞

    上下にくりかえしスクロールしてページを進めていくサイト。
    この発想はなかった!

    mokuva | mkv:09 Tokai Dochu Hizakurige

    自動でスクロールして写真が変わっていくギミックがとても面白いです。
    ずっと眺めていたくなる!

    MEFILASQUEST -メフィラスクエスト-

    サイト右上のバナーをクリックするとページが大魔王に占拠され、
    メフィラスクエストが始まります。

    サイトのおまけコンテンツようですが、つくりこみが半端ない!

    Autumn's Rain - Home Page

    ナビゲーションをクリックしてページ移動すると、
    ページの上や下から腕がでてきてページを移動してくれます!

    オロナイン公式サイト|大塚製薬

    スクロールに合わせて写真が動く不思議な演出のサイト。

    Online Portfolio von Jan Ploch

    スクロールに合わせて、ジュースが減っていく演出が面白いです。

    JavaScriptなしのギミックを取り入れている高級ペライチ

    The portfolio of Bryan Katzel

    「position: fixed」利用して実装しているので、
    中央のペンキの部分はJavaScriptなしでも動きます。

    Atlantis World's Fair

    エレベーターの部分は「position: fixed」で止めているので、JavaScriptなしでも動きます。
    CSSだけでこんなに面白い演出をするとは!

    シンプルだけどとっても面白い高級ペライチ

    Nizo for iPhone

    下にスクロールしていくと部品が集まってくる演出のサイト。
    ちらばった部品はドラッグもできちゃいます。

    ティザーサイトでここまでのつくり込み!

    Elect-LO-nica Compilation | Bunkaikei Records

    スクロールに合わせて1枚背景を動かすシンプルな実装ですが、
    とても面白い演出です。

    カヤック制作の高級ペライチ

    手前味噌ですが、弊社制作の高級ペライチサイトを紹介!

    Domino's Pizza Presents チーズ大統領選挙

    スクロールに合わせてピザのチーズが「とろける」演出のほか、
    パララックスを多用して、にぎやかな演出を随所にちりばめています。

    知的法人RAIZIN

    新エナジードリンク「RAIZIN」のブランディングポータルサイト。
    縦スクロールで上へ上へと"アガル"サイト構成です。

    クラウドコード(公開終了)

    ページのスクロールに合わせて、主人公が下に走る
    という演出をJavaScriptで実現しています。

    Web Designing に執筆させていただきました!

    最後に宣伝!

    先日発売されたWeb Designing(2011.7月号 62,63ページ)に、
    HTML+CSS+JavaScriptでつくるページテンプレートに関する記事を執筆させていただきました。

    本誌で紹介しているサンプルは弊社運営のHTML5コード共有サイト「jsdo.it」にも
    用意したので、下記URLからダウンロード可能です。

    基本サンプル

    http://jsdo.it/calmbooks/bottomNavigation

    バリエーション1

    http://jsdo.it/calmbooks/bottomNavigation_variation1

    バリエーション2

    http://jsdo.it/calmbooks/bottomNavigation_variation2

    バリエーション3

    http://jsdo.it/calmbooks/bottomNavigation_variation3

    バリエーション4

    http://jsdo.it/calmbooks/bottomNavigation_variation4

    サンプルの詳しい使い方などは、是非WebDesigning本誌を参照してくださいね!


    0 0

     

    どうもはじめましてカヤック意匠部ディレクターのkosukeです!

    グラフィッカーの三種の神器っ!?

    と言うほどのものでもないですが案外、普段はベーシックなツール使ってるんですが外出先でふと仕事のアイデアや構想が思い立った時などグラフィッカーが便利にどこでも仕事ができるツール等をサクッとご紹介します!!
     
     
     

     
     
    まずはお勧めはこれ!!

    ①~Eee Slate EP121~

       お勧め度☆☆☆☆☆
    ASUS.jpg
     
    思わず何か仕事の構想が浮かんじゃってどうしても外出先で絵が描きたい!
     
    通勤電車中でも絵が描きたい!
     
    寝転んで絵が描きたい!
     
    う~んトイレでも絵が描きた~い!!
    って言う人は知る人ぞ知るASUS Eee Slateが超お勧めです!!
     
    グラフィッカー仕様に作られたスマートなタブレットPC。
     
    ノートPCよりも格段にコンパクトで筆圧感知も‘wacomばりにばっちりでペイントや線画も何でもスラスラ思いのままかけちゃいます。
    結構前のモデルではありますが案外国産でも中々こう言ったコンパクトなタブレットPCは出回っていないのが現状。中々モバイルで難しい筆圧感知がここまでに薄型で実現するASUSに脱帽です。
     
    グラフィッカー用のオールインワンタブレットPCとしては未だ類を見ないものだと思います。
     
    グラフィックデザイナーにとってアイデアが出た瞬間にいちいちPCのあるデスクまで足を運ばないと描けない状況ってのは致命傷!いつでもスレンダーに描けちゃいます!!
     
    インストールすればオリジナルソフト以外の様々なグラフィックソフトも普通に使えます!
     
    もちろん映画もネットを普通に楽しめる上カメラ内蔵でビデオチャットも余裕で出来るオールインワンタブレットPCです!とにかく場所を問わずひたすら絵を描きじゃくりたい人には必見!!
     
    ~Eee Slate EP121~
     
     
     
     

     
     
     
    更にタブレットPCにおけるショートカットによるツールアクションにはこれ!!

    ②~ワイヤレスミニキーボード「diNovo Mini」 ロジクール [DN-500] 

       お勧め度☆☆☆☆
     
    ASUS1.jpg
     
     
    diNovo Miniを使うとよりコンパクトでカフェでもアウトドアでもどこでも楽々ツールアクションでお絵かきできちゃいます。
     
    コードレスなのでまさにパレットと画板をもって絵を描くようなスマートなスタイルでお絵かきライフを楽しめます!Eee Slate付属のキーボードが大きいのでDN-500とEee Padを連用したらどこでもコンパクトに多彩なお絵かきを堪能できます!
     
    し かもこいつのすごい所はバックライト式で暗い部屋や夜の野外の景色でも絵を描けちゃう優れもの!どうしても内臓のタッチパネルキーボードは絵の邪魔になっ て描けないのでこれは良いです~☆しかもEP121には付属でイーゼルがついてくるのでこの掛け合わせはまさにパレットを持って絵を描くような次世代の画 家スタイルが一丁出来上がりっ!
     
    ~DN-500~
     
     
     
     

     
     
     
    でもあたしゃipadしか持っていないんだよね~高くてタブレットPC無理っ!という人はこれ!!

    ③~bambooスタイラスペン×ipadアプリartstudio~

       お勧め度☆☆☆
    ipad.jpg
     
    さすがにipadなんで質厚感知はありませんがその分、artstudioでペンのサイズ調節や、強弱を細かく設定できるのでbambooスタイラスと相性いいです!
     
    artstudioはレイヤーも使える機能もある上、これまた多彩な画材ツールが盛りだくさん!!
    ちょっとお出かけ先で景色を描いたり人物スケッチやクロッキー程度なら十分です。
     
    描きこむことによって結構な表現も可能で伊達なグラフィックツールではありません。基本的なブラシやペンから様々なタッチのツールが用意され更にシンメトリードローイングも出来るので模様やテキスタイルもサクサク作れます!油絵っぽくや水彩っぽくも色々描けちゃいます!
     
    保存した下書きを再度パソコンで本番書きするような感じでイメージラフ原画等には十分です!
    ちょっと外出先で描きたい構想がある時等は自分はたまに使っています。個人的にはかの有名なZ〇nBr〇shよりもいいかもです!!
     
     
    ~bambooスタイラスペン~
     
     

    ~artstudio~

    http://itunes.apple.com/jp/app/artstudio-for-ipad-o-huikaki/id364017607?mt=8

     

     


     

    というような感じで以上でっす!!

    なかなか言葉じゃ伝わらないのでとにかくお試しあれっ!!!

     


    0 0

    初夏。HTMLファイ部の本多です。

    夏祭りが待ちきれないあなたのために、金魚すくい顔負けのハマるゲームをご用意しました!

    カヤック運営のHTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」から、
    HTML5でつくられたブウラザゲームを紹介します。

    ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

    HTML5ゲームまとめ

    JSパーティクル崩し

    ブロック崩しならぬパーティクル崩し!

    最初はガマン...!
    数分間打ち返し続けると、フィーバータイムに突入します!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    弾幕

    弾幕を避け続けるゲーム!

    安心するひまがない!
    はじまりからおわりまでずっとドキドキのゲームです!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    ブロックを消していくゲーム。

    何クリックですべてを表にできるかな!?

    クリックしたパネルと、その上下左右4つのパネルが裏返ります。

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    砂ゲーを移植してみた

    マウスで線をひこう!
    砂ザザー。砂の流れを見てると癒されますよね。

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    Move Bear

    くまがいっぱい!(。・(エ)・。)/
    くまくまシューティング!
    シロくまはマイナスになるので気をつけて!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    MEX_FLY

    浮遊感がすばらしい〜!
    トンネルをはずれないように操作しよう!

    W, A, S, Dキーでの操作がおすすめです!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    CSS PANIC

    「痛っ」>^n==n-! 穴ぐらからでてきたワニをタイミングよく叩こう!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    進め!CSSロード

    マウスでイライラ棒を体験できる!
    指先のテクニックが重要!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    HTML5で音ゲー

    音楽にあわせて、[←][↑][↓][→]キーを打とう!
    Easy〜Hardモード搭載!意外と難しいぞ!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    AMIDA-Wars(β)

    アミダくじをゲームに応用したアイディアが面白い!
    スマホでも遊べるアミダウォーズ!!

    左下部分からキャラをドラックドロッップして出陣!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    メシヨソイゲーム

    かんたん1クリックゲーム!
    よっそいよっそい!

    jsdo.it HTML5-Gamesでみてみる。(詳細説明あり)

    もっとHTML5ゲームを遊んでみたい!

    jsdo.it HTML5-Games には他にもたくさんのHTML5ゲームが投稿されています!
    よってらっしゃい!!

    jsdo.it HTML5-Games

    また、jsdo.it HTML5-Games には自分で作成したHTML5ゲームも投稿できちゃいます!
    お母さんサイトの「jsdo.it」から作成・投稿してくださいね!

    jsdo.it - Share JavaScript, HTML5 and CSS


    0 0

    はじめまして、京都支社所属のデザイナー田中里穂です!

     

    今回のテーマは

    思わず絵が描きたくなる(!?)三種の神器

     
    絵を描いた事がない人も思わず描いてみたくなってしまうかもしれない、3種の神器を紹介します。
     

    1、UFOの様なカワイイ子!「Griffin Tecnorogy PowerMate」

    tool.jpg

    見た目はUFOかオーディオのボリュームノブ!
    アルミ削り出しで一番下の部分がLEDで青く光ってカッコイイんです!
    最近私の左手にはいつもこの子が居て、右手にはタブレットのペンといった感じです。
     
    タブレットについての記事は以前、古賀さんが書かれたので参照していただければと思います。
    →http://design.kayac.com/topics/2012/06/graphic.php
     
    つまみ部分にショートカットを割り当てて使えます。しかもアプリケーションごとに割り当てキーを変えられるのでとっても便利です。
    私はPhotoshopのブラシをシームレスに変更したり、色の変更に使っています。
    左右の手を同時に使えるので感覚的な作業が可能です。
     

    2、目から鱗のPhotoshopチュートリアル! 「10Steps.SG http://10steps.sg/」

    10steps_sg.jpg

    基本の文字加工から卵を頭に変えることができる面白系まで様々なチュートリアルを読むことができます。英語のサイトですが、絵がたくさん載っているので何となく理解できてしまいます。
     

    3、こんなすごいビーズアクセサリー見たことない!「 The Art of Bead Embroidery」

    book.jpg

    色使いや装飾が秀逸で、個性的なデザインのビーズアクセサリーが掲載されています。
    これを見ていると色々なイマジネーションが湧いてきて、
    キャラクタや衣装デザインはもちろん、背景コンセプトも描きたくなってしまいます。
    トレーディングカードのイラストにこういった要素を入れると一気にレア度の高いカードに仕上がったりしますよ。
    お試しあれ!
     

    最後に

    この記事は面白法人カヤックの七夕のイベント「777カヤック☆フェスティバル」に向けたリレーブログです。

    技術系のアドベントカレンダー(*)になぞり、777イベントが開催される7月7日までの期間に、
    4つの職能ブログ ( エンジニアデザイナーフロントエンドエンジニアディレクター ) を横断し、更新します。

    テーマは「つくるための三種の神器」。

    カヤック有志による、それぞれの切り口で記事を投稿していきます。
    では期間中、どうぞお楽しみにください。

    明日は、ディレクターのブログになります!

    * アドベントカレンダーについての記事 「師走を楽しもう。技術系アドベントカレンダーの魅力とは


    0 0

    7月7日に行われる面白法人カヤックのイベントである「777☆カヤックフェスティバル」に向けて、
    6月6日〜7月6日までの間、
    ディレクターエンジニアフロントエンジニアデザイナー
    全職能のブログを、同じテーマの記事でつなぐ「777ブログウェイ」を実施していました。

    23人のカヤック社員が、「つくるための3種の神器」をテーマにブログを書きました。

    そのまとめ記事になります。

    デザイナーまとめ

    新しいPCに入れる基本ソフト3つ:Windows版

    新卒Webデザイナーが考える「五月病」を脱却する方法

    Workflow para reducir el tamaño de tus assets

    デザインするための三種のリファレンス

    グラフィッカーの三種の神器!?

    思わず絵が描きたくなる(!?)三種の神器

    ディレクターまとめ

    もっと知りたい!「好奇心」をつくる3つの視点とサービスを紹介します

     
     
     
     

    フロントエンドエンジニアまとめ

    これからのフロントエンドエンジニアに必須な3種の神器!

    スマホサイト制作の3種の神器!

    Androidアプリ企画~設計の3ステップ+3種の神器

    Scripting Objective-C

    ソーシャルアプリ演出の三種の神器

    エンジニアまとめ

    広告技術の未来を占う三種の神器!

    Rubyで開発するときに入れておきたい三種のRubyGems

    Redmineチケットを作るための三種の神器

    エンジニアとして継続したい3つのこと

    Home sweet Home en 3 étapes

    これからMacで開発する人向け三種の神器

    ウェブ系エンジニアのブラウザ三種の神器!

    というわけで、以上23人のカヤック社員がおすすめする「つくるための3種の神器」まとめでした!


    0 0

    JSX, CoffeeScript support!

    jsdo.itで「JSX」「CoffeeScript」を書いて実行できるようになりました!

    高速なJSを生成できる新言語[JSX](http://jsx.github.com/)と次世代ECMAScriptにも影響を与えている[CoffeeScript](http://coffeescript.org/)をサポートしました!

    JSX, CoffeeScript support!

    JSX

    CoffeeScript

    コーディングコンテストも開催中です!

    SPEC

    ゲームの演出を作成するコンテストです。賞品も豪華なのでぜひぜひご参加ください!もちろん、JSXやCoffeeScriptでチャレンジしても大丈夫です!


    0 0

    コロプラさんと一緒に行っているコーディングコンテスト「SPEC vol.4」。

    応募締切まであと1週間を残していますが、もうすでに変態的な作品が続々と投稿されているようです。

    今回もとんがった作品がたくさん集まっているので、途中経過としてその一部をご紹介したいと思います。(ぼく個人の主観でピックアップして紹介していきます。審査とはまったく関係ないですよ!)

    スピード感がある演出

    CSSだけでモーションタイポグラフィ

    立体的な動き

    トーナメントの演出

    くまー!

    3連休は SPEC vol.4 で決まり!

    SPEC vol.4の締切は7/18(水)です。
    賞品はMacBook Proなどなど超豪華!

    この3連休にでもぜひぜひチャレンジしてみてください!

    コードを書いてMacBook Proをもらおう!!


    0 0

    ブラウザだけでjavascript, HTML, CSSを書いて実行できるサービス「jsdo.it」が、ちょっとパワーアップしました!

    これまでの言語に加え、JSX, CoffeeScript, SCSS, LESSを実行できるようになりましたー!!

    「ちょっと試したいけど環境を作るが面倒...」「SCSSのmixinをシェアしたい」などなどブラウザだけで解決できちゃいますよ♪

    使い方

    コードの1行目に特定のコメントを記述するだけです!

    JavaScript → JSX

    JavaScriptの1行目に以下のコメントを記述してください。

    // #! jsx

    JavaScript → CoffeeScript

    JavaScriptの1行目に以下のコメントを記述してください。

    #! coffeescript

    CSS → SCSS

    CSSの1行目に以下のコメントを記述してください。

    /* #! scss */

    CSS → LESS

    CSSの1行目に以下のコメントを記述してください。

    // #! less

    簡単な挿入方法

    Optionパネルからボタンを押すと1行目にコメントを挿入することができます。

    optionpanel.jpg

    Sample

    と、いうことで、ブラウザだけでjavascript, JSX, CoffeeScript, HTML, CSS, SCSS, LESSを書いて実行できるサービス「jsdo.it」を\よろしくおねがいしまーす!/

    【おまけ】コーディングコンテスト開催中です!

    コードを書いてMacBook Proをもらおう!!

    SCSSでアニメーションを書いてもOKですよー!ぜひぜひご参加ください♪


    0 0

    仲夏。HTMLファイ部の本多です。

    jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。
    QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう!

    募集中のテーマはズバリ、

    夏を涼しくする表現

    暑い夏をひんやり涼しくしてくれる作品をお待ちしています!

    本記事では、続々と集まっている投稿作品の一部をご紹介します。
    夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ!

    ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。

    夏を涼しくするコードまとめ!

    ripple sound

    音と波紋を合わせた表現が爽やかで良いですね...!
    A~Zのキーを押すと自分で波紋を出せます。

    mushi-hanabi 〜夏虫花火〜

    花火と夏の虫を合わせて表現したところが新しい!
    個人的に、かなりぐっときました。

    夏休みですから、絵日記風に「湘南海岸」

    音が入ると雰囲気でますね。
    よく見ると遠くにクジラがいる!!

    長く見ていると...?

    線香花火的な何か

    花火の残像みたいな感じできれいです。

    sparkling-fireArcs 〜線香花灯〜

    普通の線香花火と違い、儚さを感じます。
    最後の火が落ちるところなんて、もう夏が終わっちゃったんじゃないかと思うほど

    CSSで首振り扇風機

    「夏を涼しくする」直球の表現ですねw

    涼しげなスイカ

    CSSでスイカを描いたシンプルな作品

    Dragon (Fireworks)

    下から放射するタイプの花火!
    海岸でワイワイ遊びたいな〜

    投稿お待ちしています!

    以上でまとめは終わりです!
    どんなコードが優勝するか楽しみですね〜

    Qでは、夏を涼しくしてくれるコードをまだまだ募集しています!

    Web Creator's Contest Q

    ちなみに賞品は

    1位 ルンバ780

    勝手にお掃除してくれる掃除機の最新モデル。タッチパネル搭載!

    2位 Nintendo 3DS LL

    発売されたばかりの大きい3DS!

    3位 WebMoney 5,000円分

    音楽や電子書籍を購入できる!

    となっています。
    コンテストの詳細はコチラからご覧くださいませ!

    それでは、よい夏を!


    0 0

    こんにちは、ゲームチームのキノです。

    先週、カジュアルゲームアプリ「なぞダン -なぞるだけダンジョン-」がApp storeで公開されました!!!!

    ひとさしゆびだけの超シンプルな(でもムズイ)ダンジョンゲームです!

    thm01.png  thm03.png

    過去にキャンペーンの一環などでゲームは何度かつくってきましたが、
    今回が初の企画段階からのモック含めた参加になるので、学んだことや役立ったを書いておきます。

    あとは地味にデザイナー向けにアプリ制作のtipsなど。

    意外と長くなってしまったので、週末にじっくりお読みください〜

     

    m1.png アプリは無料!!こちらからダウンロードできます。

     

    それでは記事の続きをどうぞ〜!!


     

    素材の話

    いつも数字忘れるので

    アイコン

    Icon@2x.png

    (なにか見覚えのある階段的なアイコン)

    アイコンはかなり肝いりです。
    気をつけている点は

    • 1キーワードで言い表せるか
    • フレームと世界観はあってるか
    • 類似アプリより突出しているか

    画像は載せられないですがapp storeのランキング画面をキャプチャしているので、
    そこに制作中のアイコンを載せて相対的な見栄えもみます。

     

    各種アイコンサイズ

    アイコン、たくさんサイズが必要です。
    アイコンのテンプレートはこちらを使っています。store用やsettingなど細かいものも入っているので便利です

    http://appicontemplate.com/

    サイズの内訳はこんな感じです(iPadを除く)

    • app store: 512x512
    • app store(Retina): 1024x124
    • Home Screen: 72x72
    • Home Screen(Retina): 114x114
    • Settings: 29x29
    • Settings: 58x58
    • Game center icon: app storeと同じものを使用
    • Leader board/Achievements icon: 512x512 *1
    • OGP: 200x200 *2
    • 自社サイト内の掲載用アイコン

    アイコンについて詳しくはAppleのガイドラインで(英文)
    Custom Icon and Image Creation Guidelines

    *1)
    Game Centerのアイコン類のサイズは実は不正確です。
    公式ソースが無くよくわかってないんですが、少なくとも512px以下は受け付けてくれません。
    作らない場合でもデフォルトで用意されているアイコンが補ってくれます。
    フチ付きのサークルでトリミングされるため、用意する画像は少しマージンを付けたほうがいいです。

    *2)
    とりあえずFacebook基準で。(でもまたすぐ変わりそう・・・)
    参考:OGPで指定したサムネイル画像(og:image)の Facebook Timeline での表示が変わった気がするので実験してみた

     

    App storeに載せるスクリーンショット

    こちらは原寸の640x960pxで最大5枚まで。
    申請後も変えられるので、アプリ全部作った後に用意するのがいいです。

     

    広告の非表示の場合の画像作成

    例えば今回の「なぞダン」は有料マップを買うと広告が外れます。
    そんな時用の代替画像です。

    img_noad.jpg

    (縦:100px 横:640px )

     

    プレ制作の話

    企画が決まった後、プロトタイプをつくりました。
    白黒の幾何形体画像をプログラマに渡して、動くように組んでもらいます。

    nazodan-1.jpg nazodan-2.jpg

    なぞダンは何マスのダンジョンをつくるかというところで、指の接地面積の兼ね合いを見ることが一番でした。

    検討事項をはっきりさせておくと、工数も必要最小限ですみます。
    なので、この段階ではルール的なものもいれず、とりあえず触ってキャラクター(★)が動くというレベルです。

     

    少人数制チームの利点

    今回の制作チームは3人です。

    • 企画・ダンジョン制作・レベルデザイン
    • デザイン・進行・全体の調整とかもろもろ(自分)
    • プログラム・開発ツールの作成

    人数が少ない分、MTGもすぐできますしドキュメントもあまり必要がないので、
    制作以外にかける時間が少なくて済みます。

    また、ゲームデザインについては企画段階にありつつも3人とも意見を出せる状態で最後まで進めています。

     

    制作にお世話になったツールなど

    ラフスケッチにぴったりな紙

    fladdictさんが紹介してたぴったしサイズのpost it

    iPhoneアプリはポスト・イットで作る!? 「QuadCamera」「ToyCamera」深津さん

    ここで話している商品はこのあたり
    これにたくさん書いてサイズをみたり、その後ノートに貼ってサイトマップ的に繋げたりした。
    昔、サービスやサイトでも使ってみたがそちらはファーストビューに収まることが少ないので、ゲームよりは使いにくかった。(貼って継ぎ足したりしてた)

    thm3.jpg
    (制作時のものを紛失したので、代わりに次回作をイメージ画像として)

     

    PDFワイヤーという方法

    誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき!】

    手前味噌ですが以前に書いた記事。
    どちらかというと画面演出ではなくサイクルが重要なツール系のアプリで効果を発揮するので、今回は使ってません。

     

    エフェクトのサンプル探し

    スクリーンショット 2012-08-24 17.36.40.png

    Particle Designer

    これでパーティクル系みたりいじったりして指定するとそのまんまcocosに入れてくれる。超便利
    有料だが、試用版でもパーティクル見ていじるところまではできる。

     

    方眼紙ノート

    アイコン考える時とか正方形がとれる方眼紙ノートを使ってました。
    ドットにも優しい。
    MUJIの方眼紙ノート、まだ売ってるかな。。

     

    iPhoneスクリーンテンプレート

    http://www.teehanlax.com/blog/iphone-gui-psd-v4/

     

    ファイルの中央にガイド引いたり

    Guide Guide

    Photoshopのエクステンション。
    画面中央に一発で引いてくれたりする。便利。

     

     

    制作中の話

    ドットの書き方

    t7.pngt4.pngi14.png

    うちの過去記事が参考になります。

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

    これを元に1pxでぐりぐり書いてから調整するとほんとに速い。

     

    ドットパターン背景

    MAP-a.png MAP-b.png
    (左:斜めに砂の模様をつなぐ/右:ひびの割れ方をランダムにする)

    上下や左右に特徴点がつながるとうそ臭くなるので、
    斜めに模様をつなげるか、なるべくランダムに散らすと視線が流れるからか、あまり気にならなくなる。

    特に今回は壁も1マスとして計算するものではなく、壁専用の座標を用意するドルアーガ式になっている。
    正方形のタイル状パターンは相性が悪い。(壁の無い所は繋ぎ目が見えてしまう)
    なぜそっちにしたのかと言えば、iPhoneの狭い表示領域で壁で1マス取るとダンジョンが狭くなってしまうので。

    ちなみにドラクエのタイルは正方形ではなく縦方向が少し潰れている。奥行き感を出すための工夫みたい。

     

    日本語ドットフォント

    このアプリは「モンスターを集めてまいれ!」といううちのゲームアプリの外伝的な位置づけなので、
    フォントも同じくレトロRPGなこちらを使用させていただきました。

    GD-DOTFONT-DQ

    オーナーに連絡した所、今回も快諾してくれました。
    いつもありがとうございます。

     

    透過画像の注意点

    透過は「通常」のみ。乗算とか使えない。(アプリに限りませんが)

     

    レイアウト

    配置・オブジェクトのサイズ、共に必ず偶数で。
    そろそろ3Gのことは忘れる頃かもしれませんが。

    画面が縦に伸びる覚悟は持っておく。
    unityで作ったゲームならandroidにもって話も出ますし、iPhone5だって伸びる噂ですし。

     

    android対応ありそうなら

    ボタンやウィンドウ類は9patchで扱えるように考えて設計する。

    9patchは画像の一部分だけ指定して伸縮することによりサイズを可変として対応するもの。
    コチラ参照。

     

    Photoshopの設定

    環境設定>一般>画像補間方式>ニアレストネイバー法


    Icon@2x.png or Icon-miss.jpg

    ドットをボケずに使いたいならこの設定をする。
    さもないとつくったものを変形ツールで動かすとすぐボケる。

    ちなみに一度ぼけても上記の設定に変えて、ぼけた素材を変形、なにもせずにキャンセルで修正される。

     

    アニメーション書き出し

    front1.gif clear.gif

    GIFアニとか無いので、ドット絵のアニメーションはpng連番画像です。
    (エフェクト系はcocos2D使用)

    Photoshop上では1コマを1レイヤーとして制作して、最後に

    ファイル>スクリプト>レイヤーをファイルへ書き出し

    細かい軽量化などの処理は、書き出したファイルにバッヂを当てて一括処理

     

    数字の連番作成

    num_gold_m-hd.png

    フォントにグラデーションやら影やらはプログラムだけでは限界があるので、使う数字・記号だけを連番画像として書きだし画像として配置をしている。

    この方法の場合、文字詰めが効かないので,の後ろとかが空いてしまう。今回はそれも含めてレトロでOKなのだが。
    また、ASCIIのコード表に従っているため、使わない文字分もスペースが必要になる。
    数字ではない「G」はほんとはものすごい遠いところにあるので、「0」の左隣にある「/」をGとして読み込ませている。

    そして、ドットなのでサイズ毎に整える必要があり、画像も別画像として書き出し直すので地味にめんどくさい。

    スクリーンショット 2012-08-24 17.55.22.png
    Glyph Designer

    上のParticle Designerと同じ会社。
    ある程度エフェクトもつけて、そのまんまcocos2Dに渡してくれる。(今回知ったのが途中だったので使ってません)

     

    画面確認系


    Reflection

    日本語レビュー記事:AirPlay ミラーリング機能を使って Mac にワイヤレス/リアルタイムで iPhone 4S / iPad 2 画面を映し出す Mac アプリ「Reflection」が感動的だった件。

     

    LiveView

    日本語レビュー記事:制作物を iPhone で即確認!デザイン/開発の必須ツール

    ReflectionはiPhoneの画面をMacで表示するツール。いいなと思ったゲームをこれで映してQuickTimeで画面録画。研究。

    LiveViewはMacの画面をiPhoneに表示させるツール。アップデートして1pxずつ移動ができるようになりさらに使いやすくなった。見た目を調整したい時に便利。画像送るのはめんどくさいのでオススメ。

    2つを組み合わせると画面が無限ループする。

     

     

    つくっていて気づいたこと

    リアルタイムに反応を返す大事さ

    画面タップは自分の操作がきちんと処理されているかが感覚的に伝わりにくい。
    操作を受け取ったことをわかりやすく返す必要がある。

    pointer.png
    (左上の赤いのが現在の指の位置を示すマーカー。王子はマーカーを目指して動く)

    例えば、このゲームの主人公の王子、足が遅くてなぞった指についていけないので、王子とは別にタップされている領域の上には常にマーカーを出してみた。
    マーカーはヌルヌル動き、必ず指についていくことで「きちんと受け取ってるよ!」を示している。

    最近やっている「ガンダムバトルオペレーション」は動作毎のタメが大きいけれど、結構な人がいらいらしてるのだろうか。僕はそこも含めて楽しいけれど。

    また、壁にぶつかった時や倒せないモンスターに当たった時も少し跳ねるように動く。
    これも「動こうとしたけれどダメでした」ということを伝える配慮。

     

    指の接触位置は人により大きく異なる

    今回はなぞる操作がゲームの肝だったので、いろいろと学べた。

    とりあえず手の大きい人、小さい人、男性、女性、マニキュアした人、左利き、片手持ち、両手持ちなど触ってもらうと、その人が押したと思っている位置と実際に接触している位置のズレがぜんぜん違うのがわかる。自分の感覚だけでやっているとユーザーにズレていると言われる。

     

    試行錯誤できる仕組みをつくる

    なぞダンはマップがキモです。

    従来のアプリだと、一度作ったマップデータを取り込んでそれをアプリ用に改めてビルドをするという工程が入り、プログラマの稼働が必要になります。
    細かい修正とか頼みづらいです。

    今回はプログラマが途中で、ウェブ上にあげたマップデータをアプリが読み込む形にしました。

    それからはマップを制作しているメンバーが好きなときにマップをつくり細かく直して、テストアプリ側でリロードだけすれば反映するようになっています。

    制作のスピードがかなり上がりました。

     

    必要になる画像はフォルダを用意しておく

    スクリーンショット 2012-08-24 21.53.20.png

    こんな感じでテンプレートPSDと空(もしくはサンプル入り)のフォルダをセットでつくっておくことにした。

     

    自分はマゾなゲーマーだった。

    オチ的な感じですが。

    わからないことがむしろ楽しいって感じてるタイプだと、
    ニッチなゲームになりやすいので気をつけないといけません。

    App storeの上位のゲームを定期的に遊んで、そこのズレは気をつける。


     

    ゲーム制作はまだまだ続きます!

    KAYACでは新作ゲームをまだまだ開発中です!

    興味を持たれた方はぜひ遊びに来てください〜。

     

    m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png

    アプリが気になった方はこちらから!!

    m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png m1.png


    0 0

    もはやコーディングコンテストサイトと化しているjsdo.itですが、いま開催中の SPEC vol.5 はいつもとちょっと違います。

    今回は、いつものHTML5・JavaScript・CSSに加えて、ActionScriptでのエントリーもできます!

    「じつはFlashのほうが得意!」という方にも挑戦していただいているんですが、もうすでに続々と面白い作品が集まりだしているので個人的に気になる作品をいくつかご紹介したいと思います。

    今回のお題「カードの合成のUI・演出を作ってください」

    Flash編

    forked from: SPEC vol.5 投稿用コード - wonderfl build flash online


    forked from: SPEC vol.5 投稿用コード - wonderfl build flash online

    JavaScript編



    ※スマートフォン専用


    締切は9/20!エントリーまだまだお待ちしています!

    今回の入賞者にはMacBook Proなどなど豪華景品が用意してあります。FlashもしくはJavaScript、得意な方でぜひぜひご参加ください!


    0 0

    HTMLファイ部のほんだです。シュッ

    「ページ遷移」、聞くだけでゾクゾクしませんか? 僕は大好きです。

    Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、
    ページ遷移・画面遷移をテーマにしたコンテストを開催中です。

    とても好評で、5回目となった当コンテスト。
    今回のテーマも、力の入ったコードがたくさん投稿されています!

    魅力的な画面遷移エフェクトのコード集!

    Cubic Transition

    ※「▶Play」ボタンをクリック!

    contents switcher without JS

    ※「▶Play」ボタンをクリック!

    ジグソーパズル風

    ※「▶Play」ボタンをクリック!

    Fragment

    ※「▶Play」ボタンをクリック!

    KEEP OUT

    ※「▶Play」ボタンをクリック!

    恵比寿・渋谷周辺でおすすめのカフェを教えてもらいました

    ※「▶Play」ボタンをクリック!

    縦遷移のエフェクト

    ※「▶Play」ボタンをクリック!

    canvasを使ったエフェクト

    ※「▶Play」ボタンをクリック!

    締め切りは今月19日!まだまだ投稿お待ちしています!

    まとめてみると、普段のサイト制作ではお目にかかれないような、
    味のあるアイディアばかりですね!

    今後こういったリッチなエフェクトを使ったサイトが増えていくのかも。

    コンテストはこちらで開催中です!(締め切り 9/19)
    http://jsdo.it/event/q/2nd/vol2

    ちなみに1位だとプレステ3、2位だとWiiがもらえちゃいます!

    MacBook Pro(Retinaディスプレイモデル)が景品のHTML5コンテストも開催中!(締め切り 9/20)


    0 0

    こんばんは。すでにiPhone5が社内の検証機と化しているキノです。

    fladdictさんからiPhone5対応で地雷を踏みまくった記事があがっています。
    その中で新たに必要になったストア用のスクリーンショットについて気になった小ネタを幾つか

     

    用意するサイズについて

    1. 640 x 1136 (portrait)
    2. 640 x 1096 (portrait)
    3. 1136 x 640 (landscape)
    4. 1136 x 600 (landscape)

    この2と4、高さが-40pxされているのはなんじゃーともんもんとしておりました。

    ステータスバーの高さと同じなので、
    どうやらステータスバーを除いた画面でスクショを用意してもいいよってことみたいです。

     

    ストアでの表示サイズについて

    App storeもupdateでだいぶ変わりました。
    新しいスクリーンショットが使われる画面とサイズはこちらです。
     
    検索結果画面

    01.png  02.png

    (左)従来の画像:372x560
    (右)iPhone5用:314x560

    こちらは画面上に両方のサイズが並列されることがあるため、
    高さを合わせて5用が細長くなります。
     
     
    アプリ詳細画面
    03.png   04.png
    (左)従来の画像:400x588
    (右)iPhone5用:392x696
     
    詳細画面は縦幅の長い5用にスクリーンショット自体のサイズが変わっています。
    *詳細画面の画像は半透明の2pxのフレームが自動でつきます。
     

    画像の切替条件について

    現時点では5用につくった画像はiPhone5でのみ表示されます。
    4S以下やPCからでは従来の画像が表示されるようです。
     
    また、5用画像を作成していないアプリはどちらでも同じ従来のものが表示されています。
     

    画像の登録について

    今回の変更に伴い、登録画面では
    ・従来の画像
    ・iPhone5用
    にそれぞれ5枚登録できるようになりました。
     
    既に5用の画像を用意しているアプリでは5用にだけ「iPhone5対応!」とテキストを入れていたりしますね。
    画像が場合分けされるので良いやり方かもしれません。
     
    スクリーンショットについては申請の必要がないため、楽に差し替えを行うことができます。
    実はすでにiPhone5対応のアップデート申請してた 。゚(゚´Д`゚)゚。
    って人もまだ間に合いますよ。

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