CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
アイコンデザイン 7つの原則、優れたアイコンをデザインするために
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
No UIはデザインを進化させる新しい概念
Next Big ThingsとTech Crunchでも記事が書かれた「No UI」という概念が最近話題になっている気がします。 No UIとは「スクリーン(UI)の情報量や設計に頼らず、目的を達成すること」を軸にしたサービス体験を意味します。 流れの主流としては、テキストメッセージを使ったものが多いです。Operatorというショッピングサービスは、商品の検索機能や、オススメの商品が並ぶトップページ、カテゴリ別のナビゲーションなどは全くありません。 ”オペレーターに”テキストメッセージで自分が求める商品の特徴を送ることで、その要件に合ったものを返信して教えてくれるというものです。 スクリーンで四苦八苦するデザイナーの苦労Operatorのようなサービスの場合、ユーザーの要望を臨機応変に対応できるのでスクリーン上の複雑なケースを意識したデザイン設計が要りません。 が、現在、UIに関わるデ
片手操作特化のToDoアプリ JetDo
最近はZenyやListTimerなど、シンプルで使いやすいUIを突き詰めたアプリを作ってたけど、ついにToDoアプリまで作ってしまいました。 JetDoの無料ダウンロードはこちら 正直、ToDoアプリなんてありふれたものは絶対作るまいと思ってたんです。Storeにはありとあらゆる代用品があるし。そういうものはいいだろと。 じゃあ、なんで作ったか？ これは僕が人気ToDoアプリをたくさん試してどれも続かなかったからで、そもそも、それはなぜだろうかと疑問に思ったのが原点でした。 何度も何度も考えると、重要な要素が３つありました。 画面上部は片手で押しにくい ジェスチャーはタップと比べ疲れる タスク削除のサクサク感が重要 この３つの要素を解決して、余計な機能を削ぎ落とし、文字やボタンをでかくして生まれたのがJetDoです。ちょっと説明してみます。 画面上部は片手で押しにくい 僕はiPhoneを
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
心に響いた！良いデザインに欠かせない大切な10の原則 -Vitsœ
ロンドンの家具ブランド「Vitsœ」のインダストリアル・デザイナー「Dieter Rams」が提唱する「良いデザインに欠かせない大切な10の原則」を紹介します。 プロダクトデザインのお話しですが、ウェブデザインにも通じるものがありますね。 ten principles for good design 10の原則の英文はそのまま、あとは原文に沿って訳してみました。 翻訳にあたっては元ページのライセンスCC 3.0に従事しています。 Good design is innovative 良いデザインは、革新的。 ものごとを革新するための可能性は、尽きることはありません。技術の進化は常に革新的なデザインのために新しいチャンスを与えます。革新的なデザインとは常に技術とともに発展するもので、デザインだけで完結するものではありません。 Good design makes a product useful
ゲーム系UIデザイナーの勉強を２年近くやって思った12のこと。 - meycoのUX&UIデザイン技術メモ
あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。 WEBのUI設計よりも、明らかにゲームの方が難しい これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには？ゲームが終わったときに、どのような設計になればもう一度やってくれる？ チュートリアルは必要？やりこみ要素はどうする？ソーシャルとどうやって連携する？ポイント加算の条件は？アクショナブルフィードバックは？日常で使ってくれるような設計には何が必要？盛り込みすぎではないか？ などなど、考えることが多いです。 このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲ
「変更しやすいUI」を意識したデザイン | keisuke tsukayoshi
いくつかのサービスのデザインに関わって、最近思うようになったことを書いてみる。 要約すると サービスデザイナーはプロダクトの最終的なゴールを高めることを目的としてデザインすべき。あと最初から本気だすとUIの変更要求に対して簡単に舵がとれなくなる。 ということが言いたい。 ※新規サービス開発の初期デザインのお話です 最初から本気は出さない 最初から本気を出すと、最適なUIでないにも関わらずみんなが気に入ってしまうような間違った素敵デザインが生まれてしまったり、リニューアルしたくても作りなおすのに工数がかかりすぎるデザインが生まれる。一から百まで全部本気だすなというわけではなく、最適なUIがまだ手探りな状態においては凝ったデザインはPDCAサイクルを鈍化させてしまう、ということ。 素敵デザインをするのは、出来る限り最適なUIに目測をつけてしっかり検証を終えてからとりかかっても遅くはないと思いま
UIが変わる度に文句いう人 - 良いあそなすちゃん
iOSを始め最近あちこちのWebサービスでUIが変わり始めていますね。UIが変わる度に主にTwitterで文句を垂れる人がいるけど、じゃあ、お前の中でどうなったら最適なUIなのかをブログにかいてくれよ。って僕はいつも思ってる。UIが変わる度に条件反射でTwitter開いて「クソUI」の4文字をテキストエリアに叩きこむ余裕があるなら、UIが変わった理由を考えてほしいし、ちゃんと客観的な理由でクソであるんだったら「クソUI」の4文字を許容できると思う。WebサービスのUIが変わる度に思考停止気味な「クソUI」の文字列にうんざりするし、僕が1番危惧しているのは、思考停止の塊の連中がうだうだ言うせいで、Webサービスのユーザの幸せを願ってUIの改善に注力しているチームがUIを改善することに抵抗を感じてしまうとそれはもうWebサービスっていうかものづくりの破滅の始まりだ。 慣れたUIがいい人達、必要
Beenos （ビーノス） | 創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき
創業者がUX（ユーザーエクスペリエンス）の全責任を背負うべき. By beenos Posted in - news & Specialist on 10月 2nd, 2013 山本 郁也/Fumiya Yamamoto Design Fellow 株式会社ネットプライスドットコム Beenos本部 楽天株式会社や株式会社ビジネス・アーキテクツを経て株式会社ネコメシへ合流後、並行してBeenosへ参画。 Beenos本部にて、IA/UXデザイン、ユーザビリティエンジニアリングの領域から、Webサービス開発支援を行う。人間中心設計推進機構正会員。 ヒューマンインターフェース学会正会員。UX Tokyo所属。 スタートアップ時に創業メンバーが知っておく最低限のＵＸ構築法とは？ スタートアップのチーム・サービスを今までにたくさん見てきて、デザインを構築するにあたり陥りがちな落とし穴と最低限
富士通らくらくホンに見る高齢者に使いやすいUIのあり方 - A Successful Failure
2013年10月02日 富士通らくらくホンに見る高齢者に使いやすいUIのあり方 Tweet 高齢者にも使いやすい携帯電話といえば、富士通のらくらくホンシリーズが有名だが、総務省のICT超高齢社会構想会議の第4回WGにて、富士通研究所の石垣一司氏が高齢者のICT活用について 富士通（研究所）の取組ご紹介と題し、同社の取り組みの紹介を行っている。 非常に示唆に富んだ良い資料であるので、本エントリでは同資料を引用して、高齢者に使いやすいUIの勘所について考えてみたい。本エントリ内の図表は同資料からの引用である。 加齢に伴う身体機能の低下 加齢に伴い身体能力が低下することは誰もが体感することだが、具体的には次のような形として現れる（高齢者にとってのユーザビリティ）。 視覚機能の低下 老眼による近視力の低下 暗順応の低下 視野の狭まり 短い波長の色（青、緑）の感度低下 聴覚機能の低下 高い周波数帯の
デザインに立体表現を取り入れるときのセオリー×6 | ベイジの社長ブログ
iOS7の登場で、フラットデザインへの関心はますます高まっていることでしょう。 ここではそんなトレンドは一切無視して、UIデザインにおける立体表現を行う上で、おさえておくべき大切なポイントをまとめてみました。これらをマスターして、時代に逆行するゴリッゴリの立体表現を行えるようになりましょう。 セオリー１：現実世界の「光源」の基本ルールを守る 唐突ですが、この2つのボタン、立体表現としてどちらが正しいと思いますか？ 左側、「A」のボタンには、以下のような光源の矛盾があります。 ボタン本体の影は、右下に付いている。つまり、光源は左上。 へこんだAの影は、右上に付いている。つまり、光源は右上。 ドロップシャドウは、真下に付いている。つまり、光源は真上。 一方のBは、すべての要素の影が、光源が上の表現になっています。つまり、正解はBです。そしてこれが、現実世界での「光源」（＝影）の基本ルールです。
第1回 気持ち良さはどこからくるのか～身体に近づくUIへ | gihyo.jp
UI/UXは進歩の激しい領域のために、時に前例なしの設計が求められることがあります。たとえば近年の例では、スマートフォンやタブレットが急速に普及し、まだノウハウのない中でこれらのデバイスに特化したUI/UXが求められました。これからも誰も触れたことないデバイスや状況でも、的確な設計を行うことが求められます。 そういった未踏の領域では、先端の研究領域に注意を向ける一方、UI/UXの原点を学ぶ必要があります。本コラムではインタラクションの研究者という立場から、これまでのUI/UXにおいて何が本質であるかを知るのと同時に、これから向かう未来を見据えながら、今何を学ぶべきかを分析、考察していきます。そしてUI/UXに携わる人に少しでもUI/UX設計の「なぜ」に答える材料になればと思います。 効率だけでは語れない道具の設計 スマートフォンやタブレットなど、高性能な端末を持ち歩く時代となりました。ネッ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
限界に達したGUI - 心のうち
「GUIでできることは、もう限界に達しているのです」という言葉には、なかなかどきっとさせられた。先日、監訳者の @nobsato さんが献本くださった「モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド」(Rachel Hinman著／丸善出版)の中の一節だ。 私が最初にパソコンを触り出したのは1991年(学校で)、ネットをつなげて本格的に使い出したのは1996年(会社で)。本格的といったって私が使っていたのは英文タイプとかOfficeとかFilemakerとかクラリスワークスとか(懐かしい…)のビジネスアプリ中心なんだけど、この頃にパソコンのGUI環境はずいぶん整備されたと、一般ユーザーなりに記憶している。 それでも当時はいろいろ手つかずのところがあったので、ド素人ながらコマンドラインインターフェイス(CLI)に触れる機会ももつに至った。会社のWebサーバーにアクセ
直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
ユーザーエクスペリエンスとは何か？【インタビュー】ホワイトハウスも注目のUXデザイナーJanice Fraser氏（前編） デザイン会社 ビートラックス: ブログ
世界中で講演を行い、ホワイトハウスでもプレゼンテーションを行ったという「UXの第一人者」Janice Fraser氏。 UXに特化する会社を立ち上げた彼女の経験・バックグラウンドや、彼女が語る「Lean UX」などに関しては同記事の後編に譲るとして、まずは彼女が定義する「UXとは何か？」ということや、よく混同されがちな「UIとUXの違い」、更には「国を超えるとUXに違いはあるのか？」「良いUXを測るための指標」について伺った。 ◆目次（前編）◆UXとは？混同されがちなUIとUXUXに国ごとの違いはあるか？良いUXかどうかを測る指標は？◆話者プロフィール◆ ゲストトーカー：Janice Fraser LUXr, Inc. CEO @clevergirl UXデザイナー、起業家。UXを重視したウェブサービスのデザインを手がけるAdaptive Path社の共同創業者、初代CEO。 15年に渡る
Android版FFのレビューは、馬鹿にするどころか大いに参考にするべきものなのではないか: 不倒城
こんな記事を読んだのだが。 【今週の人柱】800円！初代FFのAndroid移植版が不親切過ぎて、ある意味ゲームの進歩を感じた件 はてなブックマーク： 【今週の人柱】800円！初代FFのAndroid移植版が不親... 思うに、この記事を読んだ「昔からのゲーム好き」は、余りに簡単に優越感を煽られ過ぎだと思う。 「チュートリアルがなけりゃゲームも遊べねーのかよ」と嘲笑するのは簡単だし、ゲームレビューとして考えるとお粗末なのも確かだし、これはもしかすると炎上マーケティングなのかも知れないが、それでも「ただ嘲笑する」よりは建設的な読み方、というものがあるのではないか。 この記事が純粋な「架空のプレイヤー」のネタ記事である、という可能性を考えず、敢えて額面通りに読んでみる。 チュートリアルが無い！操作がわからない！ 左下にうっすらと浮かび上がっているマークが十字キー替わりなのですが、初見では意味が
最良のインターフェイスとはインターフェイスを持たないことだ - Nothing ventured, nothing gained.
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
