なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu… 2021-10-05 18:00:54 Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu… 2021-10-05 15:57:32
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが（個人的には）どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
Manabu Ueno on Twitter: "昔のコンピューターは専門家だけが使うものだった、という話をしたら、「そのわりにデザインがポップで今よりかわいいのはなぜですか？」と質問されて、答えられなかった。たしかに...。 https://t.co/w4UQGVMBXV"
昔のコンピューターは専門家だけが使うものだった、という話をしたら、「そのわりにデザインがポップで今よりかわいいのはなぜですか？」と質問されて、答えられなかった。たしかに...。 https://t.co/w4UQGVMBXV
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。 寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、 このコンポーネントは JSX.Element型 を返す関数（ () => JSX.Element ）として返ります。 React
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用
Can I email…
Apple Mail macOS iOS Gmail Desktop Webmail iOS Android Mobile Webmail Outlook Windows Windows Mail macOS Outlook.com iOS Android Yahoo! Mail Desktop Webmail iOS Android AOL Desktop Webmail iOS Android Samsung Email Android Mozilla Thunderbird macOS Windows ProtonMail Desktop Webmail iOS Android Fastmail Desktop Webmail HEY Desktop Webmail Orange Desktop Webmail iOS Android LaPoste.net Desktop Webm
Flutter の描画の仕組みを理解する
私個人の Flutter 歴も早数ヶ月程になってきたのですが、ちょくちょく雰囲気で使っているなーと感じるものが出てきたり(BuildContext や WidgetsBinding など)、描画のタイミングでバグが出た時にフワッとネットで見た記事通りに書いて解決したりなどの場面が出てきました。 それでもとりあえず動くアプリケーション開発はできなくないのですが、ちゃんと自信を持って開発したい & もう一段 Flutter 力を上げたいので本腰入れて Flutter がどう描画しているのかを調べてみたので、その結果をまとめてみました。 同じような課題感を抱いている方の足がかりとなれば幸いです。 はじめに: この記事のスコープ 最初にこの記事で話す「描画の仕組み」とは具体的に何を指すのかを述べます。 前提として、Flutter は大きく次の3つの層から成り立っています。 Flutter arch
「映像プレーヤー」を作成したことはあるでしょうか？ 作成したことはなくても、おそらく日々様々なプレーヤーを利用していると思います。 HTML5で定義されるHTML Video Elementからは、メディア状態・エラー・DRM複合処理・広告再生・読み込み、などブラウザごとに多種多様なイベントが発生します。プレーヤーはこのイベントに加え、ユーザーから入力される複雑な操作も併せて処理する必要があります。UIや内部要件を実装するには、このイベント制御を適切にハンドルし、のりこなすことが必要不可欠です。 今回のセッションでは、複雑な処理をReactHooksを用いてHTML Video elementを制御する手法を、現在映像サービス「GYAO!」でプロダクションで使用されているプレーヤーを事例に、フロントエンドの観点からご紹介します。
Flutterが進化する方向とは？ WebAssemblyサポート、コンポーネントとしてWebアプリに組み込み可能に。Flutter Forward 2023
GoogleでFlutter & DartのプロダクトとUX担当ディレクターTim Sneath氏は、アフリカのケニア共和国ナイロビで開催された「Flutter Forward 2023」の基調講演で次のように話し、Flutterの進化の方向性を示しました。 「Flutter for Webは汎用目的でデザインされてはいないことを明確にしておきたい。すでにDOMの分野で上手く行っているAngularやVue、Reactのような、DOMベースの新たなフレームワークを作ろうとしているわけではない。 そうではなく、（CanvasやWebAssemblyのような）新しいWeb標準をベースとする最初のフレームワークを作ろうとしているのだ。」 その上で、Flutter for WebがWebAssemblyをサポートする予定であることを明らかにしました。 「FlutterからWebAssemblyへの
2019年も様々なデザインのWebサイトが公開され、Web制作者にたくさんの刺激を与えてくれました。 Webデザインを行う上で、トレンドに則ってデザインすることは必ずしも必要なことではありません。しかし、トレンドを理解しておくことでデザインの幅が広がり、様々なデザイン手法を理解しておくことでデザインに深みが出てきます。 2020年は、どのようなスタイルが流行を集めるのでしょうか？今回は、2020年に流行する15個のWebデザインのトレンドをご紹介したいと思います。 NEW : 2021年版を公開しました！ 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流行するWe... Web Desig
Glyphs
Access the SourceJoin us in Figma and GitHub to contribute to ongoing development and request new icons & features.
アップル社のデザインチームは伝説的だ。しかし、テック系ジャーナリスト、トリップ·ミックルの新刊『アフター·スティーブ』によると、スティーブ·ジョブズの死後、同チームは機能不全に陥ったようだ。未邦訳の同著では、名デザイナーたちが続々と会社を去っていく理由が書かれている。 最初の亀裂 2016年、英国人デザイナーのジョナサン・アイブは、アップルのデザインチーム内で高まる不安と闘っていた。アイブが日常的な管理を司る役職を離れ、リチャード·ハワースがデザイン部門の副社長に昇進したのだ。ハワースが一社員から約20人で構成された結束の強いグループのリーダーになったため、緊張が生まれたのである。 アイブは10年以上にわたりスティーブ·ジョブズの下で働き、アップルでもっとも権力を持つ人物の1人になった。最終的な決定権はアイブにあったのだ。しかし、アイブの後を継いだハワースにはその力がなかった。アイブの異動
Click anywhere, without a mousePress ⌘ ⇧ Space and type the label of a UI element (e.g. F D) to perform a click. Scroll any appPress ⌘ ⇧ J and start scrolling with J ↓ and K ↑. Hold Shift to scroll faster. Switch to another scroll area by pressing Tab or the labeled Numbers. Search and clickPress ⌘ ⇧ / and type what you want to click. Use the arrow keys to focus on another UI element. Alternativel
Nodesign.dev | Tools and resources for non artistic developers
Search Nodesign.dev | Tools and resources for non artistic developers May 11, 2024 The ultimate collections of illustrations, art, pictures, fonts, images, icons, css frameworks, favicon generators, color palettes, backgound generators, ui inspirations and many more nodesign tools. Get to know the best online favicon generators so that you have a selection of your favorite websites open in differe
見え方や転ぶ理由が伝わるように整理してみました。転んだことのある方や、視力の悪い方のお話を多めに入れています。
今更の React v18 : children の扱いが変わった (TypeScript) - かもメモ
ようやく React v18 のキャッチアップを始めたのでメモ。 React.FunctionComponent (FC), React.Component に暗黙的に含まれていた children が除かれた children を props として受け取るには明示的に children: ReactNode のように型定義をする必要がある // Before const MyComponent: FC = (props) => { return ( <div>{props.children}</div> ); }; // After type MyComponenProps = { children: React.ReactNode; }; const MyComponent: FC<MyComponenProps> = (props) => { return ( <div>{prop
Test::Deep, Test::Fatal, Test::Mock::Guard などが持つ機能を内包
Smooth and simple transitions with the View Transitions API | Web Platform | Chrome for Developers
The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+. Transitions created with the View Transition API. Try the demo site – Requires Chrome 111+. Why do we need this feature? Page transitions not only look great, they also communicate direction of flow, and make it clear which elements
本記事は リクルートengineers アドベントカレンダー 24日目の記事です。 リクルートライフスタイルで「じゃらん」のアプリ開発を担当している桐山です。 われわれのチームでは、「じゃらん」アプリの一部にFlutterを採用しています。また、DroidKaigi 2020において「FlutterをRenderObjectまで理解する」というタイトルで登壇します。 本日の記事では、そのDroidKaigiで話す内容の基本的な部分について書いていこうと思います。 はじめに Flutterとは、Google製のクロスプラットフォームの開発技術です。一つのコードベースで、複数のプラットフォームのアプリケーションを構築できます。 FlutterでUIを構築する際、開発者は基本的にWidgetのみを操作し、その内部の仕組みについて意識する必要はそれほどありません。しかし、内部ではUI構築の最適化の
StorybookはアプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるUIツールです。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができます。この説明が最初は”?”の人でも本文書では公式のドキュメントよりもさらにシンプルなコードを利用して動作確認を行なっているのでStorybookの基礎的な利用方法や機能を短時間で理解することができます。 Storybookが利用できるJavaScriptのフレームワーク/ライブラリにはReact以外にもVue.js, React Native, Svelte, Amber, Angularなどがありますが本文書ではReactを利用しています。本文書で動作確認を行なっているStorybookのバージョ
HTMLに求められることは何か？ユーザーから検索エンジンに要求されることは、単なる文章ではなく、「意図」になりました。そのため、ウェブページを記述する基本言語であるHTMLには、 ことが求められます。 HTMLを適切に記述することで、そのコンテンツが持つ本来の意味を検索エンジンに伝えやすくなり、SEOに強力に働きます。 セマンティックとは何か？「本来の意味やユーザーが求める意図」を意識した検索のことを「セマンティック検索」といいます。現在ではランクブレインなどの人工知能を活用しながら行われています。 「意図」を意識してHTMLを記述することを「セマンティックHTML」や「セマンティックにマークアップ」などと呼びます。 せっかく作った渾身のコンテンツをより正確に検索エンジンに伝えるためには、HTMLを理解し、文法通りにマークアップすることがどうしても必要です。 HTMLマークアップのポイント
<file-attachment> element - GitHub製のWebアップロードコンポーネント MOONGIFT
最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。 elementの使い方 利用例です。Web Componentsとして定義されています。 </file-attachment><file-attachment directory input="upload"> <input id="upload" type="file" multiple/> </file-attachment> 表示です。 ファイルをドロップします。 elementはGitHubが開発
HTMLFormElement: requestSubmit() method - Web APIs | MDN
HTML DOM APIHTMLFormElementInstance propertiesacceptCharsetactionelementsencodingenctypelengthmethodnametargetInstance methodsreportValidity()requestSubmit() reset()submit()EventsformdataresetsubmitInheritanceHTMLElementElementNodeEventTargetRelated pages for HTML DOMBeforeUnloadEventDOMStringMapErrorEventHTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBRElementHTMLBaseElementHTMLBodyElementHT
ココナラでデザインマネージャーをしている外崎(@TakumiTonosaki)です。弊社にもついに新卒デザイナーを迎えることになりました。育成プランを練る中で、若手UIデザイナーが最初に身につけたい、そして今後も汎用的に使えるスキルについて僕なりのアイデアが浮かんだのでこの記事を書きました。 ◎この記事読んでもらいたい人 ・新卒、若手UIデザイナー ・デザイナーのメンター ・情報設計が上手くなりたい人全般 デザインの本質と「情報設計」の重要性UIデザイナーとして学ぶべきことはたくさんあります。UX的な考え方やGUI、グラフィック（カラーやフォント）、エンジニアリングやビジネスなどどれも大事。 デザインの学ぶべき領域は広いですが、「デザインの本質」って何かというと、ひとつは「コミュニケーション」だと個人的には思っています。UIデザイナーであれば、インタフェースを通じてユーザーとのコミュニケー
ジョニー・アイブが指差した「衝撃的なクルマ」 現在は不明ですが、ジョニー・アイブは以前、ベントレーのミュルザンヌを愛車として好んでいました。 テック系メディア「The Verge」によると、ミュルザンヌでドライブに出かけたアイブは、ジャーナリストに対し「道路には、衝撃的なクルマが走っている」と語ったそうです。 彼が特に「不可解な」デザインの例として指したのが、近くにあったトヨタ・エコー。エコーはずんぐりとしたボディが特徴で、フロントはトヨタらしいデザインになっています。 詳しい説明を求めたジャーナリストに対し、彼はこう語りました。 不可解なんですよね。何でもないことなんですが、ただただ無味乾燥なのです。 この発言は、企業のデザインへの無頓着さについての話題の一部として出てきたものです。彼は「より良いものではなく、コストやスケジュールだけを考えて作られ、見た目や動作に十分な配慮がされていない
WebRTCのサンプル一覧｜npaka
以下の記事を参考に書いてます。 ・WebRTC samples 1. WebRTC「WebRTC」を使用すると、オープンスタンダード上で動作するリアルタイム通信機能をアプリケーションに追加できます。ピア間で送信されるビデオ、音声、および一般的なデータをサポートしているため、開発者は強力な音声およびビデオ通信ソリューションを構築できます。 このテクノロジーは、すべての主要なプラットフォームのネイティブクライアントだけでなく、最新のすべてのブラウザで使用できます。「WebRTC」の背後にあるテクノロジーは、オープンWeb標準として実装されており、すべての主要なブラウザで通常の「JavaScript API」として使用できます。 AndroidやiOSなどのネイティブクライアントの場合、同じ機能を提供するライブラリを利用できます。 「WebRTC」プロジェクトはオープンソースであり、Apple、
Say Hello to selectmenu, a Fully Style-able select Element I want to introduce you to a new, experimental form control called <selectmenu>. We’ll get deep into it, including how much easier it is to style than a traditional <select> element. But first, let’s fill in some context about why something like <selectmenu> is needed in the first place, as it’s still evolving and in development. Ask any w
事業会社の新卒デザイナーが5タイプの現場で価値を発揮するためにしたこと クックパッド Product Design Leadのよーた（@yotaszk）です。 レシピサービス「クックパッド」のユーザー体験に責任を持ち、今年からチームをリードしていましたが、11月30日付でクックパッド株式会社を退職します。 このnoteでは、2022年4月に新卒入社、インターンを含めると約3年間で実践した「事業会社の新卒デザイナーが5タイプの現場で価値発揮するための超具体的なコツ」を実例を交えながら紹介します。 今日からぜひ真似してみてください！ はじめに
Digital designer and advisor, designing user interfaces and human-computer interaction, product design, ux design and all other experience since 2008. I have been featured in asian books [6], magazines [>20], various awards [58] and exhibition [1].
「失礼ながら意外」 京急通勤形が受賞のワケ
最も優秀な鉄道車両に毎年贈られる「ブルーリボン賞」に異変が生じている。これまでは花形の特急や新幹線車両が受賞してきたが、鉄道開業150年の今年は通勤形車両がその栄に浴したためだ。 最も優秀な鉄道車両に毎年贈られる「ブルーリボン賞」に異変が生じている。これまでは花形の特急や新幹線車両が受賞してきたが、鉄道開業150年の今年は通勤形車両がその栄に浴したためだ。それも、20年前にデビューした車両のマイナーチェンジ（一部改良）仕様で、歴代の受賞車両に比べると地味な印象は否めない。ネット上では「失礼ながら意外」といった反応も。日々の生活に密着した通勤電車に白羽の矢が立ったのはなぜなのか。その理由を探ってみた。 鉄道愛好家の投票で選出 真っ赤な車体に白い帯をまとった新型車両。東京と羽田空港、神奈川県の三浦半島方面を結ぶ京浜急行電鉄の電車だ。平成14年に登場した「1000形」という形式の車両を改良した「
Apple SVP Craig Federighi talks about the iPad’s new cursor and Magic Keyboard Even though Apple did not invent the mouse pointer, history has cemented its place in dragging it out of obscurity and into mainstream use. Its everyday utility, pioneered at SRI and Xerox Parc and later combined with a bit of iconic* work from Susan Kare at Apple, has made the pointer our avatar in digital space for ne
Visual Regression Testing
Image Source: Visual Regression Testing Tools“When we talk about visual regression testing, we are concerned with preventing unintentional changes to our application’s visuals. If we change the styles of a Button component, how can we be sure that we haven’t messed up the styles of our ButtonGroup?” Regression testing, in general, is validating that the changes we introduce to our source code do n
Julie Grundy kicks off this, our fifteenth year, by diving headlong into the snowy issue of customising form inputs. Nothing makes a more special gift at Christmas that something you’ve designed and customised yourself. But can it be done while staying accessible to every user? In my work as an accessibility consultant, there are some frequent problems I find on people’s websites. One that’s come
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
業務系システムは『イケてるフラットデザイン』だと使いにくい？現場が本当に必要だった物との比較
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳
Remove TypeScript - laiso
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ
【検証】React.FC と React.VFC はべつに使わなくていい説
ブラウザのキーボードを制御する inputmode
無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
ReactHooksでvideoを乗りこなす
2020年に流行するWebデザインの最新トレンド15個まとめ | Web Design Trends
アップルの「伝説的なデザインチーム」が解散するにいたった内幕 | 未邦訳『アフター・スティーブ』に書かれたこと
Homerow | Keyboard shortcuts for every button in macOS
降りるときに『怖いな』と感じてしまう階段のデザイン→視力が悪い人の見え方・転んでしまう理由
一瞬でテストを Test2::V0 対応させる - 私が歌川ですScrapbox支店
FlutterにおけるWidgetとElementとRenderObjectの基本
ゼロから始めるStorybook入門(React編) | アールエフェクト
SEOに重要な全HTMLタグと構造化マークアップテンプレート
デザイン4原則でUIの観察眼を鍛える｜Takumi Tonosaki
スティーブ・ジョブズの腹心〝伝説的デザイナー〟がトヨタ車を全否定する「超一流」の理由 | AppBank
The selectmenu HTML Tag | CSS-Tricks
Cookpad Design Magazine｜クックパッド公式note｜note
Elena Saharova
How Apple reinvented the cursor for iPad | TechCrunch
Making a Better Custom Select Element
automaton-media.com
automaton-media.com
plentyofquality.net
plentyofquality.net
automaton-media.com
togetter.com