なるほど確かにテレビっぽい。リニューアルした「dTV」の“ザッピングUI”を試す
ネット経由でいつでも映画やドラマなどが楽しめるビデオオンデマンド（VOD）サービス。手頃な定額料金制が導入され、デバイスとモバイル回線の進化でスマートフォンやタブレットでも快適に視聴できるようになった。この秋には米国で人気の動画配信サービス「Netflix」が日本に上陸する予定で、さらに盛り上がりを見せそうだ。 それを見越してか、この春に大幅なリニューアルを行ったのがNTTドコモとエイベックス通信放送が提供している「dTV」。従来の「dビデオ powered by BeeTV」（dビデオ）からサービスブランドを変更し、ユーザーインタフェース（UI）も大きく変えた。さらにリビングのテレビでも利用できるよう、新たに専用のセットトップボックス（STB）の販売も開始した。 このdTVはドコモのサービスで、ドコモのスマホユーザーであれば新規契約や機種変更などの機会にオプション加入していることも多い。
UIデザインで大切な空白スペースの効果的な使い方
空白スペースは単なる美ではありません、ユーザインターフェイスの成功への鍵です。空白スペースがWebデザインやUXデザインにおいてどのように使うと効果的に機能するかを紹介します。 Why White Space Is Crucial To UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに -UXデザインにおける空白スペースの価値 1. 空白スペースでコンテンツを理解しやすくする 2. 空白スペースで関係を明確にする 3. 空白スペースで注意を引きつける はじめに -UXデザインにおける空白スペースの価値 メインとなるオブジェクトを強調し、ユーザーの注目を引きつけるネガティブスペース・空白スペースの重要性をすべてのビジュアルアーティストが理解しているでしょう。 ネガティブスペース（デザイナー的には空白スペース）
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
リモートユーザーテストをWeb担で実施したら、なんと発見点126個。重要課題13個すべて見せます！ | やってみました！ リモートユーザーテスト
Web担編集部では、今回Web担当者Forumのサイトで「リモート・ユーザーテスト」をやってみました。それを2回に分けてレポートします。今回は、リモートユーザーテストの実施前の準備編と重要課題13個をすべて紹介します。 リモートユーザーテストとは何なのか、どのように行われて、そこから何がわかるのか――今回、Web担編集部がリモートユーザーテストを実施するにあたって、ポップインサイトのオーダーメイド調査を提供いただき、実施してもらいました。 サービス提供側が裏でどんなことをしているのかをポップインサイトの池田氏に執筆いただき、依頼側としてWeb担編集部がどんなことを行い調査を通じて何を得られたのか、2つの視点で紹介していきます。 なんと発見点126個！ うち重要課題は13個リモートユーザーテストの流れを解説する前に、まずはWeb担サイトでどんな改善点がリモートユーザーテストで発見されたのか紹
メニューにアニメーションで下線が付いてくる
Result jQuery$('a','nav').mouseover(function(){ $('span','nav').animate({ 'width': $(this).width(), 'left': $(this).position().left} ,'fast'); });cssnav a{ text-decoration:none; color:#333; } nav li{ display:inline-block; margin-left:2px; padding:3px; background:#eee; } nav span{ background:#666; height:2px; display:block; position:relative; width:50px; left:0; }html<nav><ul> <li><a href="#">menu0
Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い
Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。 Cart に入れて Download カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせると
スマホUIテスター | インターネット広告代理店 オプト
ユーザーの本音を、効果的な改善へつなげる ユーザーテストサービス登場 -スマホUIテスター- 全てのアプリ・ウェブサイトに対応 製品やWebサイトの使いやすさを、実際のユーザーに使ってもらうことで確認する手法です。 ユーザーテストを活用することで ↓ 普段聞けないユーザーの本音が聞ける どこが使いづらいのか、なぜ使いづらいのか、etc… ユーザーの本音に基づいた改善施策を提供する スマホUIテスター ユーザーの本音を取り入れることで、一層深い分析サービスを提供いたします。 [実施イメージ] ・メニューが見づらく、 目的のページに辿りつけない ・使いづらい・・・ ●ユーザーは自宅でテストを実施 ●ユーザーにタスクを提示して、その操作内容（画面・指の動き）を観察 ●ユーザーは操作時に思った、感じたことを発話 サービスの問題・課題を見つけ出します！！ ユーザーの操作内容を観察することで問題・課題
INTEL コード & ダウンロード
Using Intel.com Search You can easily search the entire Intel.com site in several ways. Brand Name: Core i9 Document Number: 123456 Code Name: Emerald Rapids Special Operators: “Ice Lake”, Ice AND Lake, Ice OR Lake, Ice* Quick Links You can also try the quick links below to see results for most popular searches. Product Information Support Drivers & Software
[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ
アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller
![[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f2d61e0129fb5d5d02ed528b0f0d8f03fb010de/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fi2.jpg%3Ffit%3D723%252C240)
webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」
TOP > Design > webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」 ハイクオリティなデザインを手がけるのには、いろいろなデザインリサーチや構成の企画立てなど、たくさんの工程が必要になってきます。しかし時にはコスト面や納期面で困難な状況に陥ることも。今回はそんな時に参考にしたい、フリーUIキット10種「10 Fresh And Free UI Kits For Designers」を紹介したいと思います。 Dribbble – Freebie PSD: Flat UI Kit by Marcel Akiyama デザイン形成時に役立ってくれるUIデザインが揃っており、欲しいデザインや目的に合わせて選ぶことができるようになっています。 詳しくは以下 Download Flat
3D Bold Navigation in CSS and jQuery | CodyHouse
3D Bold Navigation A bold navigation that slides in when active, replacing the current content in a 3D space. Today’s resource is a strong approach to showing a website navigation. Bear in mind, though, it doesn’t have to be the “main” navigation. You could have, for example, a product gallery and you’d like to create a smooth transition while switching from one product category to the other. To i
SmartNewsのニュース選定のアルゴリズムってどうなってるの？ 裏側を聞いてきた | Web担当者Forum
次のようなアルゴリズムでコンピュータが自動的に判断しています。順に説明します。 SmartNewsで対象となる情報は、インターネット上で固有のURLについてユーザーが何らかのアクションを起こしているものです。その情報の内容がどの言語で記述されているかを判断します。その情報がどのカテゴリに属するか、カテゴリ分類します。その情報の類似判定をします。これは、多様性のある情報を届けるためで、同じような内容が重複しないようします。また、情報が重複している場合は、情報の早さや人によく見られているといったさまざまな要素を総合的に判断して一番良いと判断されるものを選定しています。さらに、そのなかで注目度判定を行います。注目度判定にもいろいろな指標がありますが、たとえば以下があります。ソーシャル上でどのくらい反応があるかSmartNewsで実際に配信したときのユーザーの反応たとえば、SmartNewsで配信
UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01： 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28： 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデート 「Apple Watch デザイン原則」を追加 2015/10/
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーテストExpress
Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめ
skan.in
Webデザイン講師 宮崎祐樹
Design+Code - Learn to design and code an iOS 11 app
