Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info
2025年6月23日Bin Packing,データ構造・アルゴリズムCSS Grid や Flexbox により、CSS だけで表現できるレイアウトの幅が広がりました。しかし、グリッドの枠を超える柔軟な UI は CSS のみでは実装が困難です。例えば、短いメモと画像を二次元に並べる以下の UI は CSS Grid や Flexbox だけでは表現できません。 CSS Grid も Flexbox も行や列を定義し、その中に要素を配置するため、行や列にとらわれない UI の実装は困難です。よく使用される Masonry レイアウトは Grid より自由度が高いものの、列か行の片方を厳密に並べるため柔軟性に欠けます。 本記事では Skyline アルゴリズムがこのような柔軟な配置を実現できることを示します。基本的なアルゴリズムを紹介した後、より多くの空きスペースを削減し、より美しいレイアウ
Dialog と Popover #3 | blog.jxck.io
Intro 前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視 (display: none) な要素となっている。open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() 基本的に <dialog> は動的に表示されるため、JS で開くことになるだろう。しかし、open 属性を動的に付けるのではなく、show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEventLis
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
Atomic Design by Brad Frost
We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster
ウェブサイトのデザイン変更が腹立つ理由
あんなに簡単だった事がなんでこんなに面倒に?! ってなりますよね。 ウェブサイトのデザインが変わると、戸惑う事が多いと思います。簡単な見た目だけの変更ならともかく、メニューやボタンの配置は少し変わるだけでもユーザー体験に大きく影響します。 米GizmodoのMario Aquilar記者はSeamlessというオンライン出前サービスを利用しているのですが、そのサイトのデザインが大きく変更して、かなりご立腹な様子。と同時に、我々がどうしてこんなにリデザインに抵抗があるのかを調査したようです。 ああSeamlessよ、私に餓死しろというのか？ 大手オンライン出前サービスが数週間前に劇的なリデザインを行って以来、多くの人がそう思っています。何一つとして以前と同じ場所にないのです。新しいインターフェイスの巨大なエレメントは、旧デザインに比べるととっちらかった独房のようです。 まだ技術的に未発達だっ
Notification UX - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ■ Notification UX：最適なプッシュ通知のための UX 観点 iPhone,Android のネイティブアプリの特権であるプッシュ通知／Notification。 ユーザーの行動を喚起するために、便利に使えるサービスでありながら、 通知の送り方を一度間違えてしまうと、ユーザーに嫌われてしまいます。 そうすると、サービス事業者は失敗を恐れるあまり、 通知を送って失敗するよりも、送らないで済まそうと考えるようになってしまいます。 最悪、通知の方法を失敗すると、 それほど日常的
User Onboarding | A frequently-updated compendium of web app first-run experiences
User Onboarding is the process of radically increasing the likelihood that new users become successful when adopting your product. Teardowns Let's learn some lessons from how popular web apps do it! Here's the latest: And here are some other recent ones: Zapier Canva SavvyCal » See all teardowns Onboarding Design Articles Never Mix Up Features with Benefits Ever Again… Bulletproof User Onboarding
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
0から学ぶアプリの配色 - Rejasupoem
当方Androidエンジニアをしておりますが、プライベートでアプリを作るとき、画像リソースについてはAndroid組み込みのものを使ったり、Fontawesomeを使ったり、フリー素材を使ったりしています。 しかし配色はインターネットに落ちていなくて、自分でやるとイマイチで、いい感じにしたいという気持ちがありました。 そこで、調べたり試行錯誤をして知見が得られたので、配色に悩むエンジニアのために共有します。 3行まとめ デザインはセンスで行うものではなくロジックで成り立ってる、つまり努力でなんとかできる Color Scheme Designer 3 便利 配色を学ぶのには下のスライドが一番分かりやすかった 色彩センスのいらない配色講座 from Mariko Yamaguchi STEP 1. 対象に興味を持つ 〜〜で必要だから勉強しなければって始めてたものが長く続いたことがないので、
Kill The Hamburger Button | TechCrunch
That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement, and you should p
Feed UI Patterns - Rejasupoem
タイムラインとかフィードを見る系でいい感じのアプリない？と聞かれたのでアプリのUIを眺めていました。 Feedly foursquare YouTube SocialCam Path Pinterest Gunosy 見比べてみて、誰が投稿したか、誰が投稿に対して反応したか、何時に投稿されたか、何を最初に知らせたいのか、写真を良く見せたい、などそのサービスにとって何が重要なのかによって "いい感じ" の意味が変わってくるなあと思いました。 ちなみに僕はデザインの引き出しが少ないので、まとめサイト的なものを見て探しています。 Mobile UI Patterns Mobile Design Pattern Gallery Android Interaction Design Patterns AndroidViews Android // UI Patterns lovely ui andr
Psychology of waiting and Facebook - Mercury Blog
The psychology of waiting, loading animations, and Facebook Last Friday, I had the pleasure of speaking at Renaissance, an iOS developer conference in San Francisco, about the heightened importance of animation in iOS 7 and how animation can be used to improve usability1. One of the points that I discussed briefly was the use of loading animations to indicate status. Before I dig in, let me start
FacebookのニュースアプリPaperのUIと、その背後に見える戦略について | fladdict
Introducing Paper from Facebook on Vimeo. FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。 使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。 外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」 というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。 これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 右上のボタン群が主張するUI上のメッセージは、
アプリの評価を良くするということについて考える - Rejasupoem
なぜ評価を良くすることが重要なのか Google Playでグロースハックする5つのポイント Googleの発表によると、星4つ以上の評価を受けているアプリは、そうでないアプリのなんと29倍のレベニューを生んでいるそうです。 Google Play IAP revenues rocket 700% Apps with a two star rating are likely to generate 74x more revenue than a one star-rated app. Jumping to three stars meanwhile saw a 1.8x increase in revenue, while four-to-five star games on averaged generated 2.8x more money than three star-rated
「スマホ受けの条件が分かった」nanapiのQ&Aアプリ『アンサー』はなぜチャット型なのか、けんすう氏ら開発陣に聞く - エンジニアtype
「スマホ受けの条件が分かった」nanapiのQ&Aアプリ『アンサー』はなぜチャット型なのか、けんすう氏ら開発陣に聞く 2013/12/25公開 「β版では5分以内の即レス率90%」というキャッチーなプレスリリースと共に、2013年12月５日、nanapiが公開したQ&Aアプリ『アンサー』（iOSのみ対応）。そのレスポンス率の高さから、多くのWebメディアに取り上げられ話題となった。 その一番の理由は、『アンサー』がスマホユーザー向けに特化されたチャット型のインターフェースを搭載したことにある。投げかけられた疑問や相談事を、ユーザー同士の「会話」を通じて解決するのが特徴だ。 「徹底的にスマホユーザーの志向に合わせたアプリにした」と語るのは、『アンサー』開発プロデューサーの岡山智氏。さらに、代表取締役のけんすうこと古川健介氏は、「今までわれわれが培ってきたWebの常識をすべて捨てて開発した意欲
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Skyline algorithm for packing 2D rectangles - Julien Vernay
http://realui.org/
美しい無料UIエレメント素材35個まとめPhotoshopVIP |
http://www.motaitalic.com/skin/frontend/default/mota_italic/images/loading.gif
