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

こんな発想はなかった!HTML5でつくられた楽器まとめ

0
0

はじめまして。ファイ部新卒のしんちゃんです。中国の上海から来ました。

日本に来て、やっと本場のとんこつラーメンを食べることができて、感動ですっ!

さて、Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、
新しい楽器をテーマにしたコンテストが開催されています。

楽器経験者の方はたくさんいらっしゃると思いますが、
ブラウザ上で動く楽器を演奏すると聞いたら、一体どんな楽器をどんな方法で演奏するかには、
実に興味津々ですね。

発想力に富んだコードが次々と投稿されています!
さっそくそのなかの幾つかを紹介しようと思います!

HTML5で作られた楽器のコード集!

ping pong arpeggio

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

Trance Metal Generato(トランスメタルジェネレータ)

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

accordion

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

freenotes ver 0.7

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

RhythmBox

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

Sounds of Colors

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

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

ド素人の僕でも、素晴らしいメロディーを演奏できるのは実に楽しいです。
本当は音楽の才能に恵まれているかも!?

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

ちなみに1位だとMacbook Airがもらえますよ!

JavaScriptもしくは楽器が得意な方でぜひぜひご参加ください!


祭りだワッショイ!美大生のお祭り「芸術祭」の日程まとめ

0
0

めっきり涼しくなってきました。

急に気温が下がったので鼻水が止まらない意匠子です。
 
さて秋といえば、運動会やハロウィンなど面白い行事が目白押しですが、
私が学生時代、なにより楽しみだったのは「学園祭」です。
美大の場合は、様々な作品があって、卒業した今でも機会があれば参加して
良い刺激をいただいております!
 
今回はそんな芸術祭のサイトをまとめてみました。
もう終わってしまっている芸術祭もありますが、
みなさん機会があれば参加してみてはいかがでしょうか?
 
それでは続きをどうぞ!

夏の終わりに!9月開催!

 

東京藝術大学

001.jpg

2012年9月7日〜9日

 
 

京都造形芸術大学

002.jpg

2012年9月22日〜23日

 
 

芸術祭シーズン到来!10月開催!

 

長岡造形大学

003.jpg

2012年10月6日〜7日

 
 

東京造形大学

004.jpg

2012年10月19日〜21日

女子美術大学

005.jpg
杉並キャンパス

2012年10月26日〜28日

 
 
 
006.jpg
相模原キャンパス

2012年10月26日〜28日

 
 

武蔵野美術大学

007.jpg

2012年10月27日〜29日

秋真っ盛り!11月開催!

 

多摩美術大学

008.jpg

2012年11月2日〜4日

 
 

京都精華大学

009.jpg

2012年11月1日〜3日

 
 

愛知県立芸術大学

010.jpg

 2012年11月2日〜4日

 
 

最後に

カヤックでは美大出身のデザイナーが様々な広告キャンペーンをつくっています。
広告制作に興味のある美大生の方、ぜひ一度ご覧になってみてください!制作実績はこちら
 

【すごい】HTML5でつくった「じゃんけん」のジャンルが豊富すぎると話題に

0
0

おはこんばんちは!ファイ部のしんちゃんです。

中国の上海から来日して一ヶ月、日本料理を食べることに限らず、最近作ることにも挑戦し始めました。
(来日前の自炊歴はほぼゼロですが...さすが「つくる人を増やす」のカヤックです!)
今日も和風弁当に挑戦しつつ、男子力UPを図ろうと思っています。

さて、jsdo.it主催の「第一回全国統一HTML5実技コンテスト」では、
「じゃんけんゲーム」をお題にしたコンテストが熱く繰り広げられております。

今回のコンテストは、これまでとは一味ちがいます!

1. 賞品は前回よりさらにパワーアップ!

今回は優秀者に豪華賞品の詰め合わせがもらえます!
なんと、あのiPad miniも賞品の詰め合わせに入っています!
あと、SONYヘッドマウントディスプレイも!
さすがにほしくてたまりません!

2. お題は企画力、発想力を重視!

HTML5で夢中にさせる「じゃんけんゲーム」というお題で、
以前と違って、技術力より、企画力と発想力が主に審査されます。
もし技術にあまり自信ないと思う方でも、どんどんご投稿ください!
優秀者には「あの企業」からのスカウトが来るかもよ!

3. リアルイベントが開催!

11月22日(木)に、DeNA本社内のカフェテリア「Sakura Cafe」で、
HTML5実技コンテスト授賞式と、
HTML5についての勉強会を兼ねたイベントを開催します。
こちらのイベントは、コンテスト参加者以外の方も参加できます!
詳しく知りたい方はぜひjsdo.itユーザ設定画面にてメールアドレスをご登録ください!
jsdo.itアカウントが必要です。)

ルールが差し替えられ、新しいゲームとして生まれ変わったじゃんけん作品が多数投稿されております!
さっそく投稿作品のいくつかを紹介します。

戦略的じゃんけんゲーム編

次はどんな手を打つべきかを考えながら、じゃんけんぽん!

カードゲーム風じゃんけん

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

じゃんけんクエスト

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

tri trick とりとり

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

早い者勝ちのじゃんけんゲーム編

速さと正確さが求められながら、じゃんけんぽん!

体力制じゃんけん

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

弾幕じゃんけんゲーム編

弾幕を避けながら、じゃんけんぽん!

とりあえず作ってみた

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

インベーダーじゃんけん

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

カジュアルじゃんけんゲーム編

パズルを解きながら、じゃんけんぽん!

グーチョキーバーズル

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

ジャンケンマン・もどき

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

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

ほかには脳トレじゃんけんや後出しじゃんけんなど、
いろんなジャンルのじゃんけんがでていますが、
まだまだあるはずです!

コンテストはこちらで開催中です!(締め切り 11/7)
http://jsdo.it/event/html5csc/vol1

ご投稿お待ちしております!

1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個!

0
0

「HTMLファイ部」のほんだです(・Å・)∫

jsdo.itnakamapPaberishHTML5実力テストといった自社運営Webサービスの
HTML5エンジニアをやっているものです。

よろしくお願いします!


「HTMLファイ部」創立1周年!

非常に手前味噌ではございますが、
弊社HTMLファイ部が創立から1年になりましたっ!・u・

HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。

今回の記事では、HTMLファイ部の一周年を勝手に記念して、
HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます!

ツール系のサイト

Screenqueri.es

iPhone、Galaxy などのモバイル端末や、
iPad、Sony Tablet などのタブレット端末、

各種デバイスのウインドウサイズでサイトをプレビューできます!

リキッドレイアウトのサイトをマークアップするときに便利!

CSS Selector Generator

HTMLを先に書いて、このサイトに貼り付けると、
CSSのセレクタを自動生成してくれます。

マークアップのスピードアップには必須!

CSS Sprite Generator

CSSスプライト画像(複数の画を1つにくっつけた画像)を
作成しやすくなります。

コマアニメに使用する場合など、
より多くの画をくっつける時に便利です!

Font comparer

文字を入力して、Google Web Fonts でのWebフォントを
一覧してプレビューできます。

Closure Compiler Service

Google提供の、JavaScriptコードを圧縮・最適化・難読化するツールです。類似ツールはたくさんありますが、現状ではこれがオススメです。

Ceaser - CSS Easing Animation Tool

CSSアニメーションのイージング(加速度)を、UIを操作して視覚的に作成できます。
アニメーションを細かく調整したい時に便利です。

アプリケーション・プラグイン

LiveReload

HTMLファイルやCSSファイルなど、編集中のファイルの更新を感知し、ブラウザを自動更新してくれます。
アプリ上でのフォルダ指定、HTMLファイルに1行のコード追加、が必要です。

・Macだと850円です。
・僕が使っているのはMac版ですが、Win版、Linux版もあるようです。

ImageOptim

画像に含まれるメタ情報を削除し、
PNG/JPEG画像を圧縮してくれます!

Mac版のみです(2012年11月現在)

ImageAlpha

画像を減色することで、PNG画像を圧縮してくれます!
色の具合を確認しながら圧縮できるので、

減色も気にならないレベルに調節できます。

Mac版のみです(2012年11月現在)

iWebInspector

iOSシミュレータ(Xcode同梱)でWebインスペクタを表示できるようになります。
Google Chrome のデベロッパーツールのように使えます!

スマホサイトのデバッグに超便利!

Cut&Slice me

一定のルールでPSDを作成すると、画像を自動で書き出してくれるPhotoshopプラグインです。
様々な解像度向けにエクスポートする機能も!

フレームワーク

PhoneGap

HTML・CSS・JavaScriptといったWebの技術で
iPhoneアプリ・Androidアプリを作成できるフレームワークです。

カメラや加速度センサーなど、様々なネイティブの機能を使えるので、想像以上にしっかりしたアプリをつくれますよ!

(類似のフレームワークにTrigger.ioというものもあります。)

Sencha Touch

Webの技術でのモバイルアプリ作成に特化したJavaScriptフレームワークです。

PhoneGapのように、ネイティブの機能を使うことはできませんが、モバイルUIをつくるために様々な部品が用意されています。

CSS拡張メタ言語など

Sass

CSSを生成するためのメタ言語です。CSSを構造化して使えたり、変数を使って効率よくCSSを書けたりします。
その便利さゆえに、弊社HTMLファイ部では必須のスキルになっています!!!

使い始めるときは、インストールや使い方が大変だと思うので、色々なサイトを参考にしつつ導入することをオススメします。

Sassがオススメですが、類似の機能を持つ言語にLESSもあります。

Compass

Sassをより便利に使うための拡張ツールです!

ベンダープレフィックス(「-webkit-」「-moz-」といったCSS3プロパティにときどき追加が必要になる部分)の補完機能など、便利な機能をたくさん持っています。

学習サイト・コミュニティサイト

Qiita[キータ]

プログラミングの知識を共有するサイトです。
プログラミング全般を対象にした情報共有サイトですが、HTML5関連の情報も多くストックされています。

Stack Overflow

プログラマー向けのQ&Aサイトです。
プログラミング全般を対象としていますが、HTML5に関する話題も多く投稿されています。

jsdo.it

手前味噌ですが、HTML5エンジニアのための
コミュニティサイトです。

HTML5、CSS3、JavaScriptのコードを投稿・共有できます。
すでに14万のコードが公開されています。

さらに1ランク上の制作をしたい方へ

ここまで紹介したツールだけでは、「物足りない!」方のために、
よりニッチなツールを、少しだけ紹介させていただきます!

TinyPNG

PNG画像の非可逆圧縮ツール

GRUNT

ビルド管理ツールです。JS・CSSファイルの圧縮や、画像データの最適化などを行ってくれます。

Jasmine

JavaScriptのテスト用のフレームワーク

最後に宣伝!

HTML5制作で欠かせない「知識」はこちらから!

jsdo.itではHTML5実力テストを開催中です。
全国順位や偏差値で、いまの自分のHTML5の知識・実力がわかります!

第二回全国統一HTML5実力テスト

実力テストといっても、10分くらいでお気軽にチャレンジできるようになっています!・u・

ぜひ受けてみてくださいね!

Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント

0
0

ニーハオ!カヤックのHTMLファイ部のしんちゃんアル!

中国出身の新卒です。
入社して二ヶ月になりますが、
日本語を一生懸命勉強しています。
よろしくお願いいたします。

さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中!
こんどのお題は「思わず登録したくなる登録フォーム」です。

Webサービスの制作においてついつい疎かにしがちな登録フォーム。
実はとても大事なものです!

今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。

  1. これだけは欠かせない基本の要素6つ
  2. 登録と無関係の要素はなるべく表示しないように!
  3. 聞きたいことは最小限にして不安にさせない
  4. OpenIDを利用して登録手続きを超簡単に!
  5. バリデーションは色や動きでみせると効果的
  6. 登録のメリットを表示しましょう
  7. アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう!

これら一つ一つについて詳しく説明します。

登録フォームをつくる際に気をつけるべき7つのポイント

これだけは欠かせない基本の要素6つ

まずは、フォームを成り立たせるために必要な基本要素を紹介します。
一般的に、フォームには以下の要素は必須と考えます。

  1. ラベル
    項目の名前です。
    どんな情報を入力するかをユーザーに知らせます。
    これがないと、ユーザーは何を入力するかがわからなくなります。

  2. 入力フィールド
    いろいろな種類のフィールドがあり、
    ユーザーは主にここでウェブサイトに送信したい内容を記入します。
    うまく活用できれば、手間をかけずに便利なフォームが作れます。

  3. ボタン・リンク
    フォームでできるアクションを行うには必須です。
    よく見かけるのは送信ボタンやリセットボタンです。

  4. ヘルプ
    ユーザーに必要なヘルプ情報を提供します。
    例えば特別の項目の入力制限やこの項目の使い道など。

  5. メッセージ
    ユーザーに入力項目の状況を伝えたり、フォームの送信状況を教えたりします。
    これは状況に合わせて、ユーザーに情報を伝える唯一の手段です。

  6. バリデーション
    入力された情報が適正なのかを検証することをバリデーションといいます。
    たとえば、ユーザー名が長すぎた場合や、必須項目が入力されてない場合などです。
    このような状況を的確にユーザーへ伝えるため、
    予め色々な状況を想定してつくる必要があります。

参照元:An Extensive Guide To Web Form Usability
(原文を翻訳し、解説を加えました。)

ここまではフォームの基本要素の紹介でした。
この6つの要素を欠かさないようにすることが、
登録フォームをつくる上で最低限必要になります。

image00.png

開発者コミュニティのGithubの登録フォームです。
6つの要素は全部そろっています。

image03.png

ウェブサイトアナリティクスサービスのgosquaredの登録フォームです。
見ての通り、シンプルでありながら、すべての要素が揃っています。

登録と無関係の要素はなるべく表示しないように!

登録と無関係の要素を、フォームの周りになるべく表示しないようにしましょう。
例えば、フォーム近くの広告バナーやリンクは、
ユーザーを途中で他のウェブサイトに誘導させてしまうリスクがあります。
そのため、多くのサイトでは、ロゴとフォームだけを表示するようにしています。
まず、ユーザーがきちんと登録にフォーカスできるような環境を作りましょう。

image04.png

オンラインポートフォリオサービスのcarbonmadeの登録フォームです。
賑やかなトップページと比べると、
登録フォームは意外とミニマルにデザインされてます。

聞きたいことは最小限にして不安にさせない

普段人と接するときと同じように、
相手に余分な個人情報を聞くと不安感が生じ、ユーザーは逃げてしまうかもしれません。
そして、質問の数をできるだけ抑えるほどフォーム入力のストレスも減ります。

image02.png

ポータルサイトのNAVER Japanの登録フォームです。
利用規約同意を含めると、入力項目はわずか4つです。
ポータルサイトの中ではとても稀な登録フォームデザインです。

OpenIDを利用して登録手続きを超簡単に!

近年、OpenIDは多くのサイトに利用されるようになり、
ユーザーはワンクリックで登録することができるようになりました。
登録方式としてはすでに主流の一つですが、
ユーザーにとっては一番手早い登録方式なのでおすすめです。

image08.png

デザインナーコミュニティのDribbleの登録フォームです。
普段はTwitter経由の登録ボタンしかありませんが、
横のリンクをクリックすると、普通の登録フォームが現れます。

バリデーションは色や動きでみせると効果的

人の目は文字などの形を見て理解するより、色や動きに反応しやすいです。
たとえば、バリデーションの場合、文字はあくまでも脇役で、
ユーザーはまずその文字の色から判断することが多いようです。
ユーザーによっては、文字を読み飛ばしてしまう方もいるので、
注意しなければなりません。

image05.png

Googleの登録フォームです。
不備のあった部分に全部赤色のメッセージが表示されて、
枠の色も赤くなります。

image07.png

SNSサイトのTumblrの登録フォームです。
UIは極めてミニマルですが、
アニメーションを用いてバリデーションを演出しています。
入力に不備があると、フォームが左右に振れて、
メッセージが現れるようになっています。

登録のメリットを表示しましょう

最近、SNS系のウェブサイトで、
登録後のメリットをフォーム近くに表示することが徐々に多くなってきました。

image06.png

クックパッドの登録フォームです。
登録したらこうした機能が使えるとユーザーに伝えることで、登録の動機は明確になります。

アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう!

前に述べたアドバイスは決して制限ではありません。
目的によっては、アドバイスに沿わない方が良いこともあるでしょう。
例えば、Twitterのように、登録をもっと高速でできるようにするため、
バリデーションなどを削り、別ページを作って、
必要の場合だけ表示するという方法もあります。

image01.png

image09.png

Twitterの登録フォームです。
とてもシンプルで、バリデーションもヘルプも入りませんが、
実はバリデーションに通れないときは、しっかり別ページを用意しています。
こうすれば、一回で登録できる人は手間をかけずに済みますし、
バリデーションを通れない人もどこに問題が出たのかを簡単に把握できます。

最後にコンテストの投稿作品をいくつか紹介!

また、こんどのコンテストには、
普段は絶対思い付かない登録フォームの発想も投稿されています。

HTML5病でも契約(とうろく)したい

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

チャット型登録フォーム

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

SHOOTING FORM

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

締め切りは12月4日です!参加作品はまだまだ応募中です!
優勝者にはあの「薄型」iMacを贈呈します!

応募はこちら: http://jsdo.it/event/html5csc/vol2

html5csc_vol2.png

ぜひぜひjsdo.itでご自慢の発想を実践してみて、ご応募ください!
ご投稿、お待ちしております!

あなたの声でクルマが走る!世界初のカーレースイベントが開催されました!

0
0

こんにちは、クライアントワークチーム、ディレクターのふかっちです。

今回は、カヤックが実施したイベントのご紹介です。

 

VOICE DRIVER CUP ~世界初!声でクルマが走るカーレース!~

「VOICE DRIVER」は、「モータースポーツのワクワク感を、すべての人に」をコンセプトにした、声でクルマを運転する世界初のモータースポーツ。カヤックは、プロジェクトチームの一員として、Webサイトの制作はもちろん、声で走るクルマのシステムづくりから塗装にいたるまで、さらにはコースづくりにも関わりました。

 

声で走るクルマの仕組みとしては、iPhoneのマイクに向かって声を出すと、それを感知したクルマ「日産フェアレディZ」のアクセルが発動し、全長60mのコースを疾走。声の大きさに応じてスピードが変わり、他レーンを走る参加者と競い合うことができるという内容です!

 

 話題を集めたメイキングやイベント模様の動画は続きから!

 

メイキングムービー

弊社デバイスエンジニア衣袋のサムネイル画像が、世界中のニュースやメディアを駆け巡りました。

 

 

ドキュメンタリームービー

日産 グローバル本社ギャラリーで行われた、リアル体験イベントと「JAPAN GP」と
ネットを通して世界中から11,386人が参加した「WORLD GP」の模様です。

みんなにワクワクを体験して頂くことが出来た、イベントとなりました。
参加して頂いた皆様ありがとうございました!

アーカイブサイトはこちら

渋谷ヒカリエにサプライズゲスト登場?!HTML5勉強会フォトレポート!

0
0

こんにちは~!意匠子です!
最近はローソンのからあげクン・トリプルジャン味にハマってます☆

先週開催された、jsdo.it主催『HTML5実力テスト答え合わせ勉強会』の様子を 写真レポートしちゃうよっ!

この勉強会イベントは、

の二本立てで行われました。

会場は、話題の渋谷ヒカリエ!
DeNAさんにオシャレな社内カフェテリアを貸していただきました。
ありがとうございました~!

表彰式のプレゼンターには、キュートなサプライズゲストも登場!
盛り上がったイベントの様子をさっそく見ていきましょ~!

キーンコーンカーンコーン♪

あれ?女子高生がいると思ったら、司会の@barimiさんでした!テストの答え合わせイベントだからJKなんですね!

1限目の先生は、面白法人カヤックの比留間和也センセイ!HTML/CSSコースの解説をしてくれました。

来場者の皆さんは、メモを取りながら熱心に聴講。

jsdo.itを使ってFlexible Boxのライブコーディングも!

2限目は、PixelGridの中村享介センセイ、小山田晃浩センセイ、山田順久センセイによる、JavaScriptコースの解説!

WebRTCを利用した顔認識のデモ!

3限目は、DeNAの草間 正則センセイ、猪口 雅明センセイによる、iOS/Androidコースの解説!
jsdo.itで話題の「1DIVでリラックマ」は、草間センセイの作品でした!

「fmfm。ここテストに出るかも!」

しっかり勉強した後は、お楽しみの懇親会!jsdo.itユーザの皆さんが交流しています!

DeNAさんが、美味しいご馳走を提供してくださいました!!!

意匠子も美味しくいただきました~☆ウマー

この後は、『第一回 HTML5実技コンテスト』の授賞式...ここでスペシャルゲスト登場!!! 横浜DeNAベイスターズのマスコット、DB.スターマンです!キュート!

受賞者には、フォーク型のjsdo.it特製オリジナルトロフィが授与されます!

BRONZE賞の発表!
beryujpさんの「体力制じゃんけん」です!おめでとうございまーす!

スターマンからトロフィーと賞品「スターマングッズの詰め合わせ」が手渡されました!うれしそうですね!

続いてSILVER賞です!
SILVERに輝いたのは、fokaさんの「じゃんけんスクイーズ」です!

スターマンと記念にパチリ☆

そして、いよいよGOLD賞の発表です!
njfさんの「じゃんけん de パズル」がコンテストの頂点に輝きました!

njfさんには、トロフィーと賞品「話題のタブレット詰め合わせ」が贈られました。おめでとうございま~す!

受賞者の皆さんに盛大な拍手をー!パチパチパチパチ!

そして、何とまたまたサプライズ!100人分の大きなケーキに、意匠子も興奮が止まりませんっ!!!

ケーキのチョコ文字の正体はなんとコードです!

<!-- Fork me on jsdo.it -->
<em>Codes</em> could be more
preferable than cake to be forked.

コードを訳すと「ケーキよりもコードをフォークしたい」みたいな意味。
jsdo.itならでは!

JKとスターマンが仲良くツーショット!

ケーキの前に列が絶えません。
是非jsdo.itでも美味しいコードをフォークしてくださいね!

たくさんの笑顔が会場にあふれ、渋谷ヒカリエの夜は更けていくのでした~
ご来場いただいた皆さん、ありがとうございました!!

最後に

次回のイベントは、12月18日(火)開催予定!詳細は、jsdo.itメルマガでお知らせします!
jsdo.itの設定画面からメールアドレスを登録しておいてね♪

html5csc_vol2.png

第二回 全国統一 実技コンテスト』は、ただ今作品募集中!締切は12/4(火)
次回イベントで、豪華賞品を手にするのはキミだ!!作品のご応募お待ちしてまーす☆

HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個!

0
0

動くぞ!きれいだぞ! ヘ(・_・ヘ)

とにかく痩せたい、HTMLファイ部のほんだです。

jsdo.itnakamapPaberishHTML5実力テストといった自社運営Webサービス
HTML5エンジニアを担当している者です。

jsdo.it、ユーザー数 5万人突破!

手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、
ユーザー数 5万人を突破しました!(わーい!)

今回の記事では、jsdo.itのユーザー5万人を記念して、
HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します!

あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。

Canvasアートスクリプティング特集!

説明不要! 気になったコードは是非のぞいてみてください!

Painting

Creater : akm2

Shodou

Creater : akm2

Origami

Creater : hakim

Trail Fader

Creater : hakim

Magnetic

Creater : hakim

Bakemono

Creater : hakim

Water Type

Creater : mrdoob

Map Generator

Creater : mrdoob

Stars 2

Creater : tsmallfield

Color motion

Creater : peko

linked link

Creater : ts_jsdo

Node Garden

Creater : Evan

アートスクリプティング?

Flash(Action Script)で多くみられる
「アートスクリプティング(スクリプトで、芸術的な模様、動きを描画するコード)」ですが、

最近では、HTML5のCanvasでつくられたものも、ハイクオリティになってきています!

普段の制作では、なかなかつくる機会のない表現ですが、
Web制作者としてはテカテカせずにはいられませんよねっ!

jsdo.itなら、これらのコードをFork(複製・編集)して、勉強したり、改造したりできますよ!


Canvas表現を実用しているサイト

Canvasによる表現を、実際に用いているサイトも少しだけ紹介!

S5-Style | Hello world.

背景にCanvasによる表現が用いられています。
音楽ともマッチしていて、Flashサイトに引けを取らない表現力!

The Shodo

書道をつくれるサイト。
Canvasでここまでつくり込むのは本当にスゴいです。

The Wilderness Downtown

「ARCADE FIRE」というバンドのPVを、Webブラウザのウインドウをたくさん使って表現しているサイトです。サイトトップには、Canvasで描かれた鳥が飛んでいます。

最後に宣伝!

jsdo.itでリアルイベントやります!

放課後のHTML5 vol.2

場所は、渋谷ヒカリエ!
矢倉眞隆さん(ミツエーリンクス)や、春日井良隆さん(日本マイクロソフト )によるHTML5勉強会、

飲み物、食事つきの懇親会を行います!

なんと\完全無料です!/交通費は自己負担 (・ω<)

普通の勉強会とは一味違う、jsdo.itならではのイベントになる予定なので、ふるってご参加ください〜


2012年のHTML5総まとめ&来年の先読みイベント「放課後のHTML5」フォトレポート!

0
0

こんにちは~!意匠子です!
最近はふんどしにハマってます☆

先週開催された、jsdo.it主催『放課後のHTML5 vol.2』の様子を 写真レポートしちゃうよっ!

この勉強会イベントは、
『HTML5の最新の動向や今後の展望』をテーマにした講演
『第二回 HTML5実技コンテスト』結果発表&表彰式
の二本立てで行われました。

会場は、前回と同じく、話題の渋谷ヒカリエ!
DeNAさんにオシャレな社内カフェテリアを貸していただきました。
ありがとうございました~!

では、盛り上がったイベントの様子をさっそく見ていきましょ~!

キーンコーンカーンコーン♪


イベント開始前の来場者たちです。みんな真剣な顔をしています。


1限目は、ミツエーリンクスの矢倉眞隆先生からおくる
「HTML5, これから。 ~2012年総まとめ&2013年以降の最新動向~」です。
HTML5の最前線をご紹介!


真剣に講義を聞いている来場者たち、中にメモをとっている人もいます。


2限目はスマホでリアルタイム投票を取り入れた「エンジニア5万人の常識決定!大会議」。
エンジニア特有の曖昧な事柄をお題にして、
jsdo.itユーザー5万人を代表して来場者の方々が参加する会議です。
DeNAの猪口 雅明センセイと面白法人カヤックの比留間 和也センセイがお送りします!


それでは、投票開始!さてさて、結果はどうなるのかな?


猪口 雅明センセイと比留間 和也センセイが結果について解説をしています。


3限目は、日本マイクロソフトの春日井良隆センセイがおくる
「IE10、Windows8...2013年に注目したいMicrosoftとHTML5の今後」。
マイクロソフトの最新情報を仕入れますよ!


jsdo.itのIEコラボコンテンツSVG Girlが登場!


テーマについて熱く語る春日井 良隆センセイ


最後にApple、Microsoft、Google、Amazon各社の経営分析をしています。


講義が終わって、懇親会が開始!みんな飲み者を手にして乾杯ー!


今度もDeNAさんから美味しいお食事を提供してくださって、ありがとうございます!


そして、盛り上がっている最中、スペシャルゲストの登場を告げる司会の@barimiさんです!


スターマン(クリスマス仕様)が登場!かわいい!!!


授賞式開始!今回もスターマンから受賞者に賞品を渡します。まずはBRONZE賞!
受賞者は「ときめき登録フォーム」の作者Qinfuさんです!おめでとうございます!


そしてはSILVER賞です!受賞者は「ダイアログフォーム」の作者watildeさんです!
watildeさん、満面の笑顔です!


最後はGOLDEN賞!受賞者は「ゲーム風 登録画面」の作者panicdragonさんです!
トロフィーを高く掲げています!


panicdragonさんに受賞の感想を聞きました。


そして受賞者のみんなで記念写真!みんなおめでとうございます!


授賞式が終わったあとにはケーキが!クリスマスなので、ブッシュドノエルです!
クッキーにはコメントが入っています。
コメントの内容は「クリスマス?もちろん、
たくさんの友達と一緒に楽しい時間を過ごす予定になっているよ。
jsdo.itの愉快な住人たちとね!」でした☆


JKとジャージ姿(体育のセンセイ?)で仲良くツーショット!
そして来場者のみなさん、お越しいただきありがとうございました!

第三回HTML5実技コンテストも開催中!

そして、第三回HTML5実技コンテスト』も、ただ今作品募集中!
今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。
面白い作品が続々と投稿されています!

入力したテキストを顔文字に変換して喋ります♪

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

SVGでしまむらくんを動かしてみた

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

顔文字で遊ぶシューティングゲーム。

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

締切は1/16(水)
エントリーはこちらです!
年始年末はぜひコンテストにご応募ください!
たくさんの投稿、お待ちしてまーす☆

HTML5の最先端技術で顔文字はこんなにおもしろくなる

0
0

HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/

「顔文字」と「ASCII Art」はほとんど毎日使っていますが、
コードで表現するとどうなるのか考えたことはありますか?

jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。
今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。

顔文字とASCII ArtがHTML5最先端の技術との融合は、
果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。
((o(´∀`)o))ワクワク

では、さっそく投稿したコードをいくつか見ていきましょう!

HTML5で表情豊かに表現する「顔文字(・∀・)」

Gravity Face

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

顔文字でアウトプット

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

Sound-novel like (prototype)

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

文字の顔文字

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

Emoji Rush

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

顔文字渦巻き。

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

ASCII Camera

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

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

優勝者には豪華賞品!

Canvas、WebGL、WebRTC...本当に最先端の技術の集まりですね!
HTML5の最先端技術で顔文字とASCII Artはこんなにおもしろくなりますよ。
僕もForkしたくてたまらなくなりました。(^q^)

今回の締め切りは1月16日(水)
優勝者には豪華のRetina Macbook Pro 13インチ
スマホで動かせるラジコンや、
レーザーキーボードを贈呈します!ヽ(*´∀`)ノ

応募はこちら:http://jsdo.it/event/html5csc/vol3

ご投稿お待ちしております!(^o^)/

「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた

0
0

平日は割りと仕事しているんですが、
さっきふとこんな技術相談を、エンジニアに投げてみました。

お題を投げてみた

hayashi.png barimi
ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする?
私ならオートリロードとiframeだと思うんだけど。

tanaka-hirotaka.pngtaiyoh
iframeで自分を開くようにするだけで、1回表示しただけで待ってれば相当数のPV数稼げそう。。。
(ブラウザがクラッシュするまで放置)
 
tanaka-hirotaka.pngtaiyoh
秒は無理だと思うので、あとは物量勝負ですね
 
hayashi.png barimi
なるほど。まあぶっちゃけ1億人集めればいいんだもんね
 
tanaka-hirotaka.pngtaiyoh
一人200タブ×複数ブラウザくらい開いておいて、
スクリプトで全部一斉にリロードできるようにすれば、
1億人もいらなくてもいけそう
 
hayashi.png barimi
10000×10000ピクセルのサイトで1×1ピクセルのiframe作れば、、、

そして話はサーバーへ

 
hayashi.png barimi
サーバースペックはどれくらいになるの
秒速で1億PVのサーバーっていくら位?
 
tanaka-hirotaka.pngtaiyoh
とりあえずgoogle並か、場合によってはそれ以上の力が必要な気がします!
 
hayashi.png barimi
聞いてみようかな。見積もり。
誰かサーバー屋さんの友だちでこのくだらない質問答えてくれそうなヒトいないかな、、、
 
tanaka-hirotaka.pngtaiyoh
Fさんに聞いてみようかな
 
hayashi.png barimi
wwww
椅子投げられる
 
tanaka-hirotaka.pngtaiyoh
サーバどころか、そもそもネットワークがそこまでの流量に耐えられるかもあるなぁ
 
hayashi.png barimi
さ○○さーばーじゃだめなの?
 
tanaka-hirotaka.pngtaiyoh
間違いなく無理ですね
 

そのころIRCでは…

<taiyoh> fu****a: barimiさんからのお題で、与沢翼へのオマージュで、秒間1億PVのサイトを作るにはどれくらいのサーバスペックにすればいいだろう、と聞かれています
<fu****a>秒間1億ってgoogleでも作るつもりですか
<taiyoh> 僕もそう思います
<fu****a> Mobageで一日35億だっけ
<fu****a> という数値をお伝えください
<taiyoh> はい。ありがとうございます〜
<ke****rg_> モバゲーの2500倍!!
<S****u_> 計算早い
<taiyoh> http://game.watch.impress.co.jp/docs/news/20120426_529521.html これによるとサーバは700台くらいか
<ke****rg_> その量のサーバーは東京ドーム何個分の敷地なら入るんだ?
<ke****rg_> 175万台...
<ke****rg_> 46,755平米 が東京ドームだから 1平米のラックに10台サーバーが入るとすると東京ドーム4個分の敷地でまかなえるのか
<ke****rg_> なんとなく琴線に触れてしまった
<fu****a> 発電所作らないと…
<fu****a> マジレスするといろんなところの回線が持ちませんねきっと
<aci****n> さくらの石狩データセンターの完全形態(8棟?)でどのぐらいなんだっけ
<m***py> 今が
<m***py> 東京ドーム1.1倍?
<m***py> 11,392m^2
<fu****a> PVあたり10KBとすると、1TB/sec
<m***py> 延床面積
<typester> 与沢翼ってあの電車に広告でてるやつか
<fu****a> 全国の基幹線を8Tbps(現状の5倍)まで引き上げる目処が付いた
<fu****a> って
<m***py> バックボーンが足りない
<fu****a> 日本国内のインフラを全部置き換えるぐらい出ないと無理ですね
<fu****a> 1TB/secってことは1TBのハードディスクにデータ詰めて毎秒に放り投げる
<fu****a> 必要がある
<fu****a> 物理攻撃に近いな…
<taiyoh> 175万台の内訳を仮にEC2のインスタンスで換算してみて、
<taiyoh> ざっくりと「アプリ(c1.xlarge)6:DB(m2.4xlarge)3:ログ(hi1.4xlarge)1」と振り分けてみた時
<taiyoh> 重度使用リザーブドインスタンスでも月間713億円はかかるという試算が出たことだけお伝えいたします
<fu****a> そもそもawsに175万台あるのかなw
<aci****n> まずIPv4のアドレスそんなに揃うのかっていう
<aci****n> DNSラウンドロビンして分散するにしても/24を1個まるまる使う勢いが必要そうな
<aci****n> 255個でたりないかもしれないけd
<m***py> 東京ドームの値ぜんぜん違う……
<taiyoh> o
<m***py> 1.1倍だけあってて
<m***py> 延べ床面積が上の値で、敷地面積が51,448m^2でこっちで考えると東京ドーム1.1個分
<aci****n> なるほどね
<aci****n> たしか8棟ぶんの敷地があってまだ2棟しかできてなかったはずなので
<aci****n> さくら(完全体)が4個必要ってことね
<m***py> みたいです、二棟で11,392m^2
<aci****n> 道民としては北海道経済がうるおうならウェルカムやで!
<m***py> 全然関係ないけれど洞窟データセンターってどっかやってるんだろうか
<ken****walker>ヨルムンガンド発動できそうやん
<taiyoh> wikileaksっぽい>洞窟データセンター
<ken****walker> 完全国内仕様じゃなければ海底ケーブルとかIXの増設とか必須っぽい
<m***py> 洞窟にデータセンター突っ込めば年中通して気温が一定だから冷却系楽になるねという北海道と同じ発想で
<m***py> どっかで提案していたような
<aci****n> 洞窟は湿度的な問題があるからなー
<m***py> 確かに
<ken****walker> Googleがつくってた海流利用したデーセンまだ全然できないのかな
<m***py> IBM Blackboxでも置いとけば
<m***py> 何とかなりそうな気も
<aci****n> ジオフロントさがしてそこにサーバおきましょう
<m***py> この規模だと一箇所にまとめるのがつらい
<m***py> 秒間1億PVならリージョンごとに分散させてやれば、個々のPVは分散される説

秒速で1億PV稼ぐサーバーは一体いくらなのか!?

hayashi.png barimi
えーいくら掛かるのか知りたいw

tanaka-hirotaka.pngtaiyoh
(今計算中ですが、超めんどい!)
去年時点で700台くらいと考えると、
<ke****rg_> モバゲーの2500倍!!
単純計算で
700 * 2500 = 1,750,000
のサーバが必要で、仮にEC2で換算してみると、(あくまで試算です)
DeNAでは超ハイスペックのマシンは確か使ってないので
重度使用リザーブドインスタンスで1年使用するとして、
 
<アプリケーション用:ハイ CPU エクストララージ インスタンス>
1台あたり年間:$2000(前払い)+($0.16*24*365=$1401.6)
(2000 + 1401.6) * 1050000(台) = $3,571,680,000
 
<DB用:ハイメモリ クアドラプル エクストララージ インスタンス>
1台あたり年間: $4120(前払い)+($0.352*24*365=$3083.52)
(4120 + 3083.52) * 525000(台) = $3,781,848,000
 
<ログ保持用:ハイ I/O クワドラプルエクストララージインスタンス>
1台あたり年間: $7280(前払い)+($0.621*24*365=$5439.96)
(7280 + 5439.96) * 175000(台) = $2,225,993,000
合計で$9,579,521,000 (今のレートで8 554.67137 億円)となります。
 
でも、これは年間のサーバ費の超概算というだけで、
他にやることはあって、
  1. 国内のネットワークインフラをすべて劇的にスペックアップさせないとそもそアクセスすらできない
  2. サーバをすべて置くために東京ドーム4個分くらいの敷地とサーバを設置するための施設
  3. サーバの電力量が無茶苦茶高いので、それを賄うための発電所の建設費用
辺りが別途含まれます
 
> 合計で$9,579,521,000 (今のレートで8 554.67137 億円)となります。
この数字だと年間なので実感わかないですが、
月間に直すと713億円弱くらいです
 

秒速で1億PVはお金がかかる!

ということで、構成とか色々工夫すれば金額変わると思いますが、秒速1億PVもお金がかかるんですね~。
くだらない相談に乗ってくれた、ステキなエンジニアの皆さんありがとうございました!
 
※この話題はIRCでまだ続いているようなので追記あると思います。笑

(追記)その後、IRCでは…

記事公開後、良い反響もらってたのですが、

<fuj***ra>伏せ字にしたけど社長にばれてる https://twitter.com/kunihirotanaka/status/294717386559459328
<typester>w
<aci***mon>個人的には伏せ字にしなくてよかったんじゃないかとおもっている
<aci***mon>というか伏せ字にしてもバレバレなのd
<ken*****walker>っていうかそこだけ伏せ字にされたら何でだろうって思うでしょw
<aci***mon>うん
<aci***mon>そのツイート引用して「バレちゃったので伏せ字やめました!」ってやったら面白そう(とかいう)
<ken*****walker>やるなら全部やった方がコソコソ感あるけど中途半端にやるならやらない方が良い

ということで…

sakuraceo.png

バレちゃったので伏せ字やめました!

超大規模サイトでもさくらでおk。

CSSで絵を描く!?今日から作れる達人のコツをご紹介

0
0

はじめまして! HTMLファイ部(内定者)の、のびーです。

4月の入社に向けて、せっせと勉強をしているアルバイターです。

jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました!!
http://jsdo.it/blog/2013/01/html5cat-update.html
リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます!

※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。

CSSだけで絵を描く!?

さて突然ですが、こちらのイラストをご覧下さい。

はい、絵本に出てきそうな、おひさまです。
そしてこのイラスト、実はCSSだけで描かれています

CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、
断言します。いまCSSお絵描きが熱いんです!!

今回の記事では、このイラストの作り方について説明しながら、
CSSお絵描きの楽しさを伝えられたらなと思います。

基本の図形 -○と△と□と-

ではさっそく、先程のイラストの解説を...と言いたいところですが、
まずは基本的な図形の描き方から、紹介しようと思います。

実際にjsdo.itで描いてみたので、クイズだと思って見てみてください。
それぞれの図形を、CSSでどうやって描くのか分かりますか?

四角形と丸の描き方

まず四角形は、簡単ですね。
HTMLの要素は放っておけばみんな四角いので、
大きさと色(background-color)を指定すれば、めでたく長方形が描けました。

丸もなんてことはありません。
要素の角を丸くする、CSS3のborder-radiusを使えばOK。
下のアニメーションも参考にしてみてください。

四角い要素の
border-radiusを大きくしていくと......
丸くなる!

三角形はborderで!

ちょっと謎なのは三角形です。
三角形は、丸のように四角形に手を加えて描くことは難しいですね。
ですが、実はborderを使うと描けるんです!

右と左を無色のborder、
下を黒のborderにしておく
widthとheightを小さくしていくと......
三角形が現れた!

バツ印は組み合わせと回転!

バツは、長方形の交差と考えれば、2つのパーツに分けられますね。

2つの図形を組み合わせて何かを描きたい場合は、
もちろんHTML要素を2つ使ってもよいのですが、

疑似要素:afterや:beforeを使って表現すれば、
HTML上では1タグだけで描けます。

パーツが2つ作れたら、それぞれCSS3のtransform rotateを使って回転させましょう。
これでバツ印もプラスも描けますね!

どうでしょう? なんとなく描き方のイメージがつかめたでしょうか?
実際のコードを詳しく見たい方は、上のサンプルのCSSタブから読んでみてください。

おひさまは影でできている

さぁ、丸や三角が描けるようになったところで、もういちど最初のイラストを見てみましょう。


まず、HTMLがdiv1個しかないわりに、図形がたくさんありますね。
半円や、ウィンクした目の形も、出てきました。

本体と周りのほわほわ

このように、要素の数より描いてるモノのほうが明らかに多いときは、
どうすればよいのでしょう? 鍵はCSS3のbox-shadowです。

box-shadow: 5px 5px 5px black;

要素に、簡単にこんな感じのドロップシャドウを付けられるbox-shadow、
実はコンマで区切ることで、影をいくつも付けることが可能です。こんな感じ。

box-shadow: 5px 5px 5px black, 100px 5px 5px black, 200px 5px 5px black;

全然関係ない場所に影が出ましたね。
そしてこれらの影には、それぞれにぼかしの半径・カラー・サイズ調整を設定できるので...

box-shadow: 5px 5px 5px black, 100px 0px 0px -5px red, 200px 0px 0px -10px blue;

わーい、こんなこともできます!
つまり、box-shadow を使えば、
元の図形と同じシルエットの図形を、好き勝手に増やしまくれるのです。

おひさまと周りのほわほわは、これを使っています。
本体の形状を円にしたあと、
サイズをかなり小さく設定したbox-shadowを、周りに配置しています。

また、目の部分も同様に、box-shadowをフル活用しています。
ポイントは、おひさまの体と同じ色の丸を、黒丸にずらして重ねることで、ウィンクした目を表現しているところです。

ぱっくりと開いた半円形の口は、widthとheightをゼロにして、borderだけで描いています。
border-topとborder-rightだけに色をつければ、ばっちり半円になるはずです。

達人の作品たち!

おつかれさまでした! これで、CSSで絵を描くために必要な知識は、ほとんど紹介しました。
あと必要なのは、これらをどうやって組み合わせるか、というアイデアです!

そこで今度は、CSSお絵描きの達人たちが、jsdo.itに投稿した作品たちを紹介していきます。
みなさん、クオリティの高いキャラクターの絵を描いていらっしゃいますね!

また、CSSで描けばアニメーションとの相性も良いですね。
そうした演出の方法にも、注目してみましょう。

1DIV リラックマ(Firefox推奨)

1DIV クマ吉 forked from: 1DIV リラックマ

CSS3でサルをカク

CSSでキュウべえ(FULL)を描いてみた

体装着 forked from: 口パク forked from: しゃべる(chromeのみ) forked from: 植毛済み forked from: CSS3のミサワ

CSS3で笑い男

お絵描き教室、まとめ

いかがだったでしょうか?
CSSをマニアックに使ったお絵描き、興味を持って頂けましたか?

では最後にまとめとして、CSSでお絵描きをする工程を整理してみます。

  1. 描きたいものを決める
  2. 細かくパーツに分ける(丸・三角・四角・その他・これらの変形)
  3. ひとつひとつ描いていく
    • 丸や四角なら、要素をそのまま使って描く
    • 三角や扇形、直線や円弧なら、境界線を使って描く
    • 丸や四角をたくさん描きたいなら、box-shadowを使う
    • 必要に応じて、:afterや:beforeを使って図形を増やしてもいい
  4. position:absoluteやposition:relativeやmarginをうまく使って、それぞれのパーツを位置合わせする。

この流れにそっていけば、たいていのものは描くことができるはずです!

お絵描きを習得したあなたへお知らせ!

jsdo.it内で行なわれている、
第二回全国統一 HTML5実力テスト 応用編コース
今日から受験可能となっています。

応用編の問題は、以前より更に実践的になりました。
問題の形式も「ドラッグ&ドロップで穴埋め問題」「コード記述問題」など
実際のコーディングに近いものになっています。

そして実は、この応用編のHTML/CSSコースの中に、↓こんな図形をCSSで描く問題があるんです。

パックマン

この記事を最後まで読んで来た皆さんには、もう簡単ですよね!

「ちまちま選択するだけの問題じゃ簡単すぎるわ! ものたりないね!!」というあなたや、
「プログラミングは直接書くものだよ! 記述問題なら自信ある!」というあなたも、
もちろん大歓迎! ぜひ今回の応用編を受験してみてください。

Screen Shot 2013-01-29 at 2.33.05 PM.png

http://jsdo.it/event/html5cat/2012/autumn/

HTML5実力テスト 応用編で、みなさんがスキルを披露しに来てくれるのを、
楽しみに待っています!!

遂に出た!3Dプリンタが出力できる3Dプリンタ!最速レビュー #エイプリルフール

0
0

いま話題の3Dプリンタとは?

3Dプリンターとは、紙に出力する2Dのプリンタとは違い、樹脂などを使い、実際に立体のモデルを出力できるプリンタのことをいいます。

以前は、価格が高く、一般には手の届かないところにあったのですが、
ここ最近、小型化された安価な3Dプリンタが販売されるようになり、
2013年は、3Dプリンタがますます普及していくと、いくつかニュースにもなっています。

そんな中、ついに3Dプリンタが出力できる3Dプリンタが発売されました!

3Dプリンタで3Dプリンタを出力してみた!

1:まずは、3Dプリンタのデータをセットします

3Dプリンタのデザインデータは同封されているCD-ROMの中にあります。
templetes > special > 3dprinter
 
a0001_001907.jpg

2:気長に待つ

データをセットして出力ボタンを押してください。
出力には、丸1日かかりますので、気長に待ちましょう。
※出力中の立体物は、高温なので絶対に手を触れないでください。

165432_543972678988972_804079841_n.jpg

3:完成!

遂に完成!
(出来上がった3Dプリンタを囲み、喜ぶメンバーたち)

まさか、1日でもう1台手に入るとは!

この3Dプリンタさえあれば、もう3Dプリンタに困ることはありません!
ますます、普及することまちがいなし!

DSC_0370.jpg

最後に

さて、2013年のKAYAC Designer Blogによるエイプリルフール記事はいかがだったでしょうか?
今後も、ちょっと役立つ記事を書いていきますので、どうぞよろしくお願いします!

2012年エイプリルフール

幕末にできたFacebookページみつけた!

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

2011年エイプリルフール

Web制作業界最速?!CS10の新機能を使い倒してみた!

※この記事はエイプリルフール用に書かれたジョーク記事です。実際の3Dプリンターの機能ではありません。

みんなでつくるフォント「FONTA」に投稿された、秀逸すぎるタイポグラフィのまとめ

0
0

一人一文字 みんなでつくる!

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

このたび、最近リリースしたカヤックのサービス、
FONTA 一人一文字 みんなでつくるフォント
への投稿が1000文字を超えました。(ワーッ)

今回は集まった文字の中から、
制作チームも予想していなかった、秀逸すぎる作品を紹介します!

秀逸すぎるタイポグラフィのまとめ16選!

Unicode : E78CAB

この猫のまったりさ、たまらぬ!

Unicode : EFBC97

ラッキーセブンぽい雰囲気!?

Unicode : E5A3B7

この形状は、まさにツボ!

Unicode : E38394

この鳥の顔、「ピ」って言ってそう..

Unicode : E889B2

白黒で色を表現できるとは..! 色がついているように見える!

Unicode : E5BF8D

カッコいい! もはや元の文字にも剣と手裏剣が見えてきますよ

Unicode : E38396

ブヒーッ

Unicode : E38397

この発想、ぶっ飛んでやがる..ッ!

Unicode : E38287

よぉっ!

Unicode : E4BAAC

一見さんお断りやでぇ〜

Unicode : E4BB8A

よく見ると..これは..!?

Unicode : E98086

文字が逆なんじゃない! あなたが逆なんだ!

Unicode : E7B89E

ずっと見てると蜃気楼(?)のようにも見えてきました

Unicode : E78B99

「狙う」といえば... この男だ!!!

Unicode : E5BA97

いらっしゃいませー!

Unicode : E9AEAA

寿司食いたい

ところで、FONTAってなに?

FONTAは、一人一文字みんなでフォントをつくるサイトです。
日本語フォントは約7000文字。ユーザー約7000人で一つの手書きフォントをつくります。

みんなでつくったフォントは、
ダウンロードして使ったり、Webフォントとして使ったりできます!

もっと見たいかたは、是非サイトまで!

今回は投稿の中から、ごく一部を紹介しました。

もっと投稿された文字を見てみたい方、自分も書いてみたい!という方は
是非サイトにアクセスしてみてください〜!

FONTA ( http://fonta.kayac.com )

※ 一人一文字なので、1回しか書けません!注意ッ!

これだけは抑えておきたい! jQuery や CSS の「イージング」の基礎知識

0
0

初めまして!
14年新卒で入社予定の、HTMLファイ部のゴンです!

現在は入社前インターンシップとして、カヤックに通い、
一流のマークアップエンジニアになるべく、研鑽を積んでおります。

今回は、CSSアニメーションやjQueryで使う、イージングの話を書こうと思います。

イージングの話!

イージングとは

イージングは、CSSアニメーションやjQueryで、アニメーションに緩急をつけるために使うプロパティです。
CSSやjQueryでアニメーションを作るとき、ease-inとか、linearとか、設定することがあると思います。

CSSではanimation-timing-functionjQueryではEasingと呼ばれるものです。

いろんな呼び方があるとは思うのですが、この記事ではイージングで統一します。

下はjQueryでアニメーションをするときの例です。

$("div.ball").animate({
    left: "300px";
}, 3000, "easeInQuad");

この"easeInQuad"にあたる部分が、イージングです!
イージングを設定することで、動きに、勢いや波をつけることができます。

イージングを設定して、ボールを左右に動かしたものがこちら!

ball_in_quint.gif

ちなみに、イージングがないとこんな感じです。

ball_linear.gif

イージングを使いこなそう!

イージングは結構、種類が多いです。
例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています!

でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか?
今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、
それぞれのイージングの特徴と、使いどころを紹介します!

ちょっと、注意事項

CSSや、jQueryでのアニメーションのやり方

今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
CSSや、jQueryでのアニメーションのやり方については、以下のリンクなどを参考にしてみてください。

thumb_jq_animate_ref.jpg
animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス

thumb_css_anium.jpg
今日からCSS3アニメーションを使えるようになるチュートリアル

CSSアニメーションの場合

jQuery Easing Pluginに沿って説明するので、基本的には、jQuery向けの解説になりますが、
CSSでもcubic-bezierというキーワードを使うことで、
jQuery Easing Pluginと同じイージングを使うことができます
イージングの対応表を調べたいときは、このサイトが便利です。

thumb_easing.jpg
Easing Function 早見表

接頭辞で動きが決まる!

先ほども書いた通り、イージングにはたくさんの種類があるのですが、
大きく、3つに分けることができます!
名前をよく見ると、easeIn○○とか、easeOut××とかになってますよね。
この接頭辞は、動きがだんだん速くなるのか、遅くなるのかを表しています。

easeIn○○

ball_in_quint.gif

だんだん速くなるイージングです。
急に止まる印象を受けるので、使いどころは少ないかもしれません。

easeOut○○

ball_out_quint.gif

だんだん遅くなるイージングです。
レスポンスが早いので、マウスオーバーのアクションとかで使いやすそうです。

easeInOut○○

ball_inout_quint.gif

最初は遅く、途中で速くなって、また最後に遅くなるイージングです。
これも、滑らかに動くので使いやすいです。

○○の中身で緩急が変わる!

次に、接頭辞の後ろにつく、○○の中身を解説していきます。
easeInQuadとか、easeOutCubicとかです。
この部分は、遅くなったり、速くなったりするときの、緩急のつけ方を表しています。

一緒に載せるグラフは、横軸が時間で、縦軸が変化量(座標とか高さとか)を表しています。

それでは順番に行きます!

Quad

quad.gif
Quadは、一般的なイージングの一つです。
ちなみに、Quadは"Quadratic"の略で、"二次の"という意味の形容詞です。
とりわけ、二次関数のことを指してます。

自然な動きなので、基本的には、何に使ってもいいと思いますが、
特に、物が落ちるような動きに合ってます(二次関数なので)!

100ton.gif

どすん。

Cubic, Quart, Quint

cubic.gif quart.gif quint.gif
いきなりですが、3ついっぺんに解説します。
この3つは、非常によく似ています。

Cubicは、そのまま"Cubic"で、三次関数
Quartは、"Quartic"の略で、四次関数
Quintは、"Quintic"の略で、五次関数

それぞれ意味しています。
数字が増えてるだけですね。

数字が増えると、緩急が強くなります!
並べて比較してみました。

bars_1.gif

この3つは、Quadと違って、これ!といった使い道はありませんが、
緩急の強さを調整したいときに、覚えておくと便利です。

Sine

sine.gif
Sineは、三角関数のサインのことです。
三角関数で作られたイージングということですね。

わざわざ、Sineを積極的に使う方は、少ないかもしれませんが、使い道は多いです。
Sineはバネや振り子などの、波のような動きに使うとぴったりです(三角関数なので)!

spring.gif

なんだか理科の実験みたいですね......。
Quadに似てるので、これも使いやすいと思います。

Expo

expo.gif
Expoは、"Exponential"の略で、指数関数を表したりしますが、
普通の形容詞としても、"急激な"と言う意味があります。

その名の通り、かなり急な動きをするのが特徴です。
動きはQuintに近いですが、Quintより緩急が激しいです。

bars_2.gif

Circ

circ.gif
Circは、"Circular"の略で、"円の"という意味の形容詞です。
グラフが、円を1/4にカットした形になってるのが、わかるかと思います。

Circは他のイージングと違って、少し変わった動きをします。
加速するときが非常に速く、InOutで使うと一瞬消えるかのような速さ!

ball_inout_circ.gif

ちょっと癖のある動きかも......。

その他!

残りのものは、分類しづらいので、簡単に紹介します。

Backは、その名の通り、行き過ぎて、少し戻るような動きをします。 ball_out_back.gif

Elasticは、引っ張ったバネを離したときのような動きです。ぼよよん。
ball_out_elastic.gif

Bounceは、跳ねます(他に言いようがない)。 ball_out_bounce.gif

この辺は、見たままの動きです。
手軽に面白い動きをつけられるので、便利ですね。

まとめ!

その他以外を、全部並べてみました!

bars_3.gif

緩急が...
緩やか普通激しい
SineQuadCubicQuartQuintExpo(Circ)

(Circは動きに癖があるので括弧つきです)

覚えておくと良いポイントなど

  • 落下する動きには、Quadを使うとリアル
  • バネや振り子には、Sineを使うとスムーズ
  • 急な動きを付けたいときは、ExpoやQuintを使うといい感じ

もちろん、最終的には、自分の感覚に頼ることになると思いますが、
特徴を把握しておくと、イージングを選ぶとき、迷わずに済むことが増えるかもしれません。

みなさんもぜひ色々試して、イージングの面白さを感じてみてください!

最後に告知です!

カヤックでは、毎年、いろいろな新卒採用企画をやっているのですが、
今年はこちら!

thumnail_godo.jpg
1社だけの合同説明会|面白法人カヤック

30名近くのカヤック社員が、1人1人ブースを持ち、1社だけで合同説明会を開催します!

ギネスに載った男からTシャツ部部長、アイドルマニアに、なんと退職者まで!
社会人の方でも観覧可能だそうです。

2014年1月11日、秋葉原UDXにて開催します。
多くの方のご参加を、お待ちしております!


デザイナー『裏』説明会もある!1社だけの合同説明会

0
0

みなさんあけましておめでとうございます(´∀`∩)

意匠子です!

新年早々ですが、デザイナーに関係するカヤックのイベントのお知らせです!

中途もOK!即内定もあり!1社だけの合同説明会!

ざっくばらんに話ができるデザイナー『裏』合説!

 

どちらも1月11日(土)、つまり今週の土曜日にやりますよ!

詳しくは続きで!!

1:中途もOK!即内定もあり!1社だけの合同説明会!

秋葉原UDXにて説明会をやります!

デザイナー陣もブースを出しますよ。

アイデアのネタ帳やらポートフォリオ術といったデザイナーらしいものから、

コスプレやらプロレスと怪しげなものまでいろいろ出してるので、ぜひ遊びにきてください!!!!

今回の説明会は新卒・中途どちらも参加可能です!

 

そしてなんと!

会場には「最終面接ブース」も登場!一日で内定することだってできちゃいます!!

その場で即内定!カヤックの説明会に『最終面接ブース』登場
http://www.kayac.com/news/2014/01/interview_booth_release

 

合同説明会については特設サイトがありますのでそちらをご覧ください!

1社だけの合同説明会

 

2:ざっくばらんに話ができるデザイナー『裏』合説!

そしてデザイナーは合同説明会のあとに、『裏』合同説明会があるらしいですよ。

オフィシャル感薄めなので、合同説明会みたいな人の多い場所では話しにくいことも話しちゃいます!

もちろんこちらの『裏』から合流も大歓迎ですので、昼間はちょっとって方もぜひいらしてください!

 

面白法人カヤックの『裏』合説@1月11日19時半
 

 
 

2014年ですね!

 
なんて言うまでも無いですが、もう2014年です!
みなさん今年のカヤックお年賀サイトはもう見られましたか?
今年のテーマはデザイナーが特に楽しめるものなので、ぜひそちらもご覧ください。
 
 
それでは、今年もよろしくお願いします〜

これで一撃!簡単にOGP画像をつくれる2つの秘密道具!

0
0

これで一撃!簡単にOGP画像をつくれる2つの秘密道具!

こんにちは!デザイナーのわりえもんです!
ドラえもんみたいな見た目の、のび太みたいななにかです。
デザイン制作に役立つ秘密道具を紹介します!

さて今回はサイト・アプリ制作に必需品な
Facebook OGP画像つくりに役立つ2つの秘密道具をお教えします!

facebook-ogpsd.png



2014年1月現在、OGP画像の表示には大きくわけて2種類あります。
一つの画像で、どっちの表示でもきれいにつくるのは結構悩みますよね。
のび太くんには到底つくれなさそうです。

でも、たった2つのの秘密道具で、OGPつくりは劇的に楽になります!


秘密道具その1 : ただ画像をいれるだけ!秘密のpsd!

秘密道具1.png

今回のために用意した秘密のpsd を用意しました!
こちらからダウンロードしてみてください!


PSD DOWNLOAD


「見せたい要素が横長」の場合


これは横長いロゴです。ロゴの部分がどんな表示でも切れないようにしたいですね。
これを全てのパターンで上手く見せたい場合は、「visual-wide」のレイヤーを使います。


1. 画像を「visual」レイヤーの中にいれる

ogpsample-2.png
この黒いフィルターがかかっている部分が、「横長い表示」の際に、切り取られる部分です。 ここに画像の大切な部分がかぶらないようにしましょう!


2. 書き出す

「filter」レイヤーを非表示にして、保存するだけ!
ogpsample-3.jpg
書き出した画像をOGPに指定してみました!ばっちりですね!




「見せたい要素が縦長」の場合

ogp-sample_5.png
横長い画像ではない場合です。このロゴは正方形に近いですね。
これを全てのパターンで上手く見せたい場合は、「visual-square」のレイヤーを使います。


1. 画像を「visual」レイヤーの中にいれる

facebook-ogp-6.png
使い方は一緒です! この黒いフィルターがかかっている部分が、「正方形の表示」の際に、切り取られる部分です。


2. 書き出す

この場合は、「filter」レイヤーを非表示にして、
カンバスサイズを「1200x630」にして保存するだけ!
facebook-ogp-8.png
書き出した画像をOGPに指定してみました!こちらもばっちりですね!




秘密道具その2 : ただ画像を上げるだけ!OGP画像シミュレータ!


秘密道具_B.png

OGP SIMULATOR

カヤックのデザイナー/フロントエンジニア t.smallfield さんが制作した簡単OGPツールです!
画像をアップロードするだけで、全てのOGPのパターンを試してくれます!
さっきの「秘密のpsd」と組み合わせれば、確実にあなたの欲しいOGPが出来上がるはずです!




秘密道具をつかいこなして理想のOGPをつくろう!


comic-3.png

いかがでしたでしょうか? この二つの秘密道具であなたのOGPつくりが簡単に!
それではまた、お会いしましょう!


わりえもん



細かすぎて伝わらないアンチエイリアスの話

0
0

細かすぎて伝わらないアンチエイリアスの話

はじめまして、デザイナーの越後です。
webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く
画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。

そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、
少しマニアックなphotoshopでのフォント調整についてお話したいと思います。

ps-anti-aliasing.png

 

おさらい:photoshopのアンチエイリアスについては、基本的には5種類

Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、

なし / シャープ / 鮮明 / 強く / 滑らかに の5種類です。

tutorial1.gif

「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、
他の4つに関しては

  • シャープ:文字が太い / くっきり
  • 鮮明:文字が細い / くっきり
  • 強く:文字が太い / なめらか
  • 滑らかに:文字が細い / なめらか

のように、文字のぼやけ方が変わります。

 

細かくて伝わらないアンチエイリアスの調整

細かい話1:基準点を調整してくっきりさせる

ではここから、細かい話に入って行きます。
photoshopでテキストを打つ時に大事になるのが、テキストの「基準点」です。
Cmd + T で選択範囲を表示し、基準点の位置を調整してみましょう。

tutorial2.gif

例えばX座標を調整すれば、
このように横方向のぼかし具合が変わってきます。( KやYなどがわかりやすいです。)

text_sample1.gif

そして同じようにY座標でも調整できるのですが、
ここで一点ご注意を。
「シャープ」と「鮮明」に関しては、
縦方向の調整が繰り上げになってしまいます。

※:何ピクセルで繰り上げになるかは、基準点やフォントサイズにより変化します。

text_sample2.gif

つまり、
細かい調整をきっちりやれば、「シャープ」や「鮮明」よりも
「強く」や「滑らかに」の方が、文字をくっきりさせられるのです。

 

細かい話2:スマートオブジェクトで、アンチエイリアスをさらに調整する

先ほどは、どのアンチエイリアスを使用するか?という選択の話でしたが、
ここからはスマートオブジェクトを使い、アンチエイリアスの自体の調整をしていきます。

と言っても、テキストをそのままスマートオブジェクト化するのではなく、
一旦拡大したテキストをスマートオブジェクト化し、
再度同じサイズまで縮小
します。

smartobject.gif

こうする事で、拡大された文字に対して「画像としてアンチエイリアス」がかかり、
なめらかさを調整する事が出来ます。

smartobject_sample.gif

その都度基準点を調整しなおすことになり、少し文字が太くなってしまいますが、漢字など込み入った部分の精度を上げる事ができます。

拡大率 / 縮小率 = 100%になればどんな組み合わせでも可能なので、お好みでどうぞ。

一見万能に見えるこの方法ですが、psdが重くなりがちであったり、
文字修正が入った場合面倒な事になるので、(文字サイズ増えてはみ出したりすると消えます)
僕はタイトルやナビゲーションなど、奇麗に見せたい大事な箇所にだけに使っています。

 

細かい話3:シェイプ化で、さらに弱めのアンチエイリアスをかける

先ほどのスマートオブジェクトでの調整で若干文字が太く見えてしまうのは、
「アンチエイリアスのかかったテキスト」をさらに「画像としてアンチエイリアス」をかけているので、
2重にアンチエイリアスがかかってしまっている状態だからです。

では、純粋にテキスト情報だけに「画像としてアンチエイリアス」のみかけるにはどうすればいいのか。
それはテキストをシェイプ化することで対応できます。

shape.gif

かかり具合からすると、シャープ > 強く > シェイプ化 > 鮮明 >滑らかに とった所でしょうか。

shape_sample1.gif

先ほどのスマートオブジェクト化のものと比べても、線が弱めになりました。

shape_sample2.gif

ただし、一度シェイプ化してしまうとテキストを打ち直す事は出来ないですし、
文字間の調整等がとても面倒になるので、余程の事がない限り僕は使っていません。
どうしても使う場合は、必ず元のテキストをコピーしておくと良いでしょう。

 

まとめ:方法は色々あるが、実際やってみないとわからない。

今回は、変化が解りやすいように「ヒラギノ角ゴ13px 」のベタ打ちで検証させていただきましたが、
フォントの種類やサイズ次第では、素直にシャープを使った方が奇麗な場合もあります。
さんざん言っておいて何だ!というご指摘もあるかと思いますが、

大切なのは
「とりあえず鮮明にしとくか」「文字薄いから強くでいいや」と思考停止になるのではなく、
まだまだ奇麗に出来る可能性があるので、色々ためして見つけて行きましょう!という事です。

この他にも、皆さんがお持ちの良いテクニックがありましたら、コメントやTwitterなどで是非おしえてください!
それでは、よいphotoshopライフを!

未来をつくるサービスのブランディング術

0
0

img_01.jpg
コミュニティサービスLobiのリードデザイナーを担当しているshiihoです。
2013年5月にナカマップからLobiへとサービス名称を変更しました。
今回はその変更時に行ったリブランディングの手法を公開しようと思います。
(本記事で公開されてるリサーチ画像は2013年5月以前に制作されたものです。)

Lobiとは?

lobi_01.jpg
「ロビー」。 それは、ゲーム用語でプレイの前に
"みんなが待ち合わせする場所"のこと。
ゲームをテーマにチャットなどを使用してユーザーが交流できるサービスです。
Lobiは、このキーワードをテーマにブランディングを行いました。

テーマカラーの変更

サービスのスケールアップを考えた時に
他にはないカラーリングを目指しました。
それを確立することで強いブランドを作る事ができます。

まず市場のリサーチ

img
こちらは、2012年10月19日金曜日の21時ころのApp Storeのランキング
1232個のアイコンから統計です。
(Excite Designer's Blogから引用をしています。)
図からも分かるように青系は圧倒的に多いという事が分かりました。

color_01.jpg
知名度のあるサービスを色別に並べてみました。

color_02.jpg
メインカラーがオレンジのアプリも調べてみます。

上記をふまえて競合の少ないカラー、ロビーという言葉に合う楽しい雰囲気を
表現できるとして、オレンジをメインカラーに選択しました。

ロゴデザイン

各サービスのロゴ比較

logo_01.jpg
規定フォントをベースにしたロゴが多い印象です。
また、Path、Vine、Pinterest のような一筆書き風のロゴがトレンドでした。

方向性の模索

logo_02.jpg
ロビーやゲームをキーワードにして、ロゴの方向性を決めて行きます。
最終的に絞り込まれたのは画像のような3案
他のサービスにはないクリエイティブ、
ゲームというキーワードを強く連想することを考え
ドット文字パターンのロゴを採用しました。

完成

logo_03.jpg
こちらが完成版のロゴになります。
ゲーム+コミュニティというコンセプトを表現できたと思います。

アプリデザインの方向性

市場の調査

design_01.jpg
こちらでも市場のデザイン調査をしました。
この頃はiOS 7がリリース前で、業界でもフラットデザインがちらほら目につく状態でした。
スキュアモーフィズムが全盛期で、フラットデザインに対応できた事により
iOS 7 リリース後も大きなデザイン修正を行う事はありませんでした。

完成

app_01.jpg

リリース後について

機能やUI面ではナカマップと比べ、大きく変化はありませんでした。
その変わりメインカラーの変更に対するお問い合わせが多かったように感じます。

  • オレンジという色が疲れる
  • 前のブルー系が好きなので戻してほしい
などの声がユーザーから届きました。
こちらは徐々にオレンジの色を調整するなどの微調整を行っています。
今ではオレンジかわいいとの声をもらえるようになりました。

仲間募集中!

いつもLobiを使用している皆様、ありがとうございます。
今後も楽しいサービスを目指してスタッフ一同頑張っております。

また、Lobiではデザイナー、エンジニアを募集中です。
一緒にサービスを盛り上げてくれる方をお待ちしております。

デザイナーはこちら
サーバーエンジニアこちら
アプリエンジニアこちら

Unityやるには必須!RGBA画像減色の基礎をまじめに書いてみた

0
0

Unityでのゲーム開発でも画像の軽量化がかかせません!

 
軽量化は主に以下の4点の取り組みで行います。
・画像を小さくする
・使う画像数を減らす
・画像を分割する
・変換して画像サイズを減らす
 
ウェブや一般的なネイティブアプリ開発と同じかなと思われるかもしれませんが、

UnityではPNGやJPEGとは異なる画像方式を用います。

RGBA32bit / RGBA16bit / ARGB32 / PVRTC / ATC......

 
当然仕上がりや対処も異なってきます。
 
今回はその中でも1番よく使うRGBA16bit(RGBA4444)について必須の基礎知識をお話します。
 
いつもなら最初に結論書いてしまうんですが、今回は過程も知識として知っておいてもらいたいので、まじめに書いてみました。

なかなか難しい話なので長くなってしまいましたが、ぜひ一度目を通しておいてください!

今回は変換形式の中でも代表的に用いられるRGBA16bitの話をしていきます。

本題の前に1番間違えやすいポイントを紹介します!

Unityで使う画像は必ず変換処理をされるので、デザイナーが作った画像とファイルサイズや画質はそのままでは使われません!

ウェブ制作のようにPNG8に変えて軽量化!・・・だと意味がなかったり、悪くなったりします。
 
ではどう変わってしまうのか?それをご説明します!
 
 
 

そもそもRGBA16bitとは?

まずはRGBA16bit(RGBA4444とも言う。以下RGBA16)の説明です。
 
RGBAとはカラーチャンネルと言われるR(赤)・G(緑)・B(青)の3色と、アルファチャンネルと言われる透明度をコントロールするα(アルファ)の4つのチャンネルを指します。
 
16bitとは1pixelが持っている情報の量です。
さっきのRGBA4チャンネルそれぞれが4bitずつ情報を持っていて、4x4の計16bitの情報を持つことができる形式です。
これは1色につき16階調が使えることを示しています。
 
ちなみに僕らがよく使うPNGと比較するとこうなります。
00.png
[図 PNGとRGBAの最大色数と使用可能色数]
 
 
使える色の数が違いますね。
PNG24の画像をそれぞれ変換するとこんな風になります。
01.png
[図 PNG24/PNG8/RGBA16bitの対比画像(ディザなし)]
 
RGBA16bitとPNG8は色と色の間に段々となっているところが見えますね。
RGBA16bitのほうが少しはましなようです。PNG8に比べたら少しは使えるという感じでしょうか。
 
 
ここでおやっと思った方いますね。
結局RGBA16っていうのはPNG8よりちょっときれいな画像でしょって。
 

それでは次に一番大事なポイントであるPNG8とRGBA16bitの違いを説明します。

 
さっきとは別のサンプルで比較してみましょう。
 
02.png
 
[図 単色での比較画像]
 
いかがでしょうか。
PNG8が遜色ない見た目なのに対し、RGBA16は変わらず段々となってしまいました。
 
これがPNGとRGBAの違いになります。
 

色鉛筆に例えてみると

PNG8は24色セットの色鉛筆から好きな8本まで使えるのに対し、RGBA16は12色セットから好きな色が使えます。
一見するとRGBA16のほうがたくさん色が使えるように見えます。(色数は例えです)
 
ogp.png
[図 色鉛筆]
 
RGBA16の12色の中に使える青は何色あるでしょうか。2色・3色?
PNG8は使える数こそ少ないですが、選べる色鉛筆はたくさんあります。
青だけでも5・6色あるので、青のグラデーションならきれいにつくることができるのです。
反面、たくさんの色を塗るのは苦手です。
 
だから色が単色に近い画像ほどPNG8の再現性は高くなります。
このことが頭に入っている人がいつものようにPNG8へ変換する前提でデザインを作っていると・・・大変なことになりますね。
 

PNG8→RGBA16をやるとこんなことになるかもしれません

PNG8に変換した後にRGBA16bitにすると・・・?
 
04.png
[図 多色画像を一度PNG8にしてからRGBA]
 
左の画像は一度PNG8で色を落としてしまったのでRGBAが本来表現できるはずの色が失われてしまいました。
 
 

ここで今回のポイントです

RGBA16にするときには事前に減色処理をしない

僕はここにひっかかりまして、いくらPNG8で128色とか色数を減らしてもゲーム上では意図したものが表示されずに悩んでいました。
画像はPNG24で書きだしてそのままRGBA16に変換!
 
(よく似た名前のRGB16bitもRGBA16と原理は同じです。A(アルファ)が使えない分、RGBの色数が少し増えています)
 
 
 

ちなみにPVRTCは?

RGBAと同じくよく使われますPVRTCはどうなんでしょう。
 
こちらは色数ではなく圧縮率でコントロールしますのでJPEGと似た感覚です。最終的な画像サイズはRGBA16より小さいです!
 
ただし輪郭線やアルファ領域周辺が汚くなるので、用途が限られます。
 
画像サイズも2の累乗しか受け付けません。
 
こちらの原理を詳しく知りたい方は下記のブログを参照ください。
 
よくこんなもの考えたもんだと感心します。
 
 
ちなみに個人用途では厳しい金額ですが、上のブログ主が提供しているイメスタがあると今日のブログの内容は概ね知らなくても解決してしまいます( ;´Д`)
(決して宣伝目的ではありませんが笑 )
 
 
 

きれいなRGBA16bitをつくるには?

 
話を戻します。
 
ここまでで原理についてはお話しました。
RGBAは色数が少ないので、どうしても汚くみえることがでてきます。
 
ではどうやってきれいなRGBA16bitの画像をつくるのか。いよいよ本題です。
 
ポイントは3つです。
 

1:単色はRGBA16bitに対応した色を使う

2:グラデーションは避ける

3:最後はディザリングを使う

 
 

1:単色はRGBA16bitに対応した色を使う

これはシンプルです。

使える色だけを最初から使えばいい

色鉛筆で言うなら、12本セットに入っている色でデザインをしようってことです。
 
05.png
[図 色による変換結果の違い(ここだけわかりやすく見えるようにディザリングを使用)]
 
 
変換の際に色が置き換えられてしまうことを防ぎます。
グラデーションの無いベタ面が大きい画像ではかなり有効です。
 
じゃあどれが対応している色なのか。以外にこれは簡単です。
 
「22AA00」のように2つで1組になるような色が16bit対応カラーです。
(全部使うと32bitだからその半分って覚えてもらえれば)
 
Webセーフカラーも似てはいますが、あちらはさらに色数が絞られているので使わないのをオススメします。
 
 
 

2:グラデーションは避ける

今までのサンプルのように、グラデーションは苦手としています。

細かい範囲ならばいいですが、大きい面での特に色数が少ないグラデーションは避けましょう。

 

3:ディザリングを使う

 
とはいえ、グラデーション使うよ!ってなります。あと写真やイラストは?
 
そのためにはディザリングです。
 
GIFやPNGでお馴染みの人も多いので、ディザについては説明を省きます。
 
06.png
[図 ディザリングありなしの比較画像]
 
こんな感じである程度は人間の目に中間色を感じさせてくれます。
 
これぐらいはみんな知ってるよって?そうですよね。
ただ気をつけて欲しいのが一点あります。
 

Unity上でRGBA16へ変換する際にはディザリング処理をかけてくれません

なので変換前にRGBA16のディザリング処理を行わないといけないのです。
 
例えばこんな方法でできます。
 
 

フォトショでフィルターを使って処理をする

こちらで提供されているフィルターを使うとフォトショでRGBA16bitに対応したディザ画像をつくることができます。
 
今日のブログのRGBA16画像もこちらでつくりました。
 
(12bitとあるのはαチャンネルの4bit分を除いているからです)
 

PNGquantやImageMagickを使う

 
これらは画像変換の専用ソフトです。
 
注意して欲しいのはこれらのソフトにはPNG用の減色設定もあるので、
間違えてしまうとさっきのまでの話のように劣化してしまいます。
 
設定にご注意を。
 
 

ーーまとめーー

 
 
なかなか僕自身が理解しにくかったこともあって、ちゃんと伝えたいという思いの余りだいぶ長くなってしまいました。
 
実はディザリングは画一的な処理ではないのでプログラムによって結果が異なります。
(やはり有料のソフトの方がいい結果が出るようなので余裕のある方はそちらも検討してみてください)
 
 

今日のポイントのまとめ!

 
★RGBA16bitにする場合は事前に他の圧縮や減色はしない!PNG8はもってのほか
 
★色は「3300AA」のように指定して色が変わるのは防ごう!
 
★Unityに組み込む前にディザリングしよう!
 
 

参考サイト・ソフト・プラグイン

 
 
 
 
 
 
 
 
 

ーーここからは小ネターー

ディザは嫌だ!

 
きれいに見せるには使う時もある。そうは言ってもつぶつぶして嫌だ!って方向けのネタ。
 
画像をUnity上で少し小さくしてみましょう。
ディザが掛かるのは変換時なので、Unity内で縮小すると描画される際に補完処理が入ります。
 
するとディザが消えます。
 
画像毎にサイズをいじる手間が発生しますので、開発者とご相談のうえ用いてください。
 
また、拡大した場合はつぶつぶは消えません。
 
 
 

アトラスを軽くしても意味がない?

どんなにアトラスの画像サイズを軽くしても意味がありません。
 
Unityに入るときに再変換されるからです。
 
また、アトラス中の画像1枚1枚を個別の設定で減色するのも意味がありません。
アトラスは1枚として同じ圧縮方法にかけられますので。
 
また16bitより制限のあるRGBA8bitはUnityで対応していないようですので、必要以上に全てを減色しても結局変わりはないようです。
 
それでも重い!って時は画像の数を減らしたり大きさを小さくしてアトラスの大きさを変えるか、そもそもの画像の管理方法の見直しをオススメします。
Viewing all 239 articles
Browse latest View live




Latest Images