FIELD 06
アクセシビリティ、ユーザインタフェース、ピクトグラム、Web表現、グラフの見せ方などを扱います。見た目だけでなく、迷わず正確に伝わるかを考えます。
タグは主に関連する分野へ整理しています。この一覧では複数選択のOR検索、各問題に付くタグからはそのタグだけの検索になります。
踏み台そのものが持つ全ての利用可能性を表すアフォーダンスそのものである。
入力ミスを自動修正するフールプルーフである。
その場所に立つという操作を利用者へ示すシグニファイアである。
色覚の違いを補う代替テキストである。
正答2. その場所に立つという操作を利用者へ示すシグニファイアである。
足形は、踏み台と人との複数の関わり方のうち『立つ』行為を知覚可能に示している。 本屋にある踏み台は高いところの本を取るために置かれているが、踏み台に腰掛けて本を読む人もいる。 踏み台に対して「座る」「荷物を置く」「上に立つ」などの使い方が考えられる。 このような人とモノとの関係性をアフォーダンスという。 これらの行為のうち「上に立つ」行為へ誘導するためのデザインである「足形」のことをシグニファイアという。 ・ゴミ箱の投入口が丸い→カン・ビン・ペットボトルのゴミ箱である。 ・Webページにある立体的なボタン→クリックできる。
全ての画像に画像という同じ文字列を設定する。
画像がリンクでも、リンク先の目的を書かない。
見た目をそろえるため、本文を画像だけにする。
画像の役割に応じた簡潔な説明を設定する。
HTMLで文書構造を記述し、CSSで見た目を指定する。
HTMLで見た目を指定し、CSSで文書構造を記述する。
HTMLとCSSの両方で、データベースを検索する。
HTMLとCSSの両方で、電子メールを配送する。
正答0. HTMLで文書構造を記述し、CSSで見た目を指定する。
意味構造と表示を分離すると、保守性やアクセシビリティが高まりやすい。 HTMLのタグは文書の構造を決定するものである。 <h1>タグは見出しを表すものであり、見た目を整えるものでない。 見出し以外のところで見出しタグを使うと、音声読み上げソフトによってはユーザに正しく情報を伝えられない可能性がある。 HTMLはタグを使用することで文書の構造を明確にする。 例えば、<h1>～</h1>タグでくくられた部分は見出しであるや、<ul>~</ul>でくくられたところは箇条書きの情報であるなどの意味づけをできる。 タグによる文書の中の情報を意味づけすることをマークアップという。 HTMLのタグは文書の構造を決定するものであり、見た目はCSSを用いて整える。 そのため余白を入れるという見た目を整える目的で<br>タグを使用することは適切でない。 文章自体を<p>タグでくくることにより、文章の間に余白が入る。
閲覧者の操作に対してサーバが必ず1秒以内に応答する設計である。
画面幅などに応じ、CSSでレイアウトを調整する設計である。
文章を全て画像に変換し、どの端末でも同じピクセル数で表示する設計である。
PC用とスマートフォン用で必ず別々のHTMLを作る設計である。
正答1. 画面幅などに応じ、CSSでレイアウトを調整する設計である。
端末ごとに別内容を持つ必要を減らしながら、画面サイズに応じた表示を実現できる。 1つのHTMLファイルをCSSファイルで制御することで、端末の画面サイズに合わせたデザインで表示することができる。 これを「レスポンシブWEBデザイン」という。 CSSの設定次第では、レイアウトだけでなく、情報の表示・非表示も切り替えることができる。 パソコン用、スマホ用と別々にHTMLファイルを準備することに比べ、更新の手間が減り、情報の差異を生まれにくくできる。 一方で、スマホとパソコンで同じ重さのデータを読み込ませることになりうる、端末ごとの細かな調整ができないなどのデメリットも存在する。
赤
赤と青の縞模様
青
ブラウザが毎回無作為に選ぶ
Location と Alphabet
Time と Location
Alphabet と Time
Category と Hierarchy
正答3. Category と Hierarchy
『温泉あり』は性質による分類、料金順は数値の大小による順位付けである。 LATCHは情報を整理する代表的な五つの観点で、Location（位置）、Alphabet（五十音・アルファベット順）、Time（時間）、Category（分類）、Hierarchy（順位・大小）を表す。『温泉あり』という条件で絞るのはCategory、料金の小さい順に並べるのはHierarchyである。一つの情報群に複数の観点を組み合わせてもよい。
不要な3D表示で、手前の値を実際より大きく見せること。
色だけでなく線種や記号も使って系列を区別すること。
強調色を重要な箇所だけに限定して使うこと。
同じ尺度の軸で項目間の値を比較できるようにすること。
正答0. 不要な3D表示で、手前の値を実際より大きく見せること。
色覚の多様性や遠近による錯視に配慮し、グレースケールでも区別できる表現が望ましい。 強調するところのみに色を使用し、他を灰色などの無彩色にすることでメリハリのあるグラフを作成することができる。 対比するときは補色を使うことが効果的であるが、赤紫と緑や青紫と黄など補色関係にあっても見分けにくい人がいる色の組み合わせもある。 実線と点線などの形でも区別をつけると多くの人にとって見やすいグラフとなる。 グレースケールで表示しても伝わるグラフを心がける。 3D円グラフでは手前が大きく見えるため、実際の割合と違った印象を与える。 3D棒グラフでは棒の高さが読み取りにくくなり、誤解を与える。 そのため、値を正確に比較する目的では、不要な3D表現を避けることが望ましい。
階層構造―全ページが相互に無秩序なリンクで結ばれたWiki
直線的構造―入力→確認→完了と順に進む申込フォーム
網状構造―必ずトップページへ戻ってから各コンテンツへ進むSNS
ハブ＆スポーク型―カテゴリを段階的に下って目的ページへ進む学校サイト
正答1. 直線的構造―入力→確認→完了と順に進む申込フォーム
決められた順番でページを進む申込手続は直線的構造の例である。 階層構造とは、情報がきちんと分類されていて、ユーザが分類項目を選択することで目的の情報へたどり着くサイトの作りである。 多くのサイトがこの作りをしている。 例えば、学校のホームページは「学校沿革・在校生へ・受験生へ」などのカテゴリ分けがされていて、それらを選択することで詳細な情報を得ることができる。 問い合わせフォームのように順番に情報を提示していくサイトの作りは直線的構造という。 網状構造は、ページ同士がリンクで結ばれており、その間を自由に移動できる。 一方で、サイトの全体像がとらえにくいため、必要に応じて、検索機能をつけることになる。 ハブは車輪の中心部、スポークはハブと車輪の外周部（リム）をつなぐ部分のこと。 ハブ＆スポーク型構造とは、1つのメインとなるページを中心として、放射状に広がった構造を持つWebサイトの作りである。
ブレーンストーミング
KJ法
マインドマップ
デバッグ
正答0. ブレーンストーミング
ブレーンストーミングは、質より量を重視し、参加者が自由に多くの案を出す集団発想法である。 ブレーンストーミングでは批判を保留して、参加者が自由に多くの案を出す。案が出そろった後に、KJ法などで分類・評価することができる。
フローチャート
インフォグラフィック
マインドマップ
ER図