SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
使いやすいサイト・見やすいサイトってなんぞや


     話す人 : Fine Lagusaz
自己紹介


 ○ フィーネ・ラグサズ
 ●Web サイトの運営歴は 6 年弱
 ●でも、勉強し始めたのはつい最近

 ●ロッシュの限界(中略)創者の憂鬱のゴーストマスター

 ●風邪ひいて前回、参加できず。今回も風邪ひきました。
これから話すことについて




   使いやすいサイトについて
    ちょっと考えてみよう !

   キーワードは「ユーザビリティ」
ユーザビリティとは何か ?




 元は製品などの使い勝手を示す言葉。
 サイトだと目的の情報の見つけやすさ、障害の有
  無に関わらずに利用しやすいかと言った意味に
  なる。
もう少し詳しく




        実は定義がばらばら。
Web サイトの場合、「アクセシビリティ」の考え
         も含んだりする。
アクセシビリティとは何か



"Web を利用するすべての人が、年齢や身体的制
約、利用環境等に関係なく、 Web で提供されて
いる情報に問題なくアクセスし、コンテンツや機
        能を利用できること "
         Web アクセシビリティとは?/基礎知識 infoaxia
    http://www.infoaxia.com/awareness/accessibility/index.html
実際のところ




これら 2 つを切り分けて考えるのは難しい。
守るといいことあるのかな ?




サイトが見やすくなると、ゴーストを広める助け
        になるかも。
具体的にどうすればいいのか




   次のページから幾つか紹介。

” やってもいいしやらなくてもいい”程度で。
サイトの目的を決めよう


サイトでどんな情報を伝えたいのか、といった目的を
 決めよう。

決めることでサイトのレイアウトを考えるのに役立つ。

例)
ゴーストの配布をしたい
小説を公開したい
絵を公開したい
スプラッシュページを控える



 ●スプラッシュページとはメニューや内容のあるトッ
 プページの前に置かれるページのこと。
 ●メニューやコンテンツにたどり着くまで、時間がか

 かってしまう。
 ●ユーザとしては自分が目的とするページに速くた

 どり着きたいので、ない方が望ましいでしょう。
 ●使うなら効果的に !
小さな画面でも閲覧できるように


大きな画面を持つパソコンも増えてきたけど、今でも
 小さな画面のパソコンもある。

解像度が 800×600 でもメニューなどの重要な項目が
 見えると望ましい。

テーブルが大きくなってしまう時は小さなテーブルに
 分割すると良い。
リキッドレイアウトを使う


リキッドレイアウトはページの横幅を固定しないで、ブ
 ラウザのウィンドウの幅に応じて伸縮するレイアウト
 のこと。

ユーザの閲覧環境は色々で画面の大きさ、使ってい
 る字の大きさや書体も違う。

リキッドレイアウトなら、環境に応じて幅が変えられる
 ので、ユーザにとって便利になる。
リンク箇所はわかりやすく



リンク、未読リンク、訪問済みリンクの色や装飾はわ
 かりやすいように。
色の変化や下線などの文字修飾を使い分けるとわか
 りやすくなる。

リンクではない文字にリンクと同じ色や修飾を設定し
 ないように。
ユーザにわかりやすい言葉で



難解な専門用語や省略語、頭文字は意味がわかりに
 くい。
また、サイトに対して、疎外感を持つようになる恐れ
 も。
サイトの想定ユーザ層にあわせて、親しみやすくわか
 りやすい言葉で説明しよう。
大きなファイルへのリンクには情報を




Flash や PDF 、 NAR や ZIP などの HTML ファイル
 以外にリンクする場合、ファイルの種類を明記し、
 必要なプログラムがあれば一緒にリンクする。

ファイルサイズが 100KB を超える大きなファイルは
 回線が遅いと表示に時間がかかるので、あらかじ
 め警告する意味でファイルサイズも書くと親切。
10 秒でページが表示されるように



56k モデムで 10 秒待たずに表示されるかどうかが最
 低ラインの目安とされる。
軽いページを作ろうとする時の基準でいいかも。

画像や動画、 Flash や Java アプレットの使いどころを
 考えて、実用目的が無い時は避ける。
レイアウトを統一する


ナビゲーションメニューや見出し、本文のレイアウトに
 は統一性を持たせる。

あるページで右にメニューがあって、あるページだと
 左、またあるページには下とばらばらだとユーザが
 混乱してしまうから。

ページの左上にロゴなどを入れると同じサイトだとわ
 かりやすくなる
各ページのリンクの関係を簡潔に


 上の階層にメニューや概要ページ。
 下の階層になればなるほど、内容が詳しくな
  るようにする。


   ツリー構造
十分なコントラストを持たせる


 色覚障害のある人や高齢者、弱視の人にとって、色
  のコントラストの高いことが重要。
 それ以外の閲覧者もコントラストが低いと読みにくく
  なる。

 見やすい組み合わせには
        白色の背景に黒色の文字
     濃い青色の背景に薄い黄色の文字

 などがある。
ユーザの現在位置がわかるように


Web サイトでは今、どこを閲覧しているかわかりにく
 く、階層が深いと迷子になってしまうかも。

トップページから現在のページまでを
 トップページ > ゴースト配布ページ > キャラクター紹介

このように書いて、ページの上部や下部に入れるとわ
 かりやすい。
重要な項目はページの上部に



ページの上部はとても目立つ場所。
ここに最重要なリンクやナビゲーションメニューを配置
 すると使いやすくなる。

ポイントはリンクの数を絞ること。
特に見てもらいたいページへのリンクのみを目立つよ
 うに配置し、残りのリンクと区別すると効果的。
機種依存文字は使用しない



機種依存文字は名前の通り、表示できる機種が限ら
 れている文字。
異なる環境で表示させると、違う文字として表示され
 て、意味がわからなくなる。
丸付き文字、ローマ数字、単位記号に多く見られる。
サムネイルを使おう



サムネイルは小さな画像のこと。

サムネイルをクリックすると大きな画像になるようにす
 るとサイトの表示速度が速くなる。

ギャラリーなど大きな画像の多いページではとても効
 果的。
完成してからページにリンクしよう



完成していないページをクリックして、戻る間のユー
 ザの時間は無駄になってしまう。
サイトに対する評価も悪い方向に傾く可能性も。

掲載予定のサイトの予告は案内文のみを掲載して、
 ページができたらリンクする。
最後に



       とりあげたのはほんの一部。
      調べると他にも色々でてくる。

自分のサイトが見やすいかどうか考えるきっかけ
        になれば幸い。
参考資料


ウェブ・ユーザビリティ & アクセシビリティ・ガイドライン
  (石田 優子 著)

ユーザビリティ - Wikipedia
http://ja.wikipedia.org/wiki/ユーザビリティ

アクセシビリティ - Wikipedia
http://ja.wikipedia.org/wiki/アクセシビリティ
Infoaxia( インフォアクシア )
http://www.infoaxia.com/index.html

Más contenido relacionado

Más de wizstargaer

べ、別に来て欲しいなんて言ってないんだからっっ
べ、別に来て欲しいなんて言ってないんだからっっべ、別に来て欲しいなんて言ってないんだからっっ
べ、別に来て欲しいなんて言ってないんだからっっwizstargaer
 
みんなもっとツール作ろうよ
みんなもっとツール作ろうよみんなもっとツール作ろうよ
みんなもっとツール作ろうよwizstargaer
 
「今」のSSPを伝える動作デモ
「今」のSSPを伝える動作デモ「今」のSSPを伝える動作デモ
「今」のSSPを伝える動作デモwizstargaer
 
伺うかのうだうだぐだぐだ
伺うかのうだうだぐだぐだ伺うかのうだうだぐだぐだ
伺うかのうだうだぐだぐだwizstargaer
 
ゴースト・と・で・の・お話
ゴースト・と・で・の・お話ゴースト・と・で・の・お話
ゴースト・と・で・の・お話wizstargaer
 
我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのかwizstargaer
 

Más de wizstargaer (6)

べ、別に来て欲しいなんて言ってないんだからっっ
べ、別に来て欲しいなんて言ってないんだからっっべ、別に来て欲しいなんて言ってないんだからっっ
べ、別に来て欲しいなんて言ってないんだからっっ
 
みんなもっとツール作ろうよ
みんなもっとツール作ろうよみんなもっとツール作ろうよ
みんなもっとツール作ろうよ
 
「今」のSSPを伝える動作デモ
「今」のSSPを伝える動作デモ「今」のSSPを伝える動作デモ
「今」のSSPを伝える動作デモ
 
伺うかのうだうだぐだぐだ
伺うかのうだうだぐだぐだ伺うかのうだうだぐだぐだ
伺うかのうだうだぐだぐだ
 
ゴースト・と・で・の・お話
ゴースト・と・で・の・お話ゴースト・と・で・の・お話
ゴースト・と・で・の・お話
 
我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか我々はどこから来たのか 我々は何者か 我々はどこに行くのか
我々はどこから来たのか 我々は何者か 我々はどこに行くのか
 

Último

Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfDivorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfoganekyokoi
 
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」inspirehighstaff03
 
What I did before opening my business..pdf
What I did before opening my business..pdfWhat I did before opening my business..pdf
What I did before opening my business..pdfoganekyokoi
 
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slidessusere0a682
 
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」inspirehighstaff03
 
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdfMy Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdfinspirehighstaff03
 
My Inspire High Award 2024      「家族とは何か」
My Inspire High Award 2024      「家族とは何か」My Inspire High Award 2024      「家族とは何か」
My Inspire High Award 2024      「家族とは何か」inspirehighstaff03
 
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」inspirehighstaff03
 
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfEstablishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfoganekyokoi
 
My Inspire High Award 2024    「孤独は敵なのか?」
My Inspire High Award 2024    「孤独は敵なのか?」My Inspire High Award 2024    「孤独は敵なのか?」
My Inspire High Award 2024    「孤独は敵なのか?」inspirehighstaff03
 
International Politics I - Lecture 1
International Politics I - Lecture 1International Politics I - Lecture 1
International Politics I - Lecture 1Toru Oga
 
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」inspirehighstaff03
 
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」inspirehighstaff03
 
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」inspirehighstaff03
 
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」inspirehighstaff03
 
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」inspirehighstaff03
 
My Inspire High Award 2024  「正義って存在するの?」
My Inspire High Award 2024  「正義って存在するの?」My Inspire High Award 2024  「正義って存在するの?」
My Inspire High Award 2024  「正義って存在するの?」inspirehighstaff03
 
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」inspirehighstaff03
 
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」inspirehighstaff03
 
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイントshu1108hina1020
 

Último (20)

Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfDivorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
 
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」My Inspire High Award 2024「なぜ議会への関心が低いのか?」
My Inspire High Award 2024「なぜ議会への関心が低いのか?」
 
What I did before opening my business..pdf
What I did before opening my business..pdfWhat I did before opening my business..pdf
What I did before opening my business..pdf
 
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
【ゲーム理論入門】ChatGPTが作成した ゲーム理論の問題を解く #3 Slide
 
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」My Inspire High Award 2024「他者と自分、対立を防ぐには?」
My Inspire High Award 2024「他者と自分、対立を防ぐには?」
 
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdfMy Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
My Inspire High Award 2024「Yakushima Islandってなんか変じゃない?」.pdf
 
My Inspire High Award 2024      「家族とは何か」
My Inspire High Award 2024      「家族とは何か」My Inspire High Award 2024      「家族とは何か」
My Inspire High Award 2024      「家族とは何か」
 
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
My Inspire High Award 2024「スーパーマーケットで回収されたキャベツ外葉は廃棄されているの?」
 
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfEstablishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
 
My Inspire High Award 2024    「孤独は敵なのか?」
My Inspire High Award 2024    「孤独は敵なのか?」My Inspire High Award 2024    「孤独は敵なのか?」
My Inspire High Award 2024    「孤独は敵なのか?」
 
International Politics I - Lecture 1
International Politics I - Lecture 1International Politics I - Lecture 1
International Politics I - Lecture 1
 
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
My Inspire High Award 2024「なぜ、好きなことにいつかは飽きるの」
 
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
My Inspire High Award 2024「なぜ人は他人と違うところがあってもそれをなかなか誇れないのか?」
 
My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」My Inspire High Award 2024 「本当の『悪者』って何?」
My Inspire High Award 2024 「本当の『悪者』って何?」
 
My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」My Inspire High Award 2024 「AIと仲良くなるには?」
My Inspire High Award 2024 「AIと仲良くなるには?」
 
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
My Inspire High Award2024「外国人が日本のテーブルマナーに驚く理由は?」
 
My Inspire High Award 2024  「正義って存在するの?」
My Inspire High Award 2024  「正義って存在するの?」My Inspire High Award 2024  「正義って存在するの?」
My Inspire High Award 2024  「正義って存在するの?」
 
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
My Inspire High Award 2024「世の中の流行はどのようにして生まれるのか」
 
My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」My Inspire High Award 2024「老いることは不幸なこと?」
My Inspire High Award 2024「老いることは不幸なこと?」
 
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
 

使いやすいサイト・見やすいサイトってなんぞや