View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも
Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. See it in action - ordering coffee. Learn more about this preview feature (available in Chrome Canary now): https://t.c
それNetlifyでできるよ - Webページを爆速で作ってキレイに魅せよう
Dangerous ‘Deep Decarbonization’ (Krebs PowerPoint to Cooler Heads Coalition)
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope
こんにちは！株式会社free web hopeの相原です。 今回は当社でのランディングページの創り方をベースしにて、ランディングページ制作をする時に役立つフレームワークを公開します。当社の社内マニュアルにもなっているものです。お陰様で中々の高評価を頂いており、書いた甲斐がありましたtt これ読んだらめちゃめちゃやる気出た！！ 何から始めたら良いのかわからず何も知らないままやろうとしていたからね、そりゃあ心も折れるはずだ👶 ランディングページ制作に役立つマニュアルと改善法(toCtoB)｜相原 ゆうきfree web hope @fwh_aihara #note https://t.co/u5ACEAfePU — せりょ🌷＠Travel×Shopify✈︎ (@seritulip) October 14, 2020 事業戦略から、LPへの落とし込み、tipsまで、半端ない。 めちゃくちゃ
100 DAYS OF POETRY
100 DAYS OF POETRY is an artwork, which consists of a graphic design Notty created per day for 100 days. These 100 days were also the days when he faced his own complexes and frustrations. He thought he could get closer to his ideal self by doing this project. He did not create each work as a separate piece of art, but instead expressed his feelings and thoughts as 100 graphics as if he were writi
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
たった20万円で作ったサイトが6ヶ月後に月間300万PVを達成した方法【SEO】｜阿部 隼也
※大幅に追記、更新しました。それに伴って有料化しました（すみません） 株式会社プッシュの阿部と申します。 6ヶ月ほど前に作ったWebメディアが3ヶ月後からドカンと跳ねました。 立ち上げから6ヶ月。累計で1,321万PVを獲得しました。流入元の90%以上はSEO(Organic)です。成長中なので、年間で4,000万PV到達ペース。 この記事では、このサイトを作った私の実体験から学んだことをお話します。 - メディア関係者 - アフィリエイター - オウンドメディア担当者 - SEO担当者 - SEOコンサル - Web制作関係 ↑このような方には、絶対に役に立てる記事だと思います。 この記事を読んでいただければ 「300万PVを一人(社員ゼロ)でやる方法」 「最速でSEOメディアを伸ばす方法」 が分かるはずです。 あまり教科書的な内容ではありません。なぜなら教科書的な内容は役に立たないから
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
静的サイトを公開するならどこがいいの？ #技術書典 - Crieit
静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の４つで比較しています。 GitHub Pages Firebase Hosting GitLab Pages Netlify 上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。 ※比較的初心者に向けて書いている前提です。 AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。 レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。 また、少し機能について説明が必要な部分があるので、先に説明を書きます。 Rewrite設定について 静的サイト化したSPAを公
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
アクセス解析担当が必ずやってるGoogleAnalytics設定のまとめ【2018年版】 - Qiita
この記事について 「GoogleAnalyticsの設定、どうしたらいいんだっけ...」と迷ったときのためのレファレンスです。 新規のサイトを立ち上げる時・GAの再設計がしたくなった時に参照してください。 のちのちアクセス解析しつつ改善していくために、できるだけ汎用的にデータを拾っておく 可能な限り、非コーダーができる作業で完結させる というのをテーマにまとめました。 STEP 0: GTM・GAのアカウントを取得 Googleのアカウントがあれば、驚くほど簡単に取得できます。 GoogleAnalyticsのアカウントを作る GoogleTagManagerのアカウントを作る 基本的には、GoogleTagManager（以下、GTM）経由でGoogleAnalytics（以下、GA）を導入します。GTMの使い勝手がよいのはもちろん、GAをカスタマイズしたくなったときに、コーダーの手を借
【2018年版】今押さえておきたいフロントエンド関連 - Qiita
個人的に押さえておいたほうがいいと思う情報や最近動向が気になっている情報をまとめました。 短時間調べた程度でザックリ書いてますので、掲載している情報に間違いなどありましたら、 ご指摘いただけると助かります。 現時点でWorking Draft,Editor's Draftの情報もありますし、ブラウザ側でほとんど実装されてないプロパティ（業務ではあまり使えない系）も積極的に載せていっているので、対応状況についてはCan I useやMDNで調べてください。 途中まで載せてたけど多すぎてあきらめた... HTML Resource Hints(dns-prefetch, preconnect, prefetch, prerender) 指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。 Link types - HTML | MDN Prelo
【7年かかった】19歳から7年、1人で30個のWebサービスを作り一発当ててもう働く必要がなくなったので振り返ってみる - 考えすぎてしまう人のブログ
どうもせせりです:) 19歳の頃からほぼ1人でRailsでWebサービスを作り始めて早7年 紆余曲折ありなんだかんだで作ったサービスは30個ほどになりました 7年ほど前に一番最初に作ったTwitterアカウントで「僕の夢は25歳までに3億円を稼いで残りの人生を楽しむ事です」などと言っていました あれから7年がたち26歳になり、3億円は無理でしたが残りの人生贅沢しなければ働かずに生きていけるくらいにはなりました Rails勉強会、ハッカソン、未踏、などなど色々参加していましたし、狭いRails界隈なのでもしかしたら勉強会などでお会いした方は覚えている方もいるかもしれません 色々お話を聞いてくださりアドバイス下さった先輩方ありがとうございます あの頃の初心者は無事に夢にたどり着きました！ 振り返ってみれば訴訟起こすぞって怒られたり、警察から電話がきたり、サーバー会社にサービス止められたり、サー
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js いろいろまとめ - Qiita
