Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
ビジュアルデザインにおける近接の法則
互いに近くにあるデザイン要素は関連があると認識される。その一方で、間隔をおいて配置された要素は別々のグループに属していると認識される。 Proximity Principle in Visual Design by Aurora Harley on August 2, 2020 日本語版2021年4月2日公開 ゲシュタルトの法則は、人々が世界をどのように視覚的に認識しているのか、具体的には、特定の要素が同じグループに属しているのかどうかをどのように判断するのか、を理解しようとしたゲシュタルト心理学者によって、20世紀前半に発見された。そこには、近接、類同、閉合の法則が含まれていて、そのどれもがデジタルインタフェースのビジュアルデザインにおいて重要だ。その後も、グループ化についての法則（共通領域など）は元のゲシュタルト法則のリストにさらにどんどんと追加されていっている。 UIデザインは近接な
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
GitHub Dark Mode is Too Dark - blog.karenying.com
GitHub Dark Mode is Too DarkIf you hate it too this is why. Using color theory to show why GitHub dark mode is disappointing Shared on Hacker News and Twitter This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement. So I flipped the switch. My immediat
bosyuの新機能開発における、デザイナーの役割｜ムラキ | Muraki｜note
先日、bosyuというサービスで３つの新機能「メッセージ」「決済」「検索」をリリースしました。いずれもUIデザイナーとして開発に携わった立場から、どんなことを考えて、どんなプロセスを踏んだのかについて、一区切りついたこのタイミングでまとめてみたいと思います。 こんな人は読んだらいいかも：bosyuがどうやって作られているか知りたい人、インハウスのデザイナーを雇おうかなと思っている人、インハウスのデザイナーになってみたいなという人、などそもそもデザイナーは何をしてくれる人なのか世で「デザイン」と一口に言われているものは、実はとても幅が広いです。ロゴの世界ではたった1pxの線幅に命を注ぎ込みますし、印刷の世界では素材にこだわっていくつもサンプルを見比べたりします。世界によって求められる役割は違いますし、デザイナーの数だけ流儀や流派があり、サービスやプロダクトの段階によっても変わってきます。 で
Lookbackを使ってユーザビリティテストをしたらとても良かった話｜hagipen
この記事は PLAID Advent Calendar 10日目のエントリーです。 突然ですが、みなさんのオフィスにユーザビリティテストの設備はありますか？ ユーザビリティテストを行う上で環境づくりは大切な要素のひとつです。 しかしながら、テストを行う専用部屋などの設備が用意できている環境は少ないのではないでしょうか？ 弊社でも専用部屋などの設備はなく（そもそも部屋が存在しない）、「チームでユーザビリティテストにトライしてみよう！」となったものの、実際にどう行うべきか悩みました。 できればチームメンバー全員に参加してほしいけれど、たくさんの人で被験者を囲むのは避けたい。かといって、場所を借りるほどでもない…！ と唸っていたところ、suさんから「Lookbackというサービスがあるよ」と教えてもらい、調べてみることにしました。 🤔Lookbackってなに？ Lookbackは、オンライン上
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
Figmaのオートレイアウトを完全に理解した話｜UI/UXデザイナー うっくん
どーもーUI/UXデザイナーのうっくんです。 ちょっと前にFigmaにオートレイアウトという機能が追加されました。 最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。 オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイズしなおさないといけなかった。めんどくさいので、プラグインなどを使っている人が多かったこれがとても実用的で、業務効率も上がりそうなので、すでに実戦投入しています。 かなり使いこなせてきたので、そのポイントを以下の３段階に分けてご紹介していきます。 1. 基本機能, 2. 発展系、そして、3. 現時点ではできないこと これを読めば「オートレイアウト完全に理解した」と言えるようになります。Figmaのオート
UXArchive - Made by Waldo
Introducing Sessions: the latest product from Waldo!
新卒採用：職種紹介：デザイン系 - UI/UXデザイン｜採用情報｜任天堂
UIとは「ユーザー・インターフェース」の略で、UXは「ユーザー・エクスペリエンス」の略です。 インターフェースは「接点/接触面」、エクスペリエンスは「経験/体験」を意味します。 ゲームにおけるUI/UXデザインとは、「ゲーム」と「遊び手」を仲介する絵や文字の表現を通じて、心地よいゲーム「体験」を作りだすこと、とも言えます。 任天堂におけるUI/UXデザイナーの具体的な制作物は、 ・タイトル画面やメニュー画面 ・ゲーム中の体力ゲージやボタン、マップ、アイコン ・フォントやメッセージ ・勝敗の結果画面（リザルト画面） などとなります。 これらのUIを通じて、お客様にストレスなく心地よいゲームプレイを提供することがUI/UXデザインの主な役割です。 特に、ゲームは娯楽品であって生活必需品ではないため、わかりにくければ簡単に手放されてしまいます。そのうえ、何百万人というプレイヤーがUIを何百回、何
より良い検索フォームのための９つのベストプラクティス
検索ボックスは入力フィールドと送信ボタンの組み合わせです。検索ボックスにデザインは必要ないと考える人もいるかもしれません。たしかに、たった２つの単純な要素でしかありません。しかし、コンテンツが多いサイトでは、検索ボックスは往々にしてもっとも頻繁に使用される要素なのです。 複雑なサイトに遭遇したとき、ユーザーは労力を使わずに素早く最終目的地まで辿り着けるように、すぐに検索ボックスを探します。ですから、検索ボックスのデザインやユーザビリティは重要なのです。 この記事では、ユーザーが目的地に辿り着くための時間を節約するために、検索ボックスをどのように改善できるかを見ていきます。
見やすいサイトを作るときに最低限チェックしたい６項目
いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ
デザインやレイアウト、見せ方、使い勝手が参考になるオンラインショップやプロダクトページのまとめ
ストアページ、プロダクトページ、価格表ページ、チェックアウトページなど、オンラインショップやプロダクトページのレイアウト、商品の見せ方、UI周りの使い勝手が参考になるページをコレクションしているサイトを紹介します。 Store Pages ローンチして間もないサイトですが、そのコレクションは充実しています。 ストア、プロダクト、価格表、チェックアウトはそれぞれ別ドメインを取得されているので、気合いが入っています。
How Our CSS Framework Helps Enforce Accessibility
Spot the difference….You can’t! To a sighted user it appears we have two identical button elements. A user interface control not only needs to look like a certain control, it must be described as that control too. Take for example a button, one of the simplest of controls. There are many ways you can create something that looks like a button, but unless you use the actual button tag (or button rol
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
THE GUILD
What We Design私たちは、幅広い視野と多角的な視点で物事の本質に向き合い、 課題定義からグロースまで一気通貫したコミットを通して、 さまざまな業界に対して価値のあるクリエイティブを提供しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chakra UI Figma Kit | Figma
色彩センスのいらない配色講座
GitHub’s dark mode is too dark
GoodUI
