はてなブックマーク

FigmaでUIデザインをおこし、それを実装する人にハンドオフ（デザインデータを共有する）ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです。 ですが、Figma上ではそれぞれのつくりが異なります。片方はGroupによって構成されたもの、片方はFrameとAuto Layoutでつくられたものです。 単純に一枚絵をつくるのであればどちらでも良いかもしれないですが、これらをコードへと変換していくことを考えると、後者のように情報の構造がわかりやすいことが重要です

タイトルの通りなのですが、KA法という定性調査の分析やモデリングに使われる手法で使われるアイテムをFigmaのウィジェットにしてみました。 KA法とはKA法とは、コンテキストインタビューや観察法などの定性調査から得られたデータを分析、モデリングし、ユーザーが求めている本質的な価値を導 出するための分析手法である。 KA 法を初心者が理解・実践するための研究例えば「英語学習にお金や時間をかけている」人たちにユーザーインタビューを実施し、それらの記録から印象的・特徴的なことを抽出するにあたり、 ユーザー調査により得た出来事 ユーザーの心の声 心の声に基づいた価値 といった雛形にしたがって書き出します。例として適切な抽出かわからないですが、次のようなものです。 インタビューでの発話 「独学で勉強しても身につかない気がしているので、有料で先生とかをつけたほうがいいのかなーと考えてます。お金はかかる

先日3月14日に、Figma Japanの1周年記念イベントとして「デザイン経営2023」が開催され、その場で先行して発表されましたが、4月よりFigma Japanの二人目のDesigner Advocateとして入社することになりました。 本日のイベントで公表されましたが、4月から @figma @FigmaJapan の2人目のDesigner Advocateとして入社することになりました 🎉 少しフライングのお知らせではありますが、これまで以上にFigmaのことの発信や、Figmaを通して皆さんの支援ができればと思いますので、よろしくおねがいします！ pic.twitter.com/W9sMHtaHfo — ❖HirokiTani (@hiloki) March 14, 2023 Figmaとの出会いFigmaをおそらくまともに使い始めたのは2018年頃。Figmaは2016年

この記事は、Figmaを使ったコラボレーションUPの方法（社内・チーム内等）by Figma Advent Calendar 2022の12/6の記事です。 FigmaファイルのThumbnail表示はどうつくるのがいい？Figmaファイルのサムネイルというのは、ダッシュボードやプロジェクトに並べられるFigmaの各ファイルのサムネイル表示のことです。 自分のファイルやCommunityからコピーしたファイルたちこのサムネイルの表示はひと目みて「何のファイルか」を識別するのに重要なのですが、この表示部分を上手く利用する例がいくつかあります。 File Thumbnail Kit これはFigma Communityに公開されているサムネイル作成キットです。公式のものではないですがよくできている例なので紹介します。 ※公式じゃないけど、作者のJoeyさんは元々Figmaにいた人。今はWebf

この記事は2022年5月11日に開催されたFigmaのカンファレンス『Config 2022』のセッション内容を記事として再編集した内容ものです 私は医療系テックスタートアップのUbie株式会社でデザインエンジニアをしている谷（@hiloki）です。 この記事では「デザイン業務を少し楽にしたい」そのために自らFigmaプラグインを作ってみたいと考えてもらえるような話をします。 Figmaの特長FigmaにはAuto LayoutやコンポーネントのVariants、チームでコンポーネントやスタイルを共有するTeam Libraryなどパワフルな機能がたくさんあります。 それら以外で私がFigmaで好きなのは、Figma Communityというコミュニティ機能と、そこに展開されるたくさんのFigma Pluginです。 Unsplashから直接Figma上に写真を読み込めるプラグインや、色の

この数年の略歴2012年にフロントエンドエンジニアとして株式会社サイバーエージェントに入社し、2015年に退職してcowcamoなどを運営する株式会社ツクルバに転職。そこから2年経てサイバーエージェントに出戻り、そして2022年3月に再び退職しました。 サイバーエージェント在籍中のもっともエキサイティングでキャリアとしても良かったのはAmebaのデザインシステム Spindleのプロジェクトマネジメントと開発ができたことです。 なぜ転職したのかまず行き先を決めてから退職を決めたというより、新しいチャレンジをするために退職を先に決めていて、そこから色々考えてユビーに辿りつきました。 退職も何かがネガティブなことがあったというよりは、年齢も人生の折返し地点になり、5年後・10年後のことなど考えたときに、新しい一歩を考えたいと思ったからです。 じゃあ例えばいきなり起業するとかっていうと、頭にはよ

先日会社のブログにて、僕が関わっているAmeba事業のデザインシステム「Spindle」の紹介と、SpindleのWebサイト公開をしました。 公開したとは言っても、まだ社外に公開するにあたって整えきれていないコンテンツなどはまだ出せていないですが、公開に足る最低限のところまでは整えられたかなと思います。引き続き、改善やコンテンツの充実を進めていく予定です。 さて、記事の内容は広報的に整えましたが、そこで書ききれなかったことや、その他の裏側っぽいところを残しておこうかと思います。 アメブロとはある種の競合ともいえるnoteで書くのはやや背徳感もありますが、まぁそれはそれで。 この一歩を実現するには恵まれた環境だった先ほどの記事では偉そうに僕が色々と書いてはいるものの、大元のブランド設計や、その中身の設計や開発のところは強力なメンバーが居たおかげや、事業としてのタイミングの良さのおかげでした

自分が観測している範囲でそう感じているところもあるかもしれませんが、デジタルプロダクトやサービスにおける情報アクセシビリティを高めていこう、というのが年々広がっていると感じています。 自分が設計・開発に関わるサービスではもちろん、SNS等でもなるべく画像に代替テキストをいれる等、100％ちゃんとやれている自信はないですが努力しているつもりです。 ところで、みなさんの職場で同僚との仕事上でのやりとり等ではどうでしょうか？ドキュメントの共有や、Slackなどのテキストコミュニケーション、あるいはZoomでの会議といった機会において意識できるアクセシビリティがあります。 この記事では普段ぼんやりと感じている「仕事場におけるアクセシビリティとして気をつけること」を挙げていってみます。 色だけで情報を区別しない社内で共有するドキュメントで「赤字は重要」「色だけで分けられた円グラフ」といった表現をする

このプラグインの元はEightShapes社が数年前につくったContrast Gridです。背景色と前景色を入力すると、それらの組み合わせとそのコントラスト比をグリッドで表示してくれるツールです。 WCAGの達成基準1.4.3にある4.5:1というコントラスト比を保てる色の組み合わせを探すのに使えるひとつの方法とツールではあるんですが、Figmaでの作業で効率的に使いたかったので、今回プラグイン化してみました。 プラグイン化といっても、アウトプットの形をEightShapes社のものにしただけで、内部の実装は試行錯誤してゼロから書き直しています。 EightShapes社のContrast Gridの問題EightShapes社のContrast GridではAlphaの値に対応してないのが問題でした。自分が関わっているデザインシステムで定義しているカラーでは、テキスト色などに使う無彩色

事前予告していたWeb24というイベントで、デザインシステムをテーマにしたセッションで90分ほど喋りました。 当日の模様はアーカイブされていないので、盛り上がりや内容についてはTogetterのまとめをみて感じてください。 どういう90分だったかメンバーはSmartHRの@versionfiveさん、atama plusの@n_m_taさん、GMOペパボの@shikakunさん、そして僕の4人で打ち合わせもスライドの準備もなしで90分喋り倒しました。 セッションオーナーとして自らこのお三方を招いたのですが、それぞれスタートアップや大きめの事業会社、フェーズや体制も違うメンバーにしたいとおもい声をかけさせてもらいました。 Web24全体としてはWeb技術周辺のテーマが多い中で、あえてデザイナーという職種に近い方々でのデザインシステムをテーマにざっくばらんに、時に議題を投げかけて進行しました。

2019年10月7日にGoodpatchでUX Engineer Meetupというイベントがあり、主催のおすみさんに声をかけていただいて登壇することととなった。 一時期のUXデザイナーのように、UXエンジニアというのはにわかに広まりつつあるも、UX Designer以上に「何者」なのかが掴みづらい。正直ぼくもわからないというか「UXエンジニア」という肩書が適切なのかはわからない。しかし、このイベントをきっかけに「UXエンジニアは何者なのか」もとい「私は何者なのか」を考え、その内容をほぼそのまま発表した。 このイベントでは僕だけではなく、Cookpad、Goodpatchとより実践的にデザインとエンジニアリングの境界をもたずに事業を進めてきている会社のUXエンジニアも登壇するので、より実践的、事例を交えた話になるだろうとおもい、僕からはUXエンジニアと呼ばれる人々の概要と、僕自身のキャリア

ということなので、新規投稿で画像を入れて検証。 なお検証はVoiceOverです。 「プールで遊ぶマメヒコ」を入れてみよう 「プールで遊ぶマメヒコ.jpg」とリネームしたところ、alt属性に「プールで遊ぶマメヒコ」が入った。 ファイル名をリネームしない次はモバイルで撮影した写真。リネームせずに「59905707_2369286120013939_4824854642716311552_n.jpg」という名前でアップロード。 するとalt属性には「画像2」と入った。ここではなぜファイル名の英数字の羅列ではないのだろう。そういうメタ情報を判別しているのか？あるいはファイル名の内容で判別している？ 半角英数字なファイル名でリネーム試しに半角英数字なファイル名にリネーム。「181003mamehiko_in_the_pool.jpg」とする。 すると「画像3」とalt属性に入り、

5月18日、Abema Towersで開催されたInside Frontendは盛況で、無事終わった。 僕はなぜかはわからないが、カンファレンスのデザイン周りに関わらせてもらう機会が過去に何度かある。2016年の東京Node学園祭では今回のようにWebページとロゴやステッカーまで作らせてもらったことがある。 Inside Frontendは2017年に第1回を開催し、今回で3回目。初回から主にイベントのWebサイト担当として関わっていたが、今回はロゴの見直しも含めてデザインに関わるものをすべて担当することになったので、来年のための記録として、またはカンファレンスの企画を考えている人の参考になればと、ここに書き記す。 ロゴの見直し 発起人の一人であるYuya Saito a.k.a @cssradarがこしらえたロゴ。フォントはSucrose。印刷のようなかすれた感じや、すこしやや重さがある

「どういう経緯で本を書くことになったんですか？」 交流会や懇親会などでたまに質問をいただく。幸いにも「CSS設計の教科書」、通称「緑本」などと呼ばれる本書のことを知っている方がいたり、あるいは「CSSの緑の本を書いた人ですよ」と紹介いただくことをきっかけに話をしたりするので、この質問になることが多い。 なのでその話をnoteに書き留めておく。 きっかけはブログ2010年頃、当時はEC Studio（現: ChatWork）に勤めており、ナレッジ共有や採用など目的に技術ブログを公開していた。 そのときに「iPhone向けサイト構築 基礎文法最速マスター」という当時のはてブで流行っていた釣り気味のタイトルをつけた記事を書いた。 これが妙にバズり、はてブで1524ブックマークという数字を出し、Googleで「iPhone向けサイト」などと検索すれば上位に表示されるようになった。 それからほどなく

この記事では、 ということを伝えたい。 と、結論のようなものを画像で表現したが、これは良い方法とはいえない。何が良くないのかわかるだろうか。 何か大事な情報を説明するとき、それを画像だけで表現してしまう。そういう記事やWebページは少なくない。 僕が生業としているWeb開発においては、Webアクセシビリティ対応のガイドラインがある。その中でも画像の代替テキストについては、Webサイトやアプリケーションの開発者やデザイナーであれば知っているとおもう。そう信じたい。 代替テキスト代替テキストについての詳細は、WCAGを参照してもらうとして、この記事ではサイバーエージェントのAmeba Accessibility Guidelinesから「1.1.1 画像に代替テキストを提供する」の概要を引用しよう。 ・スクリーンリーダーなどの支援技術を用いているユーザーにも、等しくコンテンツを提供する ・通信

オープンソースのデザインシステム Mineral UI の「色」をデザインするにあたってのプロセスを詳細に解説している。あらゆるプロダクトに適用されてもその一貫性やアクセシビリティを担保するためには、綿密な設計が必要となる。半年近くをかけて、IBMやMaterial Designなどの配色を研究したその成果は圧巻。 デザイン・システムにおける見出しレベルの管理方法 デザイン・システムやUIコンポーネントライブラリという文脈において、「見出し」の存在は地味にややこしい。 アクセシブルでありながら、コンポーネントとしての再利用性を担保するために知っておきたいことについて。 ブランディングを物作りに活かしたNetflix社の物語