タグ

デザインと設計に関するihokのブックマーク (4)

  • 外国人から見た名前入力に関するBADなUIデザイン|CULUMU / インクルーシブデザインスタジオ

    こんにちは!ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日語名のフォーマットに当てはめるって難しい!今回私が紹介するのは「外国語名を日語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個

    外国人から見た名前入力に関するBADなUIデザイン|CULUMU / インクルーシブデザインスタジオ
  • CSS設計における、すべてがコンポーネントであるという誤謬

    後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB

    CSS設計における、すべてがコンポーネントであるという誤謬
  • これぞプロの実装テクニック!フロントエンドのデベロッパーはCSSで実装する時に何を考えるか

    ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。 下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインのディテールは脇に置いておく 配下ページのレイアウトを実装する時に考えること ディテールを掘り

    これぞプロの実装テクニック!フロントエンドのデベロッパーはCSSで実装する時に何を考えるか
  • 世の中の謎設計、謎行動

    クソどうでもいいことなんだけど、人に話すとウザがられるので便所に落書きする。 なんか意外とブックマークされたので、書き足りなかった思いを追記する。 横断歩道のデザイン歩行者からみて横縞模様。 そこを歩いて良いというサインなら、歩行者からみて縦縞にして欲しかった。 追記 横断歩道が近くにある菱形のやつ、あれから横断歩道が連想できない。 どうみても武田の埋蔵金でも埋まってんのか?ってしか思えない。 正解が○で不正解が×特に○のほうが謎。 ゼロみたいに見える。 正解が1で不正解が0かな?って思ってしまうじゃん。 正解の正の字も、TRUEのTも、○より×に似てない? 追記 ご丁寧に○は赤、×は青とかにしてくれる人いない? 赤は赤信号、青は青信号を連想しちゃうから、余計に混乱する。 車のアクセルとブレーキ右足で踏み分けろとか、そりゃ間違うと思うよ。 普通に考えたら、片方が足、もう一方が手じゃないか?

    世の中の謎設計、謎行動
  • 1