売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

Inside Frontend #2

深津 貴之 / THE GUILD / note @fladdict (…世界中のプロダクトオーナーの皆様…聞こえますか… いまあなたの心に直接語りかけています… 新機能を1つ追加したら…旧機能を2つ消すのです…実際にできるかはともかく、そういう気分で仕事をするのです…無駄な機能を食い止めることこそ大事なのです…） 2016-11-28 16:31:18 深津 貴之 / THE GUILD / note @fladdict (…世界中のプロダクトオーナーの皆様…聞こえますか… いまあなたの心に直接語りかけています… 新機能を1つ追加したら…旧機能を2つ消すのです…実際にできるかはともかく、そういう気分で仕事をするのです…あなたが…最後の防波堤…なのです…） 2016-11-28 16:33:57

皆さんのアプリやサイトを利用するモバイルユーザーには、特定の目的があります。そして多くの場合、ユーザーとその目的の間に立ちはだかっているのはフォームです。 実際には、フォームは目的を果たすための道のりにおいて、最後のステップであると考えられることが多いです。だからこそ、ユーザーが戸惑うことなくできる限り早くフォーム入力を完了できるようにすることが重要なのです。 次の７つのルールに従って、素早く簡単に完了できるフォームを作りましょう。 ルール１：フォーム表示をふさがない キーボードなどのインターフェース要素により、フォーム表示がふさがれないようにしましょう。ユーザーがフォームへの入力を完了したら、入力フィールドを自動的に画面の上へ送るようにしましょう。

入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

「さらに詳しく」というフレーズをその場しのぎのリンクラベルとして利用することが増えている。しかし、このテキストは情報の匂いが弱く、アクセシビリティも悪い。このフィラー的な文言に少し工夫をして、次に出るページの内容をユーザーが自信を持って予測できる説明的ラベルにしよう。 “Learn More” Links: You Can Do Better by Katie Sherwin on December 13, 2015 日本語版2016年3月2日公開 トレンドには他のトレンドに比べて目立たないものもある。低コントラストのテキストもそうだが、独立型リンクラベルとして「さらに詳しく」を利用することが静かなトレンドになっている。Webには今、この汎用的なリンクがあふれており、その大部分が、重要度が二次的、三次的な情報をリンク先としている。（Googleで検索すると、この用語の使用例は14億個も出て

英文の速読術には、スキミング・スキャニングと呼ばれる技法がある。 スキミングとは「ざっと一覧して、全体を把握する」こと。各章のタイトルや、パラグラフの一文目、最終のまとめなど、要所要所だけをかいつまんでいく読み方だ。 一方、スキャニングは「特定の部分を熟読する」こと。こちらは一転して、一単語ずつ精査していく読み方である。 まず最初に全体をざっと見て（スキミング）、自分に必要な内容があるかをチェックする。その後に、必要な部分だけを選別してじっと見て（スキャニング）いく。英文速読では、この２つの読み方をペアにして扱う。つまり速読術とは全文を素早く読むことではない。細部を無視して、要点だけを拾い上げていく技法なのである。 この英文速読術の技法、スキミングとスキャニングは、画面の情報設計の大きなヒントとなる。情報を効率良く読むテクニックが確立されているのなら、それをロジック化すればよい。ロジックを

Meet UI Tiles, 72 Website Flowcharts for any purpose! Professional flowcharts within minutes, it is possible if you have proper assets in your designer toolbox. Build sitemaps, demonstrate interactions and engineer magnificent projects, saving lots of time and energy. Whether you're a developers, designer or any other person involved in Web Design related projects, you can freely use UI Tiles sinc

Let’s talk about how we add animation to our designs, in a way that’s consistent with other aspects of our brand, such as fonts, colours, layouts and everything else. Animating is fun. Adding animation to our designs can bring them to life and make our designs stand out. Animations can show how the pieces of our designs fit together. They provide context and help people use our products. All too o