Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
スマホ初心者の母にスマートフォンサイトのUIについて色々聞いてみました | AOGIRI.net（アオギリネット）
おそらく自分の母親世代である方も対象になるであろうスマホサイトを制作するために、母に色々と意見を聞いてみました。 母は、スマートフォンで私のインストールしたアプリでレシピ見たり、天気予報を見たり、ニュースを見たりするぐらいで、積極的にネットで検索はしないけど、必要に迫られると見るというぐらい。 そこでいくつか驚いたこと、なるほどと思ったことがあったのでご紹介します。 右上の三本線はメニューとは認識しないどころか、「メニュー」という文言すら何を指しているのか分からない 最近、スマートフォンサイトではヘッダの右上に「三本線＋メニュー」のボタンが配置されることが多くなっています。三本線だけ、というサイトもありますが、万人がターゲットのようなサイトは、「メニュー」「MENU」の記載が大体あります。 しかし、私の「このメニューっていうボタンを押したらメニューが表示されるって分かる？」という質問に返っ
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
WebのUIテスト自動化 - Seleniumを使ってみる - Qiita
Appiumを色々触っているんですが、仕組みが同じSeleniumもちょっと触ってみました。 だいぶ色々なことができそうなのでこちらも触りつつメモを取っていこうと思います。 実際の動画デモ 実際にどんなことができるのか、参考動画を撮ってみました。 内容的にはネタな感じにしていますが、どんなことができるか分かってもらえるかと思いますｗ Seleniumとは Seleniumはクロスブラウザ、クロスプラットフォームのUIテストツールです。 ブラウザに表示される要素を操作し、取得して想定されうる状態になっているかをテストできます。 また、画面のキャプチャを撮ることもできます。 検索してみると有用な記事がいくつかあるので、詳細はそちらを見てください。 ここでは簡単に触ったメモや所感を書いていきます。 JavaScriptテスト自動化ツールSeleniumのこれまでとこれから（前編）。第1回 日本S
iPhone 6で改めて考える画面解像度とUI | dotproof
新しいiPhoneの6と6 Plusが発表になりました。従来モデルよりそれぞれ少しづつ大きくなっていますが、日本ではまた人気が出るのでしょうね。特にiPhone 6 Plusの方は5.5インチと発表されていますので、前のモデルよりかなり画面が大きくなっています。 iPhoneもiPhone 3から4になった時に画面の解像度が2倍になってretinaディスプレイと呼ばれました。解像度が2倍になったので従来のグラフィック（ビットマップ）は2倍の大きさのものを用意する必要になり、@2xグラフィックと呼ばれるようになりました。今度のiPhone 6でも画面の解像度（ppi）は同じなのでやはり@2xのグラフィックで対応します。 なんで画面のサイズは4インチから4.7インチに拡大されたのに、UIグラフィックのサイズは同じでいいのかとお思いの方に向けて、改めて画面解像度とピクセルグラフィックの関係を説明
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
本当に美しいUIデザインとは？ SIRUSIが考える5つの指針