40秒以内シリーズ。(仮)

こんにちは。ククリよりジュジュ派のせきねです。

突然ですがみなさん、
「そこにあったと思った魔法陣がなかった」
「いまこの場に魔法陣があれば！」
「魔法陣にしてから5cmも伸びました！」
なんてことありませんか？

今回はそんな悩みを解消する、
"Photoshopのツールとキーの複合技で素早く＆お手軽に魔法陣っぽい模様を描く方法"を紹介します。
「40秒以内に魔法陣を描かないとヒドイ目にあう...」というような時に役立ちますよ( ＾ω＾)9

手順

1. 新規レイヤーを作成（ダイアログなしで作る win : Ctrl+Alt+Shift+N / Mac : Command+Alt+Shift+N）
2. 適当な線を引く（Bで鉛筆ツール）
3. 線をちょっと回転させる（変形 win : Ctrl+T / Mac : Command+T）
4. 変形複製をしながら回す（複製しながら変形繰り返し win : Ctrl+Alt+Shift+T / Mac : Command+Alt+Shift+T）
5. できた！

簡単にまとめると「適当に書いたものをクルクルとコピーしながら回す」という感じです。
vimeoとQuickTimeの撮り方を最近マスターしたので作業動画もupしました。参考までにどうぞ( ＾ω＾)つ

[40 secons] Magic circle [Phoroshop] from Satoshi on Vimeo.

基本的にどんな形でもそれっぽい形になります。丸とかカスタムシェイプツールのものなどでも。

[40 secons] Magic circle [Phoroshop] from Satoshi on Vimeo.

[40 secons] Magic circle [Phoroshop] from Satoshi on Vimeo.

きっつい色つけて作るとアバンギャルドな芋虫みたいになってかわいいですね( ＾ω＾)b

あっという間に、11月も折り返し！
梨がおいしくて元気いっぱいのbarimiです！

さて、来週末に開催される、WebSig1日学校〜未来のあなたのWebを変える1日〜に登壇させていただくこととなりましたので、告知させていただきます。

WebSig1日学校〜未来のあなたのWebを変える1日〜

担当は国語！

今回担当させていただくのは、国語。

日頃の制作を通して感じること、Webデザイナーとしての考えなどを、面白法人カヤックテイストでお伝えしたいと思います。

（株）カヤック　林　真由美（はやし　まゆみ）
デザイナークラス：デザイナーのための国語

プロフィール

面白法人カヤックのWebサービスをはじめ、プロダクト、書籍、モバイルなどさまざまなデザインを手がける。
また、1アイデア100円から販売する元気玉や、ビンボーゆすりを科学したプロダクトYUREXなど、面白法人カヤックのアイデア事業を担当。
Web Site Expertにて「面白法人のアイデアハック」を連載中！
いろいろなことに手を出しつつも、日々営業メール（撒餌）を送ることは怠らない。大量捕獲系を得意とするゆるキャラ系女子 デザイナー。

Twitter：@barimi

面白法人カヤック

授業内容

「デザイナーの国語：PAMiっていいとも！ ～面白法人のデザインアワー～」

はい、というわけでbarimiがお送りする
PAMiっていいともですけども、 
技術先行でもあるWeb制作業界。
毎年新しい技術やプラットフォームが出てきてますね！
注目すべきはPC、Android、Mobile、iPhone,iPad。（略して PAMi♥）

デザイナーはユーザー、クライアント、エンジニアそれぞれの中間に立ち、
どう技術を翻訳し、クライアントに提案するか !?
そして、その先のユーザーに届けるか !?
また、ユーザー、クライアントのニーズを
どう、エンジニアに伝えるのか !!
ビジュアル表現だけでなく、国語を駆使することにより、
ユーザー、クライアント、エンジニアそれぞれに分かる言語で
表現することが重要となってきていると思います

デザイナーとしてPAMiっていくにはどうしたらいいか !
今回は面白法人でデザインと技術でどんな感じでPAMiってきたか
を事例交えてお話させて頂いちゃいます★

今日はみんなが今後このPAMiってる時代を
うまくPAMiってイケるようにPAMi変格活用をレクチャーしちゃうよ♥

マラソンに夢中！　nonakaです。
毎週通販サイトのhtmlメルマガを作っているので、他の通販サイトのメルマガも多数購読してます。
今回は、通販サイトのhtmlメルマガを集めてみました。

通販サイト　html形式メルマガまとめ

セレクトショップ：BEYES（バイズ）

【メルマガの横幅】600px。
【構成】バイヤーからの一押しアイテム、毎週更新される特集ページバナー、新商品情報、ファッションコラムなど。その他、購入者限定のメルマガも配信してます！

靴下専門店：Tabio（タビオ）

【メルマガの横幅】713px。
実際のメルマガ用のhtml
【構成】雑誌掲載商品、季節のリコメンド、ランキングなど要素が豊富！

無印良品

【メルマガの横幅】569px。
実際のメルマガ用のhtml
【構成】バナーが縦に並ぶ構成が多い。 facebookやtwitterの案内もさりげなくヘッダーに入っている。

zozo

【メルマガの横幅】580px。
【構成】大きな画像が1つでの構成が多い。 いつもインパクトあります。

イマージュ

【メルマガの横幅】740px。
実際のメルマガ用のhtml
【構成】TOPバナー、挨拶文、特集バナー、新商品羅列の構成が多い。 このメルマガ毎週これだけの構成、制作者は大変だろうな～と毎度思いますw ワイワイ感があります。

ELLE

【メルマガの横幅】メルマガの横幅700px。
実際のメルマガ用のhtml

ユニクロとジーユー

【メルマガの横幅】メルマガの横幅660px。
【構成】期間限定商品、men/women/kids商品、新発売予告など。これまた毎回手がかかっている。

MOMA

【メルマガの横幅】700px。
【構成】変わっているのが、サイトに貼れるタグをメルマガで提供してくれていることろ。

ニッセン

【メルマガの横幅】642px。
【構成】季節の特集バナー、新商品、コラムなど構成要素は豊富。

ハウススタイリング

【メルマガの横幅】580px。
実際のメルマガ用のhtml

【構成】季節の特集バナー、コラムなど

dinos

【メルマガの横幅】600px。
【構成】季節の特集バナー、セール情報など。たまにメーラーによっては崩れている。。。

いまは、テキストメルマガが主流のように感じますが、まだまだhtmlメルマガでがんばっているサイト多いですね！

今回はスパイクスアジア広告祭 デジタル部門のグランプリを検証！

受賞作品はどんなキャンペーンを
どんな切り口で紹介しているのかチェック！
そのテクニックを探ります。

2010 スパイクスアジア広告祭 デジタル部門　グランプリ作品
UNIQLO LUCKY SWITCH

エントリー部門

スパイクスアジア広告祭 デジタル部門

概要

クリックするとサイト内の画像をオンラインくじに変換するブログパーツ配布型のキャンペーン。
くじをめくってアタリが出ると、めくった人とブログのオーナー両方にユニクロオリジナルバックがプレゼントされる。ハズレくじはユニクロの年末セールの広告となっている。

目的

・年末セールキャンペーンの認知拡大

用いた手法

ブログサイトをユニクロ広告の媒体に変えてしまうブログパーツを配布。
ブログパーツを設置するオーナー、ブログパーツをクリックする消費者両方にオリジナルトートバックというインセンティブを与えることで、自発的に露出が増えていく仕組み。

ブログパーツをクリックすると、サイト内の画像がオンラインくじになる。
くじをめくり、はずれであればユニクロの広告が、アタリであれば、応募フォームがでてくる。アタリの景品であるトートバックは、限定1000個配布。

結果

ブログパーツが設置された総数：4,607
オンラインストアへの流入：46,396
バナー広告（オンラインくじ）がクリックされた総数：2,809,462

プレゼンテーション上の工夫

あらゆるウェブサイトが、ユーザーの手によってユニクロの広告になってしまうという面白さをわかりやすく訴求。
H&Mのサイトがユニクロの広告になってしまう様をサンプルに出すなど、
インパクトがあり笑えるポイントを差し込んでいる。
>>プレゼンテーション動画はこちらから見れます

クレジット

クライアント：UNIQLO
代理店: DENTSU Tokyo
制作会社:
IMG SRC, Inc.

受賞のポイント

ユーザーによって自発的に広告が広まっていくというキャンペーンの設計
インセンティブはとっても安価なトートバッグ
なのに、
参加の敷居がめちゃめちゃ低い
おかげで、
１ヶ月で280万回もユーザーの手によって広告が表示された。

ユニクロの知名度と、顧客層の特徴を生かすことで成り立った広告設計ですね。
トートバッグって使わないけど、タダで当たる！って言われるとついつい欲しくなってしまう。。。

ちなみに！

おはこんばんちは、イコヤマです。

「おはこんばんちは」とは、「おはよう」「こんにちは」「こんばんは」を合体させた、超便利な挨拶です。
確か鳥山明先生がアラレちゃんの中で言ってたような気がするんですが、違ってたらごめんなさい。
はい、どうでもいいですね！

それでは、今日も元気にKAYACサービスを擬人化します！
level０ちゃんでございます。↓↓

level0(レベルゼロ)ちゃん

level0はKAYACに在籍するフラッシュデベロッパーが持ち回りで書いてるblogです。
デザイナーズブログのフラッシャー版ですね。

年間500エントリーという脅威的な目標をかかげ、もりもり更新されています。

私も購読していますが、FLASHの専門的な内容はもちろんのこと、
すてきな動画のレビューやちょいチップスなど、
ノンフラッシャーでも楽しめる記事が盛りだくさん！

level0ちゃんスペック

• B95 W:59 H:87
• 魔法の呪文・アドイベントリスナーでなんでも解決！
• あたらしもの好き、動くの大好き、iPhone先生とは微妙にぎくしゃくしている

FLASHといえばリッチコンテンツの代名詞！ということで、level0ちゃんのおっぱいもリッチです。
さらに白黒のシュッとしたUIと青→紫のグラデが利いてるlevel0のカラーをイメージしております。

level0についてもっと知りたい方はこちら

それでは、アデュ！

A WORLD OF TWEETS

世界中のTwitter利用頻度をリアルタイムでビジュアライズ

o(●´ω｀●)oすごいワクワクする。

 

Visualizing the World Cup

ワールドカップ決勝進出12カ国の歴史を振り返る

o(●´ω｀●)oワクワクする。

 

HTML5 & CSS3 READINESS

使用中のブラウザの対応状況をビジュアライズ

o(●´ω｀●)oワクワクする。

 

Dribbble

Dribbleのインタラクティブなインフォグラフィック

o(●´ω｀●)oうっとりワクワクする。

 

For The Record

o(●´ω｀●)oワクワクする。

 

NIPPON COLORS

日本の伝統色

o(●´ω｀●)oワクワクが止まらないよ。

 

themanyfacesof

o(●´ω｀●)oワクワクする。

 

Wicked CSS3 3d bar chart

o(●´ω｀●)oワクワクした。

 

LINE25 InfoGraphic

チュートリアル:http://goo.gl/3D3kc

 

globalwebindex

選択項目がグラフィックになっている。遷移しながら見れるのがいいね。
o(●´ω｀●)oワクワクした。

 

RailsTips

フッターが月ごとの記事数のグラフになっている。
エレメントの一部がインフォグラフィックスなのは探せば沢山ありそうです。

ちょっぴりワクワクしたo(●´ω｀●)o

 

 

その他気になったインフォグラフィックス関連リンク

 

WTF is HTML5

http://goo.gl/IICje

 

Creative Examples Of Infographics

http://goo.gl/ZQGbf

 

ツイッターの歴史と現状が一枚の絵でわかるインフォグラフィック

http://goo.gl/gegZU

 

The Facebook Story In An Infographic

http://goo.gl/uJn8e

 

Color of the Year 2010: By The People [infographic]

http://goo.gl/hIryp

色に関するインフォグラフィックス

 

思わず見入ってしまうほど優れたデザインのインフォグラフィック50枚まとめ

http://goo.gl/r7lVy

 

The Best Infographics

http://goo.gl/7sWJt

 

FlowingData

http://flowingdata.com/

 

information aesthetics

http://infosthetics.com/

 

 

調べるときりがないのでこのへんで。

インタラクティブなインフォグラフィックのWebつくってみたいですね。

インフォグラフィックスについてもっと知りたい人にはこの本がおすすめ。

 

インフォグラフィックス—情報をデザインする視点と表現

街でみかけたポスターや広告

次は市場へ行ってみました

こたつにみかんはじめました。nonakaです。
週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！
ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。

「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン

セレクトショップ：BEYES

ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。

無印良品

ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。

ユニクロ

ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。

子供服：goodevening

ログイン画面、新規登録が上下にあるパターン。ログインと会員登録の分けていてすっきり見やすいですね。

「ログイン画面」エリア、「新規登録」エリアが左右にあるパターン

ビームス

ログイン画面、新規登録が左右にあるパターン。最近はこの左右に分かれているサイトが多いです。ログインフォームだけに枠線をつけています。

SHIPS

こちらも、ログイン画面、新規登録が左右にあるパターン。

ファッションウォーカー

こちらも、ログイン画面、新規登録が左右にあるパターン。ログインエリアだけに、グレー背景を引いていて、区別がつきやすいですね。

United Arrows

こちらも、ログイン画面、新規登録が左右にあるパターン。ログインエリアだけに、グレー背景を引いていて、区別がつきやすいです。

zappos

こちらは、以前流行った「ザッポスの奇跡」という本でも有名なZapposサイト。ログイン画面、新規登録が左右にあるパターン。

Gap

日本でもおなじみGapの通販サイト。Gapがどうして通販サイトないんだろ～と思ってましたら、グローバル展開している通販サイトがあったからなんですね～。そして、ログイン画面、新規登録が左右にあるパターン。ちなみにこのサイト、世界●カ国に配送してくれます！すごすぎる～

zozo

ログイン画面、新規登録が左右にあるパターン。新規会員ボタンを大きくしていて初めての人にわかりやすいです。

forever21

ファストファッションの先がけ、forever21の通販サイト。ログイン画面、新規登録が左右にあるパターン。会員登録のメリットが大きく書いてあります。ボタンが小さめですね。

ワールドダイレクトスタイル

ログイン画面、新規登録が左右にあるパターン。お知らせしたいことを上部に配置。すっきりしています。

スタイルクルーズ

ログイン画面がポップアップででてくる。画面遷移しないから便利そうですね。

エル・オンライン

ログイン画面の下に、同じグループサイトの会員登録を促すボタンが！一回の登録にできたらユーザーとしては便利そうな気がしますね～。

いろいろ見ましたが、ログイン画面は、・すっきり・みやすい・迷わない、というのが、ユーザーにとって使いやすいのでしょうね！

その他見た通販ファッションサイト

• OIOI web channel
• iLumine
• サンエー・インターナショナルグループ
• ヒステリックグラマー(公式通販)
• Rope(公式通販)
• JAYRO(公式通販)
• ローリーズファーム(公式通販)
• 帽子通販：ca4la
• 子供服：ミキハウス
• 子供服：イエッテ
• フレッドペリー(子供服もあり)

HTML5で出来たこのサイトがbいいね！って事で、
最近見たものからきょうBuzzってるHTML5のサイトを幾つかご紹介します。
 

 20 Things I Learned About Browsers and the Web

北極のホッキョクグマ | Ring Ring Wonder Christmas

kaleidoscope

A WORLD OF TWEETS

simo

良く出来てるHTML5増えてますね。
カッコbいいね！
o(●´ω｀●)oわくわくしたw
 

その他今日気になった記事＆サービス!!

Googleおみせメモ

http://www.google.co.jp/hotpot#

スティーブ・ウォズニアック：Appleは某日本企業と共同で2004年に携帯を出す寸前だった

http://goo.gl/0uo2t

Top Trends of 2010: HTML5

http://goo.gl/JA9Zv

こんにちは！

今日も携帯をクリックしすぎて手が筋肉痛のユリっぺです✿

今回は、携帯の「クリックしてもらえるボタン」を作ってみたいと思います。

携帯で遊んでいると、画像でつくられたボタンが選択されてるかわからない、認識しづらい、といった経験をしたことはないでしょうか。

また、携帯サイトを運営しているかたの中には「こんなに目立つボタンなのに全然クリックされない！」といった悩みをもった人もいるかもしれません。

そこで文字の部分はテキストを使ったボタンを作ってみました。

まずはじめに、tableの左右の隙間をすこし多めにとってみます。

(au)

<div align="center" style="text-align: center;">

<table align="center">
<tr><td bgcolor="#ffd70b">
<a href="#"><span style="color: #983237">　ボタンだよ　</span></a>
</td></tr>
</table>

</div>

このように隙間を多めにとると、なんとなくボタンっぽく見えてきました。

これだけだとさみしいので、テキストの左に小さな画像を追加してみます✿

じゃじゃん！

【三角のアイコンを追加】

【左上に画像を追加】

左が普通の状態で、右が携帯で選択したときの状態です(au)

小さな画像を入れただけで見た目もボタンになりました。

文字の部分はテキストなので、選択されたとき認識しやすいのがわかります。

しかも画像をほとんど使っていないので軽いです✿

このようにボタンを認識しやすくして、いっぱい押してもらい、ユーザーを見てほしいページにどんどん誘導していきましょ～(♥´艸`♥)

プロジェクション・マッピングが流行っているそうで。

なにそれ？って人も、
ああ流行ってるよねー好き好きって人も、
とりあえず続きからどうぞ！

The 600 Years

チェコの天文時計の600周年記念イベントで行われたもの。
ファンタジーですねえ。見てて鳥肌立ちます。ゾワゾワ。

Google で、もっと。Fashion Show with 画像検索

Googleのプロジェクション・マッピングを使ったCM。
バーチャル試着！楽しそう！やってみたい！
Googleで、もっと。

Ralph Lauren 4D

Ralph Lauren.com10周年と初のウィメンズフラッグシップストアの誕生を記念して開催された
ライブ・インスタレーション。うーんカッコいい。
フレグランスのシーンでは、その香りのミストが降り注がれる演出などもあったそうです。実際に見てみたい！！
サイトはこちら。Ralph Lauren 4D

Toyota Auris Hybrid: 'Get Your Energy Back' 3D projection mapping

車のプロモーションに使われることも多いみたいですね。これはTOYOTA。
ガシャンガシャーンって変形するところが好き。
Auris Hybrid. Get Your Energy Back

Mapping Peugeot RCZ

こっちはプジョー。
ちょっとレトロなSF？的な、ゲームの中に入り込む様な。TRONみたいな感じ。

SCINTILLATION

こちらはまた少し違う雰囲気。とても幻想的で美しい。
35000枚を超える写真が使われているんだとか！

New balance sneaker Projection mapping_01

ニューバランスのスニーカーに。
人が履いて歩いている状態　とかでもできるのかなあ。

などなど。海外ではもう定着している様ですね。
日本でも体感してみたいです。

こんにちは(✿´艸`✿)

今日は携帯を家に忘れて、何をしても落ち着かない一日を過ごしてます。

携帯中毒の　YURIっぺ　です。

今回はドットの素材を使った、軽い携帯バナーの作り方をご紹介します！

ついでにフリーで素材もお配りしてますので、気軽にダウンロードしてくださいませ。

手順１、まず始めに、ドットで描いた模様を用意します！

今回はシンプル（black）を使って作っていきます。(この素材はページの下の方でダウンロードできます)

手順２、ドットで作成した模様、シンプル(black)を好みの色に変えて２枚重ねます。

同じように3パターン用意しました。

画像右にある丸の中の拡大画像を見てみてください。ここで使われている色数はそれぞれ2色です。

色数を減らせば軽くなるgif画像で描きだすと166バイト前後でとても軽いことがわかります。

手順３、バナーの背景に手順２で作成した素材をいれます。

このバナーは、軽量化のために背景を単色で作ったのですが、どこかさみしい感じがします。

そこで、手順２で作った3枚の模様を入れてみました。

背景を単色でひいたときよりも、ドット模様の背景をひいたときの方が、だいぶ装飾された感じが出せたのではないでしょうか。

最後に吹き出しのセリフを追加して完成です。

gifアニメーションにしても、わずか10K以内のバナーができました。

ぼくらの甲子園(モバゲー)のバナーより

おまけ、下の素材は、ダウンロード自由です。バナーのデザインに合わせて、自由に使ってみてください(♥´艸`♥)それではまた～

素材をダウンロード

YURIが先週書いた記事はこちら↓

・2010年11月19日「PCサイトの常識が通用しない！携帯サイトでクリックしてもらえるボタンの作り方」
 

ソーシャルゲームとスマートフォンアプリのデザインを行ったり来たりのhashimotoです。
今回はソーシャルゲームのデザインで使える、軽量化のアイデアについて書きたいと思います。
 

ソーシャルゲームのデザイン、特にモバイルの場合はデータ容量との戦いです。
重要なのでもう１回書いておきます。戦いです。バトルです。
データ容量＞デザイン　の優先度でデザインを作らなくてはいけません。

いくらカッコイイデザインを作ったとしても容量が大きければ、
容量の上限に達して使うことができないかもしれませんし、
もし使えても、ユーザーが満足できるようなサクサク動作ができるとも限りません。
データ量が大きければパケット量も大きくなりますから、ユーザーには何もいいことがありません。
制限のある中で、よいデザインをするのを心がけたいです。

モバイル用のFlashの場合、軽量化で気をつけたいポイントは、パスの数です。
徹底的にパスの数を減らしましょう！

では、最初によくある図形、★をつくってみましょう。

はい。
特に何も考えずにイラストレーターで、作りました。
パスの数を見てみると、10のポイントでできています 。
この図形のパスを減らしてみましょう！

バカッ!
はい、星はこのような２つの図形に分解できます。

それぞれ4ポイントと3ポイントの図形なので合計で7ポイントで★を作ることが出来ました！
単純につくった場合だと10ポイントだったので3ポイントもパスを減らすことが出来ました。


続いて6角形です。そのままつくると、数えるのも大変、12ポイントです。

パカッ！
はい、三角形2つの組み合わせで作れます。合計6ポイントです。半分のポイントで作れました。


続いて8角形です。
こちらは四角形2つでつくれます。

四角形を変形させて重なりを変えると、十字が出来ます。
そのままだと12ポイントですが、8ポイントで作ることが出来ます。

続いて丸です。
イラストレーターの円形ツールでつくると4つのポイントで作図されます。(図：左)
円は２つのポイントで描くことができるので、余計な2点は削除しましょう。(図：右)


この2ポイントの丸を変形させると♥になります。
若干、とがりぎみですが、大いサイズで使わないのであれば、十分許容範囲の形でしょう。
うまい具合に端折ってらしく見せるも軽量化のコツだと思います。

最後に、こんな模様も組み合わせ方でパスの数が変わります。
単純につくると、4つの四角形の組み合わせでできそうですが、
黄色い四角の上に三角形2つの組み合わせとすると、
12ポイント(3ポイントの四角4つ)のところを10ポイント(3ポイントの三角2つ+4ポイントの四角)で作ることが出来ます。

いかがでしたでしょうか？
単純にパスを減らす、といっても図形を合体させればパスが減るわけではないので、奥が深いですね。
図形をながめて、どう分割するか考えることはパズルみたいで面白いです。

では、また！

カッティングエッジなカルチャーをピックアップする、クリエイティブWEBマガジンをセレクト。
いますぐキャッチアップして、クリエイティブシーンのニューウェイヴをサーフしよう！

Public-image.org

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

• Public-image3D: http://3d.public-image.org

以下サイト引用

「Public-image.org（パブリックイメージ・オルグ）」は2007年に国内外のカルチャーシーンの現在を伝えるべく創刊された"クリエイティブ・ピープルの辞書"とでもいうべきWebマガジン。年間のべ100組以上のクリエイターを取材、紹介しています。様々なクリエイターの思想や哲学、ものづくりへの真摯な姿勢は、今を生きるすべての人へ、新たな発見や生き方のヒントを与えてくれるはずです。D.I.Y精神から生まれたクリエイティブポータルサイトとして、常に読者を刺激する存在であり続けたいと願っています。

STUDIO VOICE

いわずとしれた、日本を代表するカルチャーマガジンSTUDIO VOICE
雑誌は休刊しちゃいましたが、オンラインで復活！
粛々と更新されていくsubjectiveな記事に毎日ニンマリしています。
隙間時間にチェックできる、iPhoneアプリがめちゃんこ便利！

以下サイト引用

デジタルパブリッシングの時代の新たな出版のかたち。

それがスタジオ・ボイスです。

ウェブやスマートフォンに代表されるデジタルデバイスだけではなく、豪華な装丁をまとった紙媒体もリリース。

さらにはイベントも実施し、クロスメディアとしてあらゆる場面で読者／ユーザーの側にいる、まさに「時代とともにある」メディアを構想しています。

スピード感のあるクオリティメディアとして、スタジオ・ボイスは新しい時代の要求に応えていきます。

white-screen.jp

毎日更新、国内外の映像にフューチャーしたWEBマガジン。
とりわけ国外シーンを日本語で紹介してくれる貴重なメディアとして、多くのクリエイターが注目する絶対見逃せないマガジンです！映像と言ったらここ！
ここから紹介されるアップトゥデイトなクリエイティブムービーは、マストチェック！

以下サイト引用

white-screen.jp（ホワイト・スクリーン・ジェーピー）は国内外の映像情報をデイリーに発信するウェブマガジンです。世界中で発表される感動とインスピレーションに溢れる映像作品を紹介したい！より多くの人と共有したい！そして、映画祭RESFESTの活動から一貫している、ワクワクする映像を生み出すフィルムメーカー、映像関係者を紹介したい。そして、創り手に有益な情報を提供したい。そんな想いからwhite-screen.jpはスタートしました。

moonlinx

STOPしていた記事更新が、ごく最近再スタートしました。
特集「現代メディア再考」。
なんてアツいテーマなんだ！
さらにサイトに揃った、オノ・ヨーコ、坂本龍一のビッグネームから弊社ディレクター鈴木まで、ハイレンジなインタビューアーカイブは見逃せない！

Twitterでも情報発信中。

• 鈴木のインタビュー記事: http://moonlinx.jp/interview/notsame/007/
• @moonlinx: http://twitter.com/moonlinx/

以下サイト引用

デザイン×音楽＝新しいクリエイション。
moonlinxはクリエイティブシーンにおける異ジャンル間のコミュニケーションをテーマにしたメディアです。主体となるオンラインカルチャーマガジンでは、デザインと音楽を中心に扱い、この二つをつなぐことで新しいクリエイションの誕生をサポートしていきます。

HITSPAPER

現在のクリエイティブシーンを、ART&DESIGN・BUSINESS・CULTURE・SOCIAL DESIGNの、４つの切り口から紹介。
他サイトではあまりみない、BUSINESSの切り口が面白い。
クリエイティブ・カンファレンス HIGH5などその活動はオンラインにとどまらない。

以下サイト引用

HITSPAPERは、次代を担うクリエーターの為のクリエイティブ・ウェブマガジンです。

HITSPAPERが見るクリエーターの未来は、人間という複雑且つ単純な生物が、自身の可能性をフルに解放し、多種多様なアイデアに溢れ、アウトプットをし、各々を尊重し、紡ぎあっていく未来です。
その未来に向けて、広義的なクリエイティブ・クリエーターを一つ・一人でも多く、光を当てたいと考えています。

Qetic

音楽系に強いメディア。
やってることが幅広くて、サイトの更新頻度がとにかく半端ない！ジャブのように放たれる小ネタブログが小気味よい笑いを誘う。
隅々までチェックしたいサイト。
更新情報は、Twitterをフォローしてチェック！

@Qetic: http://twitter.com/Qetic

以下サイト引用

音楽を切り口として始まった情報サイトQeticですが、これからは音楽情報はもちろん、アート、フィルム、ファッション、イベント等のエンタテイメント全般の情報発信の"場"として新たな時節に向かって動きはじめます。そして情報を発信するだけでなく"体験すること"もテーマにあげ、世の中にある「良いもの」の真価をみなさんにお届けできるように挑戦していきます。 人はみな平等に「可能性」という力を持っている。身をもって知り、感じられたことはきっとポジティブな可能性を広げるきっかけに繋がると信じています。>

greenz.jp

クリエイティブで持続可能な世界に変えるグッドアイデアを毎日伝える Webマガジン。
未来がポジティブになるクリエイティブなアイデアがたくさん！見ているだけでうっきうき！アンチグラビティー感がめちゃんこドープです。
ニューエイジをドライブする、イノベーションの最新情報はこのサイトで！

以下サイト引用

greenz.jpは、クリエイティブで持続可能な未来を考えるウェブマガジンです。

私たちは、行動するグリーンメディアであり、サステナビリティに関するシンクタンクであり、世界中のビジョナリーとカルチャークリエイティブをつなぐオープンなネットワークとして、21世紀型の持続可能でわくわくする世界の実現を目指しています。

Dezeen

From London to the world.
タイム誌のTHE DESIGN 100という号にもフューチャーされた世界でも注目のクリエイティブメディア。
タイム誌によると、
This online magazine provides an in-depth look at the latest news from top designers and architects around the world.
だそうである。
プロダクトや建築など、3次元系。

以下サイト引用

Our mission is simple: to bring you the best architecture, design and interiors projects from around the world before anyone else.

It's Nice That

同じく、From London to the world.
こちらは、建築に限らず、グラフィック・プロダクトと幅広いジャンルの才能あるニューカマーを紹介しています。
まずは、Archiveをご覧あれ。

以下サイト引用

It's Nice That curate, publish and direct the finest work and practitioners from across the creative industry. Since setting up in April 2007, we have remained dedicated to staying up to date with studios and individuals and discovering new talent from all over the world, adding to our online archive daily.

はてなブックマーク > 人気エントリー > コンピュータ・IT

ITクリエイティブ周縁の情報を収集するならやっぱりここ。
はてブの人気エントリーというのは、ユーザーが中身を選ぶエディトリアルです。

読んだ雑誌の面白いページだけ切り取って持ち寄る感じで、 ２～３日以内に公開された記事がスクリーミングされて、毎日トップページに表示されます。
筋の通った独自の切り口はありません。
はてブの編集方針はただ一つ。面白いかどうか。
いまナウ世に出たばかりのエッジーな情報がゲットできます。
最後は、はてブのWEBマガジン的利用を提案。ということでどうでしょ！

以下サイト引用

はてなブックマークのトップページでは、40万ものユーザーがブックマークした今話題な 『人気エントリー』でチェックすることができます。インターネットで何が起きているのが、何が話題なのか新しい情報を即座にキャッチできます。また『政治・経済』『コンピュータ・IT』など様々なカテゴリーがあり、自分が興味のある分野の情報のチェックもかんたんです。

相次ぐ雑誌休刊のその後、WEBマガジンがだんだんと盛り上がってきました。
インフォメーションでしかなかったWEBメディアもエディトリアルとしての側面を強めてきて、ますます面白い！
iPhone、iPad、アンドロイドなど、新たなデバイスの登場も追い風となるのか！？
ネクストメディアはどうなる！？
あー、iPadほしー！

おまけ（その他のWEBマガジン）

http://www.cbc-net.com/
http://www.cinra.net/
http://www.realtokyo.co.jp/
http://aar.art-it.asia/top
http://www.shift.jp.org/ja/
http://www.realtokyo.co.jp/
http://www.webdice.jp/
http://www.art-it.asia/top/?lang=ja
http://www.designboom.com/eng/
http://www.honeyee.com/

旅する支社でベトナムに行き、現地で1日に1回何かしら食べ物をこぼすかひっくり返すかして、
ついにドジっ子の称号をもらいました、くにーです。シンチャーオ！
 

今回は、ベトナムのインスタント麺のパッケージデザインをご紹介します。

ちなみに撮影場所はハノイ空港です。

Omachi…日本語由来でしょうか？
エレベーターに設置されたモニターでOmachiのスパゲティバージョンのCMを何度かみかけました。
ピンク色のパッケージが印象的です。
女子高生度：★★★★
 

Omachiほどではないですが、こちらも深めのピンク色を使用したパッケージ。
エレガント度：★★★

肉団子に筆文字。HU TIEUは、南部名物の米麺だそうです。
日本のエースコックのマークがはいっていますね。
なんとなく沖縄モノっぽくみえる度：★★★

牛肉のフォー、ということで茶色。
こちらもエースコック製のようです。
素朴度：★★★★★

上のとかわり、ベジタリアン・インスタント・フォーということで、
緑色でヘルシーそうなパッケージ。
ベジタリアン風度：★★★★

マッシュルームフレーバー。
きのこがぷりっぷりです。
シズル度：★★★

ベトナムかと思ったらタイの商品だった。
ポークフレーバー。
素朴度：★★★

ベトナムかと思ったら（略）2。
エビ味。テカってます。
サイバー度：★★★★

ベトナムかと（略）3。
辛そう！な表現はやっぱり赤いパッケージですよね。
パンチきいてます。
辛そう度：★★★★★

黄色と赤のぱっきりパッケージ。
イオンのトップバリュ的な展開なのか、このシリーズで他にも色んな商品がありました。
シンプル度：★★★★

パンダがかわいい！パッケージ。
ロゴにもパンダがくっついてます。
キャラ押し度：★★★★

ザ・きのこ。
仙人度：★★★★★

これ食べてみたいな〜というのはありましたか？？
見かけた際はお試しあれ！

カヤックで運用している、「ポケットフレンズ　コンチ」というケータイで育てる珍感覚なペットサービスがあります。
着せ替えアイテムが4000個を超えていて、組み合わせのパターンが豊富なので、ギャラリー的な感じでコーディネートの一部を紹介したいと思います。

コンチのコーディネートを見るだけで、ほっこりしたり、クスっとしたりするので、暇な時にだら～んと見るだけでもきっと楽しいです♪

コンチのアイテムは以下の種類で分かれています。

• 頭アイテム（髪型や帽子など）
• メイクアイテム（口や顔肌の色など）
• 上半身アイテム（上着やスカートなど）
• 下半身アイテム（ズボンや靴など）
• 首飾りアイテム（ネックレスなど）
• 右手用アイテム
• 左手用アイテム
• 壁紙アイテム

コンチの目も10種類以上あって、各種類にはその時の表情に併せて10パターン以上あります。
動きも50種類ほどあって、無限、までは行かないけど、沢山の組み合わせが可能です。

下記はユーザーが自分で、毎週開催されるコンテストのために用意したコーディネートの一部です。
可愛い、格好いい、面白い、綺麗、セクシー、アニマル、の6つのカテゴリーに分けてみました。

可愛いコンチ

格好いいコンチ

面白いコンチ

綺麗なコンチ

セクシーなコンチ

アニマルコンチ

可愛いと面白いコーディネートがやっぱり多いサービスですね。

自分でも飼ってみたい、または色んなコーディネートに挑戦してみたいという方はこちらのQRコードからどうぞ（もちろん登録は無料です）。

みなさん、こんにちわ！

いつも元気なbarimiです。
本社のある鎌倉は紅葉真っ盛り！真っ赤なもみじや、黄色のイチョウがかわいいなー♪とホンワカ見とれてしまう日々を送っています！

Kinect (キネクト)がキテル！

さてさて、11月20日にMicrosoftから発売されたKinect センサーがヤバい！
と盛り上がっているのですが、ここで簡単にKinectについてまとめてみました！

Kinectって何？

Kinectとは、Microsoftのゲーム機 XBOX 360の専用ゲームデバイスです。
最大の特徴は、コントローラーフリー。身振り手振りでゲームの操作が出来るのです。

Kinectの特徴

Kinect™ は、コントローラーを使わず、自分自身の体を使って直感的に遊べる、新しいエンターテイメント。Kinect センサーがプレイヤーの体の動きや声を認識して、直感的に誰でもすぐに遊ぶことができます。
Kinect - Xbox.comより 

Xbox 360 4GB + Kinect

熱いのはKinect Hack

で、なんでこんなに騒がれているの？という理由は、高性能なセンサーが多数ついて、値段が安い。しかもXBOXだけでなく、PCやMacを使ってハックできることから。

Kinectの仕様

RGBカメラ、深度センサー、マルチアレイマイクロフォン、および専用ソフトウェアを動作させるプロセッサを内蔵したセンサーがあり、プレイヤーの位置、動き、声、顔を認識することができる。これにより、プレイヤーは自分自身の体を使って、直観的にビデオゲームをプレイすることができる。 常にプレイヤーの位置、身長を測定し、最適なプレイができるよう上下の角度の自動調整が行われる。Video Kinect (Kinectを使用したビデオチャット) にも対応した映像センサーも装備している。 キネクトは、主にプレイヤーの動きを読み取って合成するモーションキャプチャという技術を使用しているが、一般的なモーションキャプチャとは少し異なる。通常のモーションキャプチャ時に着用する特殊なマーカー付きスーツと、マーカー検出時に使用するトラッカーは必要とせず、カメラに被写体を映す事でプレイヤーからキネクトまでの距離を計測する。プレイヤーの骨格のさまざまな動きを検出し、ゲーム中のキャラクターの動きに合成する形となっている。

多人数による同時マルチプレイにも対応しており、プレイ人数はソフトによって異なる。 Kinect センサーを使用する際にはデータ保存機器の空き容量が約256MB必要となる。

Kinect - Wikipediaより

しかも、ハックすることについては、Microsoftも容認ということで、ますます盛り上がっています。

• マイクロソフト：Kinect のオープン利用は容認 ー engadget

Kinect Hackの注目の動画

代表的なKinect Hackの動画です。

Interactive Puppet Prototype with Xbox Kinect

腕の骨格に合わせて、パペットが動きます。

Interactive Puppet Prototype with Xbox Kinect from Theo Watson on Vimeo.

Multitouch with hacked Kinect (HD)

マイノリティ・リポートのような操作ができます。

Kinect Titty Tracker

乳首検知も出来るみたいですね！w

Kinect Titty Tracker from Dan Wilcox on Vimeo.

ofxKinect study #06

日本でも、Kinect Hackの作品が上がっています。

ofxKinect study #06 from Atsushi Tadokoro on Vimeo.

Kinect情報はここでチェック！

リンク集や現状まとめなどのサイトをピックアップ。

• Kinectハック作品が続々！　影絵、3D落書き、UI、3Dビデオキャプチャ...（動画） : ギズモード・ジャパン
• Kinect -- Engadget Japanese
• 【Xbox360】Kinect情報まとめリンク集
• Kinect Hack 現状まとめ | yoppa org

こちらは、Kinect Hackだけを集めたサイトです。

• KinectHacks.net - Kinect hacking news and community (英語)

おまけ情報

その他、Kinectについての情報です。

• ASCII.jp：賞金付きオープンソース”Kinect”ドライバ開発コンテスト！
• 2日並んでKinectを手にした「ビッグウェーブ」ことブッチさん、部屋が狭くてプレイできず:Kotaku JAPAN, ザ・ゲーム情報ブログ・メディア

 

様々な表現方法が出てきて、面白いものが増えてますねー！今後もKinectに注目です！

ワクワク！

Xbox 360 Kinect センサー

 

コミュニケーションデザイン研究会が主催するインフォグラフィックス ワークショップ ３に参加しました。

テーマは、「麹町を舞台に「時空」を可視化する」

 

アイコン、ダイアグラム、チャート、グラフ、マップ、どの手法をえらんでもOK！

インフォグラフィックス化して、時間旅行します。

ポイントは切り口の斬新さ、意外性。

時間という形のないものを、集めたデータをもとに、

どういう切り口でどう表現すると相手を引きつける形にできるか。

きれいな仕上がりよりは「目の付けどころ」が発見できれば大成功です。

とのこと。面白そう！！

 

人を引きつける！伝わるインフォグラフィックスを作るコツ！

ワークショップのはじめに、インフォグラフィックスの著者、木村博司さんよりミニ講義。

 

見る人の目と心をひきつける「Attractive」

雑誌をめくったときに、「ん？なにこれ」と感じさせる仕掛けなり、面白さなり、

見る人を引き付ける魅力をデザインに持たせる。

伝えたい情報を明確にする「Clear」

何を伝えたいのか＝「コンセプト」を明確にする。コンセプトはデザインの大黒柱。

欲張らずに一番伝えたいことを一つだけ選んで、それがうまく伝わるように表現する。

必要な情報だけに簡略化する「Simple」

コンセプトに従って、膨大な情報の中から、本当に必要なものだけを選び出す。

見る人が一瞬で何を伝えたがっているかがわかる表現に落とし込む。

目の流れに沿う「Flow」

人間の目の動く順番を意識する。

横組みの場合、左上から右下にほぼ対角線上に移動する。

この目の流れには、時間の流れをセットにするともっと効果的になる。

 

 

見る人を引き付けて、共感してもらい、引き込んでしまうのが

よいインフォグラフィックスなのですねー。

 

詳しくはこの本をＣＨＥＣＫ！！↓　↓　↓

 

 

前日まで★事前準備

AM10:00　グループディスカッション

AM11:00　フィールドワーク開始

「フィールドワークはこわくない！」聞き込みの極意？！

恥ずかしながら、フィールドワーク初体験！聞き込みの極意を教えていただきました。

正直に目的を伝えて身分を明かそう！

自分の仕事や町について聞かれて悪い気はしない？

そこで見つからなくても大丈夫！次につながる！

PM14:00　アイデアスケッチを再考

PM15:00　最終稿を仕上げる！

1時間（！！）で一気に仕上げます。やばい！集中！！！！！

PM16:00　1人1票投票して順位を決定！

 

全員の案がでそろいました！どきどきの投票結果！

 

 

上位の人によるプレゼンテーション。

どれも個性的なみなさんのインフォグラフィックスをいくつかご紹介！同じお題でここまで個性がでるんですね！

当日の様子はこちらの先生方のブログで紹介されています。

• http://d.hatena.ne.jp/Golden_Jackal/20101121
• http://kojicozy.cocolog-nifty.com/blog/2010/11/post-e3c3.html
• http://asanoken.jugem.jp/?eid=1701
• http://asanoken.jugem.jp/?eid=1702

おまけ： はじめてのインフォグラフィックス制作過程

第1稿　すきま恐怖症

いただいたアドバイス

• 一番見せたいところはどこか、一点に絞るべき！
• どこにするかはフィールドワークしてみて決めよう！

第2稿　ハーフ＆ハーフ

いただいたアドバイス

• 見せたいところを大きく扱ってデザインにメリハリを。
• 面白いと思ったところを魅力的に見せる工夫を。

第3稿　いろいろふっきれました（大事なものまで）

いただいたアドバイス

• 麹町や近代とのつながりがなくなってしまった（・・・）
• 書き込む前のほうがわかりやすかった。
• どうして裏紙に描いたの？（第2稿の裏に第3稿を描きました）

iOS4.2からSafariで加速度センサーを使うことができるようになりました。

つい先日アップデートされたiOS4.2。このアップデートでMobile Safariから加速度センサーをJavaScript経由で利用することができるようになりました。使い方は簡単で、以下のようにするだけで加速度の値を取得することができます。

JavaScriptから加速度センサーにアクセスする

window.ondevicemotion = function(event) {
  //event.accelerationIncludingGravity.x
  //event.accelerationIncludingGravity.y
  //event.accelerationIncludingGravity.z
}

これを利用して、さっそくちょっとしたデモを作ってみました。
ただ、普通に値を取得してオブジェクトを動かしたり、というのはつまらないので、せっかくなのでシェイクジェスチャと称して、振った状態によってアクションさせるものを作ってみました。サンプルは以下↓（ただ、iPhoneから見ないと意味がありません・・）

iPhoneからアクセスしやすいように短縮URLも設定しておきます。
http://goo.gl/7uJLx

シェイクジェスチャデモ

iOS4.2から実装された加速度センサーを試してみた - jsdo.it - share JavaScript, HTML5 and CSS

今回のデモは、x方向の値を判別してそれが左に触れていたら左、右に触れていたら右に、というのを検知してメッセージを表示しています。
サンプルなのでメッセージのみですが、これを応用して左に振ったら戻る、右に振ったら進む、なんていう処理を入れてもいいかもしれません。

まだまだ出たばかりの機能で、実際に使っていくには、ゲーム以外では有効利用が思いつきませんが、今後はこれを利用した面白いコンテンツが出てくるのではないでしょうか。
ただ、これが利用できると色々と面白いことができそうなので、今から手を出しておくといいのではないでしょうか。

ちょっとツイてないキャラが定着してるhashimotoです。でも運は強いです。サイコロ給出目２冠達成しそうです。
今回はソーシャルゲームでキャラクターができるまでを公開(一部)しちゃいます。

今回公開しちゃうのは、

今月（2010年11月)ローンチしました、ぼくらのワールドリーグです。

このソーシャルゲームは、サッカーで世界一のクラブチームを目指すゲームです。

モバゲーで絶賛稼働中です。

ユーザーは、所属するリーグと、チーム、好きなキャラクターを一人選んで、スキルを上げて、
試合を勝ち抜き、世界一を目指す、というものです。

スキルを上げるためには、リフティングやドリブルなどの特訓ミニゲームをうまくこなす必要があります。
このミニゲームはFlash liteで出来ていて、キャラクターが登場するのですが、
今回はこのゲームで登場するキャラクターができるまでを公開しちゃいます！
では早速、、

１紙とペンでラフを描く。イメージを膨らませる。

まずは、サッカーゲームのキャラクターってことで想像を膨らませて、ペンを走らせます。
ラフなのでさらっと、眉毛がつながってても気にしない。
サッカーだから足が目立つように大きく…ということを考えたりします。

２しっかり描く

1でなんとなくのイメージを掴んだので、次はしっかり描いてみます。
キャラクターの前と横をあわせて全身を描きます。
 

3パーツに分解して描く

２で、しっかり描いてキャラクターのデザインが固まりました。
ただ、2の状態だとイラストなので、これをFlashゲームで使えるように関節を意識したパーツに分解します。
頭、胴体、両手、両足を意識します。ゲームの仕様によっては肘、膝、指など、もっと細かくなるかもしれませんね。
あわせて形の微調整を行います。この後、配色もするので、色の濃淡だけは考えておきます。

４イラストレーターでベクター化

３をイラストレーターに持ってきて、下絵として配置。パスでキャラクターを作ります。
３で考えた関節が動くか確認のために、いろいろポーズを試してみます。
同時に配色も考えます。顔を変えて、シミュレーションもします。

５必要なカットを量産

横姿、後姿、など、必要なカットを用意します。細い部分の描きこみもしておきます。
デザイン上ではここでひとまず完成です。

６モバイル用に最適化

5の完成形をなるべく崩さないように、モバイル用に最適化します。(このデータは弊社FDの調整がはいっています。)
最適化のポイントは、

• パスの数を減らす。
• 直線で表現できそうな曲線は直線に変換する。
• 実際のゲーム画面でのキャラクターサイズを考慮して特徴を盛る。

具体的には、スパイクの針、目の丸み、髪の毛のハイライトは省略して、
逆に前髪のツンツンを小さく表示された時に特徴になるように追加しました。

これで本当の完成です！
ここからFDにバトンタッチして、ゲームに組み込まれます。
ぜひ実際の動きをプレイしてご覧ください！
 

おまけ　ボツキャラ案
今回はボツにしましたが、他にも数種類の体型や顔をつくってシミュレーションしています。