グラフィックからデザインに入った人がWebデザインするなら、UIの勉強って必要?
グラフィックデザイナーばかりの会社でコーディングをしておりますが(エセWebデザイナーと言ってるのは会社名刺の肩書がWebデザイナーだから)、デザイナーから「いくら参考サイトを見てもWebっぽくならないけどどうすればいいの?」という話になり。私はグラフィックデザイナーを志望して、グラフィックの事務所にバイトに入ったのに気がついたらコーダーをやっていて今に至る、というキャリア(長い)ですので、うまく答えられず、手駒(ノウハウ)がない、と。
そこで思い出したことが。
就職活動をしていた時、デザインスクールで制作した作品を持って、よくわからずにUIの会社を受けたこと。「君のデザインは純然たるグラフィックデザインだ、……なんでウチにきたの?」と言われました。
その時は食い下がったのですが、よく考えたら「ほんまや」と納得し、当時やりたかったのは書籍や雑誌のデザインであってぜんぜん違うカテゴリやってもなーと、課題を頂いたのですが辞退しました。
極端に言うと、UIとグラフィックは違うカテゴリ。
UIとグラフィックデザインのちょうど交わってるところに、Webデザインやアプリのデザインが含まれていると考えています。
平たく言うとユーザー自身が操作して直接目的を達成してもらう、システム設計に深く関わるUIデザインに対し、グラフィック(印刷物)は、文字組・ビジュアルそのものでコミュニケーションを図りユーザーに間接的に目的達成を促します。
ネットショップで直接商品を買ってもらうのと、お店に行きたくなってそこで商品を買ってもらう、の違い、でしょうか。
失礼を承知で申し上げますと、グラフィックデザイナーさんの作られるWebデザインはコーディングが難しいです。コレ何でマークアップしたらいいの?、コレ押すとこどこ?、とか、こんなところになんでボタンがあるの…?あ、まさに、このポートフォリオサイトですね。
会社のスタッフ曰く、「A4サイズは想像できるけどモニタのサイズは人それぞれで想像しにくい」のだそうです。
コーダー的にグラフィックデザイナーに「歩み寄ってよ!」と言いたいのではなく、「なんでこうなるの?」と考えると、一歩踏み込んでアプリのUIを作れと言われたらどうするんやろうと思ったのです。
UIの本を読んだだけの付け焼き刃の知識ですが、ユーザーにどこを押してもらいたいか、どのように目的を達成してもらうかを考えるとき、このボタンをおした時の動きは、注意を向けさせるにはどうするんや、操作をより心地よくしてもらえるには、イレギュラーが起こった時は、などなど「ユーザーのやること」の数だけ、複合的にひとつひとつ考える必要があります。
余談ですがモンストを教えてもらった時指が触れているところがキラーンとなるのに感動しました。そういうちいさなことの積み重ねだったりします。
Webサイトでも「ユーザーのやること」がいろいろあり、目的があります。今までUIの本を読んでもいまいちピンとこなかったのですが、「ユーザーのやること」にひとつひとつ目を向けてあげると、より気持ちの良い、Webっぽい、デザインになるのでは!(紙とおんなじ感覚で作っていいというわけではなく、仕組みをある程度心得ているのが前提となりますが、、、)
そんなわけで、エセWebデザイナーの私もUIを勉強しようと思います。実践で入るにはBootstrapのテーマを作ってみるのがよいのかな??? UIではありませんが、WordPressのテーマも、CMSの仕組みを理解するにはアリかも…。
だいぶと抽象的で浅い話になりましたので、最後にUIに関して読んだ本をご紹介します。どれも古い本なので新しい本が読みたいところです。
ユーザーインタフェースデザインの基礎知識 ~プログラム設計からアプリケーションデザインまで~
- 作者: 古賀直樹
- 出版社/メーカー: 技術評論社
- 発売日: 2010/04/23
- メディア: 単行本(ソフトカバー)
- 購入: 11人 クリック: 170回
- この商品を含むブログ (15件) を見る
ウェブデザインのつくり方、インターフェイスデザインの考え方。
- 作者: 矢野りん
- 出版社/メーカー: MdN
- 発売日: 2011/09/26
- メディア: 単行本(ソフトカバー)
- 購入: 6人 クリック: 229回
- この商品を含むブログ (8件) を見る
デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン
- 作者: Jenifer Tidwell,ソシオメディア株式会社,浅野紀予
- 出版社/メーカー: オライリー・ジャパン
- 発売日: 2007/01/23
- メディア: 大型本
- 購入: 29人 クリック: 650回
- この商品を含むブログ (93件) を見る