タグ

UIに関するpukadaのブックマーク (28)

  • 絶対見ておきたい有名企業のスマホサイトまとめ (1/5)

    この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日のスマホサイトは2年間でこんなに変わった iPhoneAndroidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」(スマホサイト)を開設する企業が増えている。当初はiPhone(iOS)の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

    絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
  • 「ケータイ=若者のモノ」。その認識は、間違いです。:日経ビジネスオンライン

    ある日、飲店ケータイサイトのカスタマーサポート(CS)に届いた質問。あなたはこの言葉の意味が分かりますか? CS お客様が現在ご覧いただいているページに、カタカナで『コチラ』と書いてありませんか? 顧客 はい、コチラって字は見えるんですが、コチラがないのです! どこにあるんですか? CS コチラという文字が青色もしくは背景に色がついていませんか。 顧客 はい、なっています。 CS コチラの文字が青色になった状態で、携帯電話の決定ボタンを押していただけますか。 顧客 はい・・・。あ、・・・ありました。ありがとうございました。 ケータイユーザーには4タイプある 文字が青色=クリックするとリンク先に飛ぶ――。 インターネットを日常的に利用する人には常識と思えるこの図式も、不慣れな人には分からないものです。いまやケータイは1人1台が当たり前の世界。ケータイサイトの利用者も、使い慣れた若者だけとは

    「ケータイ=若者のモノ」。その認識は、間違いです。:日経ビジネスオンライン
  • PUDフォント開発者 真野一則 | 松下グループのユニバーサルデザイン

    2006年4月以降に発売された松下製品の操作表示部分には、<PUD (Panasonic Universal Design)フォント>という新しい書体が使われています。「見やすい文字」を探し求めて、広大な書体の海を旅しているうちに、とうとうオリジナルの新書体を作ってしまった…。そんな開発者 真野一則さんに、新書体誕生までのお話やUDにまつわる思いを聞きました。 インタビュアー: そもそもどういうきっかけで書体を見直すことになったのですか? 真野: 松下にはMIS(Matsushita Industrial Standard)という製品規格があり、その中で、製品の操作表示部分に使う書体が定められています。ところが指定の書体はMISができた当時主流だった写植(写真植字)の書体のままだった。写植に代わってPCでのデザイン指示が主流となっている現在、見直しが必要とされていたんです。 PCを使うデザ

  • jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌

    jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいUIに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg

  • ボードゲームとして「将棋」をデザインする

    緊急告知 夏休みイベント:「将棋を楽しもう」を開催します 外国人や初めての人にも分りやすくデザインしたユニバーサル将棋盤で、ボードゲームとして魅力的な『将棋』を楽しむ集いです。 女流プロ棋士の「北尾まどか」さんが来場されます。将棋に挑戦できますよ。 日時:8月22日(土曜日)午後1時〜4時 場所:昭和レトロ商品博物館(JR中央線青梅駅下車3分) http://showa-retro.omjk.jp/ 詳しくはこちらのチラシをご覧ください。 事の始まりは2009年のゲームマーケットでお会いした女流プロ棋士の「北尾まどか」さんから、外国人にも受け入れ易い将棋ボードをオリジナルで作るご相談を受けたことでした。彼女には既に自分の頭の中におおまかなデザインイメージがあるとのことでしたので、後日お話しましょうということになりました。 こういう命題が与えられると自分でも作りたくなってきたので

  • IDEA * IDEA

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

    IDEA * IDEA
  • CSSでゲームのような円形メニューを作るサンプル:phpspot開発日誌

    Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSゲームのような円形メニューを作るサンプル。 次のような、可愛い円形メニューが作れます。 アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。 鉛筆にカーソルを合わせると、追加で2つのアイコンが表示され、次のアクションにいけます。 人型のアイコンにカーソルを合わせると、4つのアイコンが表示。 メールアイコンにあわせると次のアクションとなる4アイコンが表示。 という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。 実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。 こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でUIと

    pukada
    pukada 2009/06/26
  • 要素ごとに分けられたウェブデザイン集『Pattern Tap』 - DesignWalker

  • いろいろなサイトのナビゲーションを集めた -Navigation Design Showcase

    Navigation Design Showcase Navigation Design Showcaseは現在49個登録されており、Elements of Designには他にもウェブサイトでよく使うエレメントのデザインが収集されています。 コメントの入力欄のデザイン集 コメントのデザイン集 カレンダーのデザイン集 打ち出しエリアのデザイン集 コード表示のデザイン集 動画プレイヤーのデザイン集 フッタのデザイン集 アイコンのデザイン集 画像のキャプションのデザイン集 ログインフォームのデザイン集 ナビゲーションのデザイン集 価格表のデザイン集 登録フォームのデザイン集 引用箇所のデザイン集 検索フォームのデザイン集 見出しのデザイン集

  • Apple風デザインのアコーディオン型ナビゲーションのチュートリアル | コリス

    kriesi.atのエントリーから、Apple風にデザインされたアコーディオン型ナビゲーションの画像作成からスタイルシート・スクリプト実装までのチュートリアルを紹介します。 Create an apple style menu and improve it via jQuery デモ 上記ページでは、Apple風にデザインされたナビゲーション画像のPhotoshopでの作成方法から、HTML+CSSJavaScriptの実装方法まで詳細なチュートリアルが掲載されています。 ナビゲーションは、リスト要素でマークアップされています。 <textarea name="code" class="html" cols="60" rows="5"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2

  • 「こんな企業サイトはイヤだ」ベスト20

    goo ランキングは7月3日、「企業のウェブサイトで困ってしまうことランキング」を発表した。1位「情報が数カ月間更新されていない」、2位「画像が多くて、重い」、3位「『準備中』のコンテンツだらけ」などだった。 5位には「トップページからオールフラッシュ」がランクイン。そのほか、「ポップアップがどんどん開く」、「突然音が鳴る」などが10位以内に入った。

    「こんな企業サイトはイヤだ」ベスト20
  • ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]

    このURLのページは存在しません。 アドレスが間違っている可能性がございます。いま一度、ページのURLをご確認ください。

    pukada
    pukada 2008/06/23
    どこが変わったのかパッと見わからない… うまくデザインコンセプトを引き継いだとポジティブに解釈してあげ…やっぱムリでした。
  • Life is beautiful: OS-Xのメニューの位置が固定なのは「たとえ一点でもMicrosoftの方が正しかったこと」を認めたくないAppleの意地か?

    とりあえず右クリックすれば操作するべきメニューが出てて来るというのは意外と便利なんだけどね。コンテキストメニューがよくできてるというのはWindowsの美点のひとつだと思う。【いまどきWindowsなんぞを使うメリットはなにか - 狐の王国より引用】 ここのところApple製品のことばかり褒めているが、上のエントリーを読んで思い出したのが、Windows95のユーザーインターフェイスを設計していたころの話。「マウスのボタンは一つ」に必要以上にこだわるアップルに対して、二つあるマウスのボタンを最大に生かしたユーザーインターフェイスの一環として徹底的にこだわって作ったのが、このコンテキストメニュー。 今やいろいろな理由でぐだぐだになってしまったが、当時は「シングルクリックは選択」「ダブルクリックはデフォールト動作の実行」「右クリックはコンテキストメニュー」という大原則をOSだけでなく、Offi

  • やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん!

    こんな話題はいまさらかもしれない! それはわかってます! だけど書きたい! なにって、[OK]ボタンの位置のことです! これって右に置くのが自然だよ絶対!! 理由は単純で、 [OK][キャンセル] は、画面によっては [保存] [取り消し] だとかに名前を変えるし、 さらに、入力が3ページあるようなウィザード形式の画面なんかだと、 [ここまでOKそして次の画面へ]、[間違ったかもしれないから前へ戻って修正] とかになっちゃう。 うん、このウィザード形式の時のことを考えるとわかりやすい! ウェブは横書き! 左から右に読む! 左からやってきたんだから、[戻る] のは左! 右に進んでいくんだから、[進む] のは右! だから、[次へ] も [保存] も [OK] も右が自然! ウィザードっぽい画面の時と他の画面の時とで 「OK的なもの」の位置がぶれていると、少し迷うよね。 だから[OK]は右に統一

    やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん!
    pukada
    pukada 2008/06/11
    上下に並ぶ場合はOK/Cancelが自然だと思うから、左右でも左からOK/Cancelでいいかなと思ったりしたりしなかったり。
  • イラストで見る「はてなブックマークのトップページは迷宮」 - シナトラ千代子

    はてなブックマークのトップページで 「読書カテゴリの新着エントリ」を見たい と思ったら、どうすればいいでしょうか? はい、そこのオッサン。 「読書と書いてあるカテゴリリンクからたどれば行けると思います」 ブブー! はいスタートに戻る。 そんなに簡単ではありません。 なぜなら、はてなブックマークのトップページでは 「読書と書いてあるカテゴリリンクであっても、別々の異なるページへリンクされている」 からです。 以下、ふつうに辿るであろう手順を追ってみます。 字を読みたくないひとはイラストまで飛ばしてください。 「最近の人気エントリー」をclick →はてなブックマーク - 人気エントリー(http://b.hatena.ne.jp/hotentry) カテゴリが出てくるので、読書カテゴリをclick →はてなブックマーク - 人気エントリー - 読書(http://b.hatena.ne.jp

    イラストで見る「はてなブックマークのトップページは迷宮」 - シナトラ千代子
    pukada
    pukada 2008/05/27
    カテゴリの存在をいま初めて知った。/あとヘッダの検索からタグ検索できないのが不便。わざわざトップ戻らなきゃだし。
  • 404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節

    2008年05月20日14:15 カテゴリLightweight Languages javascript - 勝手に添削 - textareaの高さを自動調節 これはなかなかいいですね。 textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記) イラストdeブログの掲示板の使い勝手を高めるため、textareaサイズをJavaScriptで改行入力毎に大きくするコードを書いてみました Firefox 2, Safari 3, Opera 9で動作確認してあります。 イチ に 三 function resize_textarea(ev){ //if (ev.keyCode != 13) return; var textarea = ev.target || ev.srcElement; var value = textarea.value; var

    404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節
  • Japanese Input Keyboards on iPhone 2.0

    After news that the latest iPhone 2.0 beta firmware (due in June) had incorporated Chinese handwriting recognition, there were many readers who were interested to see the input options for Japanese language. Handwriting recognition is not available for the Japanese language in the latest beta. Instead there is the standard keyboard:

    Japanese Input Keyboards on iPhone 2.0
  • なんじゃこりゃぁ! 『15のオカシなゲームコントローラー達』 | Game*Spark - 国内・海外ゲーム情報サイト

    なんじゃこりゃぁ! 『15のオカシなゲームコントローラー達』 | Game*Spark - 国内・海外ゲーム情報サイト
  • マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)

    しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト(ユーザ行動観察調査)で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス(ハイライト)が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル

    pukada
    pukada 2008/03/17
    関係ないけど気分よくスクロールしててiframeに引っかかるとイラッてなるよね
  • MOONGIFT: � さらにパワーアップ!iPod Touch/iPhoneをタッチパッドに「Touchpad Pro」:オープンソースを毎日紹介

    先日ご紹介したiPod Touch/iPhoneをタッチパッドにするTouchpadにプロ版が登場した。といっても有償な訳ではなく、依然としてオープンソース・ソフトウェアのままだ。ただ単純にタッチパッドの代わりになるだけなら面白くはない。さらにエッセンスが加わっている。 今回紹介するオープンソース・ソフトウェアはTouchpad Pro、魅力的な機能が追加されたTouchpadだ。 Touchpad Proの魅力の第一が、十字マークによるキー送信機能だ。例えば、PowerPointによるプレゼンテーションの操作をTouchpad Proでできてしまう。プレゼンだからといってノートPCの前にいる必要がなくなり、さらにダイナミックなプレゼンが行えるようになる。 そして、この十字マークを使って音楽を操作したり、Adobe Readerと連携してPDFや画像を拡大表示することができる。また、キーボ

    MOONGIFT: � さらにパワーアップ!iPod Touch/iPhoneをタッチパッドに「Touchpad Pro」:オープンソースを毎日紹介