containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが

春です。入社式のニュースが流れてくる季節ですが、当社もこの4月に多くの新入社員を迎えることができました。 そんな若者について、そもそもXHTMLという単語は何だろうという反応をするかもしれない一方で、長らくHTMLと付き合ってきた人は、XHTMLについて複雑な想いを抱く方も多いだろうと思います。そんな往年のXHTML1時代を過ごしてきた方に改めてお伝えしたいことは、XHTML（HTML Standardでは正確にはXML構文）でHTMLを書くことが推奨されないことが仕様に明示されるようになるというものです。 これは、HTML Standardを管理しているGitHubにWarn that the XML syntax is not recommendedというプルリクエストが作成されたことによります。 このプルリクエストは、XML構文が記載されている14章に次のWarningを追加するとい

見えない人はWebをどう閲覧？　本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】

優れたデザインで話題となっている、国内外の最新Webデザインをまとめてご紹介。 インスピレーションやアイデアの参考になるのはもちろん、2024年のWebトレンド動向も見えてきます。 目まぐるしいスピードで新しいトレンドや技術が生まれるWebデザインだからこそ、できるだけ多くのサイトを実際に訪れ、あらゆる角度からアイデアを吸収できるかが鍵となります。 ここでは、制作の見本にしたい３１点のWebサイトを選んでいます。

CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。

この記事は2024年4月の法改正を踏まえた最新情報を記載しています アクセシビリティとは、身体的特徴・年齢・文化的背景・環境などにかかわらず、あらゆる人がアクセス可能（Access-Ability）な度合いを表す概念です。 民間企業を対象とした合理的配慮の義務化によって、ウェブにおけるアクセシビリティも注目を集めました。しかし、「実際に何をすればいいのか」「なぜ必要なのか」理解できていない方も多いのではないでしょうか。 本記事は、ウェブアクセシビリティの概要や必要性、対応するステップなどの基礎知識についてグッドパッチがまとめました。グッドパッチは2011年の創業以来、多くの企業に向けてソフトウェアUIデザインやUXデザインの支援をしてきた企業です。デザインファームにおけるパイオニアとしての立場から、ウェブアクセシビリティを解説していきます。 ウェブアクセシビリティは、法改正により注目が集ま

私は10年以上にわたり、「最先端の人気デザインを探る」ために数多くののデザイントレンドを調査してきました。 2024年も2ヶ月が過ぎ、今年人気になりそうなデザインスタイルが少しずつ見えはじめています。 この記事では、グラフィックやWebデザインなどさまざまな分野で注目されているデザイントレンドを詳しく調べてみたのでご紹介します。 デザインで魅了する最先端のスタイルや、革新的なAIツールなど「今後どうなる？」を深掘りしてみました。 Design Trends 2024 Webデザインからグラフィックデザインまで幅広い、クリエイター注目リスト 人間とAIを手を組んだ「AI生成アート」 表現豊かな「タイポグラフィ」 奥行き感と立体感を生み出すホログラム素材 美しく、不必要な要素がない「ミニマル＆ブルータリズム」 サブバドール・ダリなどから影響を受けた「３Dシュルレアリスム」 ２０２４年に注目した

UI/UXデザイナーが教えるデザインの基本濱野将氏：それでは、僕からは「ビジネスを実現する『デザイン』の基本」をお話しさせていただきます。よろしくお願いします。 今日のアジェンダはこんな感じです。「デザインの必要性」「デザイナーだけがデザインする時代はもう古い」「UI/UXについて」。今回はAIがテーマなので「AIを使ったプロジェクトの進め方」も少し紹介させていただきたいなと思っております。 簡単に自己紹介をさせてください。株式会社IMAKE代表の濱野と申します。職業はUI/UXデザイナーで、講師もさせていただいております。「IMAGE×MAKE. 想像を創造する」をテーマに、IMAGEとMAKEを掛け合わせた「IMAKE」という造語がそのまま会社名になっております。 やっていることとしては、デザインの制作事業やデザイナーの教育事業。あとは生まれが宮城県の女川町というところなんですが、そこ

自作の、地道で普通の内容のベンチマークを走らせてみたら、M1 Mac miniがMacBook Pro（M3 Pro、RAM 36GB）に勝ってしまった。どうしよう。 「頭がおかしい」と言う人がいるかもしれないので説明まず、Apple Siliconの第1世代である「M1」とは何か？ それは、コンピュータの拡張性とか可能性を全部投げ捨てて、「コンピュータをワンチップですべて構成したい」というAppleの野望が、ストレートに実現し過ぎてしまった謎SoC（System on Chip）です。 そして、その最小単位のコンピュータは、RAM 16GBでGPUは速いものの外付けGPUと同じか、最上位のGPUには勝てないぐらい。バッテリー寿命はやたらともつ、無駄のない世界。 それだとRAMが少なすぎるとかムービー書き出し処理速度が不十分だというユーザーに向けて、複数のチップを貼り合わせて拡張（M1 M

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』

開発の流れとして、デザイン決定後にデザイン（Figma）が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像（SVG）なのか、ラスター画像（PNGなど）か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは

3カ月ほど前にさかのぼりますが、2023年11月2日に開催されたCSS Nite主催のイベント「#朝までマークアップ」において、私は「HTML軽視されすぎ問題」と題した講演を行いました（#朝までマークアップ 開催のお知らせ参照）。講演の録画や、使用したスライドは共有できませんが（セミナーアーカイブ：#朝までマークアップ（2023年11月2日開催）で販売中）、本記事では講演の概要をご紹介します。 まず、業界的にHTMLが軽視されていると考える根拠として、The WebAIM Millionの調査結果やJens Oliver Meiert氏による調査結果を紹介。アクセシブルではない、あるいは仕様に準拠していないHTMLがWebにあふれている現状を共有しました。また、CSS-Tricksの記事「The Great Divide」が論じたフロントエンド職の分断に言及しつつ、相対的にHTMLよりもJ

[レベル: 初級] E-E-A-T はランキング要因ではない Google SearchLiaison が X で繰り返し説明しました。 E-E-A-T はランキング要因ではないし、E-E-A-T スコアも存在しない 刷新した SEO スターターガイドの「注力すべきでないこと」のセクションに次の記述があります。 Thinking E-E-A-T is a ranking factor No, it’s not. E-E-A-T がランキング要因だと考えること いいえ、E-E-A-T はランキング要因ではありません。 このセクションに関連した一連の発言です。 「E-E-A-T 自体が特定のランキング要因ではない」という点は、E-E-A-T「スコア」があると信じている人々には十分に明確だと思っていた。しかし、私たちが使用している E-E-A-T ランキングスコアは存在しないにもかかわらず、まだ

モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、

こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD（自閉症スペクトラム障害/アスペルガー症候群）とADHD（注意欠如・多動症）を持っています。トルクでは私の障害を受け入れてもらいウェブデザイナーとして勤務しています。 近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは「大人の発達障害ナビ」や政府広報オンラインの「発達障害って、なんだろう？」などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。 今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。 ASD編：発達障害デザイナーがデザインする上で工夫していること①モニターの輝

個人的にはもっと先になるのではと思っていたのですが、W3Cのニュースにあるように、WAI-ARIA 1.3のFirst Public Working Draft（初回公開作業草案）が発行されました。 さっそくですが、WAI-ARIA 1.2からの変更点を眺めていきましょう。 Change LogのMajor feature in this releaseのセクションでは、comment、mark、suggestionという3つのロールが追加されたことがわかります。また、aria-*属性はaria-braillelabel、aria-brailleroledescription、aria-descriptionという3つが追加されているのがわかります。さらに、aria-details属性が複数の要素と関連付けることが可能になったとあります。 追加された3つのロールは、ARIA annotat