Twitter Bootstrapは素晴らしいんだけれど、何か腑に落ちない。 まずメニューバーがStickyで視野を制限してくるし、ボタンだらけになるし。 無個性のようでいて、結構主張が強いのはどうしたことか。

「使っている事を感じさせない」デザインがいいとはよく言われる通り。 ここでは、透明なWebデザインはどうであるべきか問い直す。

グラフィックが、自分自身を説明していること

シンプルなページを作ろうとするとき、 テキストＵＩ＋テキスト＋DIVによるブロックのみとすることがある。

テキストだけで情報表現を行うのは、確かに「シンプル」ではあるけれども、 「ここには何が書いてあるのか」といった点を一目で把握できる訳ではない。 まずは図表の採用を検討すべきである。

一番目に入りやすい場所でデータのビジュアライゼーションを行う。 「このページは何についてのページか？」「データの大まかな傾向」を 目視で確認することが出来るようにデザインする。

テキストＵＩに対して、デザインされていない印象を持つのは、 そのページが視覚面での自己紹介を怠っているためである。

視野を妨げる・見たいものに被さるデザインを採用しない

ボタンが沢山ある、メニューバーがある、といったデザインは コンテンツへの集中を妨げてしまう。 中立かつ透明なUI部品を使うことで、没入感のあるサイトにすることが出来る。

しかし飾りっ気のない、透過されたUI部品を使っていても没入感が妨げられることがある。 例として、ZeroWatchのコメント欄（透明度が高く普段は隠れているが、マウスオーバーで表示される）や、 Google Plusのフレーム（サイドバー、検索窓などを含む。視野を制限されている感じが強い）がある。

Stickyなメニューバーや、スクロールインしてくる UI部品などは、そこに目が行ってしまう上に、目が行ったところの情報を隠してしまう。 普段は隠して置いて、状況に応じてコントロールを出すのは、一見合理的に見えるけれど、 動きのある場所に目が行ってしまうものなので、実際は邪魔になることが多い。

なので、まずは視野を制限するようなコントロールをそもそも画面上に置いてはいけないし、 マウスオーバーで重なってもいけない。

シンプルさを追求しすぎるより、アイコンの記号性を活用する

ここでいうミニマルデザインとは、Metroや、一部のFlashサイトで使われているような、 丸とか四角でデザインされたＵＩを指す。

個人的には、単なる小さなアイコンよりも、丸とか四角の方が目立ってしまうように感じる。 ちょっとしたイラストは、「図」よりも「地」になりやすいのかもしれない。

また、素人目にも、アイコンを使った方が「デザイン」されている印象を持ちやすい。 アイコンの機能性や色の識別性、雰囲気の整合性を積極的に使っていく。

UIは、一旦決めた場所から動かさない

記憶というのは場所に紐付いているもので、 状況が変わる度にコントロールが動かれては使いづらい。

jQuery等でSlideDownが簡単に使えるようになったが、 安易に使わず、できる限り場所を固定しておきたい。

UIがオブジェクトの直接操作になっている場合に限り、 コントロールの移動が許される。 （オブジェクトの場所とコントロールが紐付いている為、別の場所への集中を必要としない）

例としては、PhotoshopやIllustratorにおける拡大縮小ハンドルなど。

ごちゃごちゃもデザインの一つ

mixiのリニューアルの際、適切なマージンを取っていたものの、「白すぎて見づらい」という苦情が出たことがあった。 理不尽といえば理不尽な感じもするけれど、マージンが無条件に読みやすさに貢献するわけではなく、 多くが無視されてしまうコンテンツ（ニュースサイトとか、日記の件名一覧とか）だと、圧縮して一度に多くのコンテンツを 一覧出来た方が「探しやすい」のではないか。

行間についても同じようなことが言えて、 広く行間を取るのは一見読みやすいけれども、 プログラムのコードの行間は詰まっていないと読みづらい。

「内容の全てを読ませる」場合のみ、行間は役立つのではないだろうか。

白すぎる、というのは、液晶というのは発光する媒体である、ということも 関わっていると思われる。文字が多くて画面が黒い方が読みやすいのだ。

アプリの終わりの始まり、という記事を読んで、Webアプリにこそこういった「使い捨て指向」が必要ではないかと思った。

大抵のWebアプリでは、自身のストレージに抱えこんだオブジェクトの編集しか許していない。ちょっとした画像を編集したいだけで、ユーザが下記のような行動をさせられるのは適当だろうか。

• 「特定のWebアプリ」を開き
• 「特定のWebアプリ」にサインアップし
• 「特定のWebアプリ」の機能を使い
• 「特定のWebアプリ」でしか再編集出来ないコンテンツを作る

基本的にユーザはサインアップして、無用な個人情報を公開したくない。現状、インストール以上に面倒な手順を踏まされている。そのためにOAuthがあるんだろうけれど、そもそも認証の必要自体があるんだろうか。

Pixlrの様な、サインアップをせずとも使えるWebサイトが望ましい形なのではないかと考えている。問題は編集したものをどこにストアするかなんだろうけども…（サインアップしてないので、自サーバに保存させたとしても削除権限をユーザに与えられない。掲示板みたいに、削除用パスワードを設定させるのが一つの解になるかな？）。

再編集が作成時と同じWebアプリでしか出来ない、というのも考え物だ。Webアプリの成果物ってどうやって再活用するんだろうか。エクスポート出来るのもあるけれど、本来はシームレスにWebアプリを切り替えて、得意な部分は他のアプリに任せたいところなのだけれど。

いちや先生の。これ、個人の力で、小さく実現出来ないだろうか。ニーズさえ見いだせれば、もっと大きな所に持ち込む事も可能になるんじゃ無いか（甘いか）。

1．全番組がテレビ、PC、ケータイでアクセスできる（現在13％の地上放送二次利用比を2015年に50％に引き上げる）

これは無理かな。ニコニコに任せていればいいと思う。

2．世界の国々で日本の全コンテンツがアクセスできる（現在2.5％の「国内市場に対する海外収入比」を2015年に10％に引き上げる）

ローカライズ頑張ろうという話。Pixivとかはもっと頑張ってもいいかもしれないな。コミックSubを付けられるプラグインでもあればいいんだけどな？

3．紙、CD、DVDを使わなくて済む（現在39％の通信・放送流通比を2015年には75％に引き上げる）

ネットレーベルはもう物理メディアに頼っておりません。

4．どこにいても緊急情報に触れることができる（現在650億円のデジタルサイネージ市場を2015年に1兆円に引き上げる）

これは携帯のエリアメールとかで実現されているかな？デジタルサイネージはさすがにもう伸びる余地は無い気がする。

5．買い物はすべてケータイでできる（現在1.5％の小売・サービス分野のEC化率を2015年に5％に引き上げる）

Amazonの力だけど、これは問題なく実現している。個人の店とかは楽天使ってるのかな。

6．大学、病院、役所の活動はすべてオンラインで処理できる（現在30～50％の教育、医療・福祉、行政サービスのICT利用率を2015年には60％に引き上げる）

これ、全然だめだ。運営している側が求めてもいなさそうだし。

7．ロボットが演じるドラマが実現する

面白いけど、小さな形で実現したのが「gdgd妖精s」なんじゃないかな。

8．一流ポップクリエイター志願者は日本に留学する（海外からの留学生30万人のうち4万5000人がコンテンツについて学べる大学/大学院を整備する）

インターンするとかならいいのかもしれん（日本で働きたい、という人はたまに居る）。

9．全国民がアニメ制作と作曲ができる（2015年には3割の小学生がアニメ制作・作曲ができるようにする）

小学生向けすたどんたん作るか。

10．結果、コンテンツ産業が拡大する。

するといいね。個人的にはコンテンツ制作系雑誌がもっと盛り上がるといいなあ。

喜ばれることはあまりないが、小さく作り直すことで、より（作っている人間の）満足感の高いソフトウェアを作ることができる。

小さく作り直すことの利点は何だろう。

１．フォーマットを他社が利用出来る。

肥大化したシステムのデータ再利用性は著しく下がる。例えばPDFなんかはフォームも入れることが出来るが、使わないし、脆弱性を作るし、互換性の妨げになっている。 ちゃんとデータを作り直すことで、データ構造をクリーンに保てる。

２．コンポーネントとして、他のソフトウェアに組み込み出来る。

そのツールであれもこれもやりたいが、利用シーン自体が異なる、という場合、ツールのコアになる部分を抽出してコンポーネントとして公開することが出来る。OSSにしてしまえば、さらに利用者からPull Requestを受けることも出来る…のかもしれない。

３．移植性が高まる

コードベースが小さくなることで、他の言語に移植しやすくなる。

基本的に作り直しは悪手だけれど、コードも一から書き直しをせず、ロジックを流用することでそれなりに手間は削減することが出来る。

問題点：まだmigrateがvpsで成功していない。

やること

1. fuelphpのパッケージをリネームしてhtdocs下に置く
2. db.phpに設定を追記。
3. config.php内の//ormをコメントアウト。
4. oilを実行。

$ php oil g scaffold monkey name:string description:text

$ php oil refine migrate

これだけでScaffoldが出来てしまう。 これを何に使おうか？

こんなライフハックもどきに時間を費やすより、手を動かすことが一番大事なんだよなあ…

ファイル管理

• 作業中のファイルはデスクトップに置いておき、いくつかファイルが出来たら、「yyyyMM＋プロジェクト名」のフォルダに入れておく。
• 作業が終了したら、プロジェクトフォルダをendフォルダにつっこむ。これで作業開始日時でソート出来るようになる。
• endフォルダは、定期的にバックアップする。別サーバにUPしておくのが一番安全。

ソースコード管理

• Windowsは基本的にMercurialがよい。SVNはサーバ立てるのが面倒だし、GitはTortoiseのバグが多い。Windowsで使っている人が少ないせいだろうか。
• 安定版はどこかにプロジェクトフォルダ丸ごと圧縮してアップロードしておくのが安全。
• GitHubとかはパスワード込みでPushしちゃうのが怖いからなあ。そこんとこ上手く管理すべきなんだろうけど。

プロジェクト管理

• 基本的にTODOはFreeMindに書いておく。
• やったことや、やるのをやめたことは別ファイル（yyyyMMdd.mm）に移動
• Freemindは軽い気がする0.8が好きだけど、1.0のbetaが出ているのでそっちでもいいかも。
• Freemindの内容をpngにして、打ち合わせ資料として相手に送付しておくと情報共有になってよい

５年働いてこの程度というのが何ともだけれど。

AmazonのCEO、ベゾスのインタビューより。

我々は「品ぞろえ」「利便性」「低価格」という3つの要素を大事にしています。この3つは密接に結びついているものです。まずは、品ぞろえから始まります。顧客が求める品物がなければ、価格がどれほど安くても、どれほど速く届けられても意味がありません。 しかし、品ぞろえが充実していても、届けるのが非常に遅かったり、価格が安くなければ顧客にとって意味がありません。この3つの要素を全て改善していくためにエネルギーとリソースを注ぎ込んでいます。

ECサービス以外に当てはまるかどうかは分からないが、サービスを形作るまでの順序について。

品揃えは、素材の種類が豊富かどうか。利便性は、使うまでの操作が煩雑でないか、検索のインターフェースは優れているか。価格は、無料サービスにおいては「時間を費やす価値のあるものかどうか」に置き換えられるだろう。

つまり、最初に改善すべきポイントは、コンテンツの量だろう。量が確保出来たら、整理を行う。それから、成果物のデザイン性を向上させることで、顧客の満足度を高めていくことが出来る。kawango氏の言うところの、一次のパラメータなのか二次のパラメータなのか、判断をしていく必要がある。

改善点の影響力を議論するために、コミット先と普段からコミュニケーションを取っておく必要はあるだろう。データはこちらの手元にはないので。

アマゾンの顧客中心主義は3つの「ビッグアイデア」に基づいています。1つ目は顧客を出発点にして、そこからさかのぼるというアイデア。2つ目は発明と革新を進め、先駆者になることを目指すというものです。3つ目は長期的な視野に立つこと。 この3つの組み合わせがあるからこそアマゾンは特別な存在になり得ています。顧客に対するこだわりを持ち、発明し、開拓し、新たなことに挑戦する。そして必ず長期的視野に立つ。このアプローチがアマゾンの優位性を形作っています。 我々が何か商品やサービスをリリースするにしても、必ず顧客を出発点にしてさかのぼっていき、準備が整った時点で発売する。会社が本当に辛抱強いかどうかは、行動に表れます。バグが残っているような商品を時期尚早に発売している会社は決して辛抱強くない（笑）。

このあたりはどの会社でも言っているような気がするが、辛抱強さを持つのは大事だ。辛抱強いサービスは信頼を得る。自分にとって、SAIはいつか代替を見つけなければいけないソフトウェアだが、Alfarは使い続けられるような気がしている。信頼の差だと思う。

プアな入力に対して、リッチな出力を返すというのが、使っていて面白いツールだろうと思う。

例えば、Photoshopは、５以前の頃レタッチツールとしてよりもエフェクトツールとして、みんな遊びで使っていたように思う。それが役だったことなどないが。

Kinectのようなリッチな入力、というか大変な入力に対して、画面のキャラクターが同期して動く、程度の等価な出力はどうなんだ、と問いたい。

道具は体の延長であるべきで、出力は第二の体と錯覚するほどにシームレスなモノで無ければいけない。リッチな入力を取って、プアな出力を返してしまうと、フラストレーションを感じさせてしまう。

言いたいことは、十字キーのインターフェースの方が、Kinectのようなリッチな入力を取るモノよりも、よりシームレスであり、脳みそと画面の接続感が強いんではなかろうかということだ。

入力インターフェースに対して、新鮮であれ、というアプローチがなぜだか主流だけれども、目を向けなきゃいけないのは出力の方なんじゃ無いのか。

DDRは面白かったけれど、あれはスポーツの一種な気がするし。まとまらないがもっとプアな入力を考えた方がいいんじゃないか。奥歯にスイッチ仕込むとか。

あと、タッチパネルUIの没入感のなさは異常だ。あれでゲームが出来るユーザは新人類なんじゃないか。iOSでフィードバック感を与える手法は「百人勇者」が良く出来ていた。EAとかのはどれも酷かったなぁ。

モーダルモーダルモードレスモードレスと言っているUIデザイナー上野学。DraftPadの作者としての方が有名かもしれない。最近UIを作る時はこの人の書いたものを見るようにしている。

Modeless and Modal

確かこの人は国会図書館サーチのリニューアルに噛んでいるはず。データが若干スカスカなのだけど（運用側の責任かな？）UIは非常に手堅い作りだと思った。

この人自身の提唱かはちょっと追えていないけど、UIデザイン原則として以下を挙げている。

1. ユーザーに主導権を与える
2. 直接操作の感覚を与える
3. 一貫性を高める
4. 目に見えるようにする
5. 操作を可逆的にする
6. モードを減らす
7. エラーを回避する
8. マジョリティに最適化する
9. ユーザーの作業を加速化する

引用元

IxEditというのも作ってるみたいだ。プロトタイピングツールはちょうど欲しかったところ。ソシオメディアのサイトも良く出来てる。

モードレスデザインは、自分が作ると面積を使いがちなので難しいところもあるけど、何か作ってみたい所。とりあえずもうダイアログはやめる。

まず自分が志向しているのが「人気商売」なのか？という問いを立てて、YESとした場合のみの話だけど。

「実は技術的にうまいか下手かというのは人気商売ではあまり問題じゃなくてさ。要は衝撃的で、新鮮で、もう1回見たいと思えるかどうかってポイントに尽きるんだよ」

このたけしの発言に「いいものかどうか？」という価値判断は含まれていない。興行師バーナムの発言と似通っても居る。『皆さん、大衆が好むモノは3つしかありません。新奇、新奇、そして新奇です！』

叩かれることですら、人気商売に取ってはプラスに転化出来るものだ。むしろ叩かれる覚悟が無ければ、人気取りをもくろんだところで中途半端に終わってしまうだろう。

本当は人気商売を志向しているのに、新奇性をないがしろにするのであれば、衰退しかない。ユーザーは自然発生するものではない。