ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
ウノウラボ Unoh Labs: ブラウザから使用できる仕様書を書くツールまとめ
こんにちはsatoです。Windows以外の環境で仕様書を書こうと思うと、なかなか良いアプリがなかったりまします。今回はブラウザから使用できる仕様書作成ツールをまとめてみました。 1) オンラインで配置図などを描く Gliffy 配置図などをオンラインで描くことができます。また 画像への出力なども対応しています。いわゆるVisioの代わりになるツールです。 2) pdfファイルをtextに変換する PDFTextOnline pdfをtextに変換することができます。pdfの内容をスクリプトなどで切り出して、データ化するときなどに役に立ちます。他にもいろいろな変換するサイトやツールがあるのですが、ここは日本語が正常に通って見た目通りに変換できます。 3) データベースのテーブル定義などを書く WWW SQL Designer オンラインでER図などが書けます。以前miyakeさんが紹介して
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
ウノウラボ Unoh Labs: WEBアプリテストのチェック項目リスト
こんにちは！やまもと＠テスト番長です。 TestingGeekという耳障りの良い名前のサイトをご存知でしょうか？ 総合的にテストの話を取り扱っており、それでいて読みやすいサイトです。 そこのTemplatesのコーナーにWeb Application Testing Checklist という便利そうなものがありましたので、日本語にしてみました。 ちょっとそのままだと物足りない感がありますが、テストポリシー作成の叩き台に使ってみるのも良さそうですね。 この手のリストを他にもご存知の方がいらっしゃれば、是非ご一報ください。 1. 機能テスト 1.1 リンク 1.1.1 記載された通りの先に遷移するか 1.1.2 どこからもリンクされないページは存在しないか 1.1.3 全ての外部リンク 1.1.4 参照しているサイトおよびメールアドレスはハイパーリンクになっているか？ 1.1
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
ウノウラボ Unoh Labs: ECサイトのユーザビリティ・ガイドライン
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
ウノウラボ Unoh Labs: Googleのサービスをケータイでも使い倒す
こんにちわ、hideです。 ゴールデンウィークの真っただ中、皆さんいかがお過ごしでしょうか？この時期、旅行に出かけたり、実家に帰省したりして、いつものインターネット接続環境が使えないことも多いかと思います。今日は、そんなあなたにGoogleのサービスを携帯電話で使う方法を紹介したいと思います。 ※一緒にQRコードも載せておきますので、バーコードリーダーで読み取ってご利用ください。 Google検索 携帯電話でもGoogleの検索エンジンが利用できます。このサービスの便利なところは、PC用のサイトを検索できるだけでなく、携帯電話での表示に適した形に変換してくれるところです。画像サイズの変換、長いページの分割、簡単なJavaScriptの描画などもしてくれるようです。 Google Mobile Proxy PC用のサイトを携帯電話での表示に適した形に変換してくれます。Google検索
ウノウラボ Unoh Labs: 個人でWebサービスを作る時に一番大変なこと
komagataです。 最近、個人でWebサービスを作る人が増えています。 僕も個人（2人）で※Plnetというしがないサービスを作っています。Plnetを作るにあたって、もう一人の作者t-kawaduと目標に掲げたのが、 「とにかくオープンすること。」 なんて低い目標だと驚かれるかもしれませんが、仕事で作るのとは違って個人でWebサービスを作る上で一番大変だったのは“やる気を継続させること”でした。やる気を継続させるためにやったことを紹介したいと思います。 （普通こういうことは成功しているサービスの作者が言うものですが・・・） 寝る前にドメインを取る よく飲みながらこれこれこういうサービスを作ったら便利なんじゃないか、なんて話をしますが実際に作ったためしがありませんでした。自分の口ばっかり具合にうんざりしていたので、寝て気が変わる前にドメインを取りました。 寝る前にレンタルサーバを借りる
ウノウラボ Unoh Labs: 携帯開発向けに便利な支援ツール/サイト
どーも8makiです。 ウノウでは携帯サイトの開発も行っています。 携帯サイトの開発ってPC用のものと比べて制限が多かったり、面倒くさいことが目白押しです。そこで開発に便利なツール・サイトをリンク集的にまとめてみました。 ～～～～～～ツール編～～～～～～ ■必須ツールi 絵文字 ドコモの絵文字が入力/表示できるようになります。 User Agent Switcher (Firefox 拡張) User Agentを書き換えて携帯になりきることができます。 インポート用の各種端末のUser Agentリストを作成していただいたので皆さんもご利用ください。 useragentswitcher.xml ■あると便利なツールiモードHTMLシミュレータIIiモードHTMLシミュレータOpenwave SDK(au) ウェブコンテンツビューア(ソフトバンク)MediaCoder .
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
ウノウラボ Unoh Labs: ウェブデザインに不可欠なツールサイトの紹介
naoyaです。 今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も「Web Design Tools - thePeoplesToolbox」です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。 それでは、さっそく使ってみることにしましょう。 まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。 登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。 ウェブデザインサイト１ posted by (C) フォト蔵 ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。 この中から
ウノウラボ Unoh Labs: Web2.0エンジニアのためのJavaScriptリファレンス集
こんにちは、hideです。 近年のAjax技術の台頭により、Web2.0時代のエンジニアにとってJavaScriptは欠かすことのできない技術となってきました。しかし、2000年頃のWeb1.0時代には低機能な言語として認知されていました。このことは、"Rediscover the JavaScript"と題された次の文章に良く表れていると思います。 10 年。世界が JavaScript の真の実力を発見するのに要した時間である。 1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。(S
ウノウラボ Unoh Labs: WEBアプリのテストに必須なツール７種
こんにちは！やまもと＠テスト番長です。 前回satoさんの書いたエントリーが好評のようですね。 自分は実は美術系出身です。なので「デザインセンスのある人からみた～」というエントリーでも続けて書いちゃおうかなと一瞬思いましたが、世の中にはWEBデザインのプロの方もいらっしゃることだし、控えておきましょう。 センスってのも考え込むと難しいですしね。 個人的には、WEBデザインの美醜って「使いやすさ」とかなり直結な気がしてます。 さて、今回は僕が普段テストに使っているツールでもご紹介してみようかと思います。 Selenium 一年前くらいに登場した無償の自動実行ツールです。 有償の自動実行ツールは以前からありましたが、 ベンチャーが購入するには高価なものなので 大手以外にはあまり導入されていなかったであろう類のツールです。 テストシナリオにそってブラウザを自動で操作してくれます。
ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
こんにちは satoです。 いくら面白くて、高機能なwebサイトを作成しても、デザインがダサいとサイトの魅力や開発意欲は半減です。 僕もまったくデザインセンスが全く無いのですが、新しい物を作成する際には以下のサイトを参考にしています。 (1)Color Scheme Generator 2 デザインの大まかな配色等を決めるのに使用することがあります。 真似するだけで、Coolなサイトに見えるような気がします。 (2)Color Palette Generator ロゴ等の画像を指定すると、その画像に合ったカラースキームを 教えてくれます。 (3)Web 2.0 Colour Palette 有名なサイトのカラースキームの一覧があります。 (4)pmob.co.uk CSSや画面分割などのさまざまなサンプルや解説があります。 (5)logopond さまざまなロゴのサンプルがありま
ウノウラボ Unoh Labs: 海外経験のない典型的理系人間が日常会話レベルの英語を話せるようになるまでの道のり
尾藤正人です。 最近僕のアメリカ人の友達がオフィスに来たときに英語で会話をしてたのですが、ようやく僕が本当に英語が話せることが証明できて存在価値を認めてもらえるようになりました。 昔は理科数学しかできない典型的な理系人間で、高専に進学したため受験戦争の荒波から逃れ、英語レベルは中学生止まり。海外に一度も行ったことがない(パスポート持ってない)状態で外国人と普通に会話ができるまでに成長することができました。 英語は読めるんだけど喋るのは苦手という方は多いと思います。なので、僕がどうやって英会話力を見につけたかを紹介したいと思います。 日本語を使わない これが一番大事です。英和辞典は捨ててもいいぐらいです。日本人は日本語を勉強するときには日本語を使います。英語を勉強するときには英語を使えばいいのです。そもそも言語っていうのは一対一で対応するものではないので、外国語を使うことに無理があります。英
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合