タグ

UIに関するkk6のブックマーク (48)

  • モーダルを閉じるボタンのUIは右か左か | UXデザイン会社Standardのブログ

    モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内容や一貫性によって判断する必要があります。 モーダルとは ボタンの位置を考える前に、まずはモーダルとはどういったものかを紹介します。アプリケーションでのモーダルはユーザーに行動を制限し、特定のタスクに集中させるモードです。もちろんアプリケーションという意味では、ホームボタンを押したりマルチタスクにより他のアプリケーションを使うことができるため完全な制限ではありませんが、現在使用中のアプリケーション

    モーダルを閉じるボタンのUIは右か左か | UXデザイン会社Standardのブログ
    kk6
    kk6 2014/07/26
  • シングルカラムから始める情報設計

    横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、

    シングルカラムから始める情報設計
    kk6
    kk6 2014/07/23
  • 60 Flat Web UI Design Inspiration – Bashooka

    Flat design existed long before it became a buzz word. It’s just finally been packaged. Flat design is beautiful and refreshing. It’s also generally faster to design and easier to make responsive. If it was a graphic design trend, it’d be well received. Unleash The Power of WordPress Ad Awesome collection of 11,000+ WordPress Themes, including Bootstrap Templates & Design Assets

    60 Flat Web UI Design Inspiration – Bashooka
    kk6
    kk6 2013/03/24
  • RedsAfi.com is for sale | HugeDomains

    Make 12 monthly payments Pay 0% interest Start using the domain today. See details

    RedsAfi.com is for sale | HugeDomains
    kk6
    kk6 2013/03/17
  • リーナス・トーバルズ、GNOME3に戻る

    リーナス・トーバルズのデスクトップ環境の選択は、常に耳目を集めている。所詮、万人を満足させるUIなんてない以上、好きなものを使えばいいし、主要なディストロは、標準のパッケージ管理コマンド、あるいはGUIから、デスクトップ環境を変えられるようになっている。ただ、リーナス・トーバルズは、何といってもその有名度と、Linuxカーネル第一人者なのにも関わらず、SlackwareやGentooやArchのような何だか名前を聞くだけで怖そうなディストロや、dwmやAwesomeやXmonadのようなド素人お断りのデスクトップ環境を使わず、UbuntuやLinux Mintのようなバカでも使えるディストロにGNOME、KDE、Xfceといった、これまた無難なデスクトップ環境を選択していることで有名だ。 リーナスのハードウェアの選択の点でも変わっており、Appleのクールな薄いデザインのラップトップを愛用

    kk6
    kk6 2013/03/05
    "その手の「設定をいじってショートカットキーを設定しろ」ってのがいい例さ。書くのにはキーボードを使うさ、でもオレはターミナル起動にはアイコンがほしい。"
  • レスポンシブデザインのウインドウサイズの切替えについてまとめてみました

    9月/10月社内Tech勉強会レポート – NodeJS/Privacy Sandbox API/3rdPartyCookie/NodeJS/PromiseAll/cascae/

    レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
    kk6
    kk6 2012/07/15
  • ソフトウエアエンジニアがUX/UIを考える上で読むべき4冊の良書と名言たち

    筑波大学  システム情報工学研究科  コンピュータサイエンス専攻  非数値アルゴリズム研究室(NPAL) 五十嵐 悠紀 2004年度下期、2005年度下期とIPA未踏ソフトに採択された、『天才プログラマー/スーパークリエータ』。筑波大学 システム情報工学研究科 コンピュータサイエンス専攻 非数値アルゴリズム研究室(NPAL)に在籍し、CGUIの研究・開発に従事する。プライベートでは二児の母でもある 何か製品を考える時、そのものがカタチのあるものであっても、はたまたコンピュータの中で動くソフトウエアだったとしても、「ユーザーインターフェース(以下、UI)」について考える必要があります。さらには、わたしたちが日常生活においてストレスなく過ごせている裏側には、さまざまな人によって考えられてきたUIデザインが隠されていたりもします。 わたしは滞在先のホテルで、洗面所に入ったものの出ようとした時に

    kk6
    kk6 2012/05/25
  • Interesting Trends in UI Design

    I’m always on the lookout for new design trends. It’s fascinating to me how certain ideas get picked up by so many designers and implemented in countless different ways. Today we’re going to specifically explore the world of user interface design and see if we can spot any currently popular trends. Almost more than any other area of design, interfaces are extremely subject to the ever changing whi

    Interesting Trends in UI Design
    kk6
    kk6 2012/05/20
  • ふつうのformをつかいたい - はまちや2 - ニコニコ超会議2012

    こんにちはこんにちは!! はまちや2 (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう? プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 日のテーマ: 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…(はいはい) フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた!) (これで送信、と…) ※エラー:住所を正しく入力してください (え、なんで!?) ※住所は全角で入力してく

    kk6
    kk6 2012/05/04
    labelって結構軽視される傾向にあると思う。テキストクリックして反応無いと(#^ω^)ピキピキ ってなる。
  • UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス

    Dribbble - What are you ... / Gallery of UI Elements -... / 365psd | Download a free...他...全6件

    UIデザインに行き詰ったときに見るとインスピレーションが得られるサービス
    kk6
    kk6 2012/05/03
  • UI&UX / 重要なのは、毎日さわって嬉しい UI UX!

    第1回スマホデザイン会議 #sdkaigi AQUA SOCIAL DRIVE - http://aquadrive.jp/ Newers - http://www.newers.net/ Pelo - http://www.pelo.jp/ Cotto - http://cotto.jp/ Pelo's Puzzle - http://www.bascule.co.jp/pelopuzzle/ Bascule Inc. - http://www.bascule.co.jp/ Bascule GO! - http://www.facebook.com/BasculeGo

    UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
    kk6
    kk6 2012/05/01
  • ThemeRoller | jQuery UI

    Using ThemeRoller ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like. If you'd like to use a pre-designed theme, select the Theme Gallery tab and

    kk6
    kk6 2011/10/02
    jQuery UI のテーマってこんなにあるんだ。どれにしようか迷うなー。
  • 現在のFacebookのUIがいかに話になってないレベルか - MIZの日記

    http://d.hatena.ne.jp/shi3z/20101015/1287124685 のブコメでのid:shi3z さんとの会話に触発されて、Facebookとmixiのユーザーへの配慮の差を比較してみた。 技術寄りの人たちが根的に誤解しているのが、「動きが速い」とか「豊富な機能」とかにとらわれて「迷わない」ことの重要さが吹っ飛んでいるということ。 とりあえず、一般人視点になりきってユーザーテスト。 あくまで「なりきり」だから、おそらくほんまもんの初心者が見たらこれの100倍は問題点が噴出するはず。 トップページ 文面 mixiの場合は上部の「mixiについて」できっちりSNSの概念を説明している。 Facebookのトップページは「できること」の具体的説明に乏しい。 トップページに登録フォームを置くことで使用開始までのステップを短くしたいのはわかるが、こういうものをユーザーへ

    現在のFacebookのUIがいかに話になってないレベルか - MIZの日記
    kk6
    kk6 2010/10/17
    Windowsツアーを起動毎に見せられるとどんな気持ちになるか…まあそういうことだと思う。あと、IEは散々面倒見てきたが見切れなくなったが正解。
  • Webユーザインターフェースの "暗黙知" を意識していますか? : LINE Corporation ディレクターブログ

    暗黙知(あんもくち、Tacit Knowing)は、ハンガリーの哲学者・社会学者マイケル・ポランニー(Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、(全体的・部分的に)言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基的なところだけ

    Webユーザインターフェースの "暗黙知" を意識していますか? : LINE Corporation ディレクターブログ
  • 第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」(1/3) - @IT

    連載:改造WebアプリケーションUIビフォー/アフター 第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」 葛西秋雄 2010/03/05 はじめに 前回では、ASP.NETのデータ・コントロールを利用した3階層のWebアプリケーションである「ITブック」を紹介しました。今回は第3回の準備編として、jQueryのAPIとjQuery UIのプラグインの使い方をざっくり理解していただきます。 jQueryのHello World jQueryは、米国のJohn Resig氏が中心となって開発したJavaScriptのライブラリです。わずか数行のコードを記述するだけでアニメーションなどのエフェクトをWebアプリケーションに組み込むことができます。 jQueryはDOM(Document Object Model)の要素を検索したり、属性を書き換えたりするためのAPIを豊

  • パーツごとのデザインが盛り沢山で参考にできる「Pattern Tap」:phpspot開発日誌

    Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative - Pattern Tap パーツごとのデザインが盛り沢山で参考にできる「Pattern Tap」。 結構前に話題になっていたようですが知らない方もいるようなのでご紹介。 アーティクルカテゴリに入ったデザインのパターン(188種類) ページネーションのパターン(102種類) コメント・コメント欄のパターン(45種類) これらの他にも、ページフッター、404ページ、ポートフォリオといったカテゴリが全部で45種類あります。 パーツごとのデザインに迷った際に参考にするとよいですね。

  • ユーザーにクリックされやすいボタンデザインの5つのポイント

    ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

  • フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌

    PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫:PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

  • あのFlashサイトのUIをjQueryで作る (1/5)

    「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手

    あのFlashサイトのUIをjQueryで作る (1/5)
  • IDEA * IDEA

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

    IDEA * IDEA