UI Movement - The best UI design inspiration, every daySearch for products, categories, screen types, or elements...
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
![【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/69fd58e599edd140a8c7e26e7058d9122c7ed7a1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20201207%2F20201207184733.png)
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
スマホのhoverの動きをSassで矯正させるmixin - Qiita
a { color: gray; @include hover { color: red; } @include active { color: green; } } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div ontouchstart=""> </div> <script src="/js/userAgentC
スマホで触れている間だけhoverする - Qiita
新たにしっかり書きましたので、長いですが下記記事を御覧ください。 スマホでhoverの動きをSassで矯正させるmixin CSSにhoverを与えたとき、スマホではタップして指（指とは限らない）が離れるときに発火します。 感覚的にはタップした瞬間から離れるときまでの間がhoverであって欲しい。 ググるとjQueryのタッチイベントで、触れた瞬間から離れるまでの間にクラスを与えるという方法で回避しているようです。hoverを指定したものはPCではhover、スマホではタッチイベントになります。 個人的な考えですが、CSSで解決出来るものはCSSで解決したいです。 スマホに擬似クラスhoverを与えてはいけません。 指が離れてから発火してしまうので、スマホはtouchイベント、PCは:hoverなコードを書きます。 コード $('a, input[type="button"], input
Design for Offline
No internet? No problem. Make your product come alive with offline design Nearly 1.6 billion people around the world live outside the range of mobile internet networks. Millions more bounce in and out of network connectivity when on-the-go. Wi-Fi access may also be scarce, or the cost of mobile data prohibitive. In Uganda, for example, internet access can cost nearly 11% of monthly expenses. Peopl
カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2）|WD Online
2016.01.04 課題解決のためのUI実装講座 Web Designing 2016年1月号 カテゴリーが多いスマホサイトで役立つ「スワイプ対応メニュー」（2/2） スワイプ対応タブメニューを実装してみよう Text：町田なつみ、古川佑太朗 スワイプに対応したタブメニューの事例から、そのメリットや気をつけるべき点が把握できたところで、サンプルを使って実装例を解説していこう。 サンプルファイルダウンロードのご案内 このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。 ［SWIPE TAB 01］タブ部分を配置し横スクロールに対応させる それでは、スワイプ対応タブメニューをつくってみよう。コンテンツ部分のスワイプ時に連動して、タブメニューをスクロールさせ、常にカレントのタブが表示されるようにする。さ
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)
基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なかなかわかりにくかったりするものです。 なので、デザインデータに入れてもらったほうが、実機に近い形での見え方がイメージできるのでデザイナーさんもエンジニアも幸せになれるのでは、と思いました。 スマートフォンの画面サイズはさまざまですが、基本的にはiPhoneを基準につくるデザイナーさんが多いかと思うので、少なくとも多くのユーザを占めるiPhoneの見え方は担保できるかな、という感じです。 まぁそんなデザイナーさんの手助けになればと思いま
apple-touch-icon.png をサイトに設定する意味のまとめ
サーバ上の過去の不要なファイルをお掃除したので、久々にアクセスログで 404 の解析をしていたら、案の定消しすぎていたファイルの他に、見慣れないログを見かけました。 "GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0" "GET /apple-touch-icon-114x114.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0" "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 962 "-" "MobileSafari/
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
スマートフォンのフォントサイズをvwとcalcとremでリキッドにする | Katsunori Nippo
スマートフォンのフォントサイズは固定でいいのか問題スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 font-size: vwという解決方法vwという単位は画面幅に応じてピクセル数が変わるもので、ウインドウ
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify | PSYENCE:MEDIA
WordPressをマジメにAMP（Accelerated Mobile Pages）対応させた話 #AMPlify ku-suke 2016.10.06 474 6616395150 こんにちは、2016年中途入社のku-sukeです。現在はkidslyという保育園むけサービスのプロダクトオーナーを担当しています。今回は個人的にも注目しているAMP（Accelerated Mobile Pages）をこのテックブログに実装した話を書きたいと思います。特に、WordPressプラグインを入れるだけの簡易対応ではなく、フッターまわりやデザインの調整などをまじめに対応させたので、企業をはじめメディア運営をWordPressで運用されている方のお役に立てば幸いです。 事業サイドがAMPに乗っかるか考える事 - ku-sukeのブログ AMPとは？ AMPとはAccelerated Mobile
Navigation · Formstone
Navigation Demo View Documentation Basic By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active. <h5 class="nav_handle">Menu</h5> <nav class="navigation" data-navigation-handle=".nav_handle"> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> $(".navigation").navigation();
ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め) ｜ スターフィールド株式会社
WEBデザインとして定番として使われているものの中には、 実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、 そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。 今回紹介するものはスマホの時に特に問題となるものが多いです。 PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。 ↓このページのQRコード 予告のないポップアップ・別タブ表示(特にスマホ) 通常リンクと区別のない唐突な別タブでのリンクや、 ページ訪問時のポップアップでの情報掲載などは、 ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。 スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。 DEMO リンク先を別タブで表示するときは、
やるやんwindow.matchmedia - FICC Workbook
window.matchmediaとは簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。 ただ、IE9以下では使えません！スマホはバッチリ！(Android3以下…？知らない子ですね…。) 使い方とりあえず var widthMatch = window.matchMedia("(min-height: 500px)").matches; console.log(widthMatch); これで、高さの最小値が500pxあるかどうかがブール値で出てきます。 そして、主な使い方として // ウィンドウサイズでの処理 if (window.matchMedia("screen and (m
vhを使ったレスポンシブなフルスクリーンコンテンツの作り方 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
近頃フルスクリーン写真を使ったサイトデザインが増えてきました。 第一印象のインパクトやデザイン性など、見ていて楽しくなるサイト作りの方法として注目を浴びている様子です。 しかしフルスクリーン写真を利用したデザインをレスポンシブで実現使用すると少し厄介な問題があります。 今回は「vh」という単位を利用した、フルスクリーンコンテンツの作り方を紹介します。 「vh」とは？ 「vh」とは、「viewport height」という意味合いの単位です。 デバイスの表示領域（viewport）の高さに対しての割合を設定することができ、1vh = viewportの1/100で計算されています。 viewportを基準としたものにはこの他「vw(viewport width)」「vmin(viewport minimun)」「vmax(viewport max)」の３種類があり、vmax以外についてはほと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cow2design.com
グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 初代編集長ブログ―安田英久
GitHub - mblode/burger: Burger - The minimal hamburger menu with fullscreen navigation.
