[B! UI] skypenguinsのブックマーク

Magic UI

UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.

skypenguins 2024/05/23

ええな

リンク

Creating a pointer-friendly submenu experience

We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the

skypenguins 2024/05/03

ui
ux

リンク

The Front End Developer/Engineer Handbook 2024

This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Techno logies —namely HTML, CSS, and

skypenguins 2024/04/25

リンク

Yu Gothic UIに text-spacing-trim を適用するとバグる

以下のツイートを見て、自分の環境でも再現したので気になって調べてみた。現象 text-spacing-trim プロパティを Yu Gothic UI のテキストに適用すると、一部の括弧類が重なってしまう。これは値に space-all を設定すると解消される。 halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシックの halt と hmtx（水平

skypenguins 2024/03/25

リンク

macOS における日本語表記ルール - zumuya

日本語表記ルールの目的と方向性表記ゆれをなくしたい日本語は表記ゆれを起こしやすい言語。同義語が多く存在するし、一つの文章内にひらがな／カタカナ／漢字／アルファベットが混合し、同じ読みの単語ですら文字種の混ぜ方によっていく通りものバリエーションが存在する。何も考えずに闇雲に混ぜ合わせると読みにくい文章が生まれてしまう。そのため新聞や雑誌では書き手が異なる記事が混在していても読みやすいよう全体で統一した表記ルールを持っている。これはコンピュータのユーザインターフェイス（UI）でも同じ話。考えてみればユーザがアプリケーションを行き来しながら画面の断片にその都度注目する行為は新聞で複数の記事をまたぎながら流し読みするのと似たようなものだ。とはいえ UI においては短いテキストが多いためルールの重要性が想像しにくいかもしれない。ここで一つの例を考えてみよう。ほとんどのアプリケーションで編集メ

skypenguins 2023/11/26

リンク

UX Design Patterns for Loading

skypenguins 2023/08/30

UI
UX

リンク

「のどが渇いた」というユーザーに何を出す？ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ

2022年9月13日株式会社メンバーズポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less

skypenguins 2022/09/15

リンク

これがユーザーの信頼を失うデザインだ！最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン

ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。ユーザーとして騙されないように知識を増やしておくのにも有用です。著者は﹁UXライティングの教科書︵紹介記事︶﹂や﹁ザ・マイクロコピー︵紹介記事﹂などでお馴染みの仲野佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで

skypenguins 2022/09/02

リンク

これだけは押さえよう！住所フォームの作り方 - ケンオールブログ

まとめ住所フォームの作り方住所フォームを作るときには以下の4つを押さえましょう。オートコンプリート機能に最適化する郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応するモバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション本文地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効

skypenguins 2022/02/28

ui
ux

リンク

ネイティブアプリケーションの意味｜usagimaru

プラットフォームによってはアプリケーションの実装技術には複数の方法があり、開発側の要件や制約、好み等に合わせて適した技術を選ぶことができます。例えばiOSアプリケーションの実装技術には、Appleが提供するCocoa Touch︵およびUIKitやSwift UIなどのフレームワーク群︶がありますが、そのほかのベンダーから提供されている技術として、FlutterやReact Native, Titanium, Xamarinなどのフレームワークも存在します。どのフレームワークが一番優れているのかを語ろうとすると宗教戦争に発展してしまいますので、そこは避けつつも﹁ネイティブとは何か﹂の解釈をはっきりさせておきたいと思いました。どのようにして実装技術を選ぶのか開発現場としては、大抵は次のような観点で実装技術を選ぶことになると思います。・開発コスト、運用コスト重視・開発スピード重視・技術

skypenguins 2021/08/15

ui
macOS

リンク

正真正銘のReactだけの不純物なしでReact入門

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。それでもやっぱり﹁ReactやるならReactだけやりたい。他はどうでもいい﹂という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部

skypenguins 2019/02/21

分かりやすい

リンク

iOSエンジニア以外にも知ってほしいiOSアプリ用語-UI部品編- #Zaim｜akatsuki174

なぜこの記事を書くのかこんにちは。Zaimで iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、﹁iOS エンジニア以外の人もこれを覚えておくと良いかも！﹂と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UIをもっと理解したい方は、こちらも頭に入れておくと良いと思います。注‥ ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。・ほとんどHuman Interface Guidelines︵以下 HIG︶から情報を引

skypenguins 2018/11/01

リンク

日本での驚きの体験がツイッターで大きな話題に

ブログプラットフォームMediumで活躍するUXデザイナーのマルチン・ヴィハルィが数週間日本を滞在した際、まず目についたのが日本で日常的に使われているUI︵ユーザーインターフェース︶だった。掲示板やボタン、また日本人にとって当たり前である日常的な行動、例えば並んで電車を待つことや飲食店で食券を買うことなどが、外国から来た人間にとっては驚くべきことだった。2週間の日本滞在中、掲示物からゴミ箱に至るまで、日本式の物事への取り組み方について気づいた様々なことをツイッターで配信していった。結果、ツイートのスレッドは300にまで膨れ上がり急速に世界に知られることとなった。 This epic thread of @mwichary‘s observations and surprising moments in Japan, with an em phasis on everyday UIs,

skypenguins 2018/04/07

リンク

グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

skypenguins 2017/12/05

リンク

Nintendo SwitchのUI戦略 - .mjtの日記復帰計画

というわけでNintendo Switchを発売日に(会社をサボって)入手した。全体的に素晴しいデキで、ゲームコンソールのあるべき姿を提示したのではないかと思う。細かい変な仕様も散見されるが、実装面ではマルチユーザ型コンテンツプレイヤの模範と言って良いのではないか。曖昧な"やめる": プレイ中であることが明示できないなら"キャンセル"など対にならない語にすべきまとめゲームは必要数のコントローラと形態(スティック2本必要等)をシステムに宣言するデザインになっていると考えられるゲームは接続形態の変更に動的に対応する必要があるコントローラの組み合せによって操作不能になるシーンは許容されている(ユーザは何らかの方法でHOMEに戻って対処する必要がある) ライブラリ/抽象化層の提供側としては、これらの宣言を行えるAPIを提供した方がスムースに統合できるように見える。据え置き機のような外

skypenguins 2017/03/06

「ピクトグラムで上下左右表記が行われることは無く、かならず4ボタン間での位置関係で示している」横持ちと縦持ちがあるからか…なるほど

リンク

http://www.ogura.blog/entry/2017/02/28/190245

skypenguins 2017/03/01

日本の星っていうけど、LINEって韓国のネイバーの子会社が開発してるんだから認識が違うくない?

リンク

日経電子版アプリ穴のあいたバケツ開発

140年の歴史を持つ会社の、高速内製アジャイル開発への挑戦

skypenguins 2016/10/19

リンク

SPAと覚悟

Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/

skypenguins 2016/09/17

SPAとして作られたサイトってどこも「ワンテンポ遅い」というイメージしかない…

リンク

その文字、薄すぎない？デザインにおける灰色の明度は何%が最適か

UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかることのできる色でもあります。濃い灰色は主に見出しや本文に、薄い灰色はメタデータ、分類名、説明文に多く使われます。これらの色合いのうち、最も乱用されるのは薄い灰色です。薄い灰色の文字の問題点文字色として薄すぎる灰色は可読性に問題を起こしかねません。灰色の文字を薄くしすぎてしまえば、読者が読むにあたって支障をきたすことになります。文字の明度によっては、薄い色の背景に混ざってしまうのです。この現象は、単語や文字をぼやけさせ、判読を困難にします。無理に判読を試みれば、目を傷めてしまうでしょう。また、薄い灰色の文字は読者の誘導

skypenguins 2016/07/26

リンク

Ingress、ポケモンGOの開発現場。Niantic川島優志さんに聞く。【前編】 | AdverTimes.（アドタイ） by 宣伝会議

さて、日本でもとうとう﹁ポケモン GO﹂がローンチされました。皆さんも恐らくご存知の通り、一足先にリリースされたアメリカではもはや社会現象になっています。ローンチからたった一週間ですでにモバイルゲーム歴代最高のユーザー数を獲得し︵！︶、アクティブユーザー数ではTwitterを追い越しました。僕が住む比較的郊外でさえ、道を歩けばポケモン GOをプレイしている人と何度もすれ違います。アメリカに住んで12年、こんなことは初めてです。とにかく話題で持ちきりのポケモン GO、このゲームを任天堂と共同で開発している会社がサンフランシスコにあるNiantic, Inc.です。 Niantic, Inc.は元々Googleの社内スタートアップとして始まり、これまでにIngressというモバイルゲームを開発してきました。Ingressのゲームコンセプトは陣取りゲーム。ゲームフィールドは私たちが住む現実の世界そのも

skypenguins 2016/07/25

リンク

はてなブックマーク

タグ

関連タグで絞り込む (67)

UIに関するskypenguinsのブックマーク (44)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第4週）

今週のはてなブックマーク数ランキング（2024年6月第3週）

今週のはてなブックマーク数ランキング（2024年6月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス