目指せ、Webデザイナー！

フォーム

フォーム

テキストより引用〜

ユーザからの情報を受け取るフォームの設計。ブラウザによって見え方が違うので注意が必要です。

フォームは、ユーザが入力した情報を受け取ることが出来ます。
アンケートや、ショッピングサイト、また占いのサイトなどで見かけるアレです。

デザイン的にコントロールするのが難しい部分です。
ですから、フォームを設計するときは、ブラウザ毎にどのように表示されるのかきちんと調べておきましょう。

「どうしても、これじゃなきゃダメだ」と言うときや、細かな設定をしたいときは、FlashやPDFを利用しましょう。

Flashで作成したフォーム

とても柔軟なデザインが出来ます。
製作に手間がかかり、アクセシビリティも低くなりがち、追加や修正が大変、といったデメリットはあります。
しかし、「どうしても」と言う場合には使用する価値があります。

PDFによるフォーム

PDFでもフォームを作成することが出来るそうです。
ただし、オンラインでのやり取りは難しいそうです。

アンケート容姿や入会申込書などをPDFで作成し、郵送してもらうと言う使い方が出来ます。

感想

今回は短いです。

あと、フォームとはそんなにこだわるものなのでしょうか？　イマイチよくわかりません。
Flashで手間隙かけてまで使いたくなるようなフォームって？

ユーザを迷わせない

ユーザを迷わせない

テキストより引用〜

サイト内で迷子をなくすために、現在位置の表示と上位階層への誘導方法を作っておきましょう。

トップページと、日記、掲示板ぐらいなら迷うことはありません。
しかし、仕事で作るとなると企業のサイトがメインとなります。

サイトの目的によっては、階層が深くならないかもしれません。
しかし、商品の紹介や販売を行うの場合、確実にコンテンツ数が増え、階層も深くなります。

そういったことは、避けるに越したことはありませんが、そうも言ってはいられません。
ですから、「ユーザを迷わせないにはどうすればよいのか？」ということを考える必要があります。

トピックスパス

一言で言えば、「自分がどこにいるかわかる」ようにするナビゲーションです。

ホーム＞日記＞６月１７日

と言う感じに作ります。
どこかしらで、見たことのあるものでしょう？

現在位置は、一番右の「６月１７日」となっている部分。「日記」となっている部分が上の階層です。

作り方も簡単ですし、スペースも取りません。
「私のサイトは階層が深かも」とお思いなら試してみると良いかもしれません。

フォルダメニュー

Flashを使うと、Windowsのエクスプローラーのようなものを作れるそうです。

現在位置がわかりやすいです。しかし、無駄なスペースも多く、階層が深すぎる場合は向きません。

サイトマップ

サイトマップは、目的のページを探し出す手助けとなります。
ベストなのは、トップページからツリー状になっているものです。

リストを使ったものでも十分です。ようは、「どこにいるか？」「目的のページは？」ということがわかればよいのです。
マップが無くても迷わない構造にするのがベストです。
しかし、サイトのディレクトリ構成や、コンテンツの全容を一目でわかるサイトマップは重要です。
たとえ、無くても大丈夫だろうと作ったほうが良いでしょう。

トップリンク

どのページにも、トップへ戻るリンク（ボタン）を作りましょう。

企業の場合、ロゴがトップへのリンクとなっていることがあります。
しかし、これはわかりにくいです。せめて、「トップへ戻る」と言う文字をロールオーバーするようにしましょう。

感想

トップリンクは、専用のボタンを作ったほうが良いようです。
前のサイトでそういった感じのものを作ったのですが、友人達はわからなかったそうです。

リンクは、ボタンにするなりしてはっきりと目に見える形にしたほうが良いでしょう。

メニューを使ってのナビゲーション

メニューを使ってのナビゲーション

テキストより引用〜
クリックすると選択肢が現れる「メニュー」のナビゲーション。Webサイトには必須のナビゲーションです。

＊注）テーブルを使ったデザイン、フレームを使ったデザイン、別ウィンドウを使ったメニューは流行らないので割愛します。

クリックで現れるメニューを選ぶ。そして、リンク先に飛んだりする。
ユーザはこの、「メニュー」と言う操作方法になれています。
しかも、表示する大きさが小さくても、たくさんの選択肢を入れることが出来ます。
スペース効率の良いナビゲーションです。

フォームによるメニュー

HTMLのFORMタグでメニューを作ることが出来ます。
例えば、「プルダウンメニュー」がそうです。

プルダウンメニューは、確かにスペース効率は抜群です。
しかし、私はあまり好きではありません。
理由は２つ。「何が入っているかわからない」から。

まず、１つ目。
どんなメニューがあるかを確認するために、１度クリックしなければならないのです。
ちょっと面倒臭いです。
と、このようにユーザは余計な一手間を嫌います。

もう１つ。今度はもっと切実な理由です。
プルダウンメニューは、主に　JavaScript　で制御します。

もし、　JavaScript　をオフにしていたら？
私は安全のためにオフにしています。余計なポップアップ広告も出ないですしね。
　JavaScript　をオフにしているユーザを切り捨てることになりかねません。

プルダウンメニューとポップアップメニュー

今度はフォームを使わないプルダウンメニューとポップアップメニューです。

このプルダウンメニュー、ポップアップメニューはは、Windowsの操作と似ています。
プルダウンメニューは、上の部分をクリック（又はカーソルを重ねる）すると、メニューが「ビロロロロ」と表示されます。
ポップアップメニューは、Windowsのスタートボタンと同じようなものです。
プルダウンメニューを上下さかさまにしただけのような感じです。

どちらも、カテゴリごとにまとめることが出来るし、操作も簡単。
スペースもあまり取らないので効率も良いです。
しかも操作も簡単！

ただ、これを作るのにも　JavaScript　が必要です。

感想

今日のは短いです。
「テーブル」などの流行らないものを飛ばしたり、抜いたりしたらこれだけになってしまいました。

本当に切実な問題が　JavaScript　。
オフにしている人は結構多いのでは？
こいつに頼らないで作るには………

ページの役割分担

ページの役割分担

テキストより引用〜

ページ内に「メニュー部分」と「コンテンツ部分」の両方を配置する場合、いろいろなレイアウト方法が考えられます。

さて、大体の人のレイアウト方法はフレームを使うか、テーブルを使うかです。中には私のようにCSSでレイアウトをする人も（ほとんどいませんが）います。
しかし、何を使おうが基本は同じです。
今回は、「ページをどういう風に分割するか」言い換えるなら「メニューをどう配置するか」ということを見て行きたいと思います。

最初に

メニューを上に置こうが、左に置こうが、下に置こうが、右に置こうが、それは自由です。
問題なのは「複雑にしすぎるとユーザが困る」という事実です。
あまりにも突拍子のないデザインや、複雑すぎるデザインは、ユーザに嫌われます。

ページの分割パターン

左右２分割タイプ

とてもオーソドックスな分け方です。とてもよく使われます。
オーソドックスゆえに、ユーザにとって理解しやすいデザインです。
ただ、ありふれているがゆえに、面白みのないものになりがちです。

メニューを右に置くか、左に置くかで印象が変わります。
普通は左側にメニューをおきますね？　逆に配置するだけで、かなり印象が変わります。

また、スクロールバーは右側に表示されるので、カーソルを動かす量が少なくて済みます。
まぁ今日日、２ボタンのマウスを使っている人なんてロクにいないでしょうがね………

上下２分割タイプ

メニューを上に置くか、下に置くか、と言うレイアウトです。

上にメニューを置くデザインは、これまたオーソドックスです。
使い勝手も良く、製作も簡単です。

ただ、メニューが増えたとき対処しづらいです。
「あまり項目数がない」という場合には有効です。

下にメニューを配置するデザインは、そう見かけませんね？
このデザインにするには、フレームを使うかCSSを使うかのどちらかです。

メリット・デメリットは、上に配置しようが下に配置しようが変わりません。

両サイドメニュータイプ

左右両サイドにメニューを置くデザインです。
左側は大分類、右側は小分類をおくことが多いそうです。

コンテンツのメインとなる、真ん中の部分は少なくなってしまいますが、「項目が増えても大丈夫」だと言うメリットがあります。

上下メニュータイプ

上と下にメニューを置くデザインです。
画像ギャラリーページには適しているようです。

メニュー項目が増えると対処しづらいのは、上下２分割と同じです。

３ペインタイプ

上と、左にメニューを置くデザインです。
Windowsのソフトでよく使われるデザインです。

ユーザに理解しやすく、項目の追加・分類がしやすいため、使い勝手が良いです。

４ペインタイプ

上記の３ペインの下にメニューを追加したものです。
よほど大規模なサイトでも、めったに使用されません。

理由は、ナビゲーションが複雑になりやすいからです。
そして、メニュー部分が増えるために、コンテンツのスペースが少なくなってしまいます。

２段トップメニュータイプ

メニューを上に２つつけるデザインです。
意外と様々なサイトで使われているようです。

具体的にはどんなものなのだと思いますか？
例えば「タブ」を使ったデザインです。

あの、インデックス風の出っ張りのことです。
某ポータルサイトでも使用されていますね？
タブでページ（ジャンル）を選び、各ページの上部には商品の紹介が乗っている、と言う感じのデザインです。

メニューを横に並べる宿命なのでしょうか？
このデザインも、項目が増えると対処しづらいです。

完全２分割タイプ

文字通り、完全に真っ二つにするデザインです。
上下に、左右に、全く同じ幅で分割するデザインです。

「デザインコンシャスなページなどでたまに見られます。」

とありましたが、見たことがないです。 全く、一般的なデザインではないようです。
それに実用性も良くわかりません。

視線の動きを追いかける

視線の動きを追いかける

テキストより引用〜

アクセス率や人気の高いサイトを作るには、視線の動きを考慮したインターフェースが必要です。

人気のあるサイト、というのはどういうサイトでしょうか？
内容が面白い？　もちろん、それもあります。しかし、「面白いだけ」では人を呼ぶことは出来ません。

わかりにくいサイト。なにやらゴチャゴチャしていて、どこに何があるかわからない。
そんなサイトを、貴方は「もう一度見に来よう」と思えるでしょうか？
ユーザにストレスを感じさせてはいけないのです。

視線の誘導

まずは、「視線の誘導が必要か？」から考えて行きましょう。

我々の身の回りには、デパート、スーパーマーケット、量販店、コンビニ…様々な店があります。
それぞれの店には、商品が置いてあります。しかし、ただ単に「箱から出して、積んであるだけ」と言うわけではありません。
商品の配置やレイアウトを、きちんと考えては並べているのです。
何故か？　それは、「ただ並べるよりも売れる」という明快な答えがあるからです。

配置によって、効果が変わるのは、何も商品だけではありません。
Webサイトも配置によって、印象、（内容の）わかりやすさ、使いやすさ等などが変わってくるのです。

ユーザの心理や行動を想定して、効果的なデザインにしましょう。

インターフェースのデザイン

次は、Webのインターフェースデザインについて考えて行きましょう。

Webにおけるインターフェースの目的は、ユーザに対して「まずは、ここを見て欲しい」「次はここを見て欲しい」と、誘導するためです。
まずは、リンクの部分と、テキストの部分が明確に分かれていることが前提となります。
「リンクなのか、文字なのかわからない」というデザインはダメなのです。

まぁしかし、なんだかんだ言ったところで「わかれば良い」のです。
ただし、（風景等の）画像をリンクボタンにするときは、注意が必要です。

他にも、ユーザが「自分がどこにいるのかわからない」といって迷子にならないように、階層を上がったり降りたり出来るようにしましょう。
同じサイト内では、同じインターフェースるにする。それを心がけるだけでも、かなり変わります。

階層のナビゲーションについて

サイトの規模が多くなると、もちろんコンテンツ数が増えます。
コンテンツ数が増えると言うことは、階層が深くなる、と言うことです。

目的のページにつくまで、ユーザは何回もクリックしなければいけません。これは、あまりよろしくありません。
出来るだけ少ないクリック数で、目的のページにつけるようにしましょう。

コンテンツのディレクトリについて

階層のナビゲーションのデザインをする前にやっておくことがあります。
ページ内容の分類分け。そして、コンテンツのディレクトリ構造の設計です。

どんなに、ナビゲーションを工夫しようとも、元が良くなくては全て台無しです。
また、コンテンツをきちんと分類するメリットは「ユーザに優しい」だけではありません。開発者側も構造が理解しやすくなり、製作がしやすくなります。

ナビゲーションのポイント

ユーザビリティ（わかりやすさ）に優れたナビゲーションには、次のようなポイントがあります。
「メニューとコンテンツを分ける」ただこれだけです。メニューとは、ページの目次・索引などのことで、コンテンツとは、ページの内容のことです。
中身がゴチャゴチャしなければ良いのです。

さらに言うと、「どのページに移動しても、メニュー部分が同じ位置に表示される」ということもポイントです。

ナビゲーションの手法の種類

・フレームを使う

→ちょっと前までは一般的。たしかに、作る側にとって楽であり、便利。見る側にとってもわかりやすい。
しかし、将来的には廃止されるようなので使わないほうがベター。
これに付随して、「インラインフレーム」と言うものもあるが、これも廃止される方向だ。

・テーブルを使う

→「フレームを使わない」となるとテーブルによるレイアウトが挙げられる。
どんな（古い）ブラウザでもほとんどレイアウトが崩れない、というメリットがある。
しかし、「表」としての使い方から外れているし、CSSを使ったデザインに比べると重い。

・サブウィンドウを使う

→　JavaScript　を使って、メニュー用のウィンドウを作る。………微妙。
まず、人によっては　JavaScript　をオフにしている。そして、「どうやってウィンドウを開くか？」という問題も残る。
勝手にウィンドウを開く「ポップアップ」も、最近は流行らない。見かけるのは変な広告ぐらいだし、ブラウザによっては警告も出る。
かといって、「ユーザに開いてもらう」と言うわけにも………　必ずしも、全てのユーザが使い方をわかるわけではないだろうし………

メニューバーを使ったナビゲーション

→正確に言うと、「メニューバーもどき」と言う感じだ。
カーソルを重ねるとメニューが表示される、というギミックを（基本的に）　JavaScript　で作るのだ。
先ほどと同じように、「オフにされていたら？」と言うことを考えると、すこし思い直す必要がある。

CSSを使う

→テキストの入っている部分だけをスクロールさせて、ナビゲーションの部分は動かないようにする。
または、ナビゲーションの入っているボックスを作り、配置を固定する。そうすると画面をスクロールしてもボックスの位置は変わらない。ただこれは、絶対数の多いIEは対応していないのだ。

まぁ、どんなナビゲーションをするにせよ、フレームとテーブルデザインは使わないようになっていくと思う。
CSSを使うのがベストな方法ではないだろうか？