メニュー

ウェブユーザビリティへの対応:スマートフォン・タブレット・携帯電話への対応、メニュー設定・階層設計、音声入力・タッチ式入力アプリケーション、画像処理・アニメーション・映像配信技術対応。茨城県つくば市のつくばマルチメディア

文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

ウェブユーザビリティへの対応


ウェブユーザビリティとは

Webサイトの使い勝手のよさのことで、そのページを訪れた利用者(ユーザ)がどれだけ快適に操作できるかを意味しており、ページ内の文章やボタン・画像などの各要素のわかりやすさや大きさ・配置、操作の学習しやすさ・覚えやすさ、ページ間移動の効率のよさ、ページの読み込み時間の短さなどの観点から評価されます。WebサイトのWebユーザビリティを向上させると、利用者のホームページへの滞在時間が増え、そのサイトを再訪問する確率を押し上げるほか、電子商店では商品の購入率を上昇させるなどの効果もあるとされています。


ウェブデザインの変化

2013年前後から、ホームページデザインの傾向が大きく変化し、日本を代表するサイトでも明確な変化を感じ取ることができるようになりました。
共通の変化として、ホームページのレイアウトの定型化・シンプル化、メニューデザインのシンプル化、白・グレー・青をベースとしたカラー選択などが見られます。
分かりやすい配置や特別な飾り等を使用しないシンプルなデザインで、メニュー文字などが見やすくなっているのが特徴といえます。


また、ウェブデザイン変化の大きな理由として社会的要求と発信効果の重視があげられます。
簡単に表現すると「アクセシビリティ」と「ユーザビリティ」を考慮した結果と考えられます。アクセシビリティは、高齢者・障害者を含む誰でも利用できることへの対応であり、ユーザビリティは使いやすく効果的であるということです。


レイアウト・メニューのシンプル化

レイアウトやメニューがシンプルになっている理由としては、万人に見やすい・使いやすいを追求するとシンプルになると考えられますが、別途、ウェブにアクセスする機器やOS等の環境変化が大きく影響していると考えられます。

  • タブレット端末やスマートフォンの急速な普及により、利用画面がパソコンより縮小されていること、タッチ操作が一般化されてきていることが大きく影響しています。
    今まで、ホームページにはパソコン版と携帯版とスマートフォン版がありました。ここにきてタブレット端末やタブレット型パソコンが普及してきており、この場合、パソコン版なのかスマートフォン版なのかという問題がでてきています。
  • 前記事例の企業も含めて、一般的には、タブレット端末において表示しているホームページはパソコン版ですが、従来のデザインでは見難いということでシンプルになってきたと考えられます。

ウェブ特殊技術表現:スライドショーの採用

従来、ホームページのデザインの差別化にはフラッシュの利用が不可欠でしたが、最近の大手サイトで採用されているものはほとんど見かけなくなりました
フラッシュが利用されなくなった大きな理由は、フラッシュが米国アップル社のアイフォン(iPhone)やアイパッド(iPad)で動作しないということです。日本は、スマートフォンにおけるアイフォンのシェアが世界で最も高く5割程に達しています。
そのため、多くのサイトでフラッシュに替わりプログラム(Javaスクリプト)によるスライドショーが採用されるようになっています。現在、ジャバスクリプトによるプログラムはすべての機種やOSで問題なく稼働しています。
しかし、このスライドショーを外したデザインを想定して見るとプロのウェブデザイナーがデザインしたように思えないようなデザインとなります。
つまり、プログラムで動作するスライドショーがデザインや広告効果等で重要な位置を占めていることがわかります。
このスライドショーには、有名な女優や俳優、一般では撮影できない山・海等世界の自然風景、街や歴史遺産等の写真や自社製品やサービスの写真が利用されており差別化がはかられています。スライドする写真や画像にデザイン性やカッコよさが表現されているわけです。


ウェブデザイン変化による今後の傾向

今後のホームページのデザインは以下のような傾向になると判断されます。

  • ホームページを閲覧する機器へのデザイン対応
    ホームページは、パソコン版とスマートフォン版と携帯版があり、パソコン版はタブレット端末やタブレット型パソコンを考慮し、レイアウトやメニュー配置が見やすくシンプルになる。
  • カラーバリアフリーへの対応
    背景基本色は、白又は薄い灰色・薄い水色で、メニューやボタンには、白・灰色・黒及び寒色系の色、又は色覚障害でも確認できる色がメインで利用される。コーポレートカラー(会社イメージカラー)が、赤や緑等色覚障害で別の色に見える色を利用する場合には白と組み合わせて利用する。
  • デザイン性・広告効果のためのスライドショーの利用
    ホームページのデザインにおいて、デザイン性や広告効果を引き出す手法としてスライドショーが利用されます。
    今後、中小零細事業者のホームページでもプログラムによるスライドショーが重要な役割を果たすことになります。

@PAGE/@WEBシステムの対応

初期作成におけるシンプルなデザインやカラーバリアフリーについての色の採用は、企画設計の問題であり本項には記載しませんが、今回大幅なシステム改良を実施しており、アクセシビリティとユーザビリティの観点から、特に「新スマートフォン版システム」の本格的な導入をしました。
また、今後、パソコン版及びスマートフォン版のホームページの必須コンテンツ技術となるスライドショーを独自に「スライドアニメーション(簡易版)」と「スライドアニメーション(プロフェッショナル版)」として開発し、クラウドシステムとして@PAGE/@WEBに搭載しました。
今回、「新スマートフォン版システム」と「スライドアニメーションシステム」は、現時点で他に例を見ないレベルで作成されていますが、地域事業者様においても高度な技術を容易に利用できるようにシステム構築されています。


関連用語解説

※アクセシビリティ(英: accessibility)
高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合い。


※ユーザビリティ (英: usability)
特定の利用状況において、特定のユーザによって、ある製品が指定された目標を達成するために用いられる際の有効さ、効率、ユーザの満足度の度合い。(ISO 9241-11での定義)


※ユニバーサルデザイン(英: Universal Design、UD)
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン)をいう。 カリフォルニア州立大学のユニバーサルデザインセンター所長であったロナルド・メイス(1941-1998)が1985年に公式に提唱した概念。「できるだけ多くの人が利用可能であるようなデザインにすること」が基本コンセプトで、デザイン対象を障害者に限定していない点が、一般に言われる「バリアフリー」とは異なる。


※バリアフリー(Barrier free)
対象者である障害者を含む高齢者等の社会的弱者が、社会生活に参加する上で生活の支障となる物理的な障害や、精神的な障壁を取り除くための施策、若しくは具体的に障害を取り除いた事物および状態を指す用語である。


※ノーマライゼーション(英: normalization)
1960年代に北欧諸国から始まった社会福祉をめぐる社会理念の一つ。障害者と健常者とは、お互いが特別に区別されることなく、社会生活を共にするのが正常なことであり、本来の望ましい姿であるとする考え方。またそれに向けた運動や施策なども含まれる。