新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
レスポンシブなフラットUIなWebデザインをご希望なら·Almost Flat UI MOONGIFT
Almost Flat UIはFoundation Framework用のフラットUIテーマです。 最近のWebデザインの人気のカテゴリの一つがフラットUIです。日本ではまだまだ導入事例は多くないですが、海外のWebサイトでは取り入れているところが増えています。そこでFoundation Frameworkをベースにデザインを組んでいるサイトに使ってみて欲しいのがFlat UIです。 ナビゲーションとサイドバーメニュー。 トップバー。 ボタンの色は様々に用意されています。 大きさ、形も変更可能です。 フォームとタイポグラフィ。 リスト。ネストされたリストももちろんサポート。 ラベル。 プログレスバーにプライスリスト。 スライドショー。 ツールチップもあります。 Foundation FrameworkをベースにすることでレスポンシブWebデザインに対応したフラットUIなWebサイトを手早く
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API
Amazon.co.jp: リストマニア
UI勉強本 saizan ユーザビリティエンジニアリング—ユーザ調査とユーザビリティ評価実践テクニック "購入済" ユーザ中心ウェブサイト戦略 仮説検証アプローチによるユーザビリティサイエンスの実践 "購入済" Web情報アーキテクチャ—最適なサイト構築のための論理的アプローチ "購入済" デザイニング・インターフェース —パターンによる実践的インタラクションデザイン "購入済" ウェブ戦略としての「ユーザーエクスペリエンス」—5つの段階で考えるユーザー中心デザイン (Web designing books) "これから読む本" 構造化ユーザインタフェースの設計と評価—わかりやすい操作画面をつくるための32項目 "これから読む本" 見せるユーザー・インタフェース・デザイン "これから読む本" こんなデザインが使いやすさを生む—商品開発のためのユーザビリティ評価 "これから読む本" ユーザ工
ユーザーインターフェイスまとめサイトのまとめ「25 UI Inspiration and Design Pattern Resources 」
TOP > WebService > ユーザーインターフェイスまとめサイトのまとめ「25 UI Inspiration and Design Pattern Resources 」 WEBを制作する上でもっとも重要な要素ともいえるユーザーインターフェイス。WEBサイトの趣旨やコンテンツにもよりますが、どんなに格好がいいデザインであっても、どんなに便利な機能があったとしてもユーザーインターフェイスがよくなければだいなしになってしまいかねません。今日紹介するのはユーザーインターフェイスの例を集めたサイトをまとめたエントリー「25 UI Inspiration and Design Pattern Resources」を紹介したいと思います。 UI Patterns いくつかのサイトが公開されていますが、その中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■U
Google Wave風インタフェースも作れるJavaScriptのUIキット·UKI MOONGIFT
UKIはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを作る上ではそのインタフェースが重要な要素になる。ローカルアプリケーションの代わりに使えるレベルとなると、通常のWebサイトとは異なるインタフェースが求められるだろう。 リスト作成＆操作も簡単 使いやすいWebアプリケーションを容易に構築し、さらに開発者にとっても使いやすいUIキットがUKIだ。ボタンやリスト、スライダー、3ペイン構成と言ったオブジェクトを容易に実装し、Webアプリケーションを手軽に開発できるソフトウェアだ。 インタフェースの組み立てだけでなく、アクションの実装についても考慮されているのが特徴だ。プラグインで拡張することもできる。実装は4000行程度で、とても高速に動作する。対応ブラウザはIE6、Opera9、Firefox2、Safari3、Google Chromeからとなっている。 G
35+ Usability Resources for Web Designers - DesignM.ag
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact Usability should be a priority for every website. Without usability, even the most beautiful
「全国大学サイト・ユーザビリティ調査2009/2010」発表、1位は3年連続で徳島大学 | Web担当者Forum
日経BPコンサルティングは、大学サイトのユーザビリティを横断的に評価した「全国大学サイト・ユーザビリティ調査2009/2010」を12月22日に発表し、調査報告書の販売を開始した。調査の結果、165大学中で最も使いやすい大学サイトは、3年連続で徳島大学だった。 本調査は、全国165の大学サイトのユーザビリティ（使い勝手）を、全64項目の調査項目に従って調査員が大学サイトを閲覧して行われる。トップページが使いやすいか、受験生を中心に大学サイトのターゲットが必要な情報を探しやすいか、視覚障害者など誰でも使えるサイトになっているか、サイト内での個人情報保護に対する大学側の姿勢はどうかなど、7つのカテゴリ（診断軸）に分けてチェックした。今回から新たに「ブランディング」のカテゴリを追加している。 6回目となる今回の調査では、総合スコアのベスト3は、徳島大学（国立）、沖縄国際大学（私立）、大阪府立大学
グーグル、ウェブ開発用ツール「Browser Size」を公開--ページの表示領域を測定
Googleは米国時間12月16日、「Browser Size」と呼ばれるツールを公開した。このツールを使うことでウェブ開発者は、ユーザーのブラウザでウェブページがどれだけ見られているかを測定できるようになる。 独自の分析によりGoogleは、「Google Earth」のダウンロードボタンが利用者の目にとまりにくいことを発見した。さらにその理由が、ブラウザ画面をスクロールしないとボタンが表示されないためであることが判明した。ページの修正によりダウンロード率が10％向上したとBrowser SizeチームのArthur Blume氏はブログで述べている。 Browser Sizeは、ウェブページをロードし、ページのそれぞれの部分がどれくらいの人に見られているかをオーバーレイで表示する。左上が当然100％になるが、右下に移るに従って、人から見られる割合が減少する。オーバーレイの統計は、Goo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でスマートフォンのバイブ機能を制御、点字に変わるUIの可能性も | HON.jp News Blog
The North Carolina State University Libraries Search Experience: Usability Testing Tabbed Search Interfaces for Academic Libraries - Journal of Web Librarianship
ウェブUIの設計時に使える、ワイヤーフレーム用の無料のPSD素材
IDEA * IDEA
http://browsersize.googlelabs.com/
[JS]画像だけでなく動画やHTMLコンテンツを拡大表示するスクリプト -Clearbox