先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。 せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。 「エンジニアに愛されるデザイン」とは?私は二つ大きい基準があると思っていて、それは デザインの意図を掴みやすい デザインが変わった時の変更が容易 があります。そして前者は Structured Design, 後者はデザインをシステム化していくことによって達成できると考えています。 いきなり Structured Design という耳慣れない単語が出てきたので、まずはそこを解説しますと、これは2021年の Schema という Figma のデザインシステムのカンファレンスのキーノートで紹介された概念なのですがデザインには Freeform と Structured という二
この記事の概要 筆者はCSSフレームワークやCSS in JSのライブラリを素振りすることが多いです。 その際、それなりに精度の高いモックアップを組んでみないと使用感が掴めません。 しかし毎回1からモックアップを用意するのも時間がかかるので、さっと検証するためのデータを作りました。 せっかく作ったので公開します。 見本 desktop mobile 実物 FigmaのCommunity fileとして公開しています。 以下のような要素を盛り込んでいます。 色やタイポグラフィー、グリッドなど最低限のデザイントークン VariantsやComponent propを用いたComponent ある程度状態が変化するPrototype desktop, mobileそれぞれのビュー flex, gridを用いそうなレイアウト positionを用いそうな要素 header, nav, footer
これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディン
独創的なアイデアマン [内向][直観][思考][決断] 独自のアイデアや仕組みを考える人です。 洞察力があり創意工夫が得意です。 複雑で漠然とした物事の中に本質的な意味や可能性を読み取る能力があり、自分で考えたアイデアや仕組みを働かせ、問題を解決したり改善することに大きな喜びを見出します。 高い目標を掲げ、それをやり遂げようと果敢に努力します。粘り強く理想を追い求める精神力も持っています。 自分のアイデアを適切なコミュニケーションで伝えることを心がければ、豊かな人生を送ることができるはずです。 しかし、このタイプの人はそんな自分の能力やアイデアをひた隠しにする傾向が現れることがあります。 それは、どこかで人や社会を悲観的に見ているところがあるからかもしれません。 お金儲けや権力闘争などといったものに自分の能力が使われるのを嫌がっているからなのかもしれません。 独立した態度とオリジナリティに
INTJの性格(解説動画) 解説MP3音声をダウンロード INTJの価値観と能力 :INTJを象徴する言葉(キーワード) (本質を見抜く、長期的視野、洞察、パターン集約) :INTJの価値観(大事にしていること) (膨大な知識、真実、自立心、完全性) :INTJの強み (洞察力、粘り強さ、表面に惑わされない、複雑な問題をシンプルに解決する) :INTJの弱点 (極端に周りの意見を聞かない、頑固、確信しないと行動できない) 【人生のキーワード】 「完全な世界の番人」 INTJの性格・人物像 静かで穏やかで思慮深い大人っぽい人間。 他人からはミステリアスに思われる。 未来を予知する力があり、常人離れした 奇跡の直観力で長期的なビジョンを見る。 卓越した先見性は他人には分からないので、 他の人にはなかなか伝わらず、頑固で我が強い 扱いづらい人間と思われてしまうことも多い。 が、実は組織やグループ
独創的な完璧主義者です。独自のアイデアや仕組みを考え、高い目標に向かって邁進します。他人から批判されたり無関心な態度をとられても、他のタイプほどは気にしません。「我が道を往く」を体現したかのような性格です。 凝り性で何でも完璧したいので、仕事でも遊びでも、もっと良い方法があるはずだと改善策を考えます。自分自身を向上させるのも好きで、知識の習得に熱心です。 理論肌で、感情より理性を信頼しています。また戦略的思考も得意で、長期的展望や物事の裏側を予測します。アイデアが役に立つかは事前によく検討するものの、一度着想を得ると、1つの目標に向けて突っ走る傾向があります。 高い目標を掲げるうえに、凝り性、そして長期的な視点も持ち合わせているため、大きな成果を達成する事もあります。 自分のアイデアに自信を持っていますが、他者の考えや意見の方が筋が通っていると思えば、乗り換えます。しかし納得ができなければ
この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ?不要では?」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ
2022年5月27日 著 先週のことですが、政府広報オンラインが、いわゆるアクセシビリティオーバーレイを導入したことを広報していました。公的機関にありがちな横並び意識や、Webアクセシビリティに対する理解不足を背景として、他の省庁や地方自治体においても今後、同様のソリューションの導入が相次ぐことでしょう(誠に遺憾ながら)。 これまで何度か書き記してきた(そしておそらく今後も書き記すことになる)とおり、私はWebアクセシビリティの専門家として、またOverlay Fact Sheetに署名した一人として、オーバーレイソリューションに異議を唱えます。コンテンツがアクセシブルに実装されている前提において、その種のソリューションを導入する必要は、全くありません。 とりわけ政府広報オンラインのような、みんなの公共サイト運用ガイドラインに則り、JIS X 8341-3:2016に基づいてWebアクセシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く