「ユーザーインターフェース (UI)」の記事一覧
話題「ユーザーインターフェース (UI)」に関連するコラム記事の一覧です。
(記事数:27)
枝葉末節な話かもしれませんが、Webサイトの閲覧中におけるマウスポインタの形状について、気になっていることがあるので、主観的な意見ではありますが記しておきたいと思います。特にアクセシビリティの観点で、問題になるケースが見られたためです。
今回の話題で採り上げる「ページ内スクロールエリア」とは、ブラウザの機能として標準装備されているスクロールバーとは別に、Webページの中で表示されるスクロール領域を意味します。下図のようなイメージです。

最近、プログレッシブエンハンスメント(Progressive Enhancement)という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化(パソコンだけでなく、携帯電話やスマートフォン、支援技術など)、ユーザーの抱える身体的状況の多様化(障碍、加齢、怪我、など)、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です(Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね)。以下、簡単にご紹介したいと思います。
Webページの途中に、リンクの目的地があるような場合がありますね。いわゆる、「ページ内アンカー」と呼ばれているものです。図示すると、下記のようなイメージです。

先のコラム記事「フリガナのカナ表記」に、とても印象的なコメントをいただきました(ありがとうございます!)。フォームに名前を入力する際、いつも「かな漢字変換」でいったん名前を入力しているのに、再度読み仮名入力をさせられるのがとても面倒、というものです。
先のコラム記事「パスワードは隠すべきか?」で、Jacob Nielsen(ヤコブ・ニールセン)氏の「Alertbox」の記事(パスワードを隠すのをやめよう)を引き合いに出し、現時点での私の意見として「多少の不便はあっても、今の慣例どおりデフォルトではパスワードを非表示にしておいて、ユーザーが任意でパスワードの表示/非表示を選択できる機能を付加するのが良いのではないか」ということを述べました。
ブラウザ「Opera 10.5」がリリースされました。すでに使われている方もいらっしゃるかと思いますが、私も早速入手してみましたので、主にユーザーインターフェース(UI)の観点から、基本機能の使用感について簡単にレビューしてみたいと思います。
先に公開したコラム記事「Ajaxによる画像の拡大」で、画像拡大のAjaxポップアップの例として、Highslide JSというライブラリーを使用しました。今回は、このHighslide JSを用いて、動画のポップアップ表示について触れたいと思います。
お問い合わせフォームをAjaxのポップアップで表示できる面白いサービスがありますので、ご紹介したいと思います。「VisitorContact」というサービスです。
ユーザーインターフェース(UI)設計の専門用語にモーダルとモードレスという言葉があります。WebサイトのUIを検討をする上で、理解しておきたいキーワードのひとつだと思いますので、簡単に触れたいと思います。
Webサイト(ホームページ)がWeb標準に準拠して適切に制作されていれば、表示されるWebページの「見た目のデザイン」は、スタイルシートというファイルで制御することができます。これを応用して、今日の一般的なブラウザでは、ユーザースタイルシートを用いてWebページの表示を「自分好みに」カスタマイズできるようになっています。つまり、ユーザー(サイトの閲覧者)が、自分用にオリジナルのスタイルシートを作ることによって、Webページを「自分が見やすいように」変更することができるのです。これは、アクセシビリティの観点で、特にロービジョン(弱視)のユーザーにとっては非常に有益な機能と言えます。
ユーザーインターフェース(UI)設計のコンサルティング会社、ソシオメディアさんのサイトを見て気づいたのですが、サイト内検索窓があるものの、なんとそこに[検索]ボタンがありません。サイト内検索の機能を持つサイトは珍しくないですが、このように[検索]ボタンが無いものは、とても珍しいのではないでしょうか。
以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト(ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト)に変更しました。
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Closr.it」です。
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Google Maps Image Cutter」です。
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Lightbox Plus」です。
皆さんのWebサイト(ホームページ)において、高解像度画像を見たいというユーザーニーズ/ユースケースがあるかどうか、検討されたことはありますでしょうか?高解像度画像とは、簡単に言うと「きめ細かな質で、大きな面積の画像」ですが、以下のようなシチュエーションで、ユーザーは高解像度画像を見たいと思うのではないでしょうか。
Webページ上にある小さな画像(サムネイルなど)をクリックすると、画像が拡大表示される -- Ajaxを使った、そんなUI(ユーザーインターフェース)をご覧になったことがある人は多いと思います。たとえば、以下のような感じです(eコマースサイトの例)。
Internet Explorer 8(IE8)が、2009年3月20日に正式リリースされました。以前、このサイトでも触れたInternet Explorer 7のトレンドを踏襲しつつ、さらに進化したブラウザ、という印象です。私も実際にインストールして、試しに使ってみました。
先日、知人のアメリカ人(自称「technophobia(テクノロジー音痴)」という、Webユーザーとしては一般的なレベルの人)から、「Cuilを知っているか?」と聞かれました。恥ずかしながらそれまで知らなかったのですが、「Cuil」とは、元Googleの社員が新しく開発した検索エンジンで、読み方は「クール」と「キューィル」の中間のような発音です。
1億2,400万以上のWebページをインデックスしている(2008年11月1日現在)ものの、あいにく日本語対応は不十分なため、多くの方にはまだ馴染みが無い検索エンジンではないかと思います。しかしながら、そのユーザーインターフェースがなかなか魅力的だったので、簡単にご紹介したいと思います。
2008年9月3日にベータ版として公開された、Googleオリジナルの新ブラウザ「Google Chrome(グーグル クローム)」。すでに試した方もいらっしゃるかと思いますが、私も早速入手してみましたので、主にユーザーインターフェース(UI)の観点から、その使用感について簡単にレビューしてみたいと思います。
代表的なブラウザ(ホームページ閲覧ソフト)のひとつであるFirefoxが このたびバージョンアップし、Firefox 3が正式にリリースされました。 Windows(XP、2000、Vista)、Mac(OS X 10.4x 以降)、Linuxで使用できます。さっそく自分のFirefoxをアップデートしてみたのですが、ユーザーインターフェース(UI)が色々と改善されていて、以前に比べるとだいぶ、かゆいところに手が届くようになってきたなあ、という印象を受けました。
Internet Explorer 7(IE7)の日本語版が、2006年11月2日に正式公開されました。「IEの新しいバージョンが出たのね」「Webサイト(ページ)のレイアウト崩れをチェックしなきゃ」くらいに思っているウェブマスター/制作者のみなさんも多いかと思いますが、実はIE7の登場は、Webにおけるユーザー行動、ひいてはユーザーエクスペリエンスを大きく変える可能性があることに、お気づきでしょうか?
一部のWebサイト(ページ)では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを(多くの場合、2つから3つに)分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です(各々、個別のHTMLファイルを読み込んで表示します)。
かねてから英語版は存在していたのですが、Googleマップ(ベータ版)の日本語版が公開されていました。
