知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
アプリのアップデート100本ノックから学ぶUI改善のヒント｜宮﨑 晃
はじめまして。HR業界でアプリマーケティングをしている宮﨑といいます。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 https://twitter.com/yositune12345 noteでは10月の1ヵ月間で100本のノックをする中で感じた「〇〇できたら、ユーザー体験が良くできそう！」というトピックスを投稿します。 どうやってるのか？①Playストアの設定で自動更新をOFFに ②アップデート待ちのアプリが溜まる あとは一通りスクショを残してからアップデートし、UIの変更がないかを見比べていきます。 それではいってみましょう！ ①確認画面で離脱させない確認画面で何か不安になった時、画面を往復させられると面倒な気持ちに。あらかじめ不安になりそうな要素を揃えておいて離脱させな
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
2-3. UI/UXデザイナーを目指す人向けおすすめの勉強法 | デザインを学ぼう！chot.designの使い方
2-3. UI/UXデザイナーを目指す人向けおすすめの勉強法UIデザインUXデザイン未経験からUI/UXデザイナーを目指す人に向けて、おすすめの勉強法を解説します。当サイト内のレッスンだけでなく、独学する際のコツ、参考の本なども紹介します。 公開日：2019/05/08最終更新日：2021/01/28 1.UI/UXデザイナー、未経験からでも大丈夫？「未経験からでもUI/UXデザイナーになれますか？」と質問されることがあります。その答えはもちろん「YES」です。 しかし、何もしないでUI/UXデザイナーになれるわけではありません。ツールの使い方や制作の流れを勉強して何かを作れるようにならなければ、会社で働いたり依頼を受けて仕事をすることはできません。 またWebデザイナーに比べると求人の数も少ないため、ハードルは若干上がります。 では、どうやってスキルを身に着けていけば良いのでしょうか？
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
UIデザイン超初心者向け！動画でわかる「はじめてのUI - 入門編」を公開しました👍｜カイクン🤘
Cocoda!では超初心者向け、これからUIデザインをはじめたい人向けのコンテンツ、「はじめてのUI - 入門編」を公開しました🎉 動画を使ったことで、誰でもシンプルに迷うことなくデザインをはじめられるコンテンツです💡 ↓↓さっそく始めたい方はこちらから👍↓↓ https://cocoda-design.com/projects/36 ※すぐにコンテンツが始まります ー ー ー ー ー ー ー ー ー ー ー ー ー ー ー リリースした「はじめてのUI - 入門編」は以下のURLからチェックできます！ ↓↓↓↓ https://cocoda-design.com/projects/36 ※すぐにコンテンツが始まります これからもCocoda!をよろしくお願いします🙏🙏 ご意見・ご質問などありましたら、僕のアカウントまで！
ダメダメだった大学生が、たった３ヶ月でデザイナーへと爆速成長！地道な「UI模写」で見つけた生きる道 | CAREER HACK
デザインにおいて全くの素人だった大学生が、ひたむきな自主学習で一躍、時の人に。春田雅貴さん（23）は、他社サービスのデザインを完コピ。自ら分析・発信し、話題となった。なぜ彼は泥臭い努力を？ そこにあったのは「社会とつながりたい」という強い意志だった。 なぜ、デザインの素人だった大学生が注目された？ デザイン界で、ちょっと名の知れた大学生インターンがいる。 それが春田雅貴さん（23）さんだ。彼は横浜国立大学・経営学部の大学4年生（2018年1月現在）。クラウド会計ソフトのfreee社でインターンのデザイナーとして働く。じつはつい１年前までデザインに関してまったく素人だった。 彼を有名にしたのが「UIトレース」という取り組み。 他社のWebサイト、ランディングページ（LP）、プロダクトにおけるUIをゼロから模倣（模写といってもいい？）。そのポイントをtwitterや、ブログで発信していったのだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
yui.design