はてなブックマーク

「社会的意義の高い仕事がしたい」 「社会課題の解決に携わりたい」 のようなフレーズを聞いたり使ったりしたことはないでしょうか？ 私は数年前から医療業界の会社に勤めているせいかよく聞きますし、言っていました。 ただ最近は「"社会課題" とはなんだろう？社会的意義の高い低いってどうやって決まるんだろう？」などを考えるようになりました。結構こういったフレーズは多くの人がなんとなく「医療・環境問題など = 社会的意義の高い」と捉えていて、知らず知らずの内に囚われているのではないかと考えています。 ので私自身がこれを考え直してみようと思ったきっかけと、もし「社会的意義の高さ」に囚われている人がいましたら一回自分の好きなように行動してみるのもアリかも、とうっすら思えるようなことを書いていければ思いこの記事をしたためております。 病気の自分を救ってくれたのはエンタメだった考えが変わるようになったきっかけ

Figma Config 2022 でも様々な機能が出ました。 Individual Stroke, Absolute positioning, Component Properties… これに付随してチュートリアルを見ただけでは分からない隠れたショートカットなどもたくさんあります。 この記事ではそんなテクニックたちをガッと紹介していきます。 パディングを昔ながらの一つの入力欄で操作する方法 Padding は今回の Auto Layout の変更で Vertical と Horizontal で二つに分かれてしまったのですが、⌘を押しながらクリックすることで一つになります。 Absolute を使うときはちゃんと Constraints を指定しようCSSの値に反映されるのもそうですが、Auto Layout な Frame のサイズが変わった時にちゃんと意図通りの位置になるように指定

先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。 せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。 「エンジニアに愛されるデザイン」とは？私は二つ大きい基準があると思っていて、それは デザインの意図を掴みやすい デザインが変わった時の変更が容易 があります。そして前者は Structured Design, 後者はデザインをシステム化していくことによって達成できると考えています。 いきなり Structured Design という耳慣れない単語が出てきたので、まずはそこを解説しますと、これは2021年の Schema という Figma のデザインシステムのカンファレンスのキーノートで紹介された概念なのですがデザインには Freeform と Structured という二

Variants は大変便利な機能ですが、コンポーネントの状態が増えてくると組合せ爆発が起こり、ものすごい数になっていきます。 Shopify Polaris の Buttonそうやって頑張って作ったコンポーネントの Variants に変更が入った時に一つ一つ変更を加えていくのは中々の苦行ですし、変更漏れが起こる可能性もあります。 そんな時に便利なのが「ベースコンポーネント」です。 発想は至極シンプルで Variants で定義されるコンポーネントのデフォルト状態ものをコンポーネントとして作り、Variants の一つ一つはそのコンポーネントのインスタンスとして作成します。 こうすることによって、このベースコンポーネントを変更するだけで Variants 全てに変更が伝わる訳ですね。 良さそうに聞こえますがデメリットもあります。 それは 扱いが複雑になる それに伴い存在すべきでないコンポ

自分は2017年から React と共にキャリアを歩んできたので長らく "フロントエンドエンジニア" としてのアイデンティティを持ちながら仕事をしていたのですが、去年末辺りから仕事で Flutter を使って開発をするようになりました。 始めてビックリ、React とかなり書き味は似ているし、培った経験が活きることが多かったです。 また、詳しくは後述しますが、モバイル開発にも参加できるようになるとキャリアの選択肢も増えるので、今フロントエンドをやっている方が一つの選択肢とし考えられるように「ここは同じだから Web フロントの知見が活かせる、ここは違ってモバイル固有の知識の0からのスタート、モバイルできるようになるとこういうところが嬉しそう」という点を書いていこうかなと思います。 同じところ宣言的 UI な書き方まず React も Flutter も宣言的 UI で作られているというか、

この記事は下記の記事に触発されて、逆方向の「エンジニアの自分がどういうモチベーションでどうデザインの勉強をしていったか」というのを語ってみよう！という内容となっております。 あと最近よく「なんでデザインし始めたの？」「どうやって勉強してるの？」という質問をいただく機会が増えてきたので、それへのアンサーともなればなと思います。 なぜデザインを勉強し始めたのか結論から言うと必要に駆られて勉強し始めました。 前職はスタートアップに勤めていたのですが、当時作り始めていた新規サービスに携わっている人はエンジニア2名 + デザイナー1名という少数のチームでした。 ただデザイナーともう一人のエンジニアは他のプロジェクトにかかりきり…なので一時期この新規サービスの開発は私だけという状況でした。 そこで困ったのがデザインがないこと。大まかなワイヤーフレームは握っていましたが、デザインがないのでフロントの仕事

A. 結論、現状存在するツールでは初期の開発フェーズに限られそう 先日 Figma から React のコードを生成する Amplify Studio というサービスのリリースが発表され一部の世間を騒がせたようなそうでもないような。 このような「デザインからコードを生成する」ツールというのは昨今続々とリリースされています。誇張抜きで100個くらいあると思います。なんなら私も一個作ってます。 デザインからコードを生成する そんなツールが出る度に人々は心を躍らせるものですが、それが実際にプロダクションで使われている、という事例はあまり聞いたことがありません。 それは、いざ使ってみると生成されたものに幻滅したり、ちゃんと生成するにはデザインやコードに一定の縛りが必要になってしまったり、既存のコードのアップデートにはあまり意味をなさなかったり…、様々な理由から実運用に耐えないものであるからでしょう

Figma でスライドを作っている方、増えてきたのではないかと思います。私も最近は Figma で作っています。やはり自由度の高いツールでありながらもコンポーネントなどでスライド共通の装飾なども作れるので生産性も高く気に入っております。 そんな Figma でスライドを作る時にいくつか知っておくといいことを紹介していきます。 プロトタイプで共有よりは SpeakerDeck などのスライド共有サイトを使った方が多分いいなぜかと言うと、Figma のプロトタイプでシェアすると全部のFrameが読み込まれるまで表示がされないからです。せっかく読もうと思ってくれた人を少し待たせてしまいます。Speaker Deckなどでは最初の一スライドだけ読み込まれたらすぐ表示してくれるのでその点は大丈夫です。 例として猫ちゃんのスライドを作ってみました。ちょっと開くまでに時間がかかるのがみて取れると思います

よくエンジニアの学び始めの頃にありがちな心情として「あれもこれも勉強しなきゃ！」というのがあるんじゃないかと思う。始めは分からないことだらけなので、日々の仕事だったりSNSとかであたかも全エンジニアの共通言語であるかのように知らない単語が飛び交う様を見、そして焦る。 それが純粋な好奇心からであればそのまま突き進んでくれという感じなのだが、強迫観念からそう感じてしまっていると精神衛生上よろしくない。よろしくない上に、あれもこれも勉強しようとすると、いろんなものを薄い理解で記事を読むだけになってしまって、結局大して進歩はせず、自己嫌悪と焦りのループに陥る。 私自身この感覚にはずっと捉われてきて、今でも度々感じているが、最近は比較的頻度が減ってきたので、どんなマインド面の変化があったかを振り返ってみた。 結論から言うと同じ心境にいる方には「焦らず、一度なにかを自力で作りきる」という体験をしてみて

海外の事例はいろいろあるので見てきたのですが、国内ではどんな会社が取り組んでいるのか、興味があったので調べてまとめてみました。 「おいおい、この会社が足りないぜ！」というものがあればコメントで教えていただけると喜びます。 Wantedly

やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集

どうもこんにちは seya と申します。 定期的にスカウトをいただくのですが、その中にはグッと来るものもあれば、残念ながら「これはちょっと魅かれないな…」と感じるものもあります。 もしかしたらスカウトを書いている人の中でも何を書けば返信してもらえるのか分からない、という方もいらっしゃるかもしれないので、私が実際にもらった中でグッと来た例を交えて、受け取り手目線でいい点と悪い点を書いていこうと思います。誰かの良い出会いに貢献できたら嬉しいばかりです。 初めに結論から述べると 「なぜ、その人か」× 会社自体の魅力 = スカウト成功率 なのではないかなと思っています。それでは具体的な話へ… スカウトの目的・ゴール行く前にそもそもなぜスカウトを送るのかを考えてみましょう。 もちろん「採用のため！」ではあるのですが、もう少し具体的に考えると「自社に必要な人材と」「接点を持つ(=とりあえず話す)ため」

「手触りのよさにこだわってます！」 なんてフレーズはよく聞きますが、具体的に "手触りのよさ" とはなんなのか、実装者としてはどんなところにこだわるべきなのか、ふと気になったので自分なりの考えをしたためてみました。 手触りのよさって何？まず言葉の定義がふわふわしているのでここをはっきりさせてみます。 主観的に普段自分がスマホなりを使っていて手触りがいいと感じる要素をあげてみると次のような要素が思い浮かびました。 1. パフォーマンスがいい レンダリングが重くて動作が遅くなったりしないことや、なんらかアクションを起こした時(なにかをタップしたりした時)にそれに呼応した画面の変化がすぐに行われることが望ましいです。 2. 迷わない 画面の変化が起きた時に、自分が求めている情報がどこに表示されているかすぐに分かることを指します。自分が起こしたいアクションがどこにあるかすぐ分かるか、というのも重要

フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由 こんにちは。Figma 大好きフロントエンドエンジニア、seya と申します。 最近大きくシェアを伸ばしている Figma ですが、デザインが Figma で作られていると Illustrator (以下イラレ)や Photoshop などと比較してかなり実装しやすいと言う実感があります。個人的には後者のツール群はグラフィックのデザインツールであって Web のデザインツールとしては適していないと考えています。 なので、この記事ではフロントエンドエンジニア目線で Figma の何が嬉しいのかを語っていきます。 また、若干片方の群を落とすような主題で予防線はるのアレなのですが、イラレなどをデザインカンプとして実装に取り組んだ経験が3サイトくらいしか

Spacer とはその名の通り幅を取るためだけの存在です。 昔は spacer.gif なるものが使われていたらしいです。(私は若者なので実際に目の当たりにしたことはありません) Figma でどんな時に Spacer が必要か昔は役立つ場面がもっといろいろあったと思いますが、Figma の Auto Layout が進化した今では Auto Layout 内で並列した複数の要素間で異なるマージンを設定したい場合 しかないと思います。要するにこういうレイアウトです。 もちろん Frame ネストしたりさせてもこういったレイアウトは実現できるのですが、それは正しい構造ではなくなってしまいます。 正しい構造でなくなることで致命的なデメリットがあるかと言われると微妙なのですが、実装者に正しいグルーピングが間違って伝わる可能性はありますし、デザイン自体のメンテナビリティも下がります(多分、ここはあ

今年の春ぐらいから独学でデザインを練習し始めたのだが、そもそもやり始めた自分のモチベーションと、実際やってみて「こういうところがフロントエンドエンジニアとしての業務にも活きそう！」と感じたことを言語化しようと思う。 ここで言う"デザイン"とは何かはじめに、デザインと一口に言っても主語が大きいので、イメージがずれないよう具体的に述べると、いわゆるUXの5段階モデルの「表層」と「骨格」をイメージしている。 具体的なDoで言うと「実装者がUIを作る時の指針となる成果物としてのデザインを作ること」、もっとざっくり言うとFigmaなりSketchなりで本番でも使われるデザインを作ること。 思うに構造より上のレイヤーの"デザイン"はプロダクト開発に携わる人なら普段からある程度やっているのではないかと思う(もちろんかける時間の比重はデザイナーやPdMというロールを持っている人の方が多い)。 個人的にそも

【2025年2月追記】 もはや5年前に書いた記事なので内容がやや古くなっております。最新のプロトタイプの情報を含めた「ノンデザイナーのためのFigma入門」という本を出版しているので、よろしければご覧ください！ こんにちは。最近の趣味はFigma、seyaと申します。 本記事はFigmaのプロトタイプ機能をなるべく隅々まで調べて、触って見た内容をまとめたものです。 慣れれば高い忠実度のプロトタイプを高速に作れる強力なツールだと感じたため、この記事を読んで同じ気分になってくれたら嬉しいです。 想定読者 - Figma触りたての方 - プロトタイプ機能は使っているけど、簡単な画面遷移にしか使っていない方 ゴール - 自分のワークフローの中で「Figmaのプロトタイプ機能はこの辺で価値を発揮できそう」というイメージが持てるようになる プロトタイプ機能とは何か最初に「プロトタイプ機能とはなんぞや」

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ

E2Eテストの自動化、それは人類の夢。 こんにちは、こちらはLinc'wellアドベントカレンダーの9日目です。 さて、E2Eテストの自動化、皆様は実施されておりますでしょうか？ していないですね、分かります。 E2Eテストは実際のユーザの体験に最も近いテストであり、重要性は高いにも関わらず中々開発プロセスに組みこむ難易度が高いです。 私はE2Eテストとは「メンテナンスコストの高さ」と、そこから来る「このテストメンテする意味ある…？時間かかるばかりでめっちゃ壊れるじゃん…」という気持ちとの戦いだと思っています。 と言う訳で取り組んでみたのがATDDインスパイアの受け入れテスト駆動開発なのですが、その取り組んでみた結果と今後についてこの記事では語ろうと思います。 受け入れテストとは 始めに受入テスト駆動開発ってなんやねんというWhatの定義をしてから、なぜそれをE2Eで回したいのかというWh

最近技術書典5に向けてApollo Client本を書いているのだが(【う03】で販売します！)知れば知るほど便利だな〜と感じている。 Apollo Clientはもはや単なるGraphQLクライアントではなくて、通信周りのいろいろをサポートしてくれるフレームワークぐらいに考えた方が適切だ。 と同時に、最近仕事ではRedux周りの技術選定や設計を考えていて「あれ？Reduxの方が考えてる時楽しくね？」と感じてしまっている。この記事はそんなフィーリングに対するポエムです。 Apollo と Reduxをなぜ比較しているのか一応「同じ比較軸にないだろ○すぞ」と思われる方もいらっしゃるかも知れないので、なんで比較してるのかのスタンスを初めに述べておきたい。 結論から言うと、同じ比較軸にはないと思っている。 ただ、GraphQLがAPIとして存在する場合にApollo Clientを使うかどうかと