Web制作者は要チェック！ 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ
Google Chromeの開発マネージャーであり、The CSS Working Groupのメンバーでもあり、VisBugやOpenPropsなどの開発者でもあるAdam Argyle氏による、2025年のUI/UX案件に役立つCSSのスニペットを紹介します。 一手間加えてCSSアニメーションを気持ちよく動かすスニペット、大きく進化したCSS変数の効果的な使い方、簡単にできるページ遷移、ポップオーバーやdetailsの遷移アニメーション、これまでより美しいCSSグラデーションの実装など、次のプロジェクトで試してみたいことばかりです。 6 CSS Snippets Every Front-End Developer Should Know In 2025 by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳していま
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目） | Ginpen.com
20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo
Next.jsを勉強してみる その② 〜画面作成編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。 右腕が折れても、意外と仕事ってできるもんですね。3ヶ月前に右腕の上腕骨を骨折したバックエンドエンジニアのやなさんです。 さて、前回はNext.jsの開発環境を構築する記事を書きました。 画面作成に必要なものをインストール 今回はTypeScriptで書いてみようと思うので、ターミナルで以下コマンドを実行します。 # typescriptで記述するので必要なライブラリをインストール # Next.jsのプロジェクトルートで実行すること npm install --save-dev typescript @types/react @types/react-dom @types/node コンポーネントで画面のひな形を作成 各画面を作成する前にひな形となるファイルを作成します。 今回の雛形にはheadタグやシステム共通となるヘッダー、フッターを定義しています。 ※ 画面のstyle
Adobe XDでアニメーションのあるプロトタイプをデザインしよう
2022年4月27日 Webデザイン, XD Webサイトのデザインカンプを画像として作成…というのはもう昔の話。最近ではアニメーションの伴ったWebサイトやアプリばかりで、それを画像で説明するのはなかなか困難です。Adobe XDを使えばアニメーションを含めたプロトタイプが作成できますよ！ ↑私が10年以上利用している会計ソフト！ 作成するもの 今回はAdobe XDを使って、ローディングバーが動き、画面が推移し、スワイプで画像が切り替わる、というアプリのプロトタイプを作ってみようと思います。 Adobe XDの基本的な使い方は過去記事を参考にしてみてください： Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ローディングバーの作成 まずはベースとなる画面とロ
Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ
Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。さらに「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。 Adobe XD: putting auto-animate to the test 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ここで紹介したAdobe XDのファイルは、記事の最後でまとめてダウンロードできます。 また、こ
画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
smoothState.js - 滑らかな画面遷移を提供 MOONGIFT
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
サイトやアプリの画面遷移を分かりやすく見せる、ユーザーフローを作成する要素が揃ったプラグイン -UserFlows
Webサイトやスマホアプリの画面遷移を伝えるフローチャートやユーザーフローを3つのショートカットで作成できるSketchのプラグインを紹介します。 ラインやアロー、条件付きロジック、フローダイアグラムなどが簡単に作成できます。
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog