最近はサービスのUI/UXを重視する話題が増えてきました。モックアップやユーザーテストを通して、実際の反応を観察しながら改善していくプロセスやツールが求められています。そこで今回はユーザーテストに役立ちそうな5つのツールを紹介します。
~10程度っすよ ~50程度かな ~100くらい ~300程度です ~500はこなす ~1000はやってます これ以上 ( ! )
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか?いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました! (以下”Interface Animations and Transitions: where to get inspiration”の翻訳。) photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレット スマートフォン おわりに はじめに レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。 レスポンシブデザインの多くのリソースは基本をカバーするだけで、
Introducing Sessions: the latest product from Waldo!
今年の頭に始めたダイエットは、割と順調だったものの、最終的な目標達成はならない可能性が高くなってきた kimoto です。 1年で -20kg はなかなか厳しかったか... ちょっとした小ネタです。 iPhone の Safari には「ホーム画面に追加」という機能があり、サイトをアプリのようにアイコン化する事ができます。 その際に、meta タグでちょっとした指定ができます。 apple-mobile-web-app-capable この指定では、URL や検索窓のあるバーを消すことができます。 apple-mobile-web-app-status-bar-style この指定では、上部の電池や時計などのバーの色を指定することができます。 指定できるのは以下。 default:デフォルト色 black:黒 black-translucent:半透明 これを指定すると これを、head
自由なレイアウトでアーティスティックなWebページが作成できる『Salon.io』 『Salon.io』はドラッグ&ドロップベースでまったく自由なレイアウトのWebページを簡単に作成することができるサービス。 現在ベータ版として公開されているこちらは、主にデザイン指向の高いユーザー層をターゲットにモダンでアーティスティックなWebページが作成可能な最新鋭のWebページビルダーです。 サービス的にはページ制作とホスティングが一体になっており、複数のページを作成してそれぞれのページをナビゲーションできるWebサイトとして構築できるので、ちょっとしたCMSと呼ぶこともでき、近いところではGoogle Sitesのようなものと考えていいと思います。 かなり本格的なサービスなので今回は基本的なページ制作と使ってみた感想を少しだけご紹介します。 新規ページ制作ではこのような画面が表示され、ここにテキス
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc
User interface design involves a lot of creativity, inspiration, testing and motivation along with the people-skills necessary to communicate effectively with clients. Very often, a lot of patience is required, and quite honestly, a creative mind is not normally associated with a patient person, so the whole process of user interface design can be stressful, uncomfortable and time-consuming. The r
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか? 僕は大好きです。 Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています! 魅力的な画面遷移エフェクトのコード集! Cubic Transition ※「▶Play」ボタンをクリック!
先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達!]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。 まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。 この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい!という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
最近かつて以上にウェブサービスにとってデザインが重要だ、ということがいわれることが多くなってきた気もします。PinterestやFlipboard等、いわゆる次世代ウェブデザインを代表するようなサービスも大人気ですが、もちろんそれだけはありません。今回から新たに登場する米国の人気デザインブログspyrestudiosから、最近のスタートアップでデザインが素晴らしいサイトを35まとめた記事を紹介します。 — SEO Japan 何年か前までは誰もがWeb2.0の流行について話していた。インターネットではMySpace、Friendster、Facebook、Twitter、そして最近ではFoursquareやPinterestに続く新しいスタートアップが次々に登場している。テクスタートアップの世界では、新しいアイデアにこと切れることはない。 ウェブデザインに関しても同じことがいえる。今回、最
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く