Iconoir | Free IconsA high-quality selection of free icons. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG, Font, React, React Native, Flutter, Figma and Framer.
[こかげ] フォント : Nu みちしるべ
概要 「Nu みちしるべ」は、日本の道路標識に基づいて作ったフォントです。標識の数字に興味を持ったのが切っ掛けで作りましたが、数字だけだとフォントとしてあまり面白くないので、周りの赤い円を含めて自動的に組み立てられるように作り込んでみました。道路標識の全種に対応しているわけではないです。用途は…何かあるでしょうか。 標識を自動的に組み立てるには、アプリケーションが OpenType‐フォントの高度な機能に対応している必要があります。非対応のアプリしか持っていない場合、手動で画像編集をして部品を組み立てる事になりますが、その部品としてフォントを利用できます。 ウエブブラウザーも今のところ対応状況が微妙なので、次の見本は崩れて表示されてしまうかも知れません。「直接編集」や「自動着色」を切り替えてみると表示が改善する場合があるようです。（なお「直接編集」を無効にした場合、文字列の書き替えは左上の
Introducing React Spectrum
We’re excited to announce React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on Github! React Spectrum includes three libraries: React Spectrum — A React implementation of Spectrum, Adobe’s design system. React Aria — A library of React Hooks that provides accessible UI primitives for your design system. React Sta
モードレスはどこから来たか – オブジェクト指向UIの起源 – | Backdrop
いや、「モードレスはどこから来たか」ではなく、本来の疑問は「モードはどこから来たか」なのだ。なぜなら自然界にモードはないから。 モードは何もないところに生まれる形だ。混沌に生じた秩序だ。例えばファッションがそう。一般的にモードという言葉は、新しい流行や様式を指す。そして文化的な多様性と進化を促す力として肯定的に受け取られている。つまりモードはデザイン性の証なのだ。 しかしユーザーインターフェースデザインの分野、特にコンピュータソフトウェアの操作性に関するテーマにおいては、モードはほとんどすべてのシステムが宿している原罪として、解決すべき問題として扱われる。 なぜ原罪なのかと言えば、コンピュータというものの発想自体の中に、用途によって役割を変える道具 ＝ 無数のモードを持つ多目的な存在としての性質が込められているからだ。そしてコンピュータは、その宿命であるモードによって、生得的に使いにくいと
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
オブジェクトベースなUIデザイン｜Yoko Nishida｜note
WEB+DB PRESS Vol.107掲載のオブジェクトベース設計によるUIデザイン改善を読んだ。デジタルなサービスのUIを設計していく上で、とても参考になる知見なのでまとめてみる。 オブジェクトベースUI設計とはユーザーがやること（タスク）の手順をそのまま画面に反映させるのではなく、ユーザーの関心対象（オブジェクト）を画面とデータに対応させながら考えていく手法。 オブジェクトベースUI設計の良いところこのオブジェクトベースUI設計は、特に複雑なタスク＆要求が混在する業務利用アプリケーション（SaaS / B向けサービス）のUIデザイン改善、運用で活かしやすいという印象を受けた。 大規模なシステム、膨大なデータと連携しながら、多様なユーザーニーズに応えやすいUIを実現するにはどうすれば良いか。 要件に散在する情報をオブジェクトとして捉えることで、その場しのぎではないUIデザインが作りやす
Framer Xはプロトタイピングツールを超えていく – なかじー – Medium
プロトタイピングツールとして知られてきたFramerが、8/1より、全く新しいタイプの後継プロダクトをβリリース中です。 その名もFramer X。 つい数時間前にBeta2バージョンがリリースされ、その全貌が明らかになりつつあります。 手元にβ版が手に入ったので、使い心地をレポートしていきます。 ざっくり旧版と新版の違いを要約すると、下の３点になります。 Framer（旧版） ① コードタブ（≒Atom）、デザインタブ（≒Sketch）の２つでそれぞれレイアウトとインタラクションを構築していく ② CoffeeScriptベース ③ MVBアーキテクチャが人によってごちゃごちゃで、再利用がしづらい Framer X（新版） ① xcodeのStoryBoardのようなデザインツールがベースにあり、そこで作成したコンポーネントにスクリプトを付け加えていく（≒Unity） ② TypeScr
[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
![[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d4b980ba7bb36ca68e44f445a36a6341ba4bb62/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022601.png)
170 Responsive Froala Design Blocks - Froala Building Blocks
For Developers..All Froala products are built for developers. As a HTML5 and CSS3 library, the Froala Design Blocks is clearly no exception. Learn more ..and Designers tooSketch, PSD you name it. Froala Design Blocks is the tool that helps developers and designers speak the same language. Learn more
シリコンバレーの「何が」凄いのか
シリコンバレーのスタートアップを数多く取材する中で気付いた「シリコンバレーにおけるディシプリン（規律）の存在」や「General Electric（GE）やIBM、SAPといった老舗企業が必死になってシリコンバレーのスタートアップを真似している理由」、そして「日本企業がイノベーションを実現するための処方箋」について解説します 詳しく知りたい場合は「GE 巨人の復活」をご覧下さい。 http://www.nikkeibp.co.jp/atclpubmkt/book/17/P55110/ 今後の記事は「シリコンバレーNext」をご覧下さい。 http://itpro.nikkeibp.co.jp/siliconvalley/ Read less
How we designed Foursquare Swarm 5.0
Over the past eight months, the Swarm team has been hard at work researching, prototyping, and building towards Swarm 5.0. On Tuesday, we launched. (Go download Swarm 5.0 now.) It was a big undertaking that involved a lot of people. Foursquare co-founder Dennis Crowley has already shared why we made me these changes, which means I can explain what, precisely, we were up to all this time. As a prod
CSS Grid Layout について - Qiita
先日の macOS と iOS のアップデートに CSS Grid Layout Module が実装された Safari のバージョンが入り、とうとう全てのモダンブラウザで使用可能となりました。非常に柔軟に、直感的にグリッドを表現することができます。 Can I Use Grid の定義 ある要素をグリッドレイアウトしたいとき、その親要素に display: grid もしくは display: inline-grid を指定します。この親要素のことをグリッドコンテナ、グリッドレイアウトされる子要素のことをグリッドアイテムと言います。 グリッドコンテナには grid-template-column と grid-template-row というプロパティを指定することができます。それぞれ、列と行のグリッドのサイズをその数だけ指定します。 例: 3行5列のグリッド .container {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
consim. β
system-design-primer#system-design-interview-questions-with-solutions
Uix Kit
真のコンポーネント粒度を求めて
Tabler - Admin panel made simple
Illustrations | unDraw
Bookmark.com | No-code Website Builder to Start Your Business
Tondemodesign.com
