はてなブックマーク

こんにちは。ひらやま（@rhirayamaaan）です。 この記事は、GLOBIS Advent Calendar 2020 に参加している記事です。 さて、Atomic Design という言葉が巷で話題になってからだいぶ日は経ちますが、私の「Atomic Designってデザイナーには難しくない！？という話」という記事の LGTM 数も現時点（2020/12/08 時点）でゆるやかに増加傾向にあり、まだまだ Atomic Design を考えている人たちは多いのではないかと思います。 そんな中で、昨今「OOUI」という言葉をよく耳にするようになりました。 ソシオメディアの上野さんが「オブジェクト指向UIデザイン」という本を刊行されたことで、より一層この言葉が世に広がったように思えます。 オブジェクト指向というものを UI デザインの領域に持ってくることで、エンジニアがオブジェクト指向で

import React, { FC } from 'react'; interface Props { checked?: boolean; } const Checkbox: FC<Props> = ({ checked = false }) => ( <input type="checkbox" checked={checked} /> ); export default Checkbox; 超最低限で書くと、こんな感じになります！ checked という Props を用意して、それを <input> に流しています。 流れてくる boolean によって、 checkbox の check 状態を制御できるようになっているわけです。 外部から <Checkbox checked={true} /> とすれば「check された状態」になりますし、 <Checkbox checke

Atomを作ったことありますか？ 以前、「Atomic Designってデザイナーには難しくない！？という話」という記事を書きまして、大変反響があり、今でも時折いいねをいただいていて大変嬉しく思っています！ この反響からも、やっぱり世間的にこの手の話題はみんな一生懸命悩みながら、わからないながらに作っているんだろうなーとなんとなく感じています。 そんな私の記事ですが、前はAtomsからPagesまでの全体の話をしました。 それゆえに、実際に運用できるレベルの、超具体的なAtom自体の実装についてはそこまで触れませんでした。 なので今回は、堅牢で使いまわしやすく運用しやすいAtomをガチで作ったらどうなるのかを記事にしてみたいと思います。 「Atoms」とはどんな存在なのだろう？ 「車輪の再発明」という言葉がありますね。 しれっと皮肉を言っているこの言葉ですが、確かになにか家具を作るときに、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? デザイナーにもエンジニアにも取っつきづらいHTML/CSS 結構嫌われ者ですよね。HTMLとCSS。 デザイナーからは「え、コードじゃん。やだわ。」とシンプルに言われたり、エンジニアからは「CSSの書き方が独特すぎてちょっと。。。」なんて言われたりします。悲しい。 「ではHTMLとCSSを極めてマークアップエンジニアになるかー」とそれらを極めた人は、現状のWebの進化に置いてけぼりにされて飯が食えなさそうな雰囲気がプンプンします。（私のことですね！） デザインリサーチをしこたま学んでUXデザイナーの道に進むか、オブジェクト指向をしこたま

Reactやプログラミングがわからない人のために、上記で書いたコードがどうなっているのか少し丁寧に説明していきます。 まず、Button.jsxに書かれている<button>というのはHTMLの<button>として使っていますが、大文字で書かれた<Button>というのは私が勝手に定義したコンポーネントになります。const Buttonという箇所によって、コンポーネントの名前が決まりました。 （Reactで書く<button>とHTMLで書く<button>正確には同じものではないですが、ここでは同じものという認識でOKです） その自身で作ったButtonコンポーネントを<Button>という形で使っています。これもReactならではの機能です。 その<button>の中にonClickという記述を書き、その後ろにHTMLで属性値を入れるのと似た形で自分の好きな処理を入れています。 今

余白を制する者はデザインを制する らしい。 いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。 「余白 デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 こちらはLIGの記事です。 これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。 最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、 それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。 印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ