Entries

JavaScriptでゴリゴリ実験サイトを作ったよ



fladdict.netのトップをリニューアル。JavaScriptの実験場にしてみた。久しぶりにゴリゴリJS書くと、かなり楽しい。

古き良きゼロ年代のFlash実験サイトはほぼ絶滅してしまったわけだけど、それを現代のJSとHTMLでやり直してみたらどうなるか?そんな感じのスタディ。使用ライブラリはpaper.jsprocessing.js。時間があるときにcreate.jsも導入してみたいけど、ざっと見た感じcreate.jsは冗長すぎてスケッチには向かないと思う。スマホだと重すぎてだと動かないので、時間あるときに分岐するようにしたい。

最近はインターネットも成熟化したのか、グラフィック、インタラクション、プログラミングを三位一体でする人が減ってる気がする。分業化が進んでいるのだろう。インタラクション系がわかるエンジニアは需要があるわりに、新しい人が学ぶ機会が昔にくらべれば激減しているのではないかと思う。

こういうインタラクション系の実験は、実際に商用サイトに使うにはハイスペックすぎたり、ブラウザを選ぶ。ただこういった実験の本質は、単純に表現や技術を案件にいかせるかではない。むしろスケッチを通じて、適切な表現や動きを即座にコードに落とし込める力や目を養うことではないかと思う。

とりあえず、社内の若いエンジニアとデザイナに「どっち志望でも、2年ぐらいでこういうの出来るようになろう」というプレッシャーをかけたい。オフィスには厳選した教本、先人のコードとノウハウ、僕や北田さん、奥田さんみたいにレビューやフィードバックできる人間もいる。必要なものは全部そろった。これで出来るようにならなければ、あとは本人の問題のはず。

ヴィジュアルコーディング系に興味ある学生とかは、THE GUILDに遊びにとかインターンにくるといいよ。



いかもろもろ。新機軸というよりは、まずはJSを思い出すために書いたスケッチ系。


自力物理エンジンとスプリングで動く疑似クリーチャー。テオヤンセンラブ。昔、soda playという伝説のサイトがありまして的リバイバル。


実は人生で初ボロノイ。サイトリニューアルを期にボロノイ童貞を脱してみました的なスケッチ。


平面充塞のスケッチ。以外とカワイイので気に入ってる。


平面充塞の改良。最初に面積の総和を事前計算してから、nが∞になるΣで漸近していくと画面が溢れないって知った。


ぽよんぽよんしたくなったスケッチ。サバ男ではなく、シャボンと読む。


群衆プログラム的ななにか。以前つくったAmebaもそうだけど、最近のJSは群衆系とかまでで動くぐらいパワフルになったというのは感慨深い。

ウェアラブルでこそAndroidは真価を発揮する

Googleがウェアラブル向けのAndroidを発表

よさげな予感。そろそろ弊社もAndroidに手を出してもいいかもしれない。

ファッション業界と密結合せざるを得ないウェアラブルは、一見Appleの独壇場に思える。ところが自分は、逆にウェアラブルこそAndroidが有利だと考えている。なぜならば、ファッションでは、多様性こそが最も重要な価値だからだ。 続きを読む

ナウシカごっこができる! Terraのサボテン水耕栽培キット



Stores.jpで購入した、1012 | TERRAのサボテン水耕栽培キットがついに届きました。Terraはステンドグラスの技法で作成された、手作りのサボテン水耕栽培ケース。この標本感がとってもイカす!

サボテンや多肉植物は、一般的に水をやりすぎると根腐れする・・・ってイメージですが、なんと水耕栽培ができるのだとか。

サボテンの根っ子をちょん切って、根の端っこだけを水につけておく・・・すると、サボテンは水棲環境に適応した新しい根を生やすんだそうです。

世話はとってもシンプルで、水が減ったら交換したり追加するだけ、ノー肥料でいけるというステキ具合です。普通の植物は、「土が感想したら水をたっぷり」みたいな、あやふやなインストラクションで難しいですが、これなら水位を維持するだけなので育てるのも簡単。アプリを使いやすくするのと、植物を枯らすことに定評のある弊社ですが、ここまでシンプルなら頑張れそうです。

オフィスの緑化に、一案件終わるごとに一株づつ増やして行きたい。ナウシカの地下室の植物園シーンが好きな人にはマジでオススメ。



デザイナがエンジニアリング(プログラム)を学ぶコツ

最近、色々な方と「表現とエンジニアリングの融合」について、お話を伺ったりしたことからのまとめ。

なぜ表現者はテクノロジーを学習するのが苦手か
表現とエンジニアリングができるハイブリッドな製作者は、理系あるいはエンジニア出身の人間が多い。逆にアーティストや(グラフィック)デザイナーのバックグラウンドから、ハイブリッド型へと移行する人は相対的に少ない。

基本的には、エンジニアのほうが「系統立てて学習する」という点で、ノウハウと教育がある。いわゆる「美的センス」といわれるようなモノであっても、いちどロジック化して自分なりに消化さえできてしまえば、エンジニアは表現やデザインもエンジニアリングの一貫として学習することができる。(逆に、スキルをブレイクダウンして学習するぶん、「作れるけど作りたいものがない」になりがちではある。) 続きを読む

FacebookのニュースアプリPaperのUIと、その背後に見える戦略について

Introducing Paper from Facebook on Vimeo.

FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。

使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。

外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」
というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。

これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 続きを読む

スマホUI考(番外編) UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは

いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。

その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。

製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。

今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 続きを読む

企業サイトをスマホ対応するならば、地図はできるだけつけるべき

最近はスマホ対応サイトがだいぶ増えてきたけれど、PC版にはある地図情報を省略しているサイトが多い。

だが、ユーザーの行動を考えた場合、会社や会場のロケーションの確認は、移動中に行われる可能性が最も高い。このためPCサイトで地図を表示していながら、スマホ版では地図を表示しない・・・というのは、ユーザーのアクションを阻害してしまう。

実際、出先で会社の場所を調べようとしても、住所や地図にアクセスできない企業サイトはかなり多い。実生活でも困る事がしばしば。

ユーザー中心で考えた場合、階層が深くてもいいのでスマホ版にも、住所、電話番号、地図などはしっかり載せる方が良いと思う。一般論としての「スマホ対応サイトは情報を絞るべき」は正しいが、どの情報を削るべきかが精査するのは中々難しいなぁと思うなど。

適切なタイミングで適切な情報にアクセスできないならば、PCサイトだけのほうがユーザー体験は高くなってしまう。

振るだけTV連動キャンペーンアプリ、「フリフリTV」をリリースしました

furifuritv

日本テレビさまのアプリ、「フリフリTV」の製作させていただきました with alumican.net。
色々な番組の放映中に、アプリを起動してフリフリ!っとシェイクをすると、プレゼントがもらえたり、ポイントが溜まったり、投票ができたり色々とステキなことが起きるアプリです。ヌルヌル動くよ!

フリフリするだけで、視聴者参加キャンペーンができる完全な単機能突破アプリ。

PON!や、12/31日のダウンタウンのスペシャル番組などと連動する予定です。大晦日はぜひフリフリしてください!

もともとは、ニュースとか、番組表とかガッツリ機能が入った企画だった気がしますが、僕と奥田さんで「フリフリ以外、全機能をなくしましょう!!!」とか「機能が増えるほどプロジェクトは危険になります!」とか、「足なんて飾りです!(略)」とか、言いたい放題にワガママを通しまして、アレもコレも全て削って、もの凄くシンプルなアプリになりました。

こんな無茶難題に度量を示してくださいました日本テレビのみなさまには感謝感激です。

みんながアプリをダウンロードしてくれて、ガンガンと振りまくってくれると、きっと日テレさんの色んな番組が参加してくれるはず。
最終的に振るだけで全番組参加できるとこまで行けたらいいなぁと思います。

Client: Nippon Television Network Corporation
Direction: Takayuki Fukatsu (THE GUILD, Art & Mobile, fladdict)
UI Direction: Takayuki Fukatsu (THE GUILD, Art & Mobile, fladdict)
Art Direction: Yukiya Okuda (THE GUILD, alumican.net)
Design: Yukiya Okuda (THE GUILD, alumican.net)
Programming: Yukiya Okuda (THE GUILD, alumican.net)
Assistant Design: Chiharu Kodama (THE GUILD, Chocolu.net)
Site Coding: Chiharu Kodama (THE GUILD, Chocolu.net)

寄付ハック結果報告 – 総額171万円の寄付が集まりました

11/14から開催された「フィリピン災害へ寄付した人に、オレが自腹でiPad miniプレゼントキャンペーン」いよいよ締め切りの12/14日をすぎ集計結果のご報告でございます。

勢いだけで始まった自腹寄付キャンペーン、ドキドキの結果報告は・・・

なんと427名の参加、確定金額で171万488円でございました!! 続きを読む

ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方

ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。(第3回は準備に時間がかかりすぎたので、第4回を先に掲載)

  • シャーペンでアイデアを練る
  • サインペン3種類で太さに差をつける
  • マーカー3種類で濃淡をつける
  • ポップアップや状態変化をポストイットで作る

続きを読む