タグ

UIに関するpitworksのブックマーク (307)

  • 人間のために分かりやすい実用的なURLを設計する方法

    URL Design [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに URLを設計する理由 トップレベルのセクションは重要 URL構造を増強する方法 クエリの文字列 URLにはASCIIを URLは検索エンジンのためにではない URLは合意 全てがURLを持っているべき リンクはリンクらしく 再利用できないURL 素晴らしいURLの例 おわりに はじめに あなたは、URLの構造を設計するのに時間をかけるべきです。この記事を読んだ後で、あなたに一つだけ覚えておいてほしいことは、URLの構造を設計するのに時間をかける、ということです。 URLデザインは簡単ではなく、正しい解決方法があると言うことはできません。しかしそれは、他のデザインと同じです。良いURLデザインがあり、良くないURLデザインがあり、そしてその中間もあります。 しかし、それは素晴らしいURLデザインを作るこ

  • 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌

    jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり

    pitworks
    pitworks 2011/04/14
    スクロールバーのカスタマイズ
  • Engadget | Technology News & Reviews

    The Stop Killing Games movement is nearing an official meeting with EU lawmakersOnce all the Stop Killing Games signatures are verified, the organizers will present the initiative to both the European Commission and Parliament. The Witcher Season 4 will hit Netflix in October with its new GeraltNetflix dropped a new teaser trailer for the upcoming fourth season, giving us a better look at Liam Hem

    Engadget | Technology News & Reviews
    pitworks
    pitworks 2010/11/17
    他のブラウザにない独自のUIを多数採用する点が特徴。開発元のAccessは「従来のブラウザの概念を超えた新しい機能を揃え、使い込むほど手放せなくなるといった使用感を実現」「クセになる、体感型ブラウザ」としている
  • A/Bテストで素人が陥る罠: 神が宿るというディテールよりも先に…… | Moz - SEOとインバウンドマーケティングの実践情報

    ジェイソン・コーエン氏が6月に公開したA/Bテストに関する記事は、もっと注目を集めていいし、もっと詳しく掘り下げられるべきだ。オンラインマーケティングの世界にいる人間ならたいてい、クリックスルー率、会員登録率、コンバージョン率などを改善できるA/Bテストの威力を知っている。ページを訪問した人が望ましいアクションを起こす割合を高められるというのは、すばらしいことだ。 しかし、テストの仮説を立ててから、立案、開発、実行へと至るプロセスには、危険が満ちている。そして、いちばん目立たないが最も油断ならない落とし穴の1つが、実はテストの対象として何を選択するかなんだ。 グラフで見る「極小値」問題 ランディングページの各要素をテストするというのは確かに面白いし、やる価値がある場合もある。しかし、ランディングページや製品ができたばかりの段階では、適切でないことが多い。実際に、上の図にあるように、グラフに

    A/Bテストで素人が陥る罠: 神が宿るというディテールよりも先に…… | Moz - SEOとインバウンドマーケティングの実践情報
  • ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ

    ※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著

    ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ
    pitworks
    pitworks 2010/09/26
    テーブルタグの携帯での利用方法
  • モバイルサイトデザインの考え方 : LINE Corporation ディレクターブログ

    こんにちは。ケータイlivedoorを担当してます多留です。 今回は、私がモバイルサイト作りでいつも意識して取り組んでいる "配色の仕方"、"メリハリの重要性" についてお話させていただきます。 モバイルサイトと配色 モバイルサイトは、PCのようにガンガン画像を使うとか、JavaScriptを使って動きをつけるとか、まだまだできないこと、制限のあるところが多々あり、線や細かい背景色・文字色・絵文字の使い分けなどでページを構成する必要があります。 配色や見せ方に関してはセンスが問われるところで、特にモバイルサイトのように凝縮されたスペースでの表現は難しく、苦手な人はホントに「いつまでたっても苦手」という方も多いと思います。 私個人としては、PCよりもモバイルサイトで全てを済ませようとしていて (つまりは携帯依存症……) いろんなジャンルのモバイルサイトデザインを見ているおかげで、配色や見せ方

    モバイルサイトデザインの考え方 : LINE Corporation ディレクターブログ
    pitworks
    pitworks 2010/07/24
    モバイルサイト作りで重要な"配色の仕方"、"メリハリの重要性" どのリンクを押させたいか、どこに誘導したいかを意識してメリハリをつける
  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    Site Under Maintenance
    pitworks
    pitworks 2010/07/24
    科学者がまとめた「ユーザー行動に影響を与えるデザインパターン」事例が紹介されているので非常に分かりやすい
  • ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌

    ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。

  • すごくユニークで真似したくなるような404ページデザイン37選*二十歳街道まっしぐら(FC2ブログ時代)

    サイトやブログには、ページが存在しないことを示す「404」というページがあります。 リンクを開いたら「ファイルがみつかりません」ってなるやつがそれです。 味気ない404ページもあれば、ユニークにデザインされたものもあったりします。 以下の記事を参考にして、面白いなー、上手だなーと思った404ページを以下に紹介します。 ・70 Unique Examples Of 404 Error Pages For Your Inspiration ・404 Error Pages: Reloaded ・50 Examples of Creative 404 – Page Not Found Pages ・50 Creative and Inspiring 404 Pages ・14 funny yet creative 404 error pages ・49 Nice And Creative Err

    pitworks
    pitworks 2010/05/20
    面白い404(Not Found)エラー
  • オフラインで使えるデザイナー向けツールキット色々:phpspot開発日誌

    Useful (Offline) Utensils and Toolkits for Designers | Tools オフラインで使えるデザイナー向けツールキットが色々まとまってましたのでご紹介。 ノートパソコンでどこでも作業できるからとはいえ、自由度と使い勝手からアナログが便利な場合も多いですね。 印刷するなどしてどこでも作業できるツールキット集です Paper Browser ブラウザの枠と、グリッドベースの画像を印刷してモックを手書き出来ます Grid Design Graph Paper グリッドと端にノートが表示されているテンプレート。印刷して使えます iPhone APP Wireframe template iPhoneアプリケーション作成時のモック作成用テンプレート iPad IDEA Sheet iPadのアプリ作成時などに使えます 便利なものが他にも色々と紹介されて

    pitworks
    pitworks 2010/05/14
    紙と鉛筆は便利。印刷して使える作業ツールはイメージがしやすくて良い感じ。
  • 脳研究者は何を考えているか - 糖鎖/健康/代替医療本の読書日記

    糖鎖ラボの公開作業などに追われてしまい久しぶりの更新です。 脳科学の真実--脳研究者は何を考えているか (河出ブックス) 作者: 坂井克之出版社/メーカー: 河出書房新社発売日: 2009/10/09メディア: 単行(ソフトカバー)購入: 4人 クリック: 60回この商品を含むブログ (15件) を見る 第一線の研究者が脳科学ブームを批判的に検証 1.「お茶の間の脳科学」と「現場の脳科学」のギャップ 認知神経科学は脳科学の一分野(巷間の脳科学)で心の脳内メカニズムを明らかにする学問です。現在の脳科学ブームは脳研修者ではなく脳科学者のマスメディアでの活躍やMRI、NIRSなどの脳血流量測定による脳画像技術による判りやすさにあるようです。同時に認知症、ひきこもり、自殺など現代社会が抱える心の問題を解決する手段になるとの期待もあります。 「脳トレ」や「ゲーム脳」は、人間の知性を司る前頭葉に注目

    脳研究者は何を考えているか - 糖鎖/健康/代替医療本の読書日記
    pitworks
    pitworks 2010/05/14
    脳学者の立場から見る「脳トレ」や「ゲーム脳」についての話。
  • 「iPadは使いにくい」:米のUI専門家が批判 | WIRED VISION

    前の記事 ネットは「偏った意見」を強化するか:研究結果 「米国初の洋上風力発電」:反対運動で難航 次の記事 「iPadは使いにくい」:米のUI専門家が批判 2010年5月13日 IT コメント: トラックバック (0) フィードIT Brian X. Chen 『iPad』はインターフェースの勝利と称されている。しかし、あるユーザビリティーの専門家はこのほどiPadについて、インターフェースに一貫性がなく明確でないという批判を発表した。インターフェースに標準が設定されていないため、それぞれのアプリが違ったように動くのだという。 一部からは「ユーザビリティーの王様」とも呼ばれるJakob Nielsen博士は今週、『iPad』の使いやすさを評価する93ページのレポートを発表した。このレポートは、34種類のアプリとウェブサイトをテストした7人のユーザーからのフィードバックを基に作成されている。

    pitworks
    pitworks 2010/05/14
    インターフェースに一貫性がなく明確でないという批判を発表 //まだ触ってないから分からないよー。早く使ってみたいな。
  • 新着記事

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    新着記事
    pitworks
    pitworks 2010/05/12
    Webサイト、iPhone、WindowsのUIデザインに便利な素材集のまとめ
  • WordPressでパンくずリストを表示するシンプルなコード – creamu

    WordPressでパンくずリストを使いたい。 そんなときにおすすめなのが、『How To: Breadcrumbs in WordPress』。WordPressでパンくずリストを表示するシンプルなコードです。 ネストされたカテゴリーやページにも対応しているようですね。 パンくずを表示するプラグインは、「Yoast Breadcrumbs」や「Breadcrumb NavXT」がありますが、オールドファッションなやり方で実現してみたとのこと。 使い方は、「The PHP Code」に書かれているソースを、WordPressの「functions.php」に追記することで、「<?php get_breadcrumbs(); ?>」と書いて呼び出すことができます。 CSSでのスタイリングもされているので、一度見てみてはいかがでしょうか。 How To: Breadcrumbs in Word

  • windows7マウスのクリック音の消し方 - 当方windows7のPCをヘッドホンを使用し稼動させていますが、マウスをクリックしたとき... - Yahoo!知恵袋

    windows7マウスのクリック音の消し方 当方windows7PCをヘッドホンを使用し稼動させていますが、 マウスをクリックしたときの「ボン」という音が気持ち悪いので 消したいと思っていますが、その方法がわかりません。 どなたかご教授願います

    windows7マウスのクリック音の消し方 - 当方windows7のPCをヘッドホンを使用し稼動させていますが、マウスをクリックしたとき... - Yahoo!知恵袋
    pitworks
    pitworks 2010/05/09
    コントロールパネル -> サウンド -> 「サウンド」タブとクリックしていって、プログラムイベントの「選択」の音を「なし」に設定
  • 目の錯覚でダウンロードの待ち時間が短く...なった気がする(動画)

    人間の目なんて脳なんていい加減だからこそ楽しいです。 ファイルダウンロード、より速くより快適にと技術は日々進歩に向って頑張ってます。一方でそんな技術の裏でより速いような気にさせる研究も日々努力を重ねているようです。 アメリカはペンシルベニア州ピッツバーグにあるカーネギーメロン大学でVhris Harrison氏がZhiquan Yeo氏とScott Hudson氏と共に、ローディングバーにアニメーションを加えることにより目の錯覚が起き、実際よりも10%ほど速いように感じるという発表をしています。 AppleのOS Xは速く感じるようなトリックをすでに使っていますが、Harrison氏は研究でこういったトリックはとても大きな効果があるとかなり後押ししています。 発表内容は、リズムのある刺激は時間のワープ効果になるとか、ある状況の中で人はどう動きをとらえるかとか。この研究でHarrison氏の

    目の錯覚でダウンロードの待ち時間が短く...なった気がする(動画)
    pitworks
    pitworks 2010/04/15
  • 少しのコードで実装可能な20のCSS小技集

    少しのコードで実装可能な20のCSS小技集CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能な CSS 小技集 シリーズ【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集まずは CSS 基礎編1. div を中央揃えにするほとんどのサイトが基準となる div を画面の中央揃えに設定しています。左右の margin を auto にして中央揃えに。 3. 複数のクラスを指定実はクラスは一度に複数指定できます。スペースを空け

    少しのコードで実装可能な20のCSS小技集
  • HugeDomains.com

    Captcha security check coolcoding.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
  • Engadget | Technology News & Reviews

    Paramount+ annual subscriptions are 50 percent off right nowThe discount applies to both the Essential and Premium plans. This Apple Music promotion gives new subscribers three free months of the Family PlanApple Music has a good deal for new subscribers. The Family Plan is free for three months if you don't already pay for a tier.

    Engadget | Technology News & Reviews
  • Swype Tutorial Android

    Swype Tutorial on an Android Phone

    Swype Tutorial Android
    pitworks
    pitworks 2010/03/10
    面白い仮想キーボード入力のデモ