Webサイト制作のワークショップ」のメモです。

WebサイトのUI(ユーザーインターフェイス)デザインには、ビジュアルで感性に訴えかける「ビュー」と、ページ移動などのナビゲーションを行う「コントロール」という2つの要素が共存します。Webデザインはビジュアルデザインを主導に進行されるものではなく、あくまでもユーザーの行動をデザインする所に重きを置きます。

そして、目的の情報へとたどり着いてもらうためのスムーズな動線づくりを行い、「成功体験」へと結びつける。Webサイトは、そこにアクセスした人に「成功体験」を提供するためにあるべき。大切なことだから2回書きました。

enjoy!

Webデザインの概念理解への近道

Webサイトで使われるUIには、主なものにボタンがあります。ボタンとは、それを押すと何か変化が起こるということを人はリアルの世界で学習しています。その学習した体験をWebの世界に取り入れることで、リンク先のページに移動したり、データにアクセスしたりできるように設計されました。つまり、ボタン、スイッチ、レバー、ハンドルなど、リアルの世界にあるもののメタファーであれば何でも良かったのです。

ここで紹介する2冊の本はとても純度の高いものであり、どちらも概念的な内容です。具体的なデザインの解決法を示したものではなく、認知心理学(認知科学)というジャンルの本です。まずはここから触れてみて、気になる部分を掘っていくのが近道だと思います。

続・インタフェースデザインの心理学 ─ウェブやアプリに新たな視点をもたらす+100の指針
インターフェースデザインに必要な視点を十分に理解できる内容です。通報「オライリー本」と呼ばれる、オライリー社から出版されている本です。デザイン関連のオライリー本はいくつかありますが、どれも純度の高い内容です。

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論
認知心理学といえばノーマンです。第1版から25年後に増補・改訂版が出版されたことで、今後もバイブルとして読み継がれていく本です。

こちらの関連記事もあわせてどうぞ!

    WS|Macのおすすめアプリ

    「Webサイト制作のワークショップ」のメモです。 必要最低限のアプリだけを入れているので、そのほとんどがスタンダードなものです。Web制作に使える便利アプリをいくつか紹介します。 enjoy! おす…

    WS|フラットデザイン

    「Webサイト制作のワークショップ」のメモです。 リアルな世界に存在するボタンのメタファーをWebに取り入れることで、ボタンを押すとページが移動するという操作を直感的に行えるようにした。こういった操…

    WS|PhotoshopでWebデザイン

    「Webサイト制作のワークショップ」のメモです。 Photoshop で Webデザインする場合、文字組みや画像配置など、Illustrator でグラフィックデザインをする操作に近い。シェイプレイ…

    WS|WordPressのインストール

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトで CMS(コンテンツ・マネジメント・システム)が導入されており、その中でも WordPress が多くの割合を占める。Word…

    WS|Webサイトのテキスト

    「Webサイト制作のワークショップ」のメモです。 デバイスによって表示されるフォントは異なる。ゴシック系や明朝系という指定をするのが基本。ある程度デバイス共通フォントもでてきたが、ウエイトも含めると…