iPhone 6 Screens Demystified | PaintCode
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree
年表やSNSのデザインの参考に！タイムラインのサンプル10例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 今回は「タイムライン」のサンプルを10例ほど紹介していきます。 たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。 それでは、はじめます。 さまざまなタイムライン10例 1. Vertical Timeline http://codyhouse.co/gem/vertical-timeline/ レスポンシブ対応のタイムライン。 JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。 中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。 2. VERTICAL TIMELINE http://tympanus.net/codrops/2013/05/02/vertical-
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ | WebNAUT
あっという間にプロトタイプがつくれるツール「Prott」！グッドパッチ様とユーザーレビュー会も開催しました！ こんにちは！ディレクターの田川です。みなさんはモバイルのアプリやWEBサイトを設計するときに、プロトタイピングツールをお使いでしょうか？ ビーワークスでも、モバイルのアプリやWEBサイトを設計するときは、実機でのUIの見え方や使用感をチーム全員で共有するために、できるだけプロトタイプをつくるようにしています。 プロトタイプを作成するツールは色々ありますが、株式会社グッドパッチ様が提供している「Prott」は、操作が直感的で使いやすく、弊社ディレクターやデザイナー陣など多くのメンバーが使っています。 今回はProttのご紹介とグッドパッチ様がユーザーレビューでご来社くださいましたので、その様子をレポートします。 Prottのおすすめポイント Prottは今年4月にベータ版がローンチさ
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
デバイスのアクセス許可を求めるUI | UXデザイン会社Standardのブログ
あなたのアプリケーションではユーザーにいくつの許可を求めていますか？例えばiOSの写真アプリケーションであれば、「カメラロール」「カメラ」などの許可を求めるポップオーバーが初回起動時に表示され、ユーザーはそれぞれを許可する必要があります。 もしここでユーザーが「カメラ」の許可をしなかった場合には、まず写真を撮影すること自体ができなくなります（仕様にもよりますが一応シャッターを切ることはできても、真っ暗な写真になります）。ここでようやくユーザーはおかしいと気づくことになりますが、どのようにこの状態を改善すれば良いのかわかっていることは少ないでしょう。 ヘルプなどの項目に書かれている場合もありますが、設定 → プライバシー → カメラ → アプリ名を探してトグルをオンにするという複雑なタスクを行わなければいけません。しかし、そもそもヘルプにさえ辿り着けなければアプリがおかしいと感じ、星1の評価
成功したがゆえに崩壊しつつあるiOSのシンプル哲学 - UXエンジニアになりたい人のブログ
前回こんな記事を書いた。要約すると「戻る」に手が届かねえって話。 同意も多かったのだが、「左端をエッジスワイプで戻る」が実装されている、というコメントを多くもらった。試してみたところ。。。。おお！すごい！たしかに！iOS7からNavigationControllerのデフォルトの挙動として実装されてるらしい*1。 で、これやってみた人いる？なんかやりづらくなかったですか？やりづらかったですよね？やりづらかったことにしましょう。その経緯とそこから広げて色々書いてみようと思うので！ 長いですごめんなさい。崩壊の話が聞きたい人は「行き詰まり」から読みましょう。 なぜエッジスワイプはやりづらいのか そもそもスワイプとエッジスワイプの違いはわりと難しい。 スワイプは真ん中辺りにポイントして、上下左右に動かす。エッジスワイプは端にポイントして、内側に動かす。 スワイプとエッジスワイプ このブログに来る
Material Designを見てみた - クックパッド開発者ブログ
モバイルファースト室の @kaa です。 Googleが先日IOで発表したMaterial Designについての資料を見て、元Flasherの視点で いまさら思った事などまとめてみます。 Material design - YouTube アニメーション、スタイルのページについてメモです。 レイアウトのページ以降はまた次回に。 Introduction http://www.google.com/design/spec/material-design/introduction.html メタファーは紙？ カードは紙をイメージ、という話ですが、どうでしょうか？ もし紙だったらテクスチャの質感や表示時に傾く、ゆれる演出が入るんじゃないかと思います。 四角形がゆがむことはないので紙の見え方とは少し違いますし、紙のやわらかさがないですよね これのMaterial responseとか 紙ですと均
モバイル向けUI/UXデザイン10のポイント デザイン会社 ビートラックス: ブログ
日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル
スマホUIの際限ないレベルアップ - ワザノバ | wazanova
http://blog.brianlovin.com/design-details-pinterest-for-ios/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 Brian LovinのUI分析シリーズは継続して紹介してきましたが、前回のFoursquareのポストでは、「確かに各社ともレベルが高いけど、さすがに似たようなものが増えて飽きてきたな。」と感じました。しかし、今回のPinterestのiOS版については、「ここまで工夫するのか。」と関心させられるものもあり、UIの競争はまだまだレベルアップしていきそうな気がしてきました。 原文で全体をチェックしていただくのがよいかと思いますが、個人的に気に入ったのは、 4) Pull to refresh ビデオ この効果を自社オリジナルのもので作
デザインするレイヤーの話とUXDの話 : void chachaki::Blog::main()
最初に結論を書くと、デザインのレイヤーを揃えて話をしないといけないし、何でもかんでも「UXデザイン」と言ってしまうのは問題の矮小化が起こるからやめた方がいいと考えます。 セブンカフェのUI論について を読んで、「UIやオペレーションには確かに改善点はあるものの、ユーザーに対して新しいコンビニの価値提案ができたことは、とても素晴らしいことではないか」という結論には同意しつつも、デザインの失敗の烙印を押されているのは仕方がないことなのではないかと思っています。 そもそも、佐藤可士和さんは何のデザイナーかと言うと、wikipediaによれば肩書は「クリエイティブディレクター、アートディレクター、グラフィックデザイナー」で、プロダクトデザイナーではないと思います。いわゆるコンセプトワークと言われるような、企画に相当するところを仕事として、ビジネスをつくる仕事をしているように思えます。 このような佐
ユーザーが待っている間のUIデザイン | UXデザイン会社Standardのブログ
あなたは待つという行為は好きですか。私達の生活では1日の中に何度も待たなければいけない時間が発生します。 朝の出勤のために電車が来るのを待ったり、会社のエレベーターが降りてくるのを待つなど、既に慣れてしまってあまり意識していないかもしれませんが、実際には多くの待ち時間があるはずです。 アプリケーションでの待機 上記の現実での待つことと同じくらいの数を、私達はアプリケーションで体験しています。例えばTwitterで新しいツイートを見るためにリロードしたり、Safariで画面が切り替わるまでを待つなど、現実世界と比べるとミクロな時間かもしれませんが、回数的には同じくらい待つことを行なっています。 たしかに短い時間かもしれませんが、現実世界と違いアプリケーションを利用中のユーザーは他の何かをして待つことが困難という問題があります。現実の待ち時間ではiPhoneをすぐに取り出してTwitterやニ
UIはシンプルがベスト THE GUILD深津氏に聞くアプリ開発術｜Mac - 週刊アスキー
日本テレビのTV番組連動アプリ「フリフリTV」など、優れたUI（ユーザーインターフェース）のアプリ開発で知られるクリエイティブユニットTHE GUILD。代表取締役の深津氏に、アプリUIの開発方法について聞いた。 ─ THE GUILDならではのアプリ開発の方針、コンセプトはあるのですか? 深津 「気持ちよく使えるものを」というのはありますね。特に私はシンプルなものが好きで、なるべく機能を削るように心がけています。複雑になったら負けだと思っています。 ─ それはなぜですか? 深津 十徳ナイフは使いやすいですけど、 機能を足して百徳ナイフにすると使いにくいし危ないですよね。iPhoneのアプリもそれと同じだと思っていて、機能がたくさんありすぎてもユーザーは使いこなせない。iPhoneが登場して間もないころは、世間的にも機能が多いアプリが支持されてい
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
What is the Point of Material Design? - Designmodo
With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Free Email BuilderFree Email Templates The UI of Material Design Now that Material Design will be the staple of Google’s interface it’s important to understand how they came about making it. A bi
Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」｜男子ハック
@JUNP_Nです。GoogleがGoogle AdSenseに関する最新情報を伝える公式ブログ「Inside AdSense」にて、119時間にもわたるユーザービリティテストを行った結果をまとめて公開しています。詳細は以下。 モバイルサイトの最適化は必須！モバイルの特性を理解したサイト設計が必要img via：モバイルサイト設計の指針 Googleがシカゴとサンフランシスコで119時間にもわたるユーザービリティテストの結果をまとめています。調査対象はAndroid、iOSの両方のユーザーで、商品の購入やサイト内を調べるなどの操作を行い、各サイトでの体験を調査委とともに評価したそうです。 関連：スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い！ この調査の結果で明らかになったことをまとめたものが「モバイルサイト設計を成功させる25の指針」となってい
niw.at — iOS で文字数制限つきのテキストフィールドをちゃんと作るのは難しいという話
「そんなん簡単やろ」と思いますよね。 たとえば、「UITextField 文字数制限」でググれば山のようにブログ記事やらコードが出てくるし、Stack Overflow に載ってるコードのコピペ一発で解決しそうに思えませんか? 実は文字数制限をつけたテキストフィールドはそんなに簡単な話ではないのです。 shouldChangeCharactersInRange:replacementString: は使えない子 今回はこれに尽きます。 UITextField や UITextView のデリゲートで呼ばれる textField:shouldChangeCharactersInRange:replacementString: やtextView:shouldChangeCharactersInRange:replacementString: は使ってはいけません。 より正確に言うと、使うとき
Keynoteを使ったプロトタイプに挑戦 | チャットワーククリエーターズブログ
Keynoteを選ぶ理由ChatWorkでは、デザイン部、開発部共に勉強会を頻繁に開催しています。先週はデザイン部のほうで Keynoteでつくるプロトタイプの勉強をしました。講師は、わたくし長谷川です。 最近はプロトタイプをつくるためのツールはたくさんあります。Framerのように PSD や Sketch ファイルと連携できるものもありますし、Briefのような高機能な専用アプリケーションもあります。こうしたなか、Keynote をつかうメリットが幾つかあります。 学習のための敷居が低い（コード不要）持っている人が多いので共有しやすいメモなど注釈も付けやすいiOSアプリとアニメーションが近いKeynote ユーザーが社内で多く、誰でも直接ファイルに触れて調整できるのも大きなメリットです。詳細まで詰めるとなると、他のツールのほうが適している場合がありますが、アイデアをなるべく本物に近いか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
