Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ ui “ の検索結果

絶賛育児中でめっきり外出が減ったので、
ああ、これ行きたい、、、、でもいけない。。。というイベントを惜しみなく紹介します。
 
  • 第8回 スマホUXラボ 「ユーザーテストLive!見学会 ~無料学習アプリ編~」
  • Tokyo Service Jam 2016
  • Service Design Night Vol.1
  • XPD2016 SPRING - Data × Design -
  • UX DAYS TOKYO 2016
  • クリティカル・デザイン・スクール[グラフィック篇]

東京と横浜あたりのイベントを行きたかった順で並べました。
(行けない前提なので、日程・金銭面を考えずに順をつけています)

選んだ基準は完全に僕の行きたさです。
他のイベントも知りたい方は記事の最後にある、イベントの見つけ方をご覧ください。

続きを読む

2015年のゲームUI/UXを振り返る

今年は大袈裟な見出しを考えたところで8割方燃え尽きました。
お久しぶりです。デザイナーの きの です。
 

今回は【UX Tokyo Advent Calendar 2015】 の7日目としてお送りします。

 
今年も僕はゲームのUI制作の現場で働いています。
サービスではなくコンテンツの制作となるゲームの現場では、UIもUX一緒に考える機会ばかりです。
(そんな現場の様子は去年のブログをごらんください)

なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。

今年はいろんなゲームを遊んでいく中で、おっと思ったポイントを紹介します。
 
果たしてそれが来年のトレンドなのか、それとも・・・。

年越しには少し早いですが、一緒に振り返ってみましょう。 
 

続きを読む

とりあえずかっこよさげな見出しを考えたところで8割方燃え尽きました。
デザイナーの きのです。
 

今回は【UX Tokyo Advent Calendar 2014】 の8日目としてお送りします。

 
 
現在、僕はゲームのUI制作の現場で働いています。*0
半年ほど前からUXの勉強を始めたので、まだUXそのものに取り組んだ経験は少ないひよっこ*1です。

既に同じような初心者側からの記事があがっていますので、今回はユーザー体験そのものではなく、それに向けてUIデザイナーとしてどう取り組んだかという話をします。

用語について不慣れなところがあるので、「ああ、あれはきっとあのことだな」みたいな所が散見されると思いますが暖かい目*2でみてくださいませ。

続きを読む

iPhone 6 plusを買ってみて遊んでいます。

android勢からすれば当たり前かもしれませんが、
やっぱりこのサイズは画面上半分触るの厳しいです。

 

実はついこの間リリースしたゲームは、
ユーザーにタップしてもらう領域をなるべく下半分に寄せてました。

作り始めたのは1年前なんですが、6+でも快適に遊べそうなので、そこでやったことの話をします。

こういった話はあまり見ないので、チームやデザイナー同士の話のたたき台にでもしてもらえると嬉しいです。

続きを読む

デザイナー向け!iPhone6対応について

screen-size.png

(追記 140919 11:00)iPhone 6 Plusを入手しました
特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです(主観だけど)

(追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました
 

みなのもの落ち着け!

iPhone6/6+の発売がいよいよ明日となりました!

二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、
慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。

  • 画面解像度
  • アイコン・スプラッシュ
  • レイアウト対応について

ひとまず気にするのはこの辺りの情報!
あとはおまけで便利そうなリンクも載せました

これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。


それにしても時代はレスポンシブです。
やれやれだぜ。

続きを読む

ニーハオ!カヤックのHTMLファイ部のしんちゃんアル!

中国出身の新卒です。
入社して二ヶ月になりますが、
日本語を一生懸命勉強しています。
よろしくお願いいたします。

さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中!
こんどのお題は「思わず登録したくなる登録フォーム」です。

Webサービスの制作においてついつい疎かにしがちな登録フォーム。
実はとても大事なものです!

今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。

  1. これだけは欠かせない基本の要素6つ
  2. 登録と無関係の要素はなるべく表示しないように!
  3. 聞きたいことは最小限にして不安にさせない
  4. OpenIDを利用して登録手続きを超簡単に!
  5. バリデーションは色や動きでみせると効果的
  6. 登録のメリットを表示しましょう
  7. アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう!

これら一つ一つについて詳しく説明します。

続きを読む

今熱い!無料オーディオ系サービスのUI 7選+α

昨日、2010年12月1日、ついに
IPサイマルラジオ「radiko」がついに本格サービススタート!
ワッショイワッショーイ!

てなこともあり、無料音声配信コンテンツが今最高にアツイ!と信じて疑わないgunjiです。

映像系サービスが大人気の今、なぜあえて音声だけがイイのか?

それを語り始めると夜が明けてしまうので、今回はあまり掘り下げませんが
ひとつは、コンテンツを配信する方・視聴する方 両方にとってハードルが低く、
別のことをしながら利用出来るということが挙げられると思います。

まあムービー見ながら仕事するのはけっこう難しいし、ふつうに怒られちゃうけど
作業用BGMなら仕事の効率がアップすることもありますしね。
移動中も眠りながらも聞いていられますしね。

というわけで今回は国内外の、特にプレイヤー部分のUIが面白い
無料オーディオ系サービスをご紹介したいと思います。
ながら利用」を加速させるプレイリストなどの機能にも注目です。

radiko

冒頭でもご紹介した日本のIPサイマルラジオ、つまり
インターネット上で地上波ラジオの放送が聞けちゃうという夢のようなサービスです。

テスト運用時は関東で聞けるのは首都圏だけでしたが昨日から北関東でも聞けるようになりました。
今後エリアが拡大していって、どこでもネット越しにラジオを楽しめる時代が来ると
思うとwktkが止まりません!

radiko

メインのページには番組表や特集のビジュアルがあって、再生開始すると
細長いプレイヤーウィンドウが立ち上がります。
今放送中の局のロゴと番組の情報が上3分の1に収められています。

iphoneアプリもこのプレイヤーウィンドウとほぼ同じUIになっていますが
スマートフォンのインターフェースが先にあって、PCのプレイヤーもそれに
あわせたのではないかという気がします。

続きを読む

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。

最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません)

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhoneで実際に見るとこんな感じに見えます↓
iPhoneで表示したiPhone風UIのキャプチャ

iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV

1要素1クラスで実現する

今回のサンプル作成でこだわったのは、1要素に1クラスを指定することでiPhone風のUIを実現することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

a要素をiPhone風ボタンにする

<a href="#" class="btnTypeA">ボタンタイプA</a>

実際に上記を表示すると以下のようにすぐボタンっぽい外観に変わります。↓
灰色のiPhoneボタン風のスタイルになったa要素

iPhone風リストA

<div class="listIPhone listTypeA">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeA --></div>

実際に上記を表示すると以下のようにリストスタイルになります。(1要素1クラスを意識していますが、ベースとなるものが同じで、異なる外観の場合は2クラスに分けて複数の見た目を制御できるように実装しています)
iPhone風リストスタイルのキャプチャ
また、「削除ボタン」はややイレギュラーなもののため、いくつかクラスを追加しています。リスト中のa要素は基本、横100%のリンクになってしまいますが、例外的に「noListLink」クラスを追加することで回避しています。
さらに通常時は表示されない要素、ということで、「floatBtn」クラスを付けることで、左は時に表示されるようにしています。

iPhone風リストB

<div class="listIPhone listTypeB">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeB --></div>

実際に上記を表示すると以下のようにリストスタイルになります。
iPhone風リスト。リスト右端に丸い矢印マークがあります
もちろん、右端にある青い丸矢印も画像は使っていません。

見出し部分も画像なし

そして今回、ちょっとこだわった部分がタイトル左横にある矢印型のボタンです。
当初はこういう形は画像使わないと無理かなーと思っていたんですが、そこそこ見れるものが作れました。(ただ、やっぱり若干標準のUIと比べると形がいびつです)
ソースもかなりシンプル。

<div class="toolbarBox">
<h1 class="toolbar">CSS3 UIテンプレート</h1>
<nav>
<ul>
<li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li>
<li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li>
</ul>
</nav>
<!-- /.toolbarBox --></div>

見出し部分のキャプチャ。左横の矢印ボタンもCSSのみで実装

作ってみた感想

意外とがんばればなんとかなるな、というのが感想でした。
標準UI以外にも、これくらいのデザイン性のものであればCSSのみで実現できてしまうので、iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
(もともとは、CSSを使って画像を使わずにデザインを実装する、というのを書こうと思ったのが発端だったので)

ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみに今回のサンプルは、個人のブログで公開しているCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。→Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

そしてカヤックでは、こんなiPhone風CSS3が大好きなマークアップエンジニアを募集中です!

WEBデザイナー向け☆iPhoneアプリのUIデザイン

どーもキンモクセイぷんぷん香る自由が丘からaoizmです。
秋満開!スマートフォンまっさかり!(強引)
KAYACでもiphoneアプリ制作のお仕事が増えてきております。
WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。
画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。
その違いを認識した上で、違いを活かしたデザインをするためには?
iPhoneアプリのUIデザインまとめてみました。

続きを読む

Blogとユーザビリティと私

コンセプトなきUIにユーザビリティは宿らず( ^ω^)9

こんにちは。
セレビィをもらいに映画館までいこうか、まだ迷っているセキネですdevil

今回はブログリニューアルに関しての"ユーザビリティ:いかに今回のUIに至ったか"についてです。
前回のコンセプトの記事とセットということで。
2投稿連続でブログリニューアルに関する概念的な話しになってしまい恐縮ですが、今しか出せない旬ものという事で。

ではまずはベタにヤコブ・ニールセン氏の
「ブログのユーザビリティ:デザインの間違いトップ 10」でも振り返ってみましょうか。
ではどうぞ( ^ω^)y

続きを読む

Flashの上にプルダウンメニューを表示する

Flashのエリアより上にCSS等で組んだプルダウンメニューを表示させるには
z-indexを指定するだけではダメなようです。

objectタグの中にパラメーターを追加し
Flashのエリアよりプルダウンメニューのz-indexの値を多く
設定してやることにより実装が可能でした。

追加するパラメーターは以下の通り
<object>〜</object>の中に以下のパラメーターを追加
<param name="wmode" value="transparent" />

SWFObject を使用している場合は以下の通り

so.addParam("wmode", "transparent");
と上記のパラメーターを追加します。

警告とメッセージ