でも、その溝は広いかもしれないけど、まだ浅いとは思うんだよね。
ちょっと頑張って埋めてあげれば、アスファルトで固めた舗装道路みたいにはならないかもしれないけど、雨が降った時に足がめり込まない程度に土をかぶせることはできるかな、と思ってるんだよね。
そのための作業として、ちょっとだけまとめておきたいものがある。
そう、専門用語だ。
と言っても、ロケット手術、車輪の再開発、キャズム理論、不気味の谷、おっぱいプルンプルンとか、別に無理して覚えてなくてもいいし、すぐに忘れてしまうような、それでいていつでも簡単に検索できるような、あんまり実用的とは思えないものではなくて、歯ブラシ、シャンプー、石けん、パンチラ程度の、比較的日常的かつ簡単なものを統一しておこうと思うんだよね。
専門用語とは言え、使う目的は『相手に伝える』ことが第一。相手の知らない単語をあえて使う必要は無いよ。相手が意味を意図したとおりに理解してくれればそれで良いので、別に世界共通で使われている単語を死ぬほど時間を掛けて探そうなんてアホなことはしないほうが良いのは言うまでもないよ。
そういうのは学者にまかせて、俺達はそのあまった時間で楽しく飲む事に費やそうぜよ。
アメリカ人には『醤油ソース』でも通じることも多々ある。でも、とある大学生は『え？ソイソースじゃ・・・・・・。』ってなる。そういうのは茹で蛙だ。醤油ソースもソイソースも、両方正しいって認識をこれからはしようじゃないか。割りと本気で。
茹で蛙：『2匹のカエルを用意し、一方は熱湯に入れ、もう一方は緩やかに昇温する冷水に入れる。すると、前者は直ちに飛び跳ね脱出・生存するのに対し、後者は水温の上昇を知覚できずに茹で上がり死亡する（Wikipediaより）』という例え話。
専門的なことばっかりやってその世界での常識があたかも世界の常識と勘違いして本質を見失うこと。世界は君が考えているより遥かに広いのだ！！
パーツの専門用語いくつか
知ってる人は知ってるし、知らない人は全然知らない、いわゆる『~』を『チルダ』ではなく『にょろ』と言ったりするような、『～みたいなやつ』的単語をゆるくカジュアルにまとめておこうと思うんだ。特に今回はWebデザインの細かいところがネタなので、かなり限定的ではあるよ。
- シェブロン
シェブロンとはWikipediaで調べてみると、もともと紋章学でいうところの『保護』や『信頼できる働きを成した建築家その他の者』なんていう意味があるらしい。でもまぁ、Webだとただその形状、つまり見た目が似てるからって話だろうね。要するに上向きの『^』や下向きの『v』のこと。 これはクリックすると必ず何かメニューが開くとか、アクションにつながるボタンだ。なので、記号、アイコン、マークとしてよりも、ボタンの役割が大半を占めていると思う。 押すと開くよ！ペロンと開くよ！それがシェブロンだ。 俺としては、三角形はアロー、『^』や『v』をシェブロンって感じで、形状で分けて使ってるよ。 動作を表すなら、ただ単純にドロップダウンのアイコンとかプルダウンのアイコンで全然通用すると思うんだよね。あんまりこだわってもお腹壊してトイレに駆け込む回数増えるだけ。 プルダウンのアイコンはシェブロンで！とか、そういう使い方になるかな。- アロー
- アローは矢だ。だから矢印。つまり方向を表すものなんだよね。 Webで方向っていうとなにがあるんだろうか？ちょっと考えてみよう。 色いろあるよね。ページをめくる方向とか、登録する際に次に進むよう促進する効果もあるし、それに『進むと何があるんだろう！？』と先を想像させてワクワクさせる要素も含んだ、小さなテーマパークだ。 そしてアローはただの矢印でもあるし、ただの三角形でもある。 ボタンである必要はない。クリックしても何も起きないこともあるし、クリックさせるためにボタンに組み込まれることもある。用途はいろいろだ。 言う鳴ればケチャップやマヨネーズのように、パンに付けてもいいしハムに塗ってもいい。そのまま食べることがあまりないけど、それも可能だ。 素材に近いテーマパーク。それがアローだ。 シェブロンと同じく、形状で使い分けてるよ。三角形ならアロー。矢印もアロー。俺はそんな感じ。
- マーカー
- マーカーってのは要するに、地図につける目印とか、インデントする際につける記号とかだよね。マークする、つまりマーキングする際に使うもの。それがマーカー。 だから形状というよりも目的ということになる。 上記で説明したシェブロン、アローを使って見ると、『アローでマーキングする』、『シェブロンでマークする』とかって使い方になるかな。 HTMLとかだとアンオーダーリスト（ulタグ）なんかで表示される黒丸とかがマーカーってイメージが強いよね。 でも実はもう一つあるんだ。テキストリンクにつけるマーカーが。 よくあるのがホームの小さなパラグラフの右下に設置された『もっと読む』とかに使われてる、『»』なんかがそうだよね。 で、俺は前者のulタグ的なマーカーを『リストマーカー』、後者のテキストリンクにつけるマーカーを『リードマーカー』って呼んでるよ。 リードマーカーの使い方の例として、画像のカルーセルがあると思う。カルーセルの左右に大きな『<』と『>』が設置され、クリックするとその方向に画像がスライドしていく感じの、あれね。個人的にはあれはリードマーカー的な役割してるよね、って思ってるんだな。 その他にも、ページャにも使われてるよね。次のページ、前のページ、的な。
まとめると、
| 形状を表す | シェブロン、アロー |
|---|---|
| 目的を表す | リストマーカー、リードマーカー、ページャ |
こんな感じかな。
ユーザインタフェース
俺は『User』を『ユーザ』、『Interface』を『インタフェース』と呼ぶので『ユーザインタフェース』って書いてるけど、長音符をフルセットにして『ユーザーインターフェース』って言うのもありだよね。
でもそれだとなんだかHUMANのゲーム『スーパーフォーメーションサッカー』みたいにだらだらした名前な気がするので、適度に長音符は省くようにしているよ。
数年前、長音符を取るのはむしろやめて積極的に付けていこう！なんて会社も出てきて入るけど、短いほうがかっこいいと思うので。
で、このUIだけど、インタフェースと名前がつくためには、そのインタフェース自体に裏と表が存在しなければいけないわけですよ。えぇ。
UMLやってる人ならエンティティとコントロールに対するバウンダリとでも言おうか、要するに人間とシステムの間を受け持つガイド的な役割があるわけね。
会社でいうなら受付嬢なわけですな。
だから『綺麗さ』が要求されてたとしても、絶対に『賢さ』も必要なんだよね、インタフェースには。
それこそ前回の話でも書いたように、ただ自分がかっこいいって思うだけのページをつくったって、それで売上上がるって保証はまるでないわけさ。
そしてその『綺麗さ』を『賢く』見せるための1つの方法として『配置』、つまり『レイアウト』があるんだよね。そのレイアウトをどういじるかによって大きく効果が変わってくるわけ。
商業デザインしてる人ならわかると思うけど、電車の広告とか雑誌の表紙とか、人間が目で追うスキーム（サッケード）を理解しちゃってとくと、一番見せたいところを一番先に見せることができるようになるわけよ。なかなかのスキルよ、これは。
『人はページをF字に見る』とか、『L字に見る』とか、そういう表面的な捉え方じゃなくて、モノを見るのは目でしょ？だったら『人間の眼球の構造』を調べろよ！！ってのが俺の考え。これがちゃんと調べるってこと（そして調べすぎないことも大事）。紙を通して作り手と読み手が分かれるわけだから、表紙も立派なインタフェースね。
そしてそんなものはネットでググるとか、図書館いくとか、いまでは簡単に調べることができるので、超簡単な話じゃんか。
人物デッサンとかもさ、美術解剖学ってのがあるわけで、そういうのをしっかり学んだ人は、筋肉とか骨の構造わかってるから、写実的な人間らしい『生きた絵』が書けるんだよね。今、そういう意味で『死んでるページ』はネットに沢山あるんだ。
そして俺達はこうった雑誌などの紙という原始的なものから大いに操作されてしまっているわけで、更にいうと、それにすら気づいていない。
これがデザイン全般のすごいところなわけですな。感動を与えられるし、不快感を与えることもできる。感情を揺さぶれるわけですよ。
そういった読み手、使い手が気づかないインタフェースの『綺麗さ』を『賢さ』を使って『配置』されたもの。レイアウトですな。いろいろとすごいﾌﾟｩ。
そしてこのインタフェース、WebでいうUIだけど、ここがヤバいともうほぼ終了なわけです。はい。
ほとんど読まれませんことよ。ブヒー！！！
感覚的に良い物が作れない場合は、例えば数学とかにヒントが幾つかあって、あくまで1つの例えだけど、フィボナッチ数列使ってみるとか、いろいろなレイアウトをパクるのがいいんでないかな。
フィボナッチ数列ってのは自然界を数値化したようなもんで、一般的にはあれだよね、黄金比って呼ばれてるやつね。『ユークリッド』『フィボナッチ』『黄金比』とかでググって自分で調べるといいよ。
ただしこれは『サブリミナル効果』的なずるいレイアウト。計算すればだれでもできてしまうわけで。
とは言え、こういった数学的レイアウト使わないのを『アート』と定義した場合、アーティストってそれほど多いわけじゃないと思うので、数学的に解決しちゃうのもありだよね。
ちなみにWindows8とかのインタフェースって、あのメトロとかモダンとか言われてたやつ、おもいっきりフィボナッチ風だよねwww。
ユーザエクスペリエンス
さて、ユーザエクスペリエンスですよ奥さん。いわゆるUXと呼ばれてる、必ずUIとセットで認識されているもの。別にセットじゃなくてもいいと思うんだけどね。まぁセットにしたほうが覚えやすいというか、役割的に似てるものがあるのも事実なんで。で、ユーザエクスペリエンスってなんぞや？って言われたら、ケツを拭く紙です！と嘘をいうかもしれない気持ちをおさえ、俺なりに答えを出してみた。
ステキなUIを作るために必要な学問
とでも言おうか。
よくよく詰めていくとUXってただの工学なんだけど、意味がひとり歩きしてる部分もあるとおもうし、既にしてそこにはいろいろな付加価値がついてしまっていると思うので、工学ではなく学問っていうほうが、俺としてはしっくり来るんだよね。
ではどうやって何を覚えればいいのか、というのは、実は答えは1個しかないんだよね。
自分がユーザになること
でしょう。
そしてただのユーザでは全然ダメで、『反抗期ド真ん中の中2女子』くらい、わがままで横柄でウザいスキルが必要かと。
このくらいわがままだと、新しい世界が生まれてくる可能性がデカイ。
当然、Disったあとに『私ならこうする！』という風に創作的ならないと、ただ文句言っただけで終わると本当にただの反抗期で終わっちゃうので注意が必要だけどね。
繰り返しになるけど、ちゃんと調べることは誰にでもできることなのに、それらをいろいろな政治的要因、経営的判断で行わないで作られてしまったかわいそうなサイトが多数あるのが許せないというか、残念に思うんだよね。
だからできればUIもしっかり意識しつつ、UXもしっかりやっておけば、案外それだけで飯食っていけるのかなって思う時もあったりするよ。
というわけで、UXは学問。俺的に広義の意味では学問にしておくよ。
逆に狭義の意味ではこういうのも有りかなって思ってる。
UIに対する味付け要素
これのほうがしっくり来るかな。『UI/UX』って書かれてる場合は、こっちの意味のほうが多いかもしれない。
もっと狭い世界で考えると、JavaScriptかな。そしてそれを便利に使うためのjQueryなどのライブラリ。そこら辺も現場では含んだ使い方されてるのかもね。
情報設計
はい、情報設計。IAですよIA。Information Architectね。知ってる人は知ってるけど、知らない人は死ぬまで知らないで生きていけそうな、でもそもそも日本って情報設計士が少ないよねっていう人がちらちら出てくる程度には認知されてる、IAです。
以前俺が考えていた、働く姿勢というかスタイルで、こういうのがある。
システム（be）＋情報設計（ia)
システム（be）＋デザイン（fe）
デザイン（fe）＋情報設計（ia）
iaは情報設計
feはFrontend Engineer
beはBackend Engineer
のそれぞれ略ね。
※feとbeは当時の俺が勝手に考えた単語なので、利用頻度は低いかも。
つまり3すくみ。
大分前に作ったスライドだけど、Slideshareにアップしてあるので、ここに埋め込んでみるよ。
ごめん間違えて消してた！
スライド見つかり次第アップします。
ここの2ページ目にあるように、ia、fe、beの三すくみで仕事すると早いよね、って思ってた。それぞれがそれぞれのスキルを少しずつマスター（4ページ目）しておけば、最悪一人倒れても二人でなんとかなるので、案外理想形ってこれかなーって、今でも思ってるよ。
基本的な役目が明確だから、プロジェクトのフェーズによってやることも単純（6ページ目）。BTSでコラボするだけでOK。
で、仕事は程々にして健康もいたわろう（8ページ目）って感じで終わってるんだけどね。
いやしかし懐かしいなこのスライドwww
日本だと、というより、海外でもどうなのかはよく知らないけど、Web制作会社って大抵ディレクターという役割の人がいるでしょ？
正直いうとさ、何の仕事してるのか不明なんだよね！！！！
システム組めなくてもある程度システムで何ができるかくらいは知ってて、デザインもすごいアーティスティックなことはできなくても、Photoshopでアイコン作るくらいは出来て、とか、そんなのがディレクターなのかなぁ。
クライアントとの折衝はfeもbeも出来ないとおかしいでしょ。そもそもが。
で、プロジェクトの全体の進捗管理もさ、別にディレクターじゃなくてもできるじゃん。
そう考えるとディレクターって不要なんだよね。そういう名前の肩書を持った人って別にいらない。
大抵の会社ってディレクターがいるけど、デザイナよりデザイン出来なくて、プログラマよりプログラミングできなくて、何のためにいるのか、本当によくわからないんだよね。
そんなのに会社は高いお金出しちゃってる。
むしろディレクターっていうより、アシスタントとして、fe、beの下に付けばいいと思う。
その後得意のモノヅクリ炸裂で素早くモックつくって、クライアントに見せてOKもらえれば、もう方向（ディレクション）が決まるわけだから、方向決めする役割のディレクターって人は不要。
というわけで、ia、fe、beという３つの技術を対等にして回したほうが断然はやいじゃん、って思う。
ディレクターって現場からすると（少なくとも俺が居たWebデザイン会社数社では）邪魔なだけだったしね。上から目線でごちゃごちゃと、仕事の邪魔してくるし。仕事好きっていうより、会社にいるのが好きって感じのディレクター多いしね。
ディレクターとかっていう邪魔なだけの上司なんかいらないので、むしろ今まで必要なのに全然足りなかった情報設計士ですよ。うん。
三国志で言うと、劉備、関羽、張飛に対する法正、徐庶、諸葛亮みたいなもんです。はい。軍師です。軍師がいなかったら定軍山で夏侯淵を倒せなかったでしょう。
そしてじゃぁ、情報設計士って何やるの？と言われたらこう答えよう。
具体的にどういう知識が必要なのかっていうと、まさにここを見ていただければ一目瞭然。
株式会社モフ Labs - IA Wiki
俺のおっさん仲間がいる会社なんだけど、彼は数少ない情報設計士。
とにかくトップページや下層の構造などは、情報設計士がまとめるわけ。
例えば構造的に10個のコンテンツが合ったとして、すべてにアクセス出来ないとおかしいけど、情報設計的にはファセット分類とかフォーカスって言うけど、ここらへんは情報設計士に任せるわけよ。
で、10個のうち意味合いが重いものはショートカットとしてトピックに載せておく、など、こうやってレイアウトを決めてていけるわけ。
オモロイでしょ。
情報設計ってのはそんな感じで捉えていただければと。
最後に
というわけで、次回から具体的な解説をしようと思うんだよね。GoogleとかGoogleとかGoogleなどの有名サイトを部分的にDisって行こうと思うので。お楽しみに！！
facebook
twitter
google+
fb share