色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
Command Line Interface Guidelines
Contents Command Line Interface Guidelines An open-source guide to help you write better command-line programs, taking traditional UNIX principles and updating them for the modern day. Authors Aanand Prasad Engineer at Squarespace, co-creator of Docker Compose. @aanandprasad Ben Firshman Co-creator Replicate, co-creator of Docker Compose. @bfirsh Carl Tashian Offroad Engineer at Smallstep, first e
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
UIは閲覧画面からつくろう。｜Shino | Software Designer
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
父も母も最近のレジが複雑すぎて買い物に行けなくなってしまった→みんなの前で複雑なUIにまごつく怖さ
村井理子 @Riko_Murai 義母も義父も、コンビニには行けなくなってしまった。カードやポイント、画面操作が必要だから、怖くて行けないらしい。銀行もハードル高いらしく、毎度、予約して（！！）、行員さんに全部やってもらっているらしい。なんかもう、どうしたらいいのだろうな 村井理子 @Riko_Murai 翻訳家・エッセイスト。愛犬は長い棒を回収する琵琶湖の至宝。『射精責任』（太田出版）『ラストコールの殺人鬼』（亜紀書房）、『未解決殺人クラブ 市民探偵たちの執念と正義の実録集』（大和書房）、『犬と会話する方法 動物行動学が教える人と犬の幸せ』（慶應義塾大学出版会）、【最新刊】『ある翻訳家の取り憑かれた日常』（大和書房） rikomurai.com/%e7%a7%81%e3%8…
松屋の券売機が「最悪のUI」「使いにく過ぎる」と話題に 松屋に見解を聞いてみるも「回答は難しい」
飲食チェーンの「松屋」で使用されている券売機に、「最悪のUI」「触れる者全員に困惑を与える」など不満の声が集まっています。この件について松屋に取材を試みましたが、「回答は難しい」として回答は得られませんでした 2021年ごろから縦長画面の券売機が登場していましたが、最近になり新型券売機が登場。この新型の券売機が、特に使いにくいと話題になっています。 不満の内容は多岐にわたり、商品の宣伝のような大きなバナーが邪魔、「全取消」ボタンが間違えて押してしまいそうな位置にある、「ご一緒にいかがですか？」に表示されたサラダを購入するとサラダが2つになるケースがある、ボタンの配置がバラバラ過ぎるなどさまざま。 1つ1つの不備はそこまででもないのかもしれませんが、それらが積もり積もって全体として「使いにくい」と感じさせる要因になっているようです。中には、「わざと使いにくくしてモバイルオーダーにシフトさせた
「デザイナーいないんですか？」松屋の食券機のUIがどんどん悪化してきたがここに来て『極み』に到着した感が出ている
enden @enden_nix これまでも牛丼1杯と半熟玉子頼むだけで16回のボタン操作が必要だったりして異常だったけど流石にこれは無いと思う、個人経営のラーメン屋さんがなんとか導入したとかならまだしも大手全国チェーンの最新型機ですよ？？？？
Unity 2019.1 個人的に気になるポイント - もんりぃ is undefined.
はじめに blogs.unity3d.com 日本時間 2019/04/16 (Tue) に Unity 2019.1 が正式リリースされました！ ってことで、いつもの 個人的に気になるポイント をまとめます。 2019/04/16 (Tue) 23:37 Package Manager に関して追記 気になるポイント LWRP 正式版 Unity 2018.x の間はずっと Preview でしたが、ようやく Preview が外れて安心して利用できるようになりました。 既存のプロジェクトのマイグレートは大変ですが、Shader Graph のコトなどを考えれば対応を前向きに考えたいところです。 モバイル向けのパッチビルド どこまで行けるかは分かりませんが、パッチビルド的なことができるようになるのかな？ IL2CPP ビルドがクソ重い問題とかの光明になれば嬉しい。 Mobile Adap
FoursquareのUX・UI改善を書いたところ、創業者に届いて、人事からもメールが来た話 - 灰色ハイジのテキスト
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
もう管理画面のフロントコードを書く必要はありません、そう Viron ならね。 - Qiita
管理画面のフロントエンドコードを書く時代は終わりました。 Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。 そしてこれはOSSです。誰でも自由にお使いいただけます。 概要 Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。 APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。 経緯 私の会社では、大小さまざまな自社サービスが開発・運用されています。 管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。 エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。 運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。 さらに外から見たいときにスマホから見れないし、
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
iPhone Xを買ってよかったたった一つの理由と、そこから感じるWebの未来（えふしん） - 個人 - Yahoo!ニュース
iPhone Xのレビューを見ていると、やれノッチが邪魔だの、写真がきれいだの、ボタンがなくなって画面が大きくなっただのの主にハードウエアとしてのレビューが多い。 個人的には、これまで使っていたiPhone7 plusでも写真は十分満足していたし、animojiは残念ながら、人とのコミュニケーションには使ってないSMSだけの機能だったし、液晶の色は黄色くて別にきれいという印象はあまりない。Apple PAYが顔認証になるとローソンでsuicaを使う時に辛いんじゃないかと思って戦々恐々としてる。 （日吉の慶應義塾大学の協生館のローソンのsuicaの位置が高くて顔認証できるイメージがない） なのでiPhone Xの購入はしていたのだが、さほどワクワクすることなく、高いお金を使ったなぁと憂鬱なまま商品の到着を迎えた。 ところが実際に触ってみて、その印象は完全に変わった。 控えめに言って買ってよか
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
LV41 on Twitter: "こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv"
こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい https://t.co/dBlWhVj4Cv
NativeゲームとWebゲームでのUIデザインの違いと目指す価値「海賊コロンブスと消滅都市の比較」 | GREE Creators Blog
Home » UX » NativeゲームとWebゲームでのUIデザインの違いと目指す価値「海賊コロンブスと消滅都市の比較」 NativeゲームとWebゲームでのUIデザインの違いと目指す価値「海賊コロンブスと消滅都市の比較」 Posted on 5月 27, 2015 by NagasakiJiro 自己紹介 皆さんこんにちは。 Wright Flyer Studios 1部 Artグループ UI UXチームの長崎です。 現在、グリーでスマートフォン向けNativeゲーム開発におけるUIデザインを担当しています。 これまで、ソーシャルゲーム（Web/Native）だけでなく、コンシューマゲーム、アーケードゲーム、PCゲームなどのUIデザインにも携わってきました。 ジャンルとしては、アクション・RPG・アドベンチャー・スポーツ・ホラー・知育など、ほぼ全ての分野でUIデザイン経験があり、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ControlNet 1.1」の新機能まとめ！新しいモデルや改善点を紹介【Stable Diffusion】
ユーザーインターフェイス解剖学（公開版）
