はてなブックマーク

この記事は Webアクセシビリティ Advent Calendar 2019 の 14日目の記事です。 はじめに 2016年で新卒で入社し、今年9月までの3年半強ほど、ニコニコ生放送のUIデザインの開発をしていました。 UIデザインの責務としては、見た目やインタラクションの他、コンポーネントのHTML定義/CSS実装までやっていました。若干フロントエンドにも入り込む、デザイナーとしては珍しいケースだったかもしれません。 (登壇記事 => ログミー: コンポーネント指向のフロントエンド開発において、デザイナー×エンジニアの協業を通して学んだこと) ニコ生フロントエンドではアクセシビリティにもある程度配慮をしてHTML定義をしており、エンジニアさん-デザイナー共同でWebアクセシビリティの勉強会や、WAI-ARIA勉強会も開かれていました。 今年9月から、ニコ生を離れ、特設ページ(いわゆるLP

結論 Google Fontのフォントから選べば変わらない 最近Google Fontに日本語のフォントも追加されたので、それを使う やりかた フォント選択から「その他のフォント」を選ぶ 日本語フォントを検索してリストのフォントをクリックし、マイフォント欄に追加されたことを確認する Google Fontにある日本語フォント一覧 https://fonts.google.com/?subset=japanese 「Noto」「Kosugi」「M PLUS」「Sawarabi」で検索して出てきたのを追加しておくと吉 (おすすめはKosugi, Notoあたり) フォント一覧に追加されるので使用する 画像書き出し・スライドショーでもフォントが変わらない!! デバイスフォントが使えないのは相変わらずなんですが、多少はマシになると思います。

直近だと…（2022/01/13追記） あれから4年近く経ち、私も転職したことで、デザイナーではなくなりました…。 この記事がたまに見られてるっぽいので、一応アップデートしておきます。 現代だと、gap という、まさしくこの記事の意図を表現するプロパティが出来たため、そちらを使うことを推奨します。 この記事の内容で書かれていた方は、コード内を margin-top で検索すれば、置き換えはそんなに難しくないのではないかと思います。 この記事は... 「CSSで「余白」を制してデザイナーに好かれよう」というとても素晴らしい，本当に有難い記事が上がっていたのを見て，じゃあデザイナー(主語がでかい)は余白をどう考えているのかを，CSSを書いている一デザイナーの身から書き下してみよう、というものです． 「余白」の意味の書き下しと『marginは下ではなく「上」で取る！』ことが多い理由の分析 「余白

この記事はドワンゴ AdventCalendar 2017の17日目の記事です。 dwangoアドベントカレンダー17日目を担当させていただきます @ln-north です。デザイナーとして2016年度新卒として入社し、もうすぐ2年になります。 エンジニアさんで埋められるカレンダーの中、ひっそりとデザイナーも参加させていただきます、どうぞお手柔らかに…。 はじめに ここ何年かのWebフロントエンド界隈の動きは非常に大きくそして速く、デザイナーから見ても様々なパラダイムシフトが起こっています。scssやwebpackからHTML5やCSS3まで…本当に大変ですよね。 特に最近はReactやVueなど、 コンポーネント指向 のWebシステム開発が発展を遂げています。Web Componentsなども含め、流れを見てるとおそらくWebはこのコンポーネント指向に向かい、しばらく進んでいくのだろうと

なやみ 下みたいなflex-grow: 1で作った子要素を、親要素と同じ高さにしたい つらい 試しに子要素を height: 100% にしてみると、まぁそりゃ子要素見ちゃうよね じゃあ親要素を100%にすればいいじゃん、としても、その親の高さを見ちゃうのでflex-grow台無し。そんなに人生甘くない ここで子要素100%にしても残当な結果 ひらめき The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block position: relative / absolute の関係にすれば、子absol

概要 こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい pic.twitter.com/dBlWhVj4Cv — LV41 (@lV41_) 2017年5月26日 ちょうど2ヶ月ぐらい前に同じことを思い、改善策を考えていたので、現実的で筋が良さそうな2つの案を紹介します。 改善策1 : 機能を表すラベルとその状態を表すトグルボタンのセットにする ボタンという機能をもちつつも、その表面に状態を表現することが混乱させてしまう原因なので、機能と状態に分離し、各々を明確に表現することで改善します。 改善策2: ツールチップを用いてそのボタンのアクションを明記する 状態は画面を見てわかっていたりするので、本当にユーザーさんが欲しい情報はそのボタンの機能だと考えると、状態は置いといて、マウスホバー時などにツールチップを用いてアクションを明記することで改善します。ホバー状態があ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?