体力ゲージ的なあれこれについていろいろ - みつまめ杏仁
アドベントカレンダー9日目の記事になります。 このブログでは普段アンリアルエンジンでのUI制作に関することを書いています。 今回は久しぶりにエンジンは起動しないで、ゲームUIのネタとして、体力ゲージ的なやつを取り上げてみようと思います。 体力ゲージ的 という曖昧な言い回しになるのは、役割が同じでも見た目が違うものも含めてしまえという、ちょっと欲張ったネタにしようと思い立ったからです。 ちょっとだけ昔の話を さてさて、ビデオゲームが世に生まれてから、何かしらのゲージを見ないゲームはないんじゃないかと思えるくらい、当たり前のようにみかけます。ゲージの無いゲームを探す方が難しい気がします。いろんなゲージがある中でも、体力ゲージとかHPゲージ、LIFEゲージといった、ゲームの世界に生きているキャラクターが行動不能になるまでを視覚化した表現は、ゲージがなくなること＝ゲームオーバーやミッション失敗など
［CEDEC 2016］分かりやすいゲームのUIを作るには？ アニメーションを用いたプレイヤー誘導のテクニック
ゲームとプレイヤーをつなぐものとして重要なユーザーインタフェース（以下，UI）。そのUIに込められているゲーム制作者の意図を解説する「エフェクト/UIモーションの役割〜背後にある意図とその実現」と題する講演が，2016年8月24日のCEDEC 2016で行われた。 講演を担当したのは，オインクゲームズでUIデザインを担当している新藤 愛大氏だ。カードゲームの開発で知られるオインクゲームズだが，スマートフォン向けゲームでも質の高いタイトルをリリースしており，同社の知見がどのようなものかは興味をそそられる。 実際に同社のデザイナーが，どのような意図を込めてUIを作り上げていったのか，その過程を見ていくことにしよう。 アナログのカードゲームをメインとしているオインクゲームズだが，コンピュータゲームもこれまで4本リリースしており，そのうち2本が，Appleが選定する2014年と2015年の「今年の
UX/UIデザインガイドライン : 小野和俊のブログ
このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな？」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M
livedoor Techブログ : デザイナーに聞かれがちなAndroid UIの仕様
開発部の井上（@inonb）です。12月に位置情報サービス・ロケタッチのAndroidアプリをリリースしました。ぜひお試しください。 さて、今回はAndroidアプリのUIまわりについて書いてみたいと思います。 iPhoneアプリに比べて、AndroidアプリのUI仕様は、わりとWebに近いところがあります。Webの仕事の経験があるデザイナーさんは入りやすいところもあるのですが、マルチディスプレイ対応など面倒なところもあります。 デザイナーさんに聞かれた質問について簡単にまとめてみたいと思います。 1. iPhoneアプリのデザインって流用できますか？ 流用はできるだけ避けたいです。 たとえばTwitterやFacebookのアプリなど、両プラットフォームに多くのユーザーを持つアプリを見ても、iPhoneとAndroidではデザインが変わっているのが分かると思います。 Androidのデザ
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
貼るだけでどんな平面でもマルチタッチスクリーンにしてしまうフィルムが開発中
Appleの「iPhone」やLenovoの「ThinkPad X100e」など、マルチタッチ対応のスクリーンやパッドが搭載されているデバイスが増えてきましたが、機構が複雑になるためにどうしても少し高価になってしまうのが難点でした。 また、スクリーンの大きさもネックになりがち。GIGAZINEでお伝えした携帯電話用バーチャルスクリーン入力システムのように、平面にキーボードや入力エリアをレーザーで描くという疑似タッチスクリーンならサイズは大きくしやすいものの、今度は精度が問題になってきます。 そこで、ある企業が貼り付けるだけであらゆる平面をマルチタッチスクリーンにしてしまうフィルムを研究、開発を進めています。 詳細は以下。 FUTURE LABS - Multitouch technology | Displax - Interactive Systems ポルトガルの企業、Displax社
jQuery: Input Limiter - Input Character Limit - Rusty Jeans
Overview This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining. Use Options Demonstration Download Source Found a bug? Enter a New Issue Use jQuery is required to use this plugin. Examples: Limit all textareas to the default limit of 255 characters: $(function() { $('textarea').inputlim
Yahoo!ラボ - Rerank
検索結果中のキーワードを選択し または をクリックすることにより、検索結果を並び変えることができます。 操作方法 検索を実行すると、通常の検索結果に加えて、右側の枠内に検索結果内から抽出されたキーワード群が表示されます。 検索結果のタイトルや要約文、URLの中から好きなキーワードを選択（反転）するか、 右枠内に表示されているキーワードをクリックするととというボタンが現れます。 をクリックすると、そのキーワードを含む検索結果を上位に再ランキングします。 をクリックすると、そのキーワードを含む検索結果を下位に再ランキングします。 以上の操作で、手軽に検索結果を並び変えて閲覧することができます。 検索ワードの例：豚肉 ピーマン Rerankは、京都大学により研究開発されたソフトウェア・サービス機能であり、 Yahoo!ラボ掲載にあたり、京都大学と弊社で共同開発を行いました。 Copyrigh
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
30 Examples of Attractive Nav - Web Designer Wall
Guest Post by Joel Reyes Web designers always have to strike a balance between usability and visual appeal when designing a website. Without this balance, a website might be nice to look at or difficult to navigate. Or, it might be easy to navigate, but not easy on the eyes. With this in mind, balancing attractive navigation with usability does not need to be overly difficult. To help you generate
Ring
Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や
Maximize the Use of Hover - Web Designer Wall
Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I’m going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how
30 Exceptional CSS Navigation Techniques
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. We’ve seen innovative ways in which de
就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
4月になり、街を歩くとフレッシュな新入社員の姿を見かけるようになりました。また、早い企業では翌々年度の採用活動について考える時期でもあります。 さて今回は、新卒者向けの就職情報サイト（新卒サイト）を検証しました。被験者は、就職活動中の大学生5名（男女混合）です。学生たちが普段使っている「リクナビ」「マイナビ」サイト内で、どの要素が見られ、どの要素が見られないのかを、アイトラッキングツールを使って分析します。なお学生たちには調査の目的は明かされておらず、あくまで普段通りの情報収集をしてもらいました。 今回の調査にて、被験者たちに共通するある傾向が見えてきました。次年度の新卒サイトを作る際にご参考いただければと思います。 新卒学生に「刺さる」写真 他サイト同様、今回の調査においても、学生たちは画像に注目していました。以前、本コラムの中で「転職求人サイトにはどんな画像が適しているのか」という調査
35 Awesome User Interface Design Tutorials | Pro Blog Design
35 Awesome User Interface Design Tutorials On Mon 6th Apr | In Resources | By Narendra.s.v 235 There are more different styles of design out there than we could ever hope to master. But as designers, we never want to become locked into one way of doing things. Below we have collected 35 of the best tutorials for all aspects of User Interface design, with a very wide variety of styles. Follow a tut
20 Excellent Mootools Techniques for Rich User Interface | DevSnippets
The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. AJAX, javascript and CSS are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions. There’s a lot of powerful interactivity you can bring to your site to spice up just about any web page using one of
9 Creative & Rich UI & How to Create Them - noupe
Sometimes it’s just amazing to see, which level of usability, legibility and visual appeal can be achieved using some basic design techniques. In fact, some talented web-developers manage to deliver powerful, functional and gorgeous web-design in “look-and-feel”-style, which is easy to use and nice to see. The User experience has dramatically improved over the past few years, resulting in rich and
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
jQuery UI Tabs with Next/Previous | CSS-Tricks
Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them. View Demo Download Files jQuery UI makes creating tabbed areas ver
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android