タグ

uiに関するnettaboのブックマーク (66)

  • iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT

    moobileはHTML/JavaScript製のフリーウェア(ソースコードは公開されている)。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが

    iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
    nettabo
    nettabo 2010/06/06
    HTML5によるボタンなどのUI部品テンプレート。
  • ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT

    jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch...と書かれているのもよく見かける。 予め文字を入力してユーザビリティを向上する そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。 テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応して

    ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT
    nettabo
    nettabo 2009/12/19
    フォームにpromptを表示するjQueryプラグイン。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    nettabo
    nettabo 2009/08/29
    フォームの中に薄くPasswordとか説明を表示できる。
  • iGoogle風UIを実現&解説·iNettuts MOONGIFT

    iGoogleの画面が使いやすいか、と言われると答えに窮するところだか個人がメンテナンスできる機能はとても便利だ。ブックマークレットやFirefoxアドオン等でもただ与えられた画面をそのまま使うのではなく、ユーザが自分にとって使いやすい形に変化させる(または許容する)のはとても大事だ。 3カラム表示のウィジェットポータル そのようなウィジェット画面は社内ポータルやWebサイトなど色々な場面で応用できそうだ。それを実現するのがiNettutsだ。 今回紹介するフリーウェアはiNettuts、jQuery UIを使ったウィジェットポータルソフトウェアだ。ソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 iNettutsはCSSHTMLの書き方、JavaScriptでの実現の仕方が詳しく解説された記事で紹介されているソフトウェアだ。どのようにしてこのウィジ

    iGoogle風UIを実現&解説·iNettuts MOONGIFT
    nettabo
    nettabo 2009/08/29
    iGoogleっぽい画面を作れるjQueryライブラリ。
  • 凄い!jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT

    MS Office 2007から採用されたリボンメニュー。今は(といっても2年前からあるが)まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー! そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト(ulタグ)だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ

    凄い!jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT
    nettabo
    nettabo 2009/05/31
    OfficeのUIをリボンメニューをいうのか。かなりのリッチ感。
  • 長文を分割&横スクロールで見やすくする·bookreader.js MOONGIFT

    Webの発達で日語であっても横に読まれることが当たり前になりつつある。コンピュータ上では縦に際限なく伸びていくので、縦書きは読みづらいのだろう。だが横向きに書かれていても長文であると見がたくなるのは変わらない。 長文をブラウザ上で読むならこれ 特に小説やコラムなど長文を載せているサイトの場合はそうだ。コンピュータは元々書籍に比べると長文を読むのに適していない上に、レイアウトも読みづらいのでは大変だ。そこで試したいのがbookreader.jsだ。 今回紹介するオープンソース・ソフトウェアはbookreader.js、長文を読みやすくするJavaScriptライブラリだ。 bookreader.jsは専用のJavaScriptCSSファイルによって縦に続く長文を一定の長さで区切り、続きを右側に表示してくれるスクリプトが。スクロールは矢印キーか画面に表示される矢印のボタンで行う。 次期バー

    長文を分割&横スクロールで見やすくする·bookreader.js MOONGIFT
    nettabo
    nettabo 2009/04/20
    かっこいい。既存サイトに適用させるブックマークレットとか無いのかな。
  • HUMAN RELATIONS CALCULATOR

    下の計算機に誕生日を入力するだけで、自分の性格や、相手との『大人関係』の相性が分かります。 ※『大人関係』とは、会社・結婚生活・ご近所・親戚づきあいなどのあらゆる場面で必要とされる、「大人と大人」の相性関係です。

    nettabo
    nettabo 2009/02/03
    生年月日を入れて人間関係などを算出。電卓の比喩が秀逸だなぁ。
  • http://www.dqwm.net/

    nettabo
    nettabo 2008/09/27
    こういうの好きなんだけど、どこがクリッカブルなのかわかりにくいのが残念なところ。
  • 【MarkeZine Dayレポート】 モバイルサイトを成功させるためのたった3つのポイントと、10の構築ルール

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    【MarkeZine Dayレポート】 モバイルサイトを成功させるためのたった3つのポイントと、10の構築ルール
    nettabo
    nettabo 2008/09/27
    ユーザビリティルール10か条はやってみよう。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    nettabo
    nettabo 2008/09/05
    これはぬくもりがある良いサービス。手書き風FlashUIも良いかんじ。
  • 会員登録フォームを構築するポイント | ランサーズ社長日記

    いいね! 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる!とか、売上が上がる!といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い

    nettabo
    nettabo 2008/08/29
    これは良いまとめ。
  • MOONGIFT: » これはすごい!Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」:オープンソースを毎日紹介

    これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。 Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。 ドラッグアンドドロップでモックアップを作成できる そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。 今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。 個人的にはモックアップ

    MOONGIFT: » これはすごい!Firefoxを使ってサイトのモックアップを簡単に作成する「Pencil」:オープンソースを毎日紹介
    nettabo
    nettabo 2008/08/25
    試してみないとわからないな。
  • iPhoneのグラフィカルユーザインタフェースのPSD素材

    teehan+laxから、iPhoneのボタンやバーやキーボードなどグラフィカルユーザインタフェースが揃っているPSD素材を紹介します。 iPhone GUI PSD ※Appleの提供ではないので、公式なものではありません。 ダウンロードできるPSDファイルは、ボタンなどの各エレメントやテキストはレイヤーに分かれているので、編集も行えます。 他に、iPhoneのPSD素材は下記でも配布しています。

    nettabo
    nettabo 2008/08/21
    良さげだけど、ドラムとかどう使うんだろ。
  • iPhone/iPod Touch向けインタフェーステンプレート·iPhone Universal MOONGIFT

    iPhoneは国内ですでに7万台売れているそうだ。この数字が大きいかどうかは分からないが、iPod Touchと含めて考えると10万人以上のユーザがいると考えられるだろう。世界で考えれば数百万人のユーザが存在する。 iPhone/iPod Touch専用のHTMLテンプレート そのため、AppStoreのように専用端末でしか動かせないアプリケーションさえ市場になりえる。もしあなたがiPhone/iPod Touch向けのWebサイトを構築したいなら、これを使ってみると良いだろう。 今回紹介するオープンソース・ソフトウェアはiPhone Universal、iPhone/iPod Touch向けのインタフェーステンプレートだ。 iPhone UniversalはHTML、画像、CSSで提供されるソフトウェアで、あのiPhone独特なインタフェースのテンプレート集になっている。例えばリストの形

    iPhone/iPod Touch向けインタフェーステンプレート·iPhone Universal MOONGIFT
    nettabo
    nettabo 2008/08/19
    iPhone向けサイト用テンプレート。
  • Yahoo!画像検索流 iPhone用ページの作成方法

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

    nettabo
    nettabo 2008/08/12
    iPhone向けサイト制作のお供に。
  • 携帯サイトでのユーザナビゲーションのコツ (ユーザビリティ実践メモ)

    携帯サイトのユーザビリティはPCサイトと異なる部分が多く、携帯サイト特有のtipsが存在します。今回は、携帯サイトでのページ分割と、ページ内リンクの活用についてご紹介します。 従って、同じ量の情報を伝えるにあたって、 ページを複数に分割し、ページ遷移させる(ロードが必要) 1ページに情報をまとめ、ページ内リンクでコンテンツ間を移動させる(ロードが不要) という2種類の方法では、後者の方が「携帯電話=PCの代替」ユーザに好まれ、より多くの情報に接してもらうことができます。 実際、ページを複数に分割した場合、弊社のユーザビリティテスト(ユーザ行動観察調査)では図1のような行動が観察されています。 インデックスページへ戻ることを繰り返し、「面倒だ」と感じた時点でそのサイトへの興味を失い、閲覧を止めてしまうのです。 一方、1ページに情報をまとめ、ページ内リンクで誘導した場合の行動は図2のようになり

    nettabo
    nettabo 2008/07/28
    ページ内リンクってのは考えてなかったわ。
  • "COLORS"ケータイWebの新しい形:ケータイWebをもっとリッチに使いやすく――RIAプラットフォーム「Colors」の挑戦(前編) - ITmedia +D モバイル

    ケータイWebをもっとリッチに使いやすく――RIAプラットフォーム「Colors」の挑戦(前編):ケータイWebの新しい形 携帯電話の高機能化に伴い、ディスプレイの表現力が増している。ハイエンドモデルの解像度はワイドVGA(480×800ピクセル)以上が標準になりつつあり、画面サイズも3.5インチクラスの端末が登場するなど、進化し続けている。また、通信速度の高速化や定額プランの導入も進んでおり、リッチなコンテンツを楽しめる素地が整ってきたといえるだろう。 しかし、サービス面では、この高解像度なディスプレイや通信速度を生かし切ったものが登場していないのが現状だ。例えばワンセグはそもそもの解像度がQVGA(320×240ピクセル)であるため、大画面はメリットになるものの、解像度の面ではさほど効果があるとはいえず、大画面や高解像度が生きてくるWeb系のサービスにしても、表現力の豊かな携帯サイトは

    "COLORS"ケータイWebの新しい形:ケータイWebをもっとリッチに使いやすく――RIAプラットフォーム「Colors」の挑戦(前編) - ITmedia +D モバイル
    nettabo
    nettabo 2008/07/25
    くるくる回るメニューがいいね。で、なんぼ?
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    nettabo
    nettabo 2008/07/20
    iPhone向けのボタンとか。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    nettabo
    nettabo 2008/07/20
    エラーメッセージなんかに使えそう。
  • フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント

    <script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid

    nettabo
    nettabo 2008/07/02
    この発想はなかったわ。