目指せ、Webデザイナー！

メッセージ性の研究２文字について（情報を伝える効果について）

Mon, 27 Jun 2005 21:23:40 +0900

メッセージ性の研究２　文字について（情報を伝える効果について）

文字には２種類の使い方があると考える。
いや、むしろ「使い方」と言うよりは「効果」と言ったほうが良いかもしれない。

まず１つ目の効果は、「情報を伝える」というごく当たり前の効果だ。
小説、日記、説明文…ただ記号を羅列するのではなく、何らかの意味を持った集合体と言うことだ。

もう１つは「イメージを伝える」と言う効果だ。いわゆるタイポグラフィのことだ。
「文字」というより「画像」という感じの使い方だ。
今回は「情報を伝える」効果についてみていこうと思う。

「情報をつたえる」について

効率よく情報を伝えるには、どうすればよいのだろうか？
まずはそれについて考えてみようと思う。

まず、「わかりやすい文章」であることは前提条件だ。
しかし「わかりにくい文章」を書きたがる人はいない。何ゆえに「わかりにくく」なってしまうのだろうか？

プレゼンを勉強したときに、文章表現についても勉強をした。
わかりやすい文章のコツは次のようになる。

・簡潔な表現
・短文主義
・「の」や「が」を１つの文章に多用しない
・文体の統一
・単調になり過ぎない

まぁ、そんなに難しいことではない。だいたい優先すべき者から順に並べてみた。
どれも、少し気をつければ十分なことだ。

簡潔な表現

まず簡潔な表現についてみていこう。
一言で言えば「変に難しい言い回しをしない」ということだ。

とても簡単なことだ。ビジネス文書の逆にすればよいのだ。
無駄な装飾を入れない。これだけでもずいぶんと変わるものだ。
「中学生でもわかるだろう」と思えるような文章を心がけること。

短文主義

日本語は句読点を打っていればダラダラと続けることが出来るし、文法的にもおかしなことではないので知らず知らずに誰もがやっていることでもあり、「別に簡潔な表現をすれば読みやすいんでしょ？」と思うこともあるかもしれないが、それは間違いなのだ。

上の文章を１度読んだだけで、完璧に内容を把握すことが出来るだろうか？
おそらく、「結局は何が言いたいの？」と感じるはずだ。
続けられるからと言ってダラダラと続ける必要は無いのだ。

日本語で会話の場合、１文６０字が限度だそうだ。
それ以上だと、最後まで理解できないのだ。
文章ならもう少し多くなるだろうが、それでも６０字を目安にしたほうが良い。
短い（理解しやすい）に越したことは無いからだ。

「の」や「が」を１つの文章に多用しない

Wordなどでチェックされたことは無いだろうか？
実際に、「の」や「が」を用いることでもダラダラと続けられる。
だからといって、わかりやすいと言えるだろうか？

ちょうど良い例がある。
ＪＴのコマーシャルだ。
「○○の○○さんが、○○で○○しているとき…」そうやってダラダラと続いていく、あのコマーシャルだ。
「わかりにくい文章」の良い例である。

文体の統一

語尾が「です・ます」調か「だ・である」調かということを統一しろ、と言うことだ。
（…私の書いている文章でところどころ違うのは、打っている日にちと気分が違い、直すのが面倒だからだ。ミスじゃあない）

少し話は変わるが、「話し言葉」で書いている人がいる。
使い方によっては効果的かもしれないが、多くはわかりにくいだけだ。
理由は次のようになる。
「話し言葉の場合、普通は内容を整理していないために乱雑になる」

文体がころころ変わっては、読んでいる人にとって負担になる。

単調になり過ぎない

さきほど「簡潔な表現」といったが、装飾を省きすぎてもいけないのである。
多少の変化をもたせないと、読者は飽きてしまうのだ。

ここはさじ加減の難しいところでもある。
変化を大きくしすぎると読者にとって負担になるし、変化が（わからないぐらいに）小さすぎると単調になって飽きてしまうのだ。

まとめ

情報を効率よく伝えるには、わかりやすい文章を書けばよいのだ。
そして、わかりやすい文章とは「読者に負担をかけない文章」ということなのである。

普通の人が使わない表現は避け、文章を適度なところで区切り、ＪＴのコマーシャルみたいにはしないで、文体を統一し、文章に（多少の）変化をつけるのだ。
と、これじゃあわかりにくいだろう。

しかし、このように箇条書きすればわかりやすい。
・普通の人が使わない表現は避ける
・文章は適度なところで区切る
・ＪＴのコマーシャルみたいな文章にしない
・文体を統一する
・文章に（多少の）変化をつける

箇条書きなどもうまく使う。複雑なものは図解する。そういった工夫も必要だ。
こういっては身も蓋も無いが、何も表現は文章だけではないのだ。
文章だけに凝り固まらないで、柔軟な表現が必要だ。

メッセージ性の研究１ Webを構成する要素

Sun, 26 Jun 2005 13:53:17 +0900

メッセージ性の研究１　Webを構成する要素

まず、メッセージ性を考える前に「Web（サイト）とは何で構成されているのか」から考える必要がある。

Webを構成する要素

まずは、何と言っても「文章（テキスト）」でしょう。
ハイパーなテキストをマークアップするランゲージなのですからね。

次に「画像」。
今日日、画像を表示できないブラウザを使っている人なんていないですしね。携帯電話の古い機種を使っている人ぐらいですか？

…基本はこの程度ですか？
この２つさえあれば、とりあえず作れると言うことですか？

あと、プラグインなどが必要になるものもいくつか…
まず「Flash」です。
インターネットをしている人の（バージョンにもよるけど）実に９割９部近くがこれをインストールしています。まさに、デファクトスタンダードですね（あれ？　タダでも「市場」って呼べるの？）。

他には「動画」ですね。
世界中の人が、全部ＦＴＴＨなら上の基本にはいるかもしれませんが、まだ現在は…
…でも動画って、デザインに関係する…？

あとは、CGIなんかのプログラムですか？
でもこれも、直接はデザインに関係しないような…

まとめ

改めて考えてみると、とてもシンプルです。
どんな凝ったWebページでも、基本のテキストと画像、その他の動画などの要素で出来ているはずです。

素人が作ろうと、プロが作ろうと使っている要素はそう変わらないはずです。
確かに、写真やプログラムのクオリティ等は違うかもしれません。しかし、違いはそれだけでしょうか？

肝心なのは、「どう扱うか」なのではないでしょうか？
同じ素材を与えられても、プロのほうが良い物を作れるはずです。

良い素材を用意する（作る・見つける）、素材を生かして上手に魅せる。
なんだか、寿司屋みたいですね。

デザインについて考える２

Fri, 24 Jun 2005 14:05:37 +0900

デザインについて考える２

つい、先日とあるウェブ（ゲーム？）製作会社に行ってきました。

面接官の、最初の一言が「いやぁ、実力不足だねぇ」です。
………ゲハァ！

== 何が足りなかったのか？ ===
はっきりいって、HTMLとCSSの扱いに関しては、私のほうが上です。
その会社は、テーブルでレイアウトをしていて、（ごく一部の）フォントの設定ぐらいにしかCSSを使っていません。

「CSSって、デメリットもあるからねぇ」
ブラウザによる対応の違いですか？　そのための「ハック」ではないのですか？
フォントタグで設定をしていくよりも、よほどスマートだと思うのですが………

とまぁ、「作るだけ」なら私のほうが上でしょう。
問題は「何故に実力不足か」という点です。

結論としては、「メッセージ性・訴えかける力」が不足していたからだと思います。

実際のところ

別に、テーブルでデザインしようが、CSSを使おうがソフトを使って作っていれば関係ないでしょう。
ブラウザで見るだけなら、ウェブ標準化なんてものも関係ありません。
閲覧者が見るのは、サイトのソースではないのですから。

だから、実際にはどうやって作ろうが、何を使って作ろうが関係ないわけです。
問題は内容、見栄えなのです。見栄えさえよければたいした問題はありません。

勘違い

別に、フレームを使おうが良いです。
フレームみたいに、「文書の構造化」に役立たないものであっても、見栄えが良くなればよいのです。

きちんとした文法で、非推奨のタグを使わないで………そんな風に作らなくても良いのです。
もちろん、「正しい文法で書く」「非推奨のタグは使わない」に越したことはありません。
しかし「文法チェックでもパーフェクトだ！」といって、悦に浸ってよいわけではありません。

ようは、「効率よく作れて」「効果的に見（魅）せる」ことができればよいのです。
見栄えの効果を減らしてまで、きちんした文法で作る必要はないのです。

QCとVE

というわけで、私はQC的な発想だったわけです。
これに気づいたおかげで、もっと自由な発想ができるようにあったのです。

つまり、「きちんとした効果が出せればそれでよい」ということ。
「新しい技術を使った」「規格に則った文法で作った」　それだけでは意味がありません。
問題は、「何を使って作ったか？」ではなく「きちんと伝わるか？」「効果的か？」なのです。

とはいえ

だからといって、テーブルデザインを推奨するわけではありません。
ソフトで作るのならともかく、メモ帳などで作るとわかりにくいだけです。

フォントタグを使う気にも慣れません。ソースがごちゃごちゃします。
これも、ソフトなら関係ないですけど………

きちんと作ったことによるメリットは、バカにできるものではありません。

まとめ（実際のところ）

話はかなりそれましたが、そういうことです。
「正しく作ろうと、きちんと伝わらなければ意味がない」

ちょっと、バカみたいな観念にとらわれていました。
もうちょっと気づくのが遅ければ、「ただのオタク」になるところでした。
私が目指しているのは、「ただの技術屋」でも「ただのデザイナ」でもないのです。

メッセージ性

プロのデザインにあって、私のデザインにないもの。

私の作った物の方が、（印刷屋あがりの）ウェブデザイナーよりもすっきりとしたソースです。
でも、閲覧者が見るのは「ソース」ではないのです。

私のサイトを（自分で）見ても、特にメッセージが伝わってきません。
（趣味のものだから仕方がないかも知れないけれど）これは致命的です。

デザインは、「実用性」だけでなく「メッセージ性」も必要なのです。
しかも、「芸術」とは違うメッセージです。

クライアントの「考え」「思い」だけでなく、金銭にかかわるメッセージも伝えねばならないのです。
元が取れなければ、「デザイン」の価値はないのです。

企業の場合「広告」のためのウェブサイトです。
商品、ブランド、企業イメージ…目的はたくさんありますが、「伝えるため」ということは同じです。
そのためには「メッセージ性」が必要なのです。
メッセージ性のないサイトに、企業は金を払ってはくれません。

これからは

メッセージ性をきちんと持っているサイトを作ろうと思います。
ですので、「メッセージ性を持たせるにはどうすればよいか」みたいなことを考えていこうと思います。

文字化けの原因と回避方法

Mon, 20 Jun 2005 21:43:58 +0900

文字化けの原因と回避方法

テキストより引用～

Webの文字化けには、必ず原因があります。文字化けの仕組みを知って対策方法を身につけましょう。

Webでは、リロードすれば大抵直り、CGIやデータベースを使用しているサイトでは、なかなか直らないそうです。

文字化けの多くは、文字コードを変換し損ねた場合に起こります。

文字コード

HTMLでは、HEAD内にMETAタグで宣言をして文字コードを指定します。
ここで文字コードの指定をしなかった場合、TITLEの部分の日本語が文字化けすることもあります。

日本語の文字コードは、シフトJISのほかに、JISやEUC(Cxtensive Unix Code)等があります。

JISコードは、インターネットメールなどに使われます。
シフトJISは、Windows98やMac OS 9等のパソコンで使用されています。
EUCは略語の通り、Unixの日本語環境で使用されます。

インターネットで使用される文字コードは、IANA(Internet Assigned Numbers Authority)という団体が管理をしています。
ここで登録されていない文字コードは使用しないほうが良いでしょう。

外国語Webページを作るときに

「日本語のWebページ作成時には、シフトJISをしておくと良い」と有ります。
JISだろうが、EUCだろうが、勝手に判断してくれますので問題はありません。

問題なのは外国語のページを作成するときです。
この際は、きちんとMETAタグで宣言をする必要があります。
これを忘れると、海外のユーザに文字化けのページを公開（後悔？）することになります。

理由は簡単です。
（英語などの場合）全角文字に対応していないからです。
もし、全角の文字やスペースが残ったままになっていると対応していないブラウザでは文字化けして表示されてしまいます。

英語のページを作る際には、Latin-1(ISO-8859-1)を指定して、欧文フォント表示のチェックをしておきましょう。

機種依存文字

例え同じ文字コードを使っていようと、文字化けすることがあります。
原因は、「製作者が使っている機種にしか入っていない文字」を使っているからです。つまり、「機種依存文字」と言うことです。

例としてあげると、丸数字（数字を丸で囲んだもの）や、ローマ数字です。
Web上でも結構使うことがあるので、注意が必要です。

半角カタカナ

携帯電話のメールでは良く使われる半角カタカナ。使うのは、ケータイだけにしましょう。
JISコードには半角カタカナがありません。文字化けになります。
また、ソフトによっては検索できなかったり、禁則処理が適用されなかったりします。

HTML4.01で記述すれば、半角カタカナを使用しても特にトラブルはないそうです。
でも、それだけきっちりと書ける人がそんなものを使うかと考えると………

「美乳」と「雀の往来」

データベースやCGIを使う場合にはEUCで書いたほうがベターです。
なぜなら、シフトJISの場合はエスケープ・シーケンスが入ってしまうからです。

EUCのHTMLファイルで、文字化けを防ぐのに良い方法があります。
HEADの中（の上部）に、や、と書いておくだけです。

「冗談でしょ？」と思った貴方。ウソではありません。
テキストによれば、

「これらの文字はEUC独自の文字コード範囲が割り当てられているため、この文字が記述してあれば、ブラウザはメタタグでの指定に頼ることなく、そのHTMLファイルの文字コードはEUCだと認識して文字化けを回避できる」

とのこです。まぁ、おまじないだと思っても変わらないでしょう。

他にも、「龠」や「京」でも同じ効果があるそうです。
Yahoo!のソースを見てみると、確かに「京」と書いてあります。

テキストには余談として書いてありますが、

「この方法を考えた人が、幾つかの文字候補の中から、面白がって覚えやすいものを選んだのだと思います」

だそうです。

「文字コードを扱うプログラマーの中では有名な話なので、興味のある人は検索してみるといいでしょう」

とあります。暇な人、興味のある人は検索してみると面白いかもしれません。

フォント指定による文字化け

日本語の文章を表示するのに、欧文フォントを指定しまうと文字化けをすることがあります。
もっとも、ブラウザやＯＳのバージョンによりけりと言うことなので、まぁ大丈夫だとは思いますが…用心するのに越したことはありません。

基本は、日本語なら日本語のフォント、欧文なら欧文のフォントときちんと指定することです。

読ませる文章？

Sun, 19 Jun 2005 22:03:41 +0900

読ませる文章？

テキストより引用～

Webで文章を読ませるためには、的確な編集作業と、きれいな文字組みが必要となります。CSSの利用がポイントです。

Webの文字が読みにくいのは、前回やったとおりです。
ユーザに読ませるためには、幾つかのコツがあります。

Webテキストのポイント

印刷物に比べて、Webの文章は可読性が低いです。

まずは、文章自体の長さを短くするようにしましょう。
もっとも、印刷するものであってもダラダラ書くのはいただけません。

ボリュームがある場合は、タイトルや小見出しを工夫する必要があります。
「たとえ、本文が読まれなくても大体わかる」ようににしましょう。
小見出しの数を多くするのも良いでしょう。

本文の文体も、出来るだけやさしいものにしましょう。
どこかの国の憲法のようにしても、読みにくいだけです。

誤字脱字は必ず調べましょう。
「たかが１つ」かもしれませんが、情報の信用性をなくすには十分です。

用語や記号の統一も必要です。これも、信用性に関ってきかねません。
たとえば「パソコンをPCと略す。全角か半角かまできちんと統一する」と言うことです。
全角と半角が違うと、「別の物」としてとらえる人がいるかもしれませんので注意が必要です。

記号は、Webでは表示できないものが多々あります。

引用についても注意が必要です。
引用元はどこか、ということが明らかになっているか注意しましょう。

文字組のコツ

１行の長さを指定する
ウィンドウサイズが可変だと、１行の長さはユーザによって変わります。
この、「変わる」と言うのが曲者です。デザイナーには予測が出来ないからです。

テキストの長さは可変にしないほうが良いでしょう。
CSSを使ったり、テーブルに入れたりして、長さを指定しておきましょう。

フォントについて

HTMLのFONTタグは非推奨のタグです。フォントを設定するにはCSSを使いましょう。
ただ、どんなに「カッコイイ」フォントを使っても、ユーザ（見る側）の環境に入っていなければブラウザの標準フォントで表示されます。

CSSを使えば、文字のサイズを絶対値指定できます。
しかし、画面解像度の違いにより必ずしも同じ大きさで表示できるわけではありません。

行間を指定するときにもCSSを使います。
この値にも絶対値を指定できます。が、ユーザの環境によっては、行間が狭くなったりしてしまうことがあります。
%等の相対値を使ったほうが良いでしょう。

段落

Webでは（通常は）行間が狭いため、どこまでが１つの段落かわかりにくいです。

CSSを使えば、確かに１文字下げと言うことが出来ます。
しかし、段落ごとに間を空けるなどして工夫する必要があります。

感想

ようは、変なことをしなければ良いのです。
「わかりやすい文章で書きませう」などとするのは「バカ」がやることです。
しかもわざわざ第２水準の漢字や、旧字体まで使ったりする奴は終わっています。

結局、文章は読みやすくてナンボの代物なのです。
読みにくいものは「文章」ではなく、「文字の羅列」にすぎません。

あとWebに限らず、文章で誤字脱字が無いかをチェックするのは常識ですね？
文体をやさしく。どこかの国の憲法は、国民に知られるとまずいことが書いてあるためにあんな古臭い文体を使っているのです。

ただ盲点だったのは「テキストの幅を固定する」ということ。
たしかに、固定しておかないと用語が途中で途切れたりとかしかねませんね。

でもまぁ、変なことをしないでいればＯＫです。
変な記号を使ったりとか、変な文体で書いたりとか…常識的に考えれば特に難しいことではありませんね？

Webの文字

Sat, 18 Jun 2005 22:17:37 +0900

Webの文字

テキストより引用～

Web上の文字は読みにくいと言われますが、それはなぜでしょうか？　ユーザーが少しでも読みやすいように文字の見せ方を考えましょう。

「HTML」という言語からみ手の通り、Webの基本は文章です。
ですから、読みやすいに越したことはありません。

しかし、いくつかの問題もあります。
Webでは、テキストやフォントのコントロールに制限が多いのです。
なかなかデザイナーの思い通りにはならないのです。

それでは、なぜ問題なのかを見ていきましょう。

Webの文字の問題点

フォントを特定できない

普通の印刷物は、作る人がどんなフォントにするかを決めて、印刷すれば終わりです。
製作者の選んだフォントで印刷されます。

しかし、Webではそうは行きません。
Webのテキストは、ユーザが使用しているブラウザによって異なります。

また、デザイナーの環境では搭載されていようが、ユーザの側に入っていなければ表示できません。

サイズが特定できない

Webでは、「どのユーザが見ても同じ大きさに見える」ということが出来ません。

まずHTMLでは絶対的な大きさを決定できません。
「標準よりどのくらい大きいか？　どのくらい小さいか？」と言うことだけです。
しかもその「標準」というものもブラウザによって変わります。
ユーザが変更することも出来ます。

CSSを使えば、絶対的なサイズの指定が出来ます。
12ポイントなら、12ポイントで表示されます…が、そううまくはいきません。

パソコンは、ユーザによってモニタの解像度が違います。
ですから、絶対値で指定しようと（同じモニタ、又は解像度でなければ）違う大きさで表示されてしまいます。

小さいフォントは表示できない

パソコンのモニタは、印刷物に比べて解像度が低いです。
小さいサイズの文字を表示することが出来ないのです。

印刷のときに使用するルビ（ふりがな）は5.5ポイントと決まっているそうです。
しかし、モニタで見るとつぶれて表示されてしまいます。
モニタでは8又は9ポイントが限界です。

また、9ポイントとかいったサイズでは、「明朝体」とか「ゴシック体」というフォントの違いを表現できません。

行間の指定が出来ない

HTMLでは行間の指定が出来ません。

通常はブラウザの表示機能に任せられています。しかし、問題があります。
ブラウザは、欧米の文字にあわせて設計されているのです。
ですから、日本語を表示すると行間が狭すぎて読みづらいことがあるのです。

行間の設定はCSSで行います。

１行の文字数を指定できない

日本語の原稿用紙は升目が書いてあるため１行の文字数がきっちりと決まっています。
しかし、Webではそうは行きません

たとえテーブルなどで幅を指定したところで、徒労に終わります。
フォント、文字のサイズが変わるからです。

段落がわかりにくい

日本語の段落は先頭を１文字下げて表すことが多いです。
しかし、Webでは行間が狭いためどこまでが１つの段落かわかりづらいのです。

記号や外国語

印刷物なら、どんなフォントを使おうが印刷した後で変わることはありません。

例えばハングル。今現在これをサポートしているものはありません（？）。
現状では画像にせざる終えません。

他にも機種依存等の文字もあります。
半角のカタカナや特殊な記号などの類です。
まぁ、まず使うことは無いようなものです。
しかしこれらを、「どうしても使いたい」と言う場合は画像にするしかありません。

背景色と文字色

印刷物で一番読みやすいものは、白地の紙に黒のインクで文字を印刷したものです。
しかし、Webでは一概にそうとは言えません。

紙と違い、モニタは発光しています。
そのため、白地に黒い文字ではコントラストが強すぎてしまい、逆に読みにくくなってしまうこともあります。

それだけならともかく、背景が強すぎて文字が埋もれてしまうこともあります。
特にリンクの部分などがそうです。

読めなければ意味が無いので、配色には気をつけましょう。

縦組みが出来ない

日本語の場合、縦組みのほうが読みやすいそうです。
もっとも、縦書きで使っていたものですからね。

しかし、Webで文章を縦組みにすることは出来ないのです。
たしかに、CSSを使えば出来なくはありません。
ただ、その設定はIE5.5以上のみに対応している独自の拡張スタイルシートです。

どうしても縦書きにするときは、文章を画像にするか、FlashやPDFなどのプラグインを利用するしかありません。

タブやインデントが出来ない

文章を整形するときに、タブやインデントを使用できません。
CSSで設定をすれば出来なくは無いですが、イチイチ設定をしなければなりません。

テーブルに流し込むか、TTタグやPREタグを使って、等幅フォントで表示するしかないようです。

フォーム

Sat, 18 Jun 2005 21:36:17 +0900

フォーム

テキストより引用～

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

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

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

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

Flashで作成したフォーム

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

PDFによるフォーム

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

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

感想

今回は短いです。

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

ユーザを迷わせない

Fri, 17 Jun 2005 21:07:17 +0900

ユーザを迷わせない

テキストより引用～

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

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

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

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

トピックスパス

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

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

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

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

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

フォルダメニュー

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

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

サイトマップ

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

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

トップリンク

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

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

感想

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

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

疲れる

Thu, 16 Jun 2005 19:00:22 +0900

１つの記事に、大体１時間？　今日の記事は短いから良いけれど………

メモ帳で保存したとき、ファイルサイズが5KB行くと１時間ぐらいかけたことに？
ただでさえ少ない自由時間なのに………

でもこの課題、自分で選んじゃったんだしなぁ………

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

Thu, 16 Jun 2005 18:56:40 +0900

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

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

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

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

フォームによるメニュー

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

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

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

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

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

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

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

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

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

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

感想

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

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

目指せ、Webデザイナー！

メッセージ性の研究２ 文字について（情報を伝える効果について）

メッセージ性の研究２ 文字について（情報を伝える効果について）

「情報をつたえる」について

簡潔な表現

短文主義

「の」や「が」を１つの文章に多用しない

文体の統一

単調になり過ぎない

まとめ

メッセージ性の研究１ Webを構成する要素

メッセージ性の研究１ Webを構成する要素

Webを構成する要素

まとめ

デザインについて考える２

デザインについて考える２

実際のところ

勘違い

QCとVE

とはいえ

まとめ（実際のところ）

メッセージ性

これからは

文字化けの原因と回避方法

文字化けの原因と回避方法

文字コード

外国語Webページを作るときに

機種依存文字

半角カタカナ

「美乳」と「雀の往来」

フォント指定による文字化け

読ませる文章？

読ませる文章？

Webテキストのポイント

文字組のコツ

フォントについて

段落

感想

Webの文字

Webの文字

Webの文字の問題点

フォントを特定できない

サイズが特定できない

小さいフォントは表示できない

行間の指定が出来ない

１行の文字数を指定できない

段落がわかりにくい

記号や外国語

背景色と文字色

縦組みが出来ない

タブやインデントが出来ない

フォーム

フォーム

Flashで作成したフォーム

PDFによるフォーム

感想

ユーザを迷わせない

ユーザを迷わせない

トピックスパス

フォルダメニュー

サイトマップ

トップリンク

感想

疲れる

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

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

フォームによるメニュー

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

感想

メッセージ性の研究２文字について（情報を伝える効果について）

メッセージ性の研究２　文字について（情報を伝える効果について）

メッセージ性の研究１　Webを構成する要素