新規登録 UI まとめてみた｜あき
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録まわりで離脱の少ないデザインを勉強したかったので、いくつかアプリをスクショしました。自分用で作成しましたが、誰かの参考になればと思います。 また、まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです〜。 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規登録のタイミング ・注意すべきデザインの視点 ・スクショの保管場所1. 登録必須型ユーザー登録なしではアプリが利用できないパターン。 傾向 母数としては一番多い形式。プロフィールが大切なフィットネス系では、利用前にかなりの入力を求
プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
こんにちは、 フロントエンドエンジニアの @nabeliwo です。 弊社には SmartHR というプロダクトの他に SmartHR の従業員 DB を利用して開発・提供される SmartHR Plus アプリ (以下、 Plus アプリ)というものがあります。 SmartHR CTOが語る中長期戦略。徹底的なアプリ開発とAPI対応で「プラットフォーム化」促進へ - SmartHR ガイド 既に多くの Plus アプリがリリースされており、そのほとんどのプロダクトのフロントエンドは React x Redux という技術スタックで構成されています。 オンライン雇用契約 カスタム社員名簿 ラクラク人事レポート etc Plus アプリは毎回新規でプロジェクトを立ち上げて開発していくことになります。 とはいえブランディングの観点から見ると、基本的なトンマナや UI パーツは SmartHR
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note
今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
OOUI視点で、iOS写真アプリを分析・考察してみた | Goodpatch Blog
この記事はGoodpatch UI Design Advent Calendar 2018の16日目の記事です。 私はOOUI（オブジェクト指向ユーザーインターフェース）に関する勉強をし始めてから、世の中のアプリが全てオブジェクトにしか見えなくなりました（笑）。まだ、完璧に理解しきれていない部分もあるかもしれませんが、Appleの純正な写真アプリを分析・考察しながら、私なりにOOUIの理解を深めたいと思います。 OOUIとは システムを開発する際には、オブジェクト指向（Object-oriented）という設計論があります。その設計論をUIデザインに導入することをオブジェクト指向ユーザーインターフェース（Object-oriented user interface、以下「OOUI」という）と呼びます。 オブジェクト指向（Object-oriented）とは、オブジェクト同士の相互作用として
Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ
Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI用のアイコンが1,400種類以上！商用でも完全無料で利用できる、シンプルなアイコン素材 -Remix Icon
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
デザイン原則の実践｜dely design
http://www.life-is-bitter.com/entry/ui_checklist
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)