「恰好良い」Webデザインの作り方
恰好よいwebデザインの作り方
View more presentations from 誠 井上
いやー1年間みごとに放置してました。
昨日、福井で開催された震災チャリティイベント、「UPGRADE JAPAN!!」でおはなししてきました。
スライドをアップしたのでシェアしたいと思います。
「恰好良い」Webデザインの作り方
見た目としてのデザインというところに目を向け、考察してみました。
実際webデザインは技術的な話題や新しい考えかたの話題は多いんですけど、見た目を整えるって意味のデザインってあまり語られてない気がします。webデザインをプロダクトや、空間デザインに近いものと位置づけ、デザインのワークフローを「視線の誘導」と「装飾の演出」の2つのSTEPに分解することを提案してます。
企画やコンテンツのほうが重要なのは当然ですが、実制作に入った後のワークフローとして参考にしていただければ幸いです。
制作者の「３ある」、ユーザーの「３ない」
先日社内勉強会にてお話させていただきました。
テーマはユーザビリテイです。
web標準が制作業界に定着し、我が社でもユーザビリティという言葉を聞く機会がふえてきました。にも関わらずそのユーザビリティ議論は自分が使いにくかったことに起因していたり、偉い人の鶴の一声で進んでるような案件が目につきます。それユーザーのこと考えてないよねと問いただしたくなったわけですね。そこで「それ、誰のためのユーザビリティ？」という発表をさせていただきました。
我々制作者と、ユーザーとの間には決定的な溝がある！ということで“制作者の「３ある」、ユーザーの「３ない」”としてまとめてみました。
制作者の「３ある」
まずは制作者が持っている3つの特徴を紹介します。業界人なら共感できることうけあいのまさにあるあるネタですねｗ
欲望がある
制作者は欲深いです。
一ページの中に情報をつめこんでおけば、ユーザーはすべて目を通してくれると思っています。また、ユーザーには全く関係ない社内方針や社長など富裕層の要望などすべてを盛り込もうとします。
知識がある
制作者はプロです。
ナビゲーション構造や、リンクのありか、ここはAJAXだからページ遷移しないとかここは別ウィンドウで開くとか…サイト内の仕様を熟知しています。技術的な知識も当然豊富に持っています。
愛着がある
制作者はうぬぼれています。
クールなデザイン、スマートなコード、魅惑のライティング、空気のような仕様…サイトのなかにはたくさんの思いでと、あたかも長年住み慣れた実家のような愛着がそこにはあります。
ユーザーの「３ない」
それに対してユーザーが持っていないものを３つ紹介します。制作者が持っているものと完全にずれてますね。
読まない
ユーザーはページ内の文章を読んではくれません。
自分の興味があるキーワードを拾い読みするだけです。文章が多いだけで嫌気がさしますし、それっぽいだけで違うリンクをクリックもします。そこに情報がみつからなければすぐ帰りますし、すべての情報があっても満足して帰っていきます。
知らない
ユーザーはサイトの仕様を知りません。
どこに何があるのか、そのリンクがjavascriptで開くのか別ウィンドウなのかも知りませんし、そういう場合でも戻るボタンで戻れると思っています。いちいち考えることもしませんしそもそも考えたくありません。
じゃー制作者はどうしたらいいのか
制作者の「３ある」とユーザーの「３ない」の間には埋めがたい溝があります。「３ある」を常に意識して抑制せよ！というのはブッダの教えレベルの話で悟りを開く必要がありますｗ（そういうアプローチも面白いですがｗ）
なのでまずはユーザーを知ることから始めてはいかがでしょうか？
幸いにしてwebサイトはアクセス解析によってある程度、ユーザー像と動きを知ることができます。すべての中心に客観的なデータを持ってくることで自然と「３ある」は抑制できると思います。また、家族や友人レベルで良いのでユーザーテストをしてみるのも良いかもしれません。ちなみにうちの母親でテストをした結果、デスクトップの左上にあるマークがインターネットという覚え方をしてましたｗこの場所からアイコンが移動しただけでわからなくなるそうです。こんなレベルでもmixiを使ってブログを書いていたりyoutubeを楽しんだりしています。webありきの世界になっている中で私たち業界人はもっと謙虚になるべきなんでしょうね。
「３ある」を抑えて「３ない」を知る。
ユーザビリティを考える大前提として肝に命じておくべき知識です。
Firefoxアドオン ポップアップ辞書「フェッチイミ」
技術系の調べ物をしていると英語のページに出くわすことがあります。今までは舌打ちしつつ離脱していたのですが、そんなことにも今日でサヨウナラです。翻訳だと意味分からない訳になることが多いんで、単語だけ手軽に教えてくれるツールないかなーと探したら見つけました。
マウスオーバーした英単語の意味をポップアップで表示してくれるFirefoxのアドオン「フェッチイミ」です。
個人的にかなり感動しました。分からない単語だけ即座に表示してくれるので原文のままでも結構読んでいけます。同時に単語学習も出来そうで一石二鳥！アルクの英和辞典からデータを持ってきているそうで、インターフェイスも必要十分条件を満たしておりいい感じです。
「Get up」など二つの単語で一つの意味をなしている場合もちゃんと教えてくれます。これはかなり嬉しいですね。中学程度の熟語も相当忘れているので…ｗ しかもスピーカーアイコンがついている単語は、ctrl+Fで発音までしてくれます。もちろんツールを使わない時はOFFにもできますので必要ないときにポップアップされる心配はありません。
いつかはこのツールともサヨウナラして、自力で読めるようになるよう頑張りますw
OOCSS(Object-Oriented CSS)の考え方
CSSでサイトを作るとき、ページをidで区切り、その中のclassに対してスタイルを指定するというやり方が一般的じゃないかなと思います。
#page-foo .box {margin:10px }
#page-baa .box {margin:20px }しかし、いざあのページのこの部分をこのページに持ってきたい…となるとCSSファイルごと持ってこなければならない、移転先のclass名とバッティングしてしまうなど再利用が難しいという反面もあります。
今回仕事でサイトを構築するにあたり、再利用可能なモジュールで構成すればコーディングにかかる工数は減るのではと考えていたので（特にIEのバグ関連…検証済みのモジュールで構成すれば確実！）再利用性とパフォーマンスを重視したフレームワークOOCSSについて調べてみました。
OOCSSの基本的な考え方
目的別にclassを複数指定する。
idに依存するロケーションで見た目を区切るのではなく、使われ方に応じてclass名をつけます。ソースで説明してもわかりにくいので例をあげます。ここでは「ダイニングテーブルに置かれたリボンのついた大きな箱」をマークアップするとします。
ロケーション別に分ける場合
<div id="#ダイニングテーブル"> <div class="リボンのついた大きな箱">…</div> </div>
とマークアップしていました。
しかしOOCSSでは
<div> <div class="箱 大きい リボン">…</div> </div>
と記述しています。ダイニングテーブルかち無視です。しかし、この箱はちゃぶ台の上にもそのまま置けるようになったわけですw
また、「シールの貼ってある小さな箱」を表現したいときも
<div> <div class="箱 小さい シール">…</div> </div>
となり、「.箱」は再利用できるわけです。
無駄に箱のスタイルをいくつも記述する必要がなくなりますね。同じように「大きい、小さい」も「箱」だけでなく「袋」なんかにも再利用できるわけです。良く考えてみれば箱の例のように、箱という機能はテーブルによって左右されるわけじゃないですもんね。どこにあっても箱は箱として使える！これ箱としての大前提！ってことですね。
構造とスキンを分離する
先程の例で言うと「箱」「大きい」が構造、「リボン」がスキンになります。実際にOOCSSのテンプレートを見てみると、以下の図のようになっています。
「.line」がページに横たわっている大枠、「.unit」「.size1of3」がカラムとその幅、「.mod」がモジュールといった構造を表わしています。「.grab」「.excerpt」「.sommers」はモジュールに当てられたスキンです。構造には marginやfloatなどの隣接要素に影響を与えるプロパティが、スキンにはbackground、borderなどの装飾系プロパティがシンプルに指定されています。
実際に使ってみて
CSSでここまで構造について真剣に考えたことは、恥ずかしながらありませんでしたｗ
いままではある程度場当たり的に「ここはこのくらいのmarginでいいだろー」で済んでいた部分が、「ここは.lineだからmarginはいくつで…」とかっちり決めて置かないとすべてに影響してしまうのです。後々の再利用のことまで考えてコーディングしないといけないので、初期工数はかかりますが、再利用性は申し分ないです。
自分は、スキンのライブラリページをまずコーディングし、そこからコピペでパズルのようにページにはめこんでいく方法をとっています。検証済みの構造の上にスキンをかぶせていくだけなのでブラウザ間の表示崩れもありません。
ぶっちゃけテンプレートのhtmlはパフォーマンスや汎用性を持たせるためか、ちょっと複雑な作りになっています。実際に使用するには厳しい部分も結構あると思います。（角丸のために空のbタグが大量にあったり…）なので、テンプレートを直接カスタマイズするよりは考え方を身につけて要件に合わせ自分で構築していった方がいいかもしれません。
どれだけ優れたフレームワークもあくまで道具でしかなく、自分の手になじませないといいものは作れないと思いました。
Webディレクターズハック 〜社内TechTalks参加レポート〜
社内TechTalksに参加してきました。講師は近所のweb制作会社から@ichigamiさん。テーマは「Webディレクターズハック 〜実務に役立つWebディレクションのコツ〜」でした。
普段、社内のディレクターさんとしか接する機会がないので、社外のディレクターさんがどうやってるのか、お話が聞けたことは大きな利益となりました。その中で心に響いた言葉をいくつか。
決裁者と直接話せ
仕事をしていていちばん困ることはちゃぶ台返しです。
要件に対して最適な方向性をデザイナーとして提示して担当者と作り上げてきたのに、社長から「いやそういうことじゃない」と…今までの時間を返せーとなる訳です。そうなる前にあなたに決裁権があるかどうか、真の決裁者は誰なのかを明確にしなさいとのことでした。
当たり前のことなんですが、時間の関係で煩わしくて忘れがちなことだなーと思いました。
要件の本質を汲み取れ
ここの文字を赤くしてくれと言われて「はい、赤くしましたー」と言っちゃうデザイナーはポンコツだと。
「赤くするのは目立たせたいんですよね、それはなぜですか？」と問うこと。「そういうことであれば、赤くするんじゃなくて、こちらの方がもっと効果的ですよ。」と提案すること。
これに関しては自分は実践してるつもりなんですが、そのまんまやっちゃう人が意外に多い気がします。
クライアントのデザイン能力が自分より高いのならそれでいいんですが、それならデザイナーに発注しない訳で、期待以上の働きをしてくれるのを求められている以上、それには答えるのがデザイナーの義務です。対立することを恐れていては結局クライアントにも自分にとっても利益のないものが出来上がってしまいます。継続可能な関係を築くためにもいつでも最適な可能性を求めることが重要です。（ただし対立しすぎてデザイナーの我を押し通すのはもっといけないこと）
提案のその先を提案する
せっかく最適な方法を提案してそれが実装されたとしても、どれだけの効果があったのか証明できなければ自分の評価につながりません。デザイナーとして提案するならその効果を数値化して測定方法まで提示すべきとの事でした。
これはやっていなかったですね…。効果測定は個人的にやることはあっても相手にやり方まで伝えることは恥ずかしながらしてなかったです。問題意識を共有する意味でもやるべきだなと思いました。提案はしたけど、自分の思い込みでした〜じゃ笑い事じゃないですからねw
結果として
まずはクライアントとコミュニケーションを積極的に取ること。自分との壁を取り払わなければどれだけ正しいことを言っていても受け入れてもらえません。土壌が整っていなければどれだけおいしい野菜の種を植えても育ちません。
次はクライアントを愛することかなと。くさいですが、やりたいと思ったことに善悪はありません。意図を正しく汲み取ってクライアントに最適な方法を提示すること。そのためにはゴールを明確にしてそこに向かって一緒にやって行こうという協力関係が必須になります。クライアントの利益は必ずこちらの利益になります。ゴールからずれているなら、Noという勇気も大切です。それがあなたの利益になるんですよと伝えることが大事！
共通のゴール、つまりはユーザーを見据えることをクライアントに伝えるのも大事だなと思います。ユーザーの存在しないWebサイトは存在しません。もしあったとしてもそれを作るために発注するクライアントはいないでしょう。デザイナーは最終的にユーザーの目に届くものを作成する訳ですから、責任を持たなければなりません。「ユーザーの利益になるもの→クライアントの利益になるもの→自分たちの利益になるもの」という関連性を俯瞰で見つめる能力が必要になります。
費用対効果を考えつつ、その中でユーザー、クライアント、そして自分が幸せになる方法を見つけることが本当のクリエイティブな活動なのではと感じた一夜でした。
HTMLコーダー100の質問なるものに答えました
ちまたで話題？の「 HTMLコーダー100の質問」に答えてみました。
自分はデザイナーコーダー兼任なので専属じゃないんですが、結構おもしろかったです。短い5年間のwebデザイン歴を振り返って自分は何をやってきてこれからどうするのかを考えちゃいました。
多いようで少なかった100の回答は以下！
1 年齢は？
28歳
2 パソコン歴は？
13年
3 コーダー歴はどれくらいですか？
5年
4 初めてwebを作ったのはいつですか？
5年前。未経験で入社しました。
5 コーダーになろうと思ったきっかけは？
就活がうまく行かずたまたま採用してくれたのがwebデザイナーでした。
6 コーディングは誰に／どこで習いましたか？
仕事を通じて。
7 web業界以外の友達・家族とコーディングの話をしますか？
しない。まわりはヒッピーみたいな人が多いですw
8 ご両親はインターネットユーザーですか？
する。親父はゴルフ関連のサイトばかり見ています。
9 視力はいくつくらい？メガネ・コンタクトどちらですか？
0.3。メガネ男子。
11 ネットショッピングをしますか？主に買うものは何ですか？
たまに。音楽とかちょっとした小物とか。
12 携帯サイトで買い物をしたことがありますか？
無いです。
13 お酒は強いですか？
好きですが、最近ビール１杯でもういいやって思っちゃいます。
14 休日の過ごし方を教えて下さい。
ヨメとおでかけ、一人なら喫茶店で本読んでます。
15 今、欲しいものは何ですか？
高級炊飯器
16 平均睡眠時間を教えて下さい。
5時間
17 平日の起床時間は何時ですか？
９時くらい
18 なにかスポーツをしていますか？
冬以外は自転車通勤を心がけてます。冬は雪ふっちゃうので。
19 パソコンと関係ない趣味がありますか？
ギターを少々。
20 コーディングに役立つ資格、パソコン関係の資格を持ってますか？
持ってません
21 昼と夜、どちらの方が仕事がはかどりますか？
効率はともかく、夜型だと思います。
22 ブラインドタッチは教本通り10本の指を使いますか？
いやー小指は使わないことが多いですね…
23 眠い時の対処法はありますか？
10分寝ます。
24 息抜きについ見てしまうサイトはなんですか？
息抜きするときはサイト見ませんね。
25 他に息抜きにしていることがあったら教えて下さい。
たばこかコーヒー
26 仕事上で得意なことはありますか？それは何ですか？
実現不可能そうなことに挑戦するのが好きです。
27 仕事中にBGMは聞けますか？能率が上がるのはどんな音楽ですか？
悲しく切ない音楽。泣きそうになるとフロー状態が訪れます。
28 作業パソコンはWin?Mac?
Winです
29 作業パソコンはデスクトップ？ノート？
デスクトップです。
30 作業パソコンのマウスは標準マウスですか？
ホイールに横移動のスイッチがついたヤツ使ってます。
31 マウスパッドは使っていますか？
使います。手首の部分にクッションの入ったヤツ。
33 作業パソコンはモニタは何インチですか？
何インチなんですかねぇ…。デュアルです。
35 自宅に作業環境はある？
あります。
36 会社と自宅、作業はどちらがはかどりますか？
会社ですね。家だと眠たくなります。
37 自宅パソコンは家族と共用ですか？
ヨメも使います。
39 自宅パソコンのメーカーは何ですか？
40 自宅パソコンはデスクトップ？ノート？
メインはノートです。場所を選ばないので素敵です。
41 打ち合わせのメモは手描きとテキストどちらがいいですか？
手書きです。文字書かないと頭が腐るので
42 スケジュール管理は何でしてますか？（手帳・アプリケーション・webツール・モバイルなど）
44 RSSリーダーは何を使ってますか？
45 好きなポータルサイトはどこですか？
好きなわけではないですがやっぱりyahooでニュースは見ちゃいます。
47 不得意だけど使わねばならない技術はありますか？
48 web系の雑誌を購読していますか？
個人的にはしてません。会社ではweb creator購読していて読んでます。
49 webの参考書は何冊くらい持っていますか？
技術的な参考書は５冊くらいですかね。基本ググります。
50 お薦めの参考書があったら教えて下さい。
Design rule index—デザイン、新・100の法則。これはすばらしい本です。
51 参考にしているおすすめサイトがあったら教えて下さい。
Feel Like A Fallinstar。更新されるのを本当に楽しみにしてます。
52 コーディングに使ってる、便利なツールを教えてください。
dreamweaverのスニペット機能。よく使うタグをclass付きで登録してます。
53 コードにコメントはつけてますか？
つけます。うちのルールでインデントしてないので閉じタグの前にclass名付きでコメント入れてます。
54 制作過程で、どの作業が一番好きですか？(コーディング、画像作成、検証、打ち合わせ)？
全部好きですね。webデザインは本当にやりがいのある仕事だと思います。
55 画像切り出しに使うソフトはなんですか？
56 webデザインに使うソフトはなんですか？
57 検証対象ブラウザは何個ありますか？
IE6、8、firefoxの３個しかないですが、万が一崩れても情報が伝わるコーディングを心がけてます。
58 一から新規制作とリニューアル、どちらが好きですか？
どちらもやりがいありますね。やりやすさで言えばリニューアルでしょうか。
59 定期運用と新規制作、どちらが好きですか？
仕事では自社運営サイトのデザインをしてるので新規制作はあまりないですが、自由にできて楽しいです。
60 テーブルコーディング業務はありますか？
新規ではやらないですね。古いページでCSS対応してる暇がないときは少しいじったりします。
61 新規制作の割合はどれくらいですか？
ほとんどないです。
62 iPhoneサイトのコーディングをしたことはありますか？
無し
63 よく使うJavaScriptがあったら教えて下さい。
画象のロールオーバー
64 携帯サイトのコーディング業務をしていますか？
無し
65 FLASHはどのくらいできますか？
AS2を少々って程度ですね。AS3は完全にさようならです。
67 自分の書いたコードは美しい？
美しくありたいんですけど、、理想は逃げていくばかりですね。本当に奥が深いです。
68 ソーステンプレートを作っていますか？
テンプレートじゃないですけど、HTML構造に関してのガイドラインはありますね。
69 単語登録にタグを登録していますか？
してないです。スニペット愛用。
70 HTML5、早く実務で使いたい？
使いたいっす。divはもうたくさん。
71 CSS3、早く実務で使いたい？
一刻も早く使いたいですねー。角丸は特に魅力！
72 コーディングで伸ばしたい技術は？
簡潔かつ効率の良いマークアップ。
73 コーディング以外で伸ばしたい技術はありますか？
js関係ですかね。
74 職場にコーダー専門職は何人いますか？兼務は何人ですか？
デザイナーがコーディングもやってるので、23人ですか。かなり多いです。
75 職場のコーダー男女比はどのくらい？
半々くらいですかね。
76 勤務時間は何時から何時までですか？
10時〜19時
77 通勤時間はどのくらいですか？
車で15分、チャリなら20分。
78 月の残業時間は最高何時間でしたか？
10時間
79 現在の仕事環境で良いところはどんなところですか？
人間関係。上司にも恵まれたと思います。
80 デザイナなど他の仕事とコーディングを兼務してますか？
うちはディレクターが仕様を作成するのですがそのアドバイスや、案件管理もしてます。
81 職場は服装自由ですか？何か規則はありますか？
自由です。社員証をつけてます。
82 休日出社や徹夜作業はありますか？
基本ないですね。
83 プライベートでサイト／ブログを持ってますか？
ブログを最近始めました。サイトは作りたいなーと思いながら5年が過ぎましたｗ
84 プライベートでドメインを持っている。
無し。
85 プライベートでサーバーを持っている。借りている。
借りてます。重いファイルのやり取りとかに使います。
86 CSS Niteには何回行きましたか？
1回。
87 地方のCSS Nite行ったことありますか？
地方のしかないです。
88 尊敬するwebクリエイターがいたら教えて下さい。
自分で道を切り開いて良く人には憧れますね。
89 旅行に行く時パソコンを持っていきますか？持っていきたいですか？
持っていかないです。旅行を楽しみます。
90 好奇心を満たす面白い仕事を無償でやったことがありますか？どんな仕事でしたか？
そういやないかもですね。。やってみたいです。
91 ディレクターなどキャリアチェンジを考えてますか？一生コーダーを貫きますか？
ディレクターには興味がありますが、一生現役でデザイナーしてたいですね。
92 特定のパートナー（彼女・彼氏・夫・妻）がいますか？相手は同業者ですか？
編集者のヨメがいます。紙媒体の話が聞けて面白いです。
93 パートナーは同業者がいい？別の職種がいい？
同業じゃないほうがいいです。ライバル関係にはなりたくないので
94 コーダーをやっててよかったなあと思うときは？
綺麗なソースが書けたとき。
95 何年後／何歳までコーダーをやるつもりですか？
一生現役でやってきたいです。
96 次の締め切りはいつですか？
いつリリースか不透明な仕事を今はしてます…気ばかり焦るｗ
97 コーダー以外だったらどんな職に就きたいですか？
ミュージシャン
98 よいコーダーの条件を３つあげてください。
整理整頓、向上心、根気
99 10年後、あなたは何をしてると思いますか？
webデザイナーやってると思います。実務よりはアートディレクション的な仕事をしてたいです。
100 コーダーとしての自分を100点満点で評価してください。
60点。まだまだ勉強の余地がありますね。。
ユーザーの目が欲しいのだ！
会社の先輩がユーザビリティに関する勉強会を開いてくれたので参加しました。内容は、指定されたECサイトを「ユーザー目線で」購入直前まで使ってみて、どこが良かったか、悪かったかをディスカッションするというもの。
やってみて、まず感じたことは「ユーザー目線で」あえて見ることが難しい！！
僕だって当然ウェブサイトをユーザーとして使っている訳で、ユーザー目線で見れないわけがありません。ただ、ユーザー目線で見るために必要な条件が揃ってないんですよね。
- そのサイトに訪問する差し迫った用事がある
- そのサイトに自分のお金を払う理由がある
今回のように、あえて使ってみた状況ではこの条件は発生しないことが「ユーザー目線」を妨げたんかなーと思います。満腹のときにどっちのお肉がおいしそう？って聞かれても判断つかないのと一緒で求めてないものは正確に評価できないということだと思います。
でも困ったことに、普段自分がデザインしてるサイトにもこの条件そろってないんですよね…正確に評価できるはずがありません…
こうなったら死神と契約してユーザーの目を獲得するしか！
と思ってたらあるんですね。ちゃんとした国際規格が。
「ISO 13407」
ユーザーに優しいものはどんなものかではなく、ユーザーに優しいものを作るためにはどういう手順を踏めばよいかを定義しているそうです。
ユーザビリティと聞くとどうしても前者を求めてしまいがちですが、いろんな目的やユーザーによって、ユーザビリティはそのつど変化します。ならば、一つのものさしを作るのではなく、どんな状況でもユーザビリティの高いものを作れるプロセスを定義しちゃおうと。
さすが世界の賢人たち！
1999年に制定された規格だし、今のwebサイトに、しかも普段の業務にどれだけ適用できるか分かりませんが、ちゃんと勉強しようと思いました。
