私が使用しているChrome拡張機能でWeb制作で役立つものを5つピックアップしました。今年度からWebサイト制作のキャリアが始まる方は参考にしてください！ PixelParallel「PixelParallel」は任意の画像を簡単にブラウザ上にオーバーレイ表示できる拡張機能です。デザインカンプをオーバーレイ表示することで実際のページとのデザインの差異を確認できます。 デザインをコードに落とし込む際に皆さんはどのようにコーディングするでしょうか？多くの人はデザインツールの画面を横に並べて、実際のページと比較しながら作業しているでしょう。 この方法だと余程の鑑識眼がない限り細かいズレが起こっていることに気付けないパターンが多いです。ピクセルパーフェクトの是非に関しては荒れそうなので今回は省略しますが、細かいズレが積もり積もってデザインを忠実に再現していないと判断されるのはもったいないです。
オウンドメディア担当者が知っておきたい GA4 × BigQuery 後編（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 今回は、全2回で Google アナリティクス4（以下「GA4」) × BigQuery に関して紹介をしていきます。 後編となる第2回は、BigQueryとGA４の連携方法や、GA4のデータをより活用するための方法についてご紹介していきます。GA4 × BigQuery を活用することで、オウンドメディアの分析や効果の可視化に大きく役立つと思いますので、ぜひ参考にしてみてください。 なお、BigQuery内でGA4データがどのように保存されているかなど、データ構造に関しては本記事で詳しく触れませんのでご理解いただければ幸いです。 BigQueryとGA4の連携方法 BigQueryのセットアップ Google Cloudのアカウントを作成 BigQueryのプロジェクトを作成する GA4からBigQueryにデ
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
by Alistair Shepherd published on Dec 14, 2023 Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully the internet still exists, although a bit slower, so they’re able to search online for how to scare tortoises away. T
DALL-E×ChatGPTでUIデザインを作成して実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Technology部のジョシュです。 今回は、OpenAIのDALL-EとChatGPTを使用して、UIデザインからコーディングまで行う方法を紹介します。 DALL-Eはテキストからリアルな画像を生成できるAIツールですが、添付された画像を分析し、それをもとにコードを生成することもできます。 本記事ではDALL-Eを使ってUIデザインを作成し、生成された画像をもとにChatGPTでTypeScriptのコード生成を行いました。実際に使用したスクリプトも紹介しつつ、実装までの流れを解説したいと思います。 DALL-EとChatGPTでデザインを作成する 基礎知識：今回使うツールについて 今回は下記3つのツールを使用します。 ChatGPT:テキストを理解し、会話を生成するために訓練されたOpenAIのAIモデル。今回のプロジェクトではアイデア出しやコードのブラッシュアップに使用
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの？ Figmaでどうやって設定するの？ という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに？ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで
![[Figma]variablesの使い方-Color-｜koppi](https://cdn-ak-scissors.b.st-hatena.com/image/square/7887fa501c1209f95d6058efd1f820703510eb36/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F145053186%2Frectangle_large_type_2_8bbc091e3094ad5d252e85b08b41fd52.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
はじめに IT業界では、デザインは単に「美」を追求すること以上の意味を持ちます。それは技術とユーザーを繋ぐ重要な橋渡しであり、印象的な「体験」を創出するための要素です。 Webデザインがその技術的な可能性を広げる一方、どのような「体験」を提供するかは需要に合わせて変化しています。そしてもちろん、流行り廃りもあります。 この記事では、現在のWebデザインのトレンドを解説し、参考となるサイトも併せて紹介していきます。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 トレンドの紹介 カスタムカーソル （出典：Developing a performant custom cursor） スクロールやクリックなどの基本的な動作につ
Designing better target sizes
Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.
CSS Loaders: A collection of more than 600 loading animations
The Biggest Collection of Loading Animations Over 600+ CSS-only loaders made using a single element <div class="loader"></div> Don't know which loader to use? Here is one for you 👇 Click the loader to copy the CSS Get another CSS Loader
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが全画面モーダルを実装したら、モーダルがメニューよりも上に表示されてしまい、モーダル表示中にメニューを操作できなくなってしまったとのこと。 最初のPull Requestの時点では、以下のような差分になっていました。 <div - className={'z-50 w-full border-b border-b-gray-shadow} + className={'z-10 w-full border-b border-b-gray-shadow} > これをレビューするときの僕の気持ち
React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
【発明】手を触れることなくティッシュが飛び出す!? 「全自動ティッシュ取り出し機」を作ってみた | となりのカインズさん
カズヤシバタ 発明家。1994年生まれ、大阪市在住。メカのエンジニアとして働きながら活動中。ゴージャス登場箱「デルモンテ」が話題になり、メディア出演多数。大阪にあるものづくり集団「ゆるつく」にも所属している。
デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。 Flexoki Flexoki -GitHub Flexokiは先日リリースされたばかり。アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームで、MITライセンスで利用できます。 サイトのUIデザインにもこのカラースキームが使用されています。
中華そば 七八
月〜土11:00~15:00 ※スープがなくなり次第終了 月〜土11:00~15:00 ※スープがなくなり次第終了
優れたデザインで話題となっている、国内外の最新Webデザインをまとめてご紹介。 インスピレーションやアイデアの参考になるのはもちろん、2024年のWebトレンド動向も見えてきます。 目まぐるしいスピードで新しいトレンドや技術が生まれるWebデザインだからこそ、できるだけ多くのサイトを実際に訪れ、あらゆる角度からアイデアを吸収できるかが鍵となります。 ここでは、制作の見本にしたい３１点のWebサイトを選んでいます。 Webマニアがざわついた最新Webデザインまとめ Don’t Board Me わずかに揺れるかわいい犬のイラストからはじまる、犬の散歩代行サービスのWebサイト。ピンクと青のパステルカラー配色や、巨大サンセリフ書体、犬好きに刺さるイラスト画によって親しみやすい雰囲気に。 NEWPEACE ページを開いた瞬間に表示されるイラストアニメーションも素敵ですが、スクロールをはじめると同
Next.jsやServer Actionsに限らずWebアプリケーション一般的な話になりますが、機能開発する際に、ユーザに勝手に操作されたくないデータを <input> タグを通じて受け取ることは避けなければなりません。 例えば、極端な例ですがECサイトで商品の価格を <input type="hidden" name="price" value="500" /> と書いてあった場合、ユーザが勝手にHTMLの値を書き換えてしまうと意図せず安い価格で購入できてしまいます。このように信頼できないデータを使って処理をしてしまうと困ります。この例の場合、渡すのは商品IDであり、価格はサーバ側でDBから取得した信頼できる値を採用するべきです。 と、書くとそんなこと当然だと感じるのですがNext.js App Routerから導入されたServer Actionsを使っていると、サーバ側とブラウザ側
こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD（自閉症スペクトラム障害/アスペルガー症候群）とADHD（注意欠如・多動症）を持っています。トルクでは私の障害を受け入れていただきウェブデザイナーとして一般雇用で勤務しています。 近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは「大人の発達障害ナビ」や政府広報オンラインの「発達障害って、なんだろう？」などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。 今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。 ASD編：発達障害デザイナーがデザインする上で工夫していること①
Chrome 124 以降、キーボードにフォーカス可能な子がない場合、スクローラーはデフォルトでキーボードをフォーカスできます。 背景 スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。 このようなケースでは、多くのウェブユーザーがマウスやタッチパッドを上下に動かして、要素をスクロールします。ただし、ユーザーがページを移動するには、ポインティング デバイス、トラックパッド、タッチスクリーンが最適な方法とは限りません。一部のユーザーは、キーボードのみを使用して HTML ページ間を移動し、フォーカス可能なすべての要素にアクセスすることがよくあります。これにはさまざまな理由が考えられます。振
Instrument | Digital marketing, branding and product experiences | Instrument
GitHub - wandb/openui: OpenUI let's you describe UI using your imagination, then see it rendered live.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 個人開発をする際に、UIUXに力を入れたい！ ただプログラマーである以上、センスや知識がない中でUIUXをキレに整えることはなかなか難しいと思います。 業務ではXDやFigmaでデザインが渡されているので、それを実装するのはできるけど自分で考えるのは難しい。。 そんな私と同じ思いを持っている方向けに、デザインツールを紹介します。 レイアウト：UI Pocket レイアウトは、以下の UI Pocketがとても素晴らしいサイトです。 このサイトは、有名アプリのデザインがオンボーディングから退会まで全て掲載されています。 画面レイアウトに関してはとても参考になります。 UI Pocketの素晴らしいところ 1. カテゴリでまとまっている + アプリ検索ができる アプリのサイドバーにはカテゴリボタンがあります。 自分が作りたいと思うアプリのカテゴリから似たようなカテゴリを探しましょう。
macOS 14 SonomaとiOS 17ではシステムベースで、macOS 12 MontereyとmacOS 13 VenturaではSafari 17で「JPEG XL」がサポート。
macOS 14 SonomaとiOS 17ではシステムベースで、macOS 12 MontereyとmacOS 13 VenturaではSafari 17で「JPEG XL」がサポートされています。詳細は以下から。 Appleは2023年06月に開催したWWDC23の基調講演やセッション10122で、macOS 14 SonomaやiOS/iPadOS 17のデフォルトブラウザとなる「Safari v17」では、2022年にISO/IEC 18181として標準化されたロイヤリティーフリーでJPEGと比較して圧縮率が最大60%となる次世代規格である「JPEG XL (.jxl)」をサポートすると発表しましたが、 2023年09月にリリースされた「iOS 17/iPadOS 17」や「macOS 14 Sonoma」では、Safari v17だけでなく、システムベースでJPEG XLがサポー
Useful DevTools Tips and Tricks — Smashing Magazine
You might think you know all the tricks when it comes to browser DevTools, but did you know that there are dozens of panels and hundreds of features waiting to supercharge your debugging workflow? Whatever your debugging use case is, there’s probably a tool that’s right for the job. Let’s discover the most popular DevTools tips that can boost your productivity. When it comes to browser DevTools, w
ネットの飽きやすい人を惹きつけるコンテンツ作り解体新書（前編） | Moz - SEOとインバウンドマーケティングの実践情報
読みたくなるコンテンツにするための原則 1 ケンカを売る私は2019年、長文のFacebook広告コピーについてCopyhackersに書いたブログ記事が、その年のマーケティング記事トップ45に入ったというメッセージをLinkedInで受け取った。 サラ、こんにちは！ このたび、2019年のデジタルマーケティング記事トップ45という記事を公開しました。 あなたのブログ記事、「画像は不要： Facebook広告では長い広告文でも効く（Forget the Images: Long Copy for Facebook Ads Works）」がランクインしました。おめでとうございます。 あなたのブログを取り上げた記事はこちらです。 ニコラス 私はこれを読んで、まず次のように思った： ありがたい、どのようにして選ばれたのかはわからないが、自分の記事がランクインしたことをソーシャルメディアで自慢して
Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e
「Webデザインのアイデアが見つからない」 「デザインの制作に自信が持てない」 「Webデザインの最新トレンドを知りたい」 Webサイト制作に関わるひとなら、誰もが一度は遭遇したことがある悩みかもしれません。 当サイトでは2009年から15年ちかく、その当時の最新ウェブデザインを定期的にまとめてきました。 これまで紹介したサイト数で言えば、2000サイト以上。 ちょっとした言葉や見せ方、色の違いで、サイトのアクセス数が何倍にも変わるなんてことも。 この記事では、目まぐるしく変化するWebデザインを追いかける、世界で話題の最新Webデザインをまとめてご紹介します。 Webアイデアの救世主、真似したくなる最新デザイン一覧【36サイト】 中華そば 七八 新潟市内に店舗を構える、チャーシューが自慢のラーメン店。まるで雑誌でも見ているようなレイアウトは、一度見ると忘れないデザインに。 Snapcha
Get a CSS-only Ribbon Shape made with a single-element and customizable using CSS variables. <div class="ribbon">Your text content</div> Click the ribbon to copy the CSS
こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 ChatGPTの新モデルで「ブラウジング機能（インターネットから最新情報を取得して提供する機能）」が無料ユーザーにも使えるようになりました。そこで、今回はWEB上に公開されているサイトをChatGPTにヒューリスティック診断してもらうことができるのでは…？と思って試した結果や実際に使用したプロンプトをご紹介したいと思います！ ※ヒューリスティック診断：ウェブサイトやアプリのUI・UXを特定の評価基準に基づいて分析し、潜在的な問題点や改善点を特定するもの ChatGPTのヒューリスティック診断結果実際にChatGPTで行ったヒューリスティック診断結果がこちら！ 今回はアジケのサイトで診断をしてみましたが、きちんとウェブサイト上の情報を参照した結果が
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 | フロントエンドBlog | ミツエーリンクス
Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。 CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。 レンダリングの基本的なフロー CSS Containmentの理解を深めるためにレンダリングについて確認します。 以下のフローはBlinkのレンダリングフローを簡易的にまとめたものです。 Parsing HTMLドキュメントを解析して、DOM（Document Object
Webサイトを運営するにあたって、検索エンジン、ユーザーに好まれるWebサイトを構築したいと思うだろう。しかし、ユーザー体験の向上を目的とした内部リンクを構築したとしても、リンク切れがある場合、ユーザー体験を損なってしまうこともある。リンク切れは可能な限り防ぎたいものですが、特に巨大なWebサイトの場合、健全な状態を維持することは少々面倒でもある。今回の記事は、リンク切れに焦点をあてたBacklinkoの記事を紹介する。 リンク切れはサイトの信用を低下させ、SEOの労力を無駄にする。しかし、幸運にも、リンク切れは簡単に修正することができる。 この記事では、バックリンクであれ、コンテンツ内のリンクであれ、確実にリンク切れを特定し修正する方法を紹介する。この記事で扱うのは下記の項目になる。 リンク切れの要因 リンク切れがWebサイトにとって有害である理由 Semrushなどのツールを使ったリン
デザコレ運営に関してのお詫び
株式ワンズマインドが運営している「デザコレ」は、2024年2月28日をもちまして運営を終了いたしました。 同サイトは、「比較ビズ」の集客を目的として立ち上げたサイトとして、弊社が運営しておりました。 しかしながら、架空のキャラクターを用いていたこと、他社様のホームページ制作実績を紹介する際に、十分な配慮がなされていなかったことに対して、該当企業様及び制作会社様、また関係者の皆様に、多大なご迷惑をおかけしたことを深くお詫び申し上げます。 また、架空キャラクターの写真につきましても、規約違反の状態で利用をしておりました。この点についても、心からお詫び申し上げます。 このような事態を受け「デザコレ」の運営は終了とし、また今後、社内で同様の問題が発生しないよう、改めて既存の運営サイトの再調査 / ガイドラインの徹底などを行う所存でございます。 連絡先：info@dezacore.jp
「いつもやってるこの作業、実はちょっと面倒」 「アイデアを形にできるツールや素材が欲しい」 「クリエイティブの生産性を上げたい」 そんな人に朗報です。 このまとめでは、ここ最近公開された便利なツールや素材の中から、「本当に使えるもの」だけ55個を厳選。 カテゴリ別に整理しているので、自分に合った新しいツールを見つけ、作業をもっと快適にしてみましょう。
【tldraw makereal】手書きの図から5秒で本格サイトを自動作成してくれるAIを使ってみた 2023 11/27 WEELメディア事業部LLMリサーチャーの藤崎です。 ブラウザ上で描いたワイヤーフレームから自動でHTMLのコードを出力することができる、tldrawのmakerealをご存知でしょうか？ makerealのGitHubでのスターはなんと10,000を超えていて、その注目度の高さが伺えますよね。 今までのコーディング作業が自動化されるとなると、使ってみたい！と思う人も多いはず。。。 実際、動かしてみたのですが本当にびっくりしました！ サッと描いたイラストから自動で実際に動作するコードを生成するなんて、まるで映画『アイアンマン』において、トニー・スタークが自宅の研究所で直感的なインターフェースを操作しているかのようです。 あとは空間上にホログラム化できれば完璧なのですが
Mac と Windows に無償で付属してくる日本語フォントに「游ゴシック」があります。両環境で共通して利用できる希少な「日本語」のデバイスフォントであることから重宝され、ウェブサイトでもCSSのローカルフォント参照で利用されるケースがありました。 「サイトの書体に “游ゴシック” を適用させるCSS記述方法」のような記事は最近になっても大変多く、あたかもMac・Windowsの全てのブラウザで表示可能と錯覚してしまいがちなのですが、 結論から言うと Mac の Safari・Brave・Firefox（プライベートウィンドウ）ではもうローカルフォントとしての「游ゴシック」をウェブサイトの表示に使うことはできません。（Safariにおいては5年前の macOS Mojave 以降から使えなくなっているはず…。） フィンガープリントなぜそんな事態になっているかと言うと、最近のブラウザ界隈の
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサイト制作で役立つChrome拡張機能5選 ｜ TAKLOG
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
Getting started with Web Performance 🚀 - HTMHell
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
[Figma]variablesの使い方-Color-｜koppi
【2024年】Webデザインのトレンド・参考サイトまとめ - Qiita
Googleが日本語を自動改行する「BudouX」をオープンソース「GitHub」で公開 | Web担当者Forum
主題と副題のマークアップにはhgroupを使用する – TAKLOG
Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ
UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki
Web担イベントページのフルリニューアルの裏側を大公開！ UXリサーチで見えた真の課題と改善策とは | 【レポート】デジタルマーケターズサミット2023 Summer
Webマニアがざわついた最新Webデザイン３１選【2024年3月版】
Server Actionsにユーザ操作されたくないデータは渡さない
発達障害当事者デザイナーとウェブアクセシビリティ ｜Yuu Yamasaki
キーボードのフォーカス可能なスクローラー | Blog | Chrome for Developers
codefolio | Webコーディングの参考になるパーツ集・ギャラリーサイト
デザインスキルに自信がなくても個人開発のUIUXに力を入れたい - Qiita
https://searchengineland.com/google-search-document-leak-ranking-442617
Front-end development’s identity crisis
Webアイデアの救世主、真似したくなる最新デザイン36選
CSS Generators: Ribbon Shapes
ChatGPTにヒューリスティック診断させてみた｜Dods｜UIUX改善支援
リンク切れを発見し、修正する方法 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
知らないと損する最新Web＆デザインツール、素材55選
【tldraw makereal】手書きの図から5秒で本格サイトを自動作成してくれるAIを使ってみた | WEEL
ウェブサイトでローカルフォントの「游ゴシック」はもう使えない｜Takehiko Ono