CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout
依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。 フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。 人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。 そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。 パーツを組み合わ
Sign-in form best practices | Articles | web.dev
If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designed sign-in forms get high bounce rates. Each bounce could mean a lost and disgruntled user—not just a missed sign-in opportunity. Here is an example of a simple sign-in form that demonstrates all of the be
入力フォーム最適化（EFO）改善のチェックリスト～営業も安心の「全体最適」のポイント～ | メソッド | 才流
EFO（入力フォーム最適化）とは EFO（Entry Form Optimisation）とは、入力フォーム最適化のこと。Webサイトの入力フォームは、問い合わせや資料請求、会員登録、無料トライアルなどさまざまな目的で設置されています。入力フォームをユーザーが使いやすくなるように改善する施策のことをEFOと呼びます。 BtoBマーケティングにおけるEFOの重要性EFOは、コンバージョン直前の離脱を防ぐ施策なので、短期間で成果が上がりやすい改善策の1つです。 一般的に、BtoBでは入力フォームの通過率は25〜30％が最適化の目安です。裏を返せば、75%以上のユーザーは申し込むつもりで入力フォームを閲覧したものの、離脱してしまうわけです。目の前の魚を逃しているようで、もったいないですね。 ※入力フォームの通過率：フォーム経由のコンバージョン数をフォーム到達セッション数（訪問者数）で割った数値の
ソフトウェアデザインにおける構造設計を実践！マネーフォワードさんとワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的なところを詰めていく考えをとっていくプロセスです。 今回は、マネーフォワードさんと「デジタルプロダクトのUI設計のプロセスと考え方を学び、実践することでスキルのベースを身につけること」をテーマに、モデルベースUIデザインについて理解・実践するワークショップを開催しました。本記事では開催の背景から当日の様子をご紹介します。 参加いただいたマネーフォワードのUI/UXデザイナーさんによるnoteもぜひご覧ください！ マネーフォワードがGoodpatchさんとUIデザインワークショップを実施しました！ ご相談いただいた背景 「お金を前へ。人生をもっと前へ。」をミッションに掲げる株式会社マネーフォ
先輩ができるUIデザイナーの導き方
アウトプット以外のフィードバックを記事や Twitter をはじめとしたソーシャルメディアで意見を発しているので、仕事現場でも口うるさい（怖いツッコミが多い）ように見えるかもしれません。ただ、実際は聞いたり観察している時間のほうが多く、細かな指示を出すこともありません。意見を出したほうが良いタイミングがなければ、そのままずっと静かにしていることもあります。 特に事業会社で働く UI デザイナーにいえることですが、単に見た目の良いものを作れば実装されるわけではありません。デザインの知識だけでなく、ユーザー、技術、ビジネスそれぞれ考慮する必要がありますし、周りになぜそのデザインが現時点における最適案なのか伝えなければ先へ進みません。 ときどき UI デザイナーから相談やフィードバックを求められることがありますが、下記 3 点を気をつけるようにしています。 黙って最後まで耳を傾ける当たり前のこと
BtoB SaaSでダークテーマのUIを採用したら5ヶ月でクビになった
こんにちは。Flatt Securityの豊田です。 自分はこの会社の共同創業者でありフェーズごとにさまざまな業務を受け持ってきたのですが、あくまで本職はデザイナーだという矜持だけは持ち続けているつもりです。 PdMと分担しながらではありますが、実際今現在もSaaSプロダクトのUIデザインを担当していますので、今日はひとつデザイナーとしてブログを書こうと思います。 🎉 KENRO(ケンロー)正式版をローンチしました！ 実は先週火曜日(2021年4月13日)に弊社から初のSaaSプロダクトをローンチしました！名前をKENRO(ケンロー)と言います。 営業のメンバーが考えた名前も、自分がデザインしたロゴも人気を博しており嬉しい限りです。
1画面を平面ではなく側面で考える UI Stack｜みーた
さてさて、今回の本題。 最近プライベートで新規サービスのUI監修みたいなことをやったのですが、その際に「UI Stack」の考え方が意外と知れ渡ってないように感じたので、要点だけの内容ですが綴ってみたいと思います。 元の話は英語でこちら↓に詳しく書いてあります。 しっかり読み解いてみたい方は覗いてみてください。 1画面は平面ではなく側面があるPinterestやDribbbleなどで「パッと見の雰囲気いいなぁ」というデザインには最近よく出くわすようになってきて、それを新規の画面やサービスに取り入れようと考えることが多いかと思いますが、実装までいって使ってみたけど「なんか違和感あるな」みたいなことありませんか？ それは「1画面の側面を見れていない」からかもしれません。 側面とは一体なんなのか。 それは「状態」です。 私達の住む世界は必ずしも完璧ではなく、間違いや遅延が発生します。それはサーバ
ねらいどおりの変化を起こす、UI改善について｜tsukasio
こんにちは、クックパッド デザイナーの平塚（@tsukasio615）です。クリエイション開発部では、レシピやつくれぽなどクックパッドの投稿体験に関する開発を行っています。 今回は、レシピ投稿の中でも重要な「レシピを書く画面」のUI改善についてご紹介します。 課題の洗い出しと優先度決めある日、プロダクトオーナーからレシピ投稿のユーザビリティ改善をしたいというオーダーがありました。レシピ投稿と言っても、ユーザーがレシピを書こう！と思ってから、実際に書き、レシピを公開するまで、範囲は多岐に渡ります。この一連の流れの中で、ユーザーが迷うことなくレシピ公開まで進められるように改善するのが目的です。今回は具体を進める前に、レシピ公開率（レシピを公開した数 / レシピ投稿画面を開いた数）をこの施策の指標として定めました。 具体的にどこを改善するか決める段階で、まずはレシピ投稿のユーザビリティテストを行
登録フォームのテキストフィールドにはオフホワイトを
アプリケーションをデザインする際、ほとんどのデザイナーはコンテンツページには労力を費やしますが、登録フォームは見過ごしがちです。ユーザーが辿り着くのは、視覚的に魅力がなく、無味で事務的なフォームです。白いバックグラウンド、まっさらなテキストフィールド、煩雑な文章、不快な黒のアウトラインがあちこちに散らばった、登録のモチベーションを掻き立てないフォームです。もしあなたのフォームがそんな状態であれば、改善の余地ありです。 あなたのアプリを使いたいユーザーはフォームの見た目に関わらず登録はしてくれるでしょう。しかし、まだ決めかねているユーザーは事務的なフォームを見て辞めてしまうでしょう。第一印象で多くの見込み顧客を失っている可能性があるということです。もっと機能的で魅力的なフォームにすることで、ギリギリで決めかねているユーザーの背中を押すことができます。 ビジュアルがユーザーを後押しする ある調
アプリのアップデート500本ノックから学ぶUI改善のヒント｜宮﨑 晃
「ザ・マイクロコピー」という本の中で次のような一説がでてきます。 何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。ちょっとした「？」がどれだけユーザーの集中力を邪魔しているか。 アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。 そこで今回は「ユーザーに考えさせない工夫」を集めてみました。 それでは、いってみましょう！ ①補足はとにかくシンプルに 長い説明は読み飛ばされるもの。最低限の言葉におさえることでユーザーの心理的負荷を下げていきたい。■無印良品：初回起動画面のUI変更 繰り返しや補足は全て削除。「はじめてor復元」のシンプルな画面に進化。 ■アパホテル：クーポン画面のUI変更 挨拶/会員情報/長い注意書き…etcを全て削除。1番重要な｢
Mobile design trends to watch out for in 2020
Reading back this post from December 2018, it seems that not much has changed, and many of the trends are still happening: chromeless designs, gestures, gradients, deep flat, big bold fonts, and more, they are still here and will remain dominant during 2020. Here’s a closer look at some new mobile trends that will continue to grow in 2020: 1. Dark modeYep, I know that’s old news already, but you k
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
CASHのデザインプロセスが凄すぎて思わずブログを書いてしまった話
ここが決定的に違うんです。 微妙なサービスの多くは機能ドリブンのあやふやなゴールセッティングでデザインを始めてしまうため、要件がぶれてしまい「他行では○○だ」とか「マネジメントが××と言っている」という非論理的な要件をただ浴び続けるだけに陥りがちです。 どの高みを目指すかによってデザインの重要度は大きく変わります。 極論とりあえず1個の機能としてあればいいのなら、デザインなんかいらないわけです。存在することが付加価値なので。 凄さポイント：ゴールから逆算して論理的に要件が導き出されている 凄さ2：ありがちなデザインをなぞる ゴールが明確になり、要件が決まったとしても、その最適解を生み出すプロセスは違いを生む大きな要因になります。 特に金融系のようなどちらかというとオールドな業界の場合、新しいことやサービスをやろうとすると「新しいからOK！」的なデザインがまず出てくることが多いのですが、なぜ
検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
トップページの役割と機能を再考する - 株式会社真摯
御社Webサイトのトップページ、求められる役割や機能は変わってきていないでしょうか。2年前や5年前と比べて、利用状況は変わっていないでしょうか。 もともとトップページはむずかしい存在です。どういうターゲット層に向けてどういう機能を持たせるか、複数のターゲティングや目的の明確化といった交通整理が必要なページです。Webサイトの顔でもあり、社内政治も関与します。加えて、需要の高いキーワードでの検索流入が多いケースもあったりします。 この5年間トップページの構成やレイアウト、内容が変化していなければ、役割と機能を再考するチャンス その中で、例えばこの5年ほど大きくトップページの構成やレイアウト、内容が変化していなければ、その役割と機能を再考するチャンスです。 トップページ起点流入のボリュームやCV獲得状況の変化 →入り口としてのトップページ利用は増えているのか減っているのか、CVRはどうか サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GoodUI
All buttons variants for FIgma | Figma
東京オリンピックのボランティア応募ページが『webサイトでやっちゃダメな事を全部やっている』らしい「応募の時点で根性試されてる」 - Togetter
Amazon.co.jp: さよなら、インタフェース -脱「画面」の思考法: ゴールデン・クリシュナ (著), 武舎るみ (翻訳), 武舎広幸 (翻訳): 本
デザイン原則の実践｜dely design
