webデザイン３つの役割 – ウェブサイトにおける触覚
webデザインフローには大きく３つの役割があると思っています。
その役割について３編に分けて記事にしたためます。
解釈の一つとして見ていただければ幸いです。
その役割について３編に分けて記事にしたためます。
解釈の一つとして見ていただければ幸いです。
webデザインのフローを役割を３つに分解すると、
1. ディレクション
2. デザイン
3. マークアップ
この役割を別の言葉で言い換えると、
1. 知覚の形成
2. 視覚の形成
3. 触覚の形成
だと私は考えています。
今回は、『3. マークアップ – 触覚の形成』 について。
マークアップ担当が持つ２つの作業
1. コンピュータが理解できるように「翻訳する」作業
2. ユーザーが操作する「触覚を持たせる」作業
効率的に仕事を回すことを考えるディレクターやデザイナーから時折、
「デザイン通りに見えればいい」といった声を聞く事があります。
あくまで“html, cssコードを書く人”として認識されていると感じました。
確かに、数年前まではFlashを使わなければリッチなコンテンツを作ることが難しかったため、作業の大部分が翻訳(html, css)だったかもしれません。
しかし近年、ブラウザ進歩によってリッチなコンテンツ制作のハードルが低くなり、あたかもFlashのような表現が可能になりました。
リッチコンテンツの時代に差し掛かり、“触覚”が重要な意味を持つようになりました。
自動車に操作感があるように、webサイトにも操作感がある
例えば、自動車。
車体, 車内のデザインだけでなく、乗り心地や操作感も大切ですよね。
webサイトも同じだと思います。
webサイトはただ眺めるだけではなく、ボタンを押してページを移動するし、表示する。
申込フォームがあれば、入力操作もある。
そこには確かに“触覚が存在する”と私は思っています。
操作時に発生するストレスを少しでも軽減し、さらには楽しい・気持ちいい体験へと昇華させることが私たちの役割ではないでしょうか。
例えば、サイドナビゲーション。
よくみるデザインですが、大きく二通りのコーディングが可能です。
赤い枠がクリックできる範囲です。
どちらの方がユーザーに優しいかは説明不問ですね。
例えば、フッターナビゲーション。
サイト全体のリンクをフッターに設置するケース
赤い枠がクリックできる範囲です。
a{
display:inline-block;
padding:3px 4px;
}
例えば、アニメーション。
クリックするとページが遷移する形式で作ってみました。
左はアニメーションのスライド効果があるので、「次のページに進んだ」という感覚がありますが、
右のアニメーション無しだと、何が起こったのか分かりません。
触覚も捨てたもんじゃないですよ
ユーザーに優しいマークアップは、コンバージョン率アップに必ず貢献します。
訪問してくれたユーザーに対して最高のおもてなしを提供するのは、
視覚だけでなく、触覚にもありますよということが伝わればと思います。
(2012年1月9日の記事)
