シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操作数 本記事でわかること ① UI パターン別の良し悪し ② 操作数を減らす UI 事例 ▼ 目次 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規
こんにちは。現在カクヨムのデザインを担当しておりますデザイナーの id:murata_s です。 先日、カクヨムでは縦組み機能をベータリリースしました。これは文字通りウェブブラウザ上で小説を縦組みで表示することができる機能です。リリース後書き手ユーザーの皆さまを中心に多くの反響がありました。 この機能開発では、基本的な組方向に関する変更に加え、画面のデザイン的にも新しい試みを行っています。そこで、今回はウェブにおける縦組みのデザイン事例としてこれを紹介します。 小説を縦組みで読みたい ウェブ小説を縦組みで読みたいという、シンプルなモチベーションで始まった縦組み機能の開発ですが、アイデア自体はサービスの立ち上げ当初からチーム内で挙がっていました。日本語で紡がれた物語を縦組みで読みたいという欲求は、小説文化に親しみのある者なら誰もが思うことだと思います。実際にご利用いただいているユーザーさんと
Jorn van Dijk(@jornvandijk)のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
イベントレポート Material Designを語りつくす!「Google I/O Extended 2018 Shibuya」資料まとめ Googleが毎年開催する開発者向けのカンファレンス「Google I/O」。エンジニアなら、参加したことがある方も多いのではないでしょうか。 もちろんGoodpatchからも、毎年メンバーが参加しています。 2017年のレポート:Google I/O 2017レポ &「How Well Do You Know the Web?」紹介 2016年のレポート:Google I/Oに行ってきた!グッドパッチ目線レポート 2017年まではエンジニアのメンバーが参加していましたが、2018年はUIデザイナーのメンバーが参加。現地で得たナレッジを日本のデザイナーコミュニティに還元するべく、報告会「I/O Extended 2018 Shibuya (Mater
UIを作る際にライブラリにする?それともDIYする?の切り分けと実装のアイデア帳 (@Swift Tweets 2018 Spring)UIDesignSwiftswtws こちらの内容はSwift Tweets 2018 Springで発表させて頂きました「UIを作る際にライブラリにする?それともDIYする?の切り分けと実装のアイデア帳」の内容に少し加筆したものなります。 私の発表ツイートの一覧(スレッド形式になっております) Swift Tweets 2018 Springに関するTogetter 1. はじめに Swift自体はSwift1系の時から趣味で嗜むことから始めて、2017年からiOSエンジニアとなりました。 これまでのキャリアから始めて、デザイナー → サーバーサイドエンジニア → iOSやReactNative等をするようになったこともあって、UI周りの実装に関するTI
先日、自作のiOS用音楽再生アプリ「うさプレイヤ」をアップデートし、アプリの背景色を黒背景に変更する機能を実装しました。この機能を実装する方法がネット上を調べてもあまり見当たらなかったのと、実際にやろうとしたら結構大変だったので情報共有としてまとめておきます。 注意事項 手探りでやったのでもっと良い方法があるかもしれません ここで紹介する方法は「うさプレイヤ」での夜間モードの実装に必要だったものなので、他のアプリでは不要だったり、または逆に必要だったりする作業があるかもしれません 思い出しながら書いているので書き忘れていることもあるかもしれません 使用SDK(Deployment Target)はiOS 9.3です。ただし、iOS10とiOS11上での動作を確認しています 夜間モードという名称について これはわりとどうでもいい話ですが、この「アプリの背景色を黒背景に変更する機能」はTwit
#potatotips 37 の資料です AppRootControllerでスプラッシュアニメーションをする時の方法についても発表しました https://speakerdeck.com/yimajo/approotcontroller-woshi-tutesupuratusiyuanimes…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く