Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
新型コロナで危機的状況の芸術家を支援。医療・福祉・まちづくり関係者が「 #SaveArts プロジェクト」を開始
新型コロナで危機的状況の芸術家を支援。医療・福祉・まちづくり関係者が「 #SaveArts プロジェクト」を開始医療・福祉・まちづくり関係者の関係者が、新型コロナによる被害を受けている芸術家を支援するクラウドファンディング「 ＃SaveArts プロジェクト」を立ち上げた。 「 ＃SaveArts プロジェクト」イメージ 医師・医療福祉・まちづくり関係者が、クラウドファンディングサイト「READYFOR」にて、新型コロナによる被害を受けている芸術家を支援する「 ＃SaveArts プロジェクト」を立ち上げた。 同プロジェクトの目標金額は200万円で、5月29日の11時まで支援を募る。今回は休業自粛の影響が強く出ている「舞台芸術」のなかでも、とくに演劇・歌劇・音楽劇を中心に支援。集まった支援金は応援メッセージとともに、演劇部門は平田オリザ、歌劇・音楽劇部門は桜田ゆみを通じ、各団体に届ける流れ
1年間1185回のABテストから見えたスマホUI最適化の落とし穴｜MarTechLab（マーテックラボ）
「スマホのCVRが上がらない、、、」 そんなご相談を特にこの1,2年で多く頂くようになりました。 Criteo社の調査によれば、ECサイトにおけるモバイルからの売上シェアは健康/美容系で69％、平均でも55％とすでにPCを上回っており、我々のクライアント様でも90%以上がモバイル経由の売上という会社も決して少なくありません。そのため、モバイルサイトでCVRを上げることは非常に重要になってきています。 そんな状況の中、我々はOptimizelyというABテストツールを日本で提供しながら、去年1年間で述べ1185回のABテストに携わってきました。 本日はその経験の中で、実際に感じたモバイルサイトのUI/UXを確認する上で、 特に見落としがちなポイント3点と、その改善事例についてご紹介したいと思います。 それではいってみましょう。 目次 1.スマホはスクロールされる。だが見てない。 2.「実機」
CSSファイルから未使用のスタイルを削除する4つの方法
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。 4 Ways to Remove Unused CSS by Chidume Nnamdi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 再利用可能なUIコンポーネント内の未使用CSS 1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法 2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法
TikTokが制した、世界の「次に栄える場所」
黄 未来（こう・みく） 1989年中国・西安市生まれ。6歳で来日。南方商人である父方、教育家系である母方より、華僑的ビジネス及び華僑的教育の哲学を引き継ぐ。早稲田大学先進理工学部卒業後、2012年に三井物産に入社。国際貿易及び投資管理に6年半従事したのち、2018年秋より上海交通大学MBAに留学。現在は中国を本拠地として活動。オンラインサロン「中国トレンド情報局」も主宰。 Twitter：@koumikudayo TikTok 世界で最も使われるアプリ「TikTok」はどのように生まれたか？／「TikTok」を生み、新たな技術大国・中国を制したバイトダンス社とは？／世界を席巻するショートムービー革命とは？ 中国籍を持ちながら日本で各種のSNSとともに育ち、現在は中国経済の最前線で活躍する著者にしか書けない奇跡の１冊です。 バックナンバー一覧 11月3日、アイドルグループの嵐が始めることでも
【検証】クリックされるボタンの色は？ | WebNAUT
検証したパターン 調査結果 全アクセスのコンバージョン率（CVR） 結果は下記の通りとなりました。 なんと！緑色がもっともCVRが低いという結果になりました。 どうやら、無条件に「緑色のボタンはクリック率が高い」という結果にはならないようです。 Firefoxをダウンロードしたユーザーと、ビーワークスの採用に応募しようとしたユーザーには、何か違いがあったのでしょうか？ 「どこから流入したか」によって結果に違いがあった 調査対象ページにアクセスしたユーザーは、何かきっかけがあって、ビーワークスの採用に興味を持ってアクセスしているはずです。そこで、どこから流入したのか、「参照元」のセグメント別に結果を分けて分析してみます。 こうやってセグメント別に分けてみると、参照元によってCVRの平均値自体に大きな差があることがわかります。CVR順に並べると、検索 ＞ WebNAUT ＞ なめぱら という結
「5人でユーザテストすればユーザビリティ上の問題のうち85%が見つかる」の元ネタ論文を解説する｜Mikio Kiura / ANKR DESIGN
Webサービスやアプリなど開発や運用に関わっている方であれば、こんなことを耳にしたことがあるのでは無いでしょうか？ 5人でテストを行えば、ユーザビリティ上の問題のうち85%を発見できるこれらは業界的にはある意味で常識ですが、色々話を聞いてみると、この常識の「出処」あるいは「根拠」ってあんまり知られていないようなのです。 もちろん、ちょっと知識のある人であれば、ユーザビリティ業界の第一人者であるヤコブ・ニールセン博士が提唱したというところまでは知識として知っているでしょう。しかしながら、その元ネタとなった論文を実際に読んだ人、あるいは85%という数字の根拠やその条件について理解されている方はどの程度居るのでしょうか。 ということで本記事では「ユーザテストは5人で85%」の元ネタである下記の論文について、解説、と言うとちょっと大げさかもですが、概要を紹介してみたいと思います。願わくば、この記事
雑誌『MdN』休刊のお知らせ｜株式会社エムディエヌコーポレーション
1989年の創刊以来、皆様に並々ならぬご支援を頂戴してまいりました『MdN』でございますが、4月号（3月6日売り）を持ちまして休刊させていただくことになりました。 デザイン専門総合雑誌として、創刊以来一貫してクリエイティブ業界の方々が必要とする最新情報をお届けしてまいりましたが、月刊での刊行ペース、そして2019年2月号（1月5日売り）からの隔月刊行ペースで、読者のニーズに適した情報を深度やスピード感のバランスを見ながらお届けすることが難しいと判断致しました。そこで紙媒体としてのMdNはその役割を終え、新たにWebメディアとして展開していくこととなりました。 発行から29年もの期間、多大なるご支援とご声援をいただきましたことを、この場を借りまして厚く御礼申し上げます。誠にありがとうございました。 今後はWebメディアとして、いままでに変わらぬご愛顧とご支援をいただきますよう、何卒よろしくお
【保存版】使わないと損！デザインに使えるおすすめ背景素材サイト15選｜未経験からWebデザイナーになるには？｜free life
ここ数年でフラットデザインが流行ってるので、デザインする時に背景は単色が多かったのですが、LPのデザインなどをするようになり、背景のパターンをよく使うようになりました。 色々と重宝するので、いつも利用している素材サイトをまとめてみました。 いちいち探すのがめんどくさい人は、ブックマークしてね。
ノンデザイナーこそ知っておきたい「アフォーダンス」入門
さまざまなホームページを運営していると、**「このホームページだけなぜかコンバージョン率や回遊率が低い…」*と理由も分からず悩んでしまうことはないでしょうか。 そのような時には、デザインの「アフォーダンス」*を確認してみてはいかがでしょうか。 アフォーダンスは、プロダクトデザインの現場でよく使われている言葉ですが、現在ではWebデザインの現場でもよく耳にする言葉です。 そのため、たとえデザイナーでなくとも、Web担当者やグログ運営者であれば、知っておいて損はありません。 今回は、ホームページのボタンをクリックしてもらい、結果的にコンバージョン率を上げやすくする「アフォーダンス理論」の概要についてご紹介していきます。 「アフォーダンス」とは？ アフォーダンスとは、アメリカの認知心理学者ジェームズ・ジェローム・ギブソン(James Jerome Gibson)の提唱した知覚に関する造語です。「
【実例付きで詳細解説】アフォーダンスをあなたはきちんと理解してる？ - プログラミングとデザイン、スタートアップの話
あらゆるデザイナーのバイブル『誰のためのデザイン』で紹介された「アフォーダンス」という言葉は、今や多くのデザイナーが日常的に使い、意識するキーフレーズとなっている。しかし、その使われ方が著者ノーマンの意図したものと違う形で広まってしまっているということで、彼は『誰のためのデザイン』の改訂版で、アフォーダンスに加えて「シグニファイア」という新たな言葉を定義し、その違いを説明している。 人間中心デザイン 発見可能性 アフォーダンスとシグニファイアとの違い デザイン関連で最近見つけた良書 人間中心デザイン 著者ノーマンの基礎哲学は人間中心デザインだ。 人間中心デザインでは、まず人間のニーズ、能力、行動を取り上げ、それからそのニーズ、能力、行動に合わせてデザインする。良いデザインは心理学とテクノロジーを理解する所からはじまる。良いデザインとはコミュニケーションを要するのである。 対象物とそれを扱う
【保存版】スマートフォンEFO（フォーム改善）のための15カ条 | UI改善ブログ by f-tra
スマートフォンの利用者が年々増加するなか、フォームのスマートフォン対策はもはや必須のものとなりつつあります。 このとき、ただスマートフォン向けにデザインを最適化するだけではなく、スマートフォン特有の制約や特徴をおさえたうえで改善することが大切です。 本日はスマートフォンの特徴をふまえながら、スマートフォン向けエントリーフォーム最適化（EFO）のポイントを「15カ条」にまとめてご紹介したいと思います。 スマートフォンEFO15カ条！ 本日ご紹介する「スマートフォンEFO 15カ条」は以下のとおりです！ 第1条: 表組みにするべからず 第2条: 拡大はオフにするべし 第3条: 項目は大きくするべし 第4条: 余白を充分に保たせるべし 第5条: リンクは極力配置するべからず 第6条: タップエリアとわかりやすくするべし 第7条: 項目数は極力減らすべし 第8条: 負担の少ない入力形式を使うべし
Microsoft、新デザイン言語｢Fluent Design System｣を発表。Vistaのような水々しいデザインでアプリ開発できるぞ
Microsoft、新デザイン言語｢Fluent Design System｣を発表。Vistaのような水々しいデザインでアプリ開発できるぞ2017.05.15 18:177,424 塚本直樹 半透明デザイン復活か…？ Microsoft（マイクロソフト）は開発者向け会議のBuild 2017にて、新デザイン言語｢Fluent Design System｣を発表しました。以前には｢Project Neon｣として知られていた本デザイン言語は、今年後半に登場する｢Windows 10 Fall Creators Update｣に組み込まれる予定です。 こちらはWindowsが公開した、Fluent Design Systemのプロモーション映像。 そしてこちらは、Build 2017 2日目のキーノートの映像です。Fluent Design Systemの紹介は24分36秒ごろから。 Mic
知らなきゃ損！ Webデザインの作業効率がアップするチートシート13選
Web制作をしていて、「あれ？あのショートカットなんだっけ？」「どのタグを使うんだっけ？」とうっかり忘れてしまうことはないでしょうか。そんなときにチートシートを活用すると、目的のショートカットやタグなどを素早く見つけられるので、いちいち検索する手間と時間が省けて効率的です。 そこで今回は、持っておくと役立つWebデザイン関連のチートシートを13個ピックアップしてご紹介します。 目次 Photoshop / Illustratorのチートシート コーディング関連のチートシート WordPress関連のチートシート Git関連のチートシート まとめ Photoshop / Illustratorのチートシート まずはWeb制作に必須のPhotoshopとIllustratorのショートカットをまとめたチートシートをご紹介します。持っておくと、まだ覚えていないショートカットや忘れてしまったショー
Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ - FOXISM
… 基本的なデザインはGoogle Playストアの評価部分を参考にしました。ほぼアレです。 一応レスポンシブというか、横幅800px以下の時に画像と評価部分の横並びが解除されるようになってます。横幅800pxというのはこのブログの今の状態に合わせたものなので、導入の際は自分のブログに合わせてください。 html <div itemscope itemtype="http://schema.org/Product" class="review-ex"> [f:id:c-miya:20170704103615j:plain]<!-- 商品画像 --> <div class="review-ex-right"> <div itemprop="name" class="review-ex-title">Xiaomi Sling Bag</div><!-- 商品名 --> <div class="
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
リダイレクトの警告
表示中のページから http://ferret-plus.com/amp/5167 にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？
2017年に入り、ウェブデザインのトレンドや動向を予想したエントリーを当サイトでもいくつか公開してきましたが、ウェブデザインやグラフィックの世界基準ソフトウエアの Adobe 社が今年のデザイントレンド予想を発表しています。 今回のトレンド予想はデザイン部門より10個、ビジネス部門から7個がサンプル例と一緒に公開されています。今回は、デザインなどクリエイティブな業種、職種に関わるひとが一度確認しておきたい、重要なポイントのみまとめてご紹介します。 これでもう悩まない！2017年のデザイントレンド完全ガイド 2017年に注目したいWebデザイン業界の動向やトレンド総まとめ 2017年のWebデザインはどうなる？デザイナーが注目したい流行トレンド10個まとめ 2017年のデザイントレンド10個まとめ ミニマルデザインの人気 : 2017年はミニマルレイアウトの人気が続くでしょう。ミニマルなUI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
