別にこのシリーズを忘れていたわけではなくてですね。言い訳不要ですね。再開します。
予告としてデファクトについて考えるとしました。これは事実上の標準を示す「デファクトスタンダード」のことです。これをWEBにおけるリンクを中心に考えてみます。
- デファクトを破るのはミスリードのリスクあり
- 思考の流れとUIを一致させることが重要
- 一部の色やアニメーションといった視覚効果もフィールとして考える
デファクトの色を採用する必要はない
ブラウザにおいて、リンクのデファクトは大ざっぱに分けると2つでしょう。
- 未訪問
- リンク色:青 テキスト装飾:下線あり
- 訪問済
- リンク色:赤紫 テキスト装飾:下線あり
白地に黒のテキスト、そして上記のようなリンク色がデファクトです。なぜこの色が採用されたのかを知らず、調べたところ情報が見つからず。ならば色彩学かなと思って、その手の本を読んでいる所です。
それはともかく、まずは2つの側面からリンク色というのを考えることができます。1つ目は、見なれたものであることです。およそ、インターネット利用者が最も目にする配色がこれという説明に尽きると思います。2つ目は、白地に黒という配色では、青が浮いて見えて、赤紫が沈んで見えるということです。ここが色彩の問題で、自分では明らかにできていないところですが。
大事なのは、未訪問がテキストの中で目立ち、訪問済が目立たなくなることです。また、そのリンク色の割合によって、自分がどこまでこのリンク群を消化したのかという目安にもなります。これを踏まえれば、リンク色はデファクトのままである必要はなく、「目立っているか、そうでないか」で決定すればよいと考えられます。
リンク以外で下線を使うのはミスリード誘発
問題は下線です。ワープロの世界だと下線とは注目するポイントを示唆するものとして扱われます。ですが、WEBで同じように使ってしまうとミスリードを誘発します。リンクのデファクトを踏まえると、下線がある場合にリンクであると想起させてしまいます。ホバーさせた際に下線が出るのも同じように捉えられると思います。
リンクしないテキストに下線は使わないと割り切ってしまう方が得策です。要は慣れとルック・アンド・フィール(以下、LnF)の問題です。リンクの色と装飾ひとつをとっても、扱いを間違えればLnFの特にフィールを大きく損ねることになります。
非テキストリンクは押せるルックを
非テキストのリンクはどういった形状をとるべきか?という話になると、ボタンがいいと言われます。何故か?と問うと、「押せると思うから」という返答がきます。私はこれについて本質ではないと考えています。なぜなら、WEBデザインの世界だけを見ても、グローバルメニューはボタン(大概はトグル)になっていないものも多いからです。
リンクという視点で考えた場合、テキストリンクを「クリック」することでリンク先のページを表示するというアクションが発生します。しかし、テキストリンク自体はボタンの形状をしているわけではありません。つまりボタンの形状をしていなくとも、「押せる」と思うわけです。これはデファクトであるからこそ、できることでもあります。では、リンクの形状を問わず共通するものは何か?「押せると思わせるルックである」ことです。
テキストであれば、浮いて見える配色で下線を、非テキストであれば押せると想起させる形状なり、注釈などを。ボタンというのは、あくまで押せると思わせる形状の代表的な存在であって、実装手段の1つに過ぎません。
あくまでこれは、前回で触れた「予測できる=解りやすい」を踏襲しています。すると、リンクのルックとリンク先の内容が一致していることなど、芋づるで押さえるべきポイントが決まってきます。なおかつ、LnFにおけるフィールまで考慮することで、「予測した通りに動く=使いやすいと感じる」にユーザを導くことになります。これが思考の流れとUIの一致と言えます。
エフェクトをフィールとして使う
WEB上ではJavascriptによるエフェクトの多用がよく見受けられます。いわゆるDHTMLなわけですが、そのエフェクトをどれだけ有効活用されているかと考えると、個人的には疑問に感じる点が多いです。
エフェクトはルックなのか、フィールなのかと問われると、私はフィールと考えています。フィールとして使われるエフェクトというのは、画面上で発生した事象をユーザに通知することです。
例えば、WindowsとMac両方で共通のUIで考えると、ウィンドウの最小化です。デフォルトの設定ですと、Windowsの場合は、縮小化されたタスクトレイ上のパーツに向かって、ウィンドウが徐々に縮小(およそ0.5秒?)されていきます。Mac(OSX Leopardとします)だとジニーエフェクトを利用しつつ、ドック上の格納位置に向かって吸い込まれるように(およそ1秒~1.5秒?)ウィンドウが消えます。どちらも縮小化というアクションに対して、エフェクトを適用することで、ユーザにウィンドウが縮小化され、どこに格納されたかを通知するというフィールを生み出しています。ロード時間中のインジケータ、画面切り替え時の切り替え先のポップアップ、私はこれらが正しいエフェクトの活用法だと思います。
エフェクトを認識する時間はどれぐらいか?
エフェクトと一口に言ってしまっても、様々ありますが、ここのところ気になっているのは、2Dエフェクトと3Dエフェクトについてです。特にKeynoteでエフェクトを適用していると、2Dエフェクトで程よいと感じる動作時間、3Dエフェクトで程よいと感じる動作時間に差があります。
仮説としては、2Dエフェクトは0.5秒以上、1秒以下、3Dエフェクトは1秒以上、2秒以下がしきい値と考えています。といっても、それぞれのエフェクトにさらに細かく種別があるので、もう少し解析が必要とは思っています。ここは、人間の視覚の根本である、情報認知の世界だと思うので長い道のりになる気がしています。
とりあえず、次回についてはエフェクトの認知時間、もしくは時間軸による情報認知について、掘り下げてみようと考えています。
CPI MEGA MIX 2016に登壇しました
2016年7月26日
KDDIウェブコミュニケーションズさん主催のCPI MEGA MIX 2016に登壇しました。Web 制作に必要な「技術・戦略」と Web 制作者の交流の場、ということで、全国のCPIエバンジェリストが昨年に続いて一堂に会しました。私はITスキルを通じて異業種との協業プロジェクトをいくつか経験し、そのケーススタディーを共有するという内容でセッションを行いました。
0 Comments1 Minute
テスト環境の保持期限ってどのぐらい?
2014年7月4日
システム開発に従事する方々、過去のプロジェクトについてテスト環境はどのぐらいの期間で保持していますか?思いも寄らぬタイミングで過去に納品したシステムについて問い合わせがきたりします。テスト環境を残しておいて良かったと思う反面、責務として残り続ける点についても色々と考えさせられるものがあります。
0 Comments1 Minute
[レポート]一歩先行く!ツール活用で制作効率アップ
2012年7月29日
今回のセミナーは全部で5セッションと非常に盛りだくさんでした。特徴的だったのは、講師陣5名の内、3名がプログラマーだったことではないでしょうか?Web制作というとフロントエンドに注目されがちなのですが、制作フローに沿って要所を抑えていくセミナーになったと思います。
0 Comments1 Minute
フリーランスの製作者が考えるべきプロジェクトのバランス
2012年5月22日
フリーランスだとプロジェクトに参加して様々な方と共同制作というケースもよくあるでしょうし、クライアントからの請負で制作することもあると思います。登場人物が増えれば増えるほど、プロジェクトのバランスを良好に保つというのは難しくなります。一製作者として、どのようにプロジェクトに携わるべきかを振り返ってみました。
0 Comments1 Minute
「残す」ことを前提とした設計
2011年9月7日
ここでの「残す」とは、継承というニュアンスを含んでいます。子育てをし、親の気持ちというものが分かり始めました。親は自分に何を残そうとしていたか、自分は何を残せるのか?自分の中で非常に大きなテーマとなりつつあります。残すことを前提に何かを始めるというケースは恐らく少ないと思います。
0 Comments1 Minute
Twitterなどで失言する人に見えるパターン
2011年6月18日
AERAの「放射能がくる」への反響、ソーシャルネットワーク上での失言による炎上、言葉は常に諸刃の剣です。大小問わず炎上した経緯を眺めていて、失言する人のパターンという仮説を立ててみました。
0 Comments1 Minute
情報処理技術者として私が目指すこと
2011年6月1日
IAという言葉があります。プログラミングやデザインといった情報を具現化する手法は数あれど、その過程は属人的なノウハウであることが多く、他者との共有が難しいものです。それを言語化、図解する取り組みは過去にも数多ありますが、WEBデザイン上における同取り組みに正式な呼称がついたと捉えています。私も似た取り組みを行なっている者として、今後の指標を自分に書き残します。
0 Comments1 Minute
それでも私がブログを書きたくなる理由
2011年2月8日
世界に向けて発信することが、今は非常に簡単にできます。情報の性質が日々変化していく中で、あえて残したい情報として何が考えられるでしょう?そして、残したい理由は?自分のブログに対するスタンスを振り返りつつ整理してみます。
0 Comments1 Minute
あなたはフリーランスとして生き残れますか?
2011年2月1日
CalmTechは開業3年目を迎えました。記念すべき日ではありますが、最近の開発者・製作者事情についてのエントリから思うところを、今後の自分への戒めを込めて残しておきます。
1 Comment1 Minute