こんにちは、デザイナーやってます秋葉です。最近映像や3DCGの制作をやってないので、ちょっとウズウズしています、何か作りたいです。LightWave10が欲しくてしょうがないです(すいません、本題とは関係ないです)。要だと思った経験をひとつ、お話したいと思います。分かりやすい例でいうとお問い合わせフォーム。行う「バリデーション」という作業が必ずといっていいほど入りますよね。5年ほど前の多くのサイトでは、サーバーサイドのプログラムで処理をしていたように思えます。PHPなどを使ったものですね。ここ近年では、フロント側でバリデーションを行うことが今や多くなりました(統計は取っていません。僕の現場仕事の経験からです)。JavaScriptを使って行うので、画面遷移がいらないからユーザ側からしても瞬時にミスが分かりやすくなるのです。状況によって、JavaScriptでHTMLを追加したり削除したり変更したりが出来るので、ユーザがフォームに何か文字を入力したタイミングで「NG」とかの文字を表示することなども可能です。フロントばかりで処理をしてしまうとブラウザ側に色々な負担がかかりやすくなり、果てにはユーザにイライラ感をつのらせてしまいます。ポイントになってくるケースもあるようです。上手に設計することが、ユーザに向けてももちろん、制作現場を円滑に動かす、ひとつの重要な要素になっていることを感じています。前は、サーバーサイドでPHP、最近ではRubyで開発している現場に、僕がフロントエンドで入ったとき思ったことですが、いまだにサーバサイドの有利な部分とフロント側で行った方がいい部分を、最初の設計の中でしっかり切り分けていなくて、後で大変になっている現場もあるようです。●UIに関わるデザイナーは必ず理解するべき「イベントドリブン」という考えこれは実際、本業のエンジニアさんから出た言葉なんですが、「サーバーサイドと、フロントのイベントドリブンへの理解が出来てないプロジェクトが多すぎて、最近問題になってきている」という問題提起。【MEMO】「イベントドリブン(イベント駆動)」とは、ユーザが何かアクションを起こすのを待機させている状態のなかで、「ユーザがボタンを押す、文字を入力する」など、ユーザのキッカケ(イベント)をもとにプログラムを処理(駆動)させることを主に言います。JavaScriptはこれが得意ですね。プロジェクトマネージメント役が、このあたりを理解しないでプロジェクトを進めて、後で仕様変更していて大変になっている現場を最近よく目にします。フロントに渡すのか?」という設計はもとより、一旦フロントに渡してサーバに投げる、という方法もあり、そのへんで「出来ること、出来ないこと、やったほうがユーザフレンドリーだ」という判断は、フロントエンドとサーバーサイドのエンジニアも含めてしっかりとした「話し合い」が必要です。●プログラマ同士だけの会話ではもはや成り立たないWebサイトやアプリ制作事情フロントエンドとサーバーサイド上でうまくやり取りを行うには、プログラマ同士の会話だけでは意味がありません。理由は単純で、プログラムへ処理を渡すタイミングはユーザの何らかの行動が多く、それはデザインから大きく問題が関わってきます。デザイン(とくにWebやインターフェイスデザイン)とは、色やカタチだけではなく、ユーザによってインプットされるすべての行動の窓口を設計することを意味します。ひとつ付け足す言い方をすると、プログラムに処理を渡せるデザインでないと、それはデザインの役割を果たしていない、ということになります。HTMLの構造がシステムに影響するので、Webデザイナーは、システムエンジニアや全体を設計する人としっかり会話が出来ないと「修正」が発生します。この修正は大規模なシステム開発になるほど、危険をはらむことはいうまでもありません。●ビジュアルデザイナーももっとシステム設計に参加すべきこれはもうデザイナーとしての僕は当然と考えています。デザイナー的に「これは使いやすいし、見た目もいいぞ!」と自身を持って提案して採用されたインターフェイスデザイン。状況によって内部でどのような事が行われているか、理解しないとハマりやすいケースもあります。ボタンが押された時、フロントからサーバに処理を投げて、返事が戻ってくる間、そのボタンはもちろん、他のUIに対してロックをかける、つまり無効化しないといけないケースがあったりします。それがユーザに対し、「押せそう」に見えるのはNGだったりします。このレイアウトがフロント側、あるいはサーバから帰ってきた値をもとに、どう変化していくのか、を理解する必要があるのです。システム全体に目を通すのはとても大変ですし、量によっては無理が生じます。自分が受け持つデザインのインターフェイスの一つ一つは「どう処理されるのか」を理解しておきながらデザインを起こす必要は今後もっと増え続けていくでしょう。http://www.akibahideki.com/blog/http://www.akibahideki.com/blog/>テクニカルディレクター・デザイナー。交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。GraphicDesign...多種スキルを持つ。Androidタブレットがあまりよろしくない出来だったのですが、まあそんなものだろうと予想はついてました。Nexus」であろうと考えていました。OSを搭載しています。OSのバージョンは4。現在多く出まわっているAndroid携帯のバージョンは2.x、Androidタブレットは3です。この2つを統合したものがバージョン4になります。バージョン2と3を足すと、5でなくなぜか4という計算になるわけです。Androidタブレットはバージョン4の布石というか、単なる実験台だったということになります。2と異なるのは、ハードウェアキーが減っていることです。戻るキーやホームキー、メニューキーがなくなっています。あるのはボリュームボタンと電源ボタン。聞いたところ「いません」と回答されました。近くにEPSONがあって数千人規模で人がいますが、見向きもされないということなんでしょうか。会社で購入するからよいのかもしれませんが、個人で購入する人自体非常に珍しいようです。PHONE(こっちの方が多くでていると言ってた)が、お薦めのようでした。4からは、ようやく画面キャプチャーが簡単にできるようになりました。Nexusは「電源ボタン」と「ボリュームボタンの音量下げる側」を同時に押し0.5〜1秒待ちます。すると、画面がキャプチャーされて保存されます。簡単になりました......というのは半分嘘です。いったメニューがでます。Nexusでは退化してしまったようです。4では、HTML+JavaScriptだけでカメラ画像を取り込むことができるようになりました。Canvasに転送してしまえば、後は自由に処理できます。加工した画像も読み出せるようになったので便利になりました。これで、ようやくiOS4.2くらいの機能が整ったことになります。ちなみに映像やマイク録音もできますが、こちらは手軽に再生とかできず難儀中です。Mobileを使ってページを作成してみました。MobileはiOSでは非常にきれいに動作します。2.x/3.xでは秒間1〜3コマくらいしかアニメーションしないので、動きがガタつく以前に画面が切り替わるような感じです(アニメーションすらできないこともある。低速というのもありますし、画面がちらつくことが多々あります。他にもおかしい部分はありますが、Androidなので仕方ないと思ってあきらめるのが吉です。Nexusで動かしてみました。Nexusではタッチした場所よりも、かなり下をタッチしたことになり、まともにボタンを押すことができません。Nexusでは駄目という状態です。Nexusは他にも、回転させると設定した画面の解像度を忘れてくれるため、指定した表示サイズとは違ってしまうというバグもあります。画面の回転を禁止すればよいのですが、探せばかなり多くの不具合がありそうです。4Sの方が非常にスムーズに見えます。5あたりに期待するのがよいかもしれません。速度も2倍くらいになれば、かなり快適に動くと思います。あと、UIが不統一で肝心のメニューを出すボタンがアプリによって異なっています。標準のブラウザではメニューを出すボタンが右上にあり、片手で操作するには無理があります。GMailは右下にあったり......。思えばギャラリーは右上で、さらにアイコンが何を示しているかが分かりにくいという......。Windowsより前のMS-DOSのアプリケーションみたいな感じでしょうか。いっても、古すぎて分かる人の方が少ない気もしますが。いうことでクリスマス前ですが、よいお年を。来年もよろしくお願いします。いいところも書いておくと、多少バッテリーの持ちはよいかなといったところです。原稿のストックがなくなってきたので正月には書きためておかないと......。http://www.amazon.co.jp/dp/4774148199http://www.amazon.co.jp/dp/4774148199>・10日で覚えるHTML5入門教室【増刷になりました。