分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較
スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー
スマホアプリ立ち上げ時の機能・操作説明のチュートリアル画面まとめ | ブログ | SINAP - 株式会社シナップ
こんにちは、シナップの小茅です。 夏ド真ん中、蒸し蒸しした暑い日が続いていますね。 外でアクティブに行動するもよし、家で涼しみながらのんびるするもよし。 どちらにせよ夏は特に様々なシーンでスマホアプリにお世話になる機会が多いのではないでしょうか。 アプリを初めて立ち上げた際、アプリの機能紹介や操作説明などのチュートリアル画面をよく見かけますが、その方法は様々です。 ちょっとしたアプリ紹介とあわせて、ポイントとなる機能や操作説明を押さえたもの、美しいデザインのものなど、いくつかのチュートリアル画面をピックアップしてみました！ お金を扱うアプリだから信頼と安心がないと使えません。 Moneytreeのチュートリアルではその2つをうまくクリアしているなと思いました。 説明が多くなってしまいそうな商材ですが、機能のポイントをうまく抽出して横スライドで見せています。
アプリエンジニアがアプリのデザインで困った時に頼るべきサイト一覧 - Qiita
この内容は前回の記事同様に始めたばかりの個人ブログに掲載していますが、少しでもたくさんの方に見ていただきたいので、Qiitaにも掲載することにしました。 概要 アプリを開発する環境やチームは人それぞれだと思います。数人のプログラマーとデザイナーのチームで開発することもあればほとんど全てを一人でやる場合など。 特に日曜プログラマーの人でアプリを公開してみたいとなるとデザイナーの知り合いにお願いするか、お金を払ってデザインの発注するをするのはちょっと厳しい場合もあると思います。 そんな時に全てではなくともある程度のデザインを自力でする力があると非常に助かります。 私も個人でアプリ出してますが、デザインがうまくできないせいでホントによく苦労しました。そんな中で参考にさせていただいたサイトや実際につかっているアイコン集などもあるので、数は少ないですが紹介してみます。 おすすめサイト ・pttrns
iOS 7アプリを開発するのに必携のワイヤーフレーム·iOS 7 Wireframe Kit MOONGIFT
iOS 7 Wireframe KitはCreative Commonsのオープンソース・ソフトウェアです。 iOS 7の正式リリースは間もなくと思われますが、既に新しいアプリ開発においてはiOS 7のUIを模して行われていると思われます。そんな中で必要なのがUIを決める素材集です。今回はIllustratorベースのiOS 7 Wireframe Kitを紹介します。 こちらがファイル一覧。Illustrator、PDF、PNG、Omni Graffle、Sketch用のファイルとなっています。 その内容。iOS 7らしい雰囲気のコンポーネントが多数作成されています。 こちらはIllustrator版。 iOS 7 Wireframe Kitではデフォルトのオブジェクトをデザインしていますので、そういったパーツを組み合わせて作るアプリに対しては有効ではないでしょうか。細かくカスタマイズす
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 | DX.univ
iOSアプリ開発担当の菅原です。 iPhoneやiPadのア[...]【厳選】日本の全iOSプログラマに捧ぐ！iPhoneアプリ制作に参考になりすぎるデザインリンク集15選 by Yu Sugawara in Design · Mobile — 2013/07/18 iOSアプリ開発担当の菅原です。 iPhoneやiPadのアプリ開発はすべて一人で販売するところまで持っていけるのが魅力の1つです。 アプリ開発作業を大きく分類しますと プログラム デザイン 販売 にわかれます。販売に関してはAppStoreがあるので、心配はありません。残りのプログラムとデザインですが、なかなか両方を得意にするというのが難しいと思います。僕はプログラムは出来るのですがデザインがからっきしダメです。 今日はそういったデザインが苦手なプログラマ向けに参考になるデザインリンク集をご紹介いたします。個人のアプリ開
iOS 7になってiPhoneで遊べなくなる赤ちゃん（動画）
困り果てる赤ちゃん達... 子どもは何でもすぐ学び吸収していきます。最近の子どもや赤ちゃんは完全に新人類。生まれた時からガジェットが周りにあるので、言葉を学ぶよりも2本脚で歩くよりも先に直観的にガジェットを使っています。iPhoneのロックだって当たり前のように解除します。 が、iOS 7になってロック解除が変更になりました。この変更によって、赤ちゃん界に激震が走っています。解除するためのスライド画面が出てこない。ボタンを押してもあのスライドがない！ 困惑する赤ちゃん...。 まぁ、なんでもすぐに学ぶのであっという間に解除できるようになるのでしょうがね。 [Redmond Pie] そうこ（ERIC LIMER ／米版）
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
【UI調査】iOSとAndroidのスイッチ 7種類比較
最近、アプリオでは、スイッチのユーザビリティについての記事を2本掲載した。 【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味 【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？ いずれの記事も反響が大きく、スイッチのユーザビリティ（使い勝手）に対する読者の関心が高いことが分かった。 iOSとAndroidのスイッチ比較 そこで、一連の記事をまとめる観点から、アプリオ編集部がスマホユーザにアンケート調査を実施した。有効回答数は80件（7番のみ40件）。 実際にiOSやAndroid OSの設定画面やアプリ内で使用されているスイッチの画像を見せ、「スイッチを左に動かした場合」の結果を3つの選択肢（ON・OFF・分からない）の中から選んでもらった。 各スイッチ画像に関して回答者に与えた情報は、スイッチの画像のみ。まずは、同じ条件で、以下の結果を確認してほ
【アプリ開発のお手本に】iOS 7の設計においてアップルが大切にした4つのポイント | TOKOROM BLOG
今回の記事はUIデザイナの Morino氏 からの寄稿です 前回 はiOS 7紹介ビデオの中のジョナサン・アイブ氏のパートをご紹介しました。 今回は、その中でも特に重要と感じたいくつかのフレーズをピックアップして深堀りしてみたいと思います。 “True simplicity” iOS 7から話題の"フラットデザイン"が採用されて、画面デザインは大分シンプルな外観になりました。 使う色の数は限定され、簡単明瞭なラインやシルエットがほとんどのデザインを占めています。 iOS 6まで採用されていたSkeuomorphism（装飾的・リアルな外観）は排除され、立体的で質感を感じるデザインから、平面的で形やテキストの意味性をストレートに伝えるデザインに変わりました。 ただ、“Simplicity"という言葉は、単に外観を表すものとして使われているわけではありません。 「複雑さに秩序をもたらす」という
TechCrunch | Startup and Technology News
Less than one year after its iOS launch, French startup ten ten has gone viral with a walkie talkie app that allows teens to send voice messages to their close… While all of Wesley Chan’s success has been well-documented over the years, his personal journey…not so much. Chan spoke to TechCrunch about the ways his life impacts how he invests in startups.
iOSアプリのUIを爆速で激ヤバにする2つのライブラリ
iOSアプリのUIを爆速で激ヤバにする2つのライブラリ：生産性ガチアゲなオープンソースiOSライブラリ（2）（1/4 ページ） ゼロからiOS SDK開発を始める新規開発者でも超高速・高品質な開発を可能にするオープンソースのライブラリを目的別に紹介していく連載です。実際にライブラリを組み込みながら技術的な側面も併せて詳細に説明していきます。今回は、Clearのような折り畳みやFlipboardのような本めくりエフェクト、Twitterのようなプルリフレッシュを実現する方法を紹介します。 「あのアプリのあの機能」を実現するEGOTableViewPullRefreshとMPFoldTransitionを使ってみた 「良いアプリの条件」というと何が思い浮かぶでしょうか。例えば、誰も実現してない機能を実装していたり、パフォーマンスが良かったり、動作が安定していたり…… とさまざまな意見があると思
明日友達に自慢できる！隠れUIデザインまとめ8つ | Goodpatch Blog
以前からネットでiOSのデフォルトミュージックアプリを傾けると音量調節スライダーの光のあたり方が変わるという記事をよく見ます。 （参考: 【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）） そこで上記のような細部に凝ったUIはもっとあるんじゃないのかと思い探してみました！これらを知っているとUIの勉強にもなるし、友達にも自慢できるのではないでしょうか？笑 iOS 計算機 iOSにデフォルトで入っている計算機アプリ。iPhoneなどをロックを解除して横にすると足し算やかけ算以外の複雑な計算ができるボタンが出てきます。僕はπしかわかりませんでした。 Foursquare その1 有名なチェックインアプリFoursquare。写真付き投稿の写真を左にスワイプすると隠れキャラが登場します。実はこの隠れキャラ、Foursquareの
70 Awe-Inspiring iOS App Icons | Icons | Graphic Design Blog
Today’s iOS app icons collection is specially roundup for iOS designers for inspiration. One of the great things about the App Store is that it inspires so much creativity from designers, it seems like there’s great new ideas for interfaces and interactions every week that delights the design community. A collection of iOS icons of top designers from around the world. Many professional designer ar
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ - Mitsu.log();
2013-04-13 CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。 UIのパターン化・ルール化とは プラットフォームの流儀 画面パターン UIコンポーネント 実践事例 パターンとルールがもたらすメリット 90分という短い時間だったけど、ワークショップ的なの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Androidアプリの魅力的なインターフェース〜本当にiOSアプリのデザインを流用するだけでいいの？〜
新着記事
