新規登録 UI まとめてみた｜あき - 良いもの作って正しく届ける
シンプルだけど難しい「新規登録」のデザイン。 派手さはないけど、地道な工夫の繰り返し。 新規登録って大事 新規登録は離脱を抑えるデザインが重要です。 せっかくダウンロードしてくれたユーザーがサービス利用前に離脱してしまうともったいないので。 本記事では新規登録の UI パターンや事例をまとめてみました。新規登録をデザインする際は、この記事を参考にデザインしてみてください。少しでもお役に立てばうれしいです。 新規登録のポイント ① 最も負担の少ないタイミング ② 最小の操作数 本記事でわかること ① UI パターン別の良し悪し ② 操作数を減らす UI 事例 ▼ 目次 パターン一覧 1. 登録必須型 2. 登録先行型 3. 利用先行型 4. メリット先行型 目的別の参考事例 1. 不要な遷移を削る 2. 不要な操作を削る 3. わかりやすく伝える 4. 魅力的に伝える おわりに ・最適な新規
検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
デザイナーがデザインスプリントに取り組むべき理由
Angelicaは、Proto.ioのコンテンツ編集者です。オークランド出身で、沿岸部を中心とした音楽、グルメ、文化イベントに参加するのが好きです。 デザインには、落とし穴が山ほどあります。上手くいかないこともたくさんあり、小さな間違いが、デザイナーの時間を無駄にしてしまうこともあるでしょう。 予測可能な間違いを防ぐために、デザイナーはデザインプロセスを実施してきました。さまざまな方法がありますが、デザイン業界でもっとも一般的に使われつつあるのは、デザインスプリントです。 デザインスプリントは、プロジェクトの最初から最後まで広範囲に適用できて、調査し忘れることがありません。デザインスプリントの仕組みを理解すれば、どのようなデザインや開発プロジェクトでも驚くほど効果的に利用できることが実感できるでしょう。 デザインスプリントとは デザインスプリントは、デザインチームがより効率良くテストして問
エンジニア↔デザイナー間のペアプロのススメ｜ohs / Pilll ピルリマインダーアプリ
こんにちは。デザイナーのohsです。 Swiftが気軽に学べるサイトまとめ（初級）や（中級編）では、自分で学習できるサービスを紹介してきましたが、私の中で一番効果的だったのが、タイトルにあるペアプロです💡 ただSwiftを学びたいからはじめたというより、チーム開発の効率化という点も期待してはじめました。 ※ペアプロとはペアプログラミングの略で、2人のプログラマが1台のワークステーションを使って共同でソフトウェア開発を行う手法である。Wikipediaより 📘目次 ・ペアプロにより期待していた効果 ・ペアプロのはじめ方 ・ペアプロしてみてどうだったか ・技術力が身につく以上の効果とは？ペアプロにより期待していた効果ペアプロにより、共通言語で話せたり共通認識の幅が広がる事で、コミュニケーションコストが削減でき、開発効率アップできるのではないか？という期待のもとはじめました。 もちろんSwi
『デザインは8の倍数でできている』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 mama&crowdのデザイナー、長谷川彰之介です。 今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して 「最適な値は存在するのか？」 について考えてみたいと思います。 少々長いですが、お付き合いのほどよろしくお願いします。 ボックスサイズとは、「ヘッダー」「コンテンツ」「ナビゲーション」などの ひとつひとつの固まりの大きさ（サイズ）を指します。 【第１部】8の倍数 WEBサイトのUIをデザインしていて悩まされるのが「余白」です。 「ここは3px…いや4pxか。もっと空けたら見やすくなるかもしれない。6p
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.life-is-bitter.com/entry/ui_checklist
React Sketch.appでデザインガイドラインを作ってみた