誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
今年導入したソフトウェア、魅力的だったソフトウェア（2023）｜usagimaru
11月のブラックフライデー／サイバーマンデーセールもあり、今年もMac appを中心にいろいろなソフトウェアを導入してみました。中にはきっと使わなくなってしまうものもありそうですが、これは使う使わないだけでなく、実装されているUIの研究をする目的だったり、あるいは単にクリエイターへの「応援」としてでもあったりします。いくつかピックアップしてみます。 Procreate Dreams (iPad)Procreate DreamsはiPadOS向けの2Dアニメーション制作ソフトウェアです。iPadで一番有名なお絵かきソフトウェアの一つ、Procreateを作っている会社が新たにリリースしたアプリケーションです。 私はアニメーション制作をやるようなクリエイターではないのですが、Procreate DreamsはとにかくUIがよくできていて、まずワクワクしてしまったというのもあるのですが、やっぱり
認知負荷および認知負荷理論 (Cognitive Load Theory) をもう少し正確に理解するための心理学研究・知見の紹介
認知負荷および認知負荷理論 (Cognitive Load Theory) をもう少し正確に理解するための心理学研究・知見の紹介 この記事の目的 ここ数年で、ソフトウェア開発やプログラミングの文脈で、「認知負荷」 および 「認知負荷理論」 という用語をよく見聞きするようになりました。私が今思い出せるだけでも、以下のような書籍や Podcast で重要なキーワードとして取り上げられています。 A Philosophy of Software Design, 2nd Edition チームトポロジー 価値あるソフトウェアをすばやく届ける適応型組織設計 プログラマー脳 ～優れたプログラマーになるための認知科学に基づくアプローチ fukabori.fm 102. A Philosophy of Software Design (3/3) w/ twada この「認知負荷」ですが、少なくとも近年見聞
ゲームUIブログ
Search for: Cancel 異世界グルメ食堂 異世界転生×モンスター飯 超次元彼女: 神姫放置の幻想楽園 ビックリマン・ワンダーコレクション 星になれヴェーダの騎士たち テンペスト 機兵とドラゴン サバイバーガールズ パンドラノヴァ 熱戦少女 ウォッチャー・オブ・レルム プリストンテールM デーモンスクワッド 異世界傭兵団のそだて方 ダークオリンポス：闇の女神 ファントム オブ キル -オルタナティブ・イミテーション- 1 of 87123…87次へ »
とある道の駅に設置されている食堂の券売機『UIってこういうのでいいんだよこういうので』って感じですごく良かった「おお！解りやすい！」
なぜ使われないダッシュボードが作られるかという話 - satoshihirose.log
はじめに 最近、ビジネスダッシュボードの設計・実装ガイドブックという書籍が出版された。今まであまりなかった視点から書かれたデータに関する本で面白く読んだ。 ビジネスダッシュボード 設計・実装ガイドブック 成果を生み出すデータと分析のデザイン 作者:トレジャーデータ,池田 俊介,藤井 温子,櫻井 将允,花岡 明翔泳社Amazon 作ったダッシュボードの利用が進まず、虚しさを覚えた経験がある人は多いと思う。どうしてそうなってしまうのか、自分の経験を元にまとめたいなと思ったのでまとめる。 なぜ使われないダッシュボードが作られるか なぜ作られたダッシュボードが使われないかと言うと、基本的にはそのダッシュボードがそんなに必要なものではないからだ（社内周知がうまくない、ツールの使い方がわからない人が多いなどの理由もあったりするがここでは無視する）。 必要のないダッシュボードが作られてしまう状況に関して
いらないダッシュボードを作らないようにしよう｜データ分析とインテリジェンス
もっとも注目されたUIデザインのテクニックの総まとめ
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
気温には棒グラフを使わない - データ可視化ミニ講座（７）｜荻原 和樹 / Kazuki OGIWARA
棒グラフと折れ線グラフは似た表現方法です。しばしば交換可能なものとして使われる両者ですが、使うべきポイントには違いもあります。 代表的な例が気温です。気温は棒グラフではなく、折れ線グラフで表現するのが正しいです。 そもそも棒グラフは、棒の長さ（≒ 棒部分の面積）の比率と数値の比率を対応させることで視覚的に数値を比較するものです。したがって、数値が2倍なら棒グラフの長さも2倍になります。棒グラフにおいて、縦軸を省略してはいけないのはそのためです。 しかし、気温において「X倍」に意味はありません。気温が10℃から20℃に上がっても「10℃上がった」とは言いますが「2倍の暑さになった」とは言いませんよね。気温とは、水が凍る温度を0℃、水が沸騰する温度を100℃とする相対的な指標です。気温がマイナスになることはしばしばありますが、これは本当に何かがマイナスになっている、失われているのではなく、水が
AI技術を活用したWEBデザイン：ChatGPTとMidjourneyの活用例 - SO Technologies 開発者ブログ
ジェネレーティブAI時代のUIパターンを考える｜こぎそ
【悲報】広島現代美術館のトイレにまたしてもイシキタカイ系デザイナー自己満足の無意味ピクトグラムが設置された上に無意味な能書きまで追加される。「男」「女」と横に明記されている分まだ救いはあるか
公(広島市) @kou_mamorukai 元「広島市を護る会」代表。 #広島市 に #ヘイトスピーチ 条例を作ろうという外部団体ができたので、条例制定反対の民意を届けるため会を立ち上げました、が、状況が落ち着いたので活動休止しました。 行政のHPからスクショで抜くことがありますが転載自由。もともと自分のものでもないですし🙄
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」
これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
さっぽろ東急百貨店のUNIQLOの広告が文字の色が全部同じで文字組みだけなのにぱっと頭に入ってくる「文字組みの凄さだ」
Webサイトやスマホアプリに使用されているさまざまなアイデアを実現する小さなディテールのまとめ -CallToInspiration
