UIの細かい動きについて | ゲームUI演出UIアニメーションに細かい動きの調整をしていく中でイージングというものがあります。 イージングは動きに緩急をつけ、目立たせたい動きや自然な動きを作り出すことができます。 このイージングはUIアニメーション以外にもキャラクターモーション、エフェクトなどでも適用されており、アニメーションを等速にさせたい意図がない限りは必ず使用するくらい大事な要素になります。
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
【Unity】Unityでトランジションを使用した綺麗な場面転換（uGUI対応版） - テラシュールブログ
以前に紹介した「場面転換」をよりスムーズな感じで行う処理ですが、uGUIに対応させるついでにUI単位で削除出来るようにしました。 UnityでuGUIのトランジション。パターンはマスク画像（白黒画像）を使用。トランジションするUIの下にあるUIも一緒に消える pic.twitter.com/YmJPSmAowy — 椿 (@tsubaki_t1) 2015, 10月 28 新しいFade Cameraは、ここからダウンロードできます。 サンプルはここからダウンロードできます。 目次 目次 新しいFade Camera 普通のトランジション設定 UIトランジション設定 スクリプトによる制御 関連 新しいFade Camera 今回のバージョンから、uGUIを基本として動作するようになっています。 「最前面でuGUIのImageがエフェクトをかけて場面転換する」理屈です。 これの応用で、「テキ
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote
カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooTools (62) Tutorial (6) Perl (1) PHP (37) CakePHP (2) OOPでBBS (7) Zend Framework (4) Template (29) 4BOX (8) 5BOX (5) 6BOX (4) Form (5) Menu (1) Web Site (6) wordpress (55) plugin (8) Reference (7) Theme
GitHub - ColorlibHQ/gentelella: Free Bootstrap 5 Admin Dashboard Template
Modern Bootstrap 5 Admin Dashboard Template with Vite Build System Gentelella is a powerful, free-to-use Bootstrap 5 admin template that has been completely modernized with Vite, performance optimizations, and the latest web technologies. This template provides a comprehensive foundation for building admin panels, dashboards, and back-end applications. View Live Demo Fresh dependencies for 2026 —
マテリアルデザインのガイドラインが最高に実践的だった
「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。 マテリアルデザイン デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。 このガイドラインが最高に実践的でグッときました。 UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？ マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。 豊富なテンプレートと素材 750種類以上のアイコン
UIデザイナー不要説 / LSD LAB
2014/10/26 UIデザイナー不要説 最近UIについてもやもやしていることがあるので書く。間違った知識もあるかもしれない。 先日UI CrunchというUIの勉強会のようなものが開催され、僕はschooの動画配信を見ていたのだが、どうも根底に「UIデザインの重要性が日本では認知されていない」という共通認識が流れているように思える発表が多かった。デザイナー生存戦略やエンジニアとうまく付き合う方法等…。 僕も前のブログ(UID Lab)でそのようなことを訴えてきたので、あぁ、やっぱりみんな不安なんだなあと思ったが、逆説的に「僕らデザイナーが信じているUIデザインの価値なんて、本当は虚像なんじゃないか？」ということを疑ってみたい。 そもそも、なぜみんな「UIデザインが重要視されていない」と感じるのだろう？自分が日頃感じることを列挙してみる。 UIデザインが重要視されていないと思う理由 1.
O'Reilly Japan - インタフェースデザインの心理学 : ウェブやアプリに新たな視点をもたらす100の指針
TOPICS Design 発行年月日 2012年07月14日 PRINT LENGTH 288 ISBN 978-4-87311-557-3 原書 100 Things Every Designer Needs to Know About People FORMAT デザインは相手から反応を引き出すための大事な要素です。買ってほしい、読んでほしい、行動を取ってほしいなど、相手の反応を誘い出すためにデザインをします。人間の行動原理を理解していないデザインは相手を混乱させるだけで目的の結果を得ることができません。本書ではすべてのデザイナーが知るべき100の指針を実践例とともに紹介します。すべてが科学的な研究から導き出されたものです。これらの指針を理解してデザインすれば、人間の思考や行動、遊び方にマッチした直観的で人を引きつける製品――印刷物、ウェブサイト、アプリケーション、ゲーム――を作れる
UIデザイン・プロトタイピングのセミナー交流会に行ってきました #popapp - ぬんびりぶろぐ
2014年9月10日、渋谷ヒカリエのDeNAさんで開催された UIデザイン・プロトタイピングのセミナー交流会 行ってきました 100名定員のところ268名参加希望が来ちゃうという人気ぶり！ はじめて見たときに、iPhoneだけでプロトタイピングできちゃうスゴイ！！と衝撃だったプロトタイピング用アプリ「POP」を開発したBenさんのお話と、あの凄腕デザイナーでデベロッパーな深津さん(@fladdict)が登壇するのだから、この人気も納得です スケジュール 17:30 開場 18:00 – 18:10 オープニングトーク 18:10 – 18:40 POPとUS式のアプリデザインについて by Ben Lin 18:40 – 19:25 ペーパープロトタイピング入門 by fladdict 19:25 – 19:40 会社および事例説明 by DeNA 19:40 – 21:00 交流会 PO
ユーザー調査のないUXは、UXではない
UXチームの責務は、ユーザーにとって望ましいエクスペリエンスを作り出すことである。にもかかわらず、ユーザーを開発プロセスに巻き込んでいない組織は多い。顧客からのインプットがない組織は役に立たないインタフェースを作り出してしまう危険がある。 UX Without User Research Is Not UX by Hoa Loranger on August 10, 2014 日本語版2014年9月18日公開 Webサイト（あるいは製品）の成功はユーザーからどう思われるかにかかっている。ユーザーはWebサイトの有用性と使いやすさを、そのサイトとインタラクションしながら評価し、数秒、ときには数ミリ秒で結論を出す。 あるサイトに関与するかどうかのユーザーの判断の基準になるのは、「そのサイトは自分にとって価値があるか。使いやすいか。そこでのエクスペリエンスを楽しめるか」といった問いである。ユーザ
小さい子どもにコンピュータを触らせるということ - ビスケットのあれこれ
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
放送大学 授業科目案内 コンピュータと人間の接点（'13）
主任講師 黒須 正明 （放送大学教授） 暦本 純一 （東京大学教授） 講義概要 ヒューマンインタフェースという領域は、情報科学を中心にして比較的最近発達してきたものです。ここでは、その領域について、まずインタフェースという基本概念を、次いで人間についてその多様性や社会的側面などを学びます。さらに、インタフェース設計のための人間中心設計という考え方を、またここ30年ほどの間に開発されてきた様々な技術について学びます。 授業の目標 人間とコンピュータとの関係がどうあるべきかについて学ぶことにより、技術をどのように活かすべきかを考え、それを具体的なインタフェースとして設計する考え方を身につけます。 履修上の留意点 関連授業として「情報機器利用者の調査法」を履修することが望ましい。 回 テーマ 内容 執筆担当講師名 (所属･職名) 放送担当講師名 (所属･職名) 【目標＆ポイント】 インタフ
ノンデザイナーがデザインの文句を正しく言うための本4冊+1 - レールを外れてもまだ生きる - コロポンのブログ
自分にとって、使いにくいサービスに出会ったとして。 そのどこが具体的にいけないと思うのか？ どういう修正を加えてほしいのか？ 言葉にできますか？ ただただ使いにくい、わかんない、とクレームを入れるのは、何もしないでそっ閉じするよりはマシ。「使いにくい」というのもユーザの立派な声だから。 でも、よりわかりやすく自分の不満を伝えることができたら、作り手にもっと大きなフィードバックを返してあげられる。みんな幸せになれる文句を言うことができる。 ゲームプランナーなりたてのときに、自分が感じるデザインの違和感を言語化できずに悔しい思いをして、巷でオススメされてたり店頭に並んでるデザインの本を読んではなんとかしようとしました。 結局今もセンスいいデザインが自分でできるわけじゃないけど、言葉にはできるようになったつもり。 その時お世話になった本を紹介してみます。もっとたくさん読んだんだけど、特に自分の中
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
タブの正しい使い方
13のデザインガイドラインを守ってタブを使っているサイトにYahoo Financeがある。しかし、AJAXの使い過ぎや改善の余地が残るカスタマイゼーションのページなどを見る限り、ユーザビリティはまだ上げられる。 Tabs, Used Right by Nielsen Norman Group on September 17, 2007 Web上でダイアログコントロールを正しく使っているユーザ・インターフェイスを見かけることは滅多にない。ラジオボタンやチェックボックスのように単純なものでさえ、正しく使われていないことが大半だ。ドロップダウンメニューに至ってはもっとひどい状態だし、Flashサイトを台無しにする自作のスクロールバーも後を絶たない。 最近リニューアルされたYahoo Financeのホームページでは、タブを正しく使っている。2箇所ほど抜粋してご覧に入れよう。 Yahoo Fin
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material UI
Bootstrap 3をベースにしたフラットなかわいいデザインのHTMLとPSDが揃ってる無料のUI素材 -Druken Parrot UI Kit
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
