見よう。知ろう。学ぼう。国内企業のデザインシステム事例10選
海外のデザインシステムは比較的目にしますが、国内企業がデザインシステムを公開している企業は少なく、調べてみました。 この記事では、そんな国内の企業でデザインシステムを導入・活用している企業10個に絞り、具体的な事例をご紹 …
JavaScriptのIntersectionObserverでスクロールインしたら縦書きのテキストをタイピング風で表示
縦書きのテキストを、ネイティブなJavaScriptを使い「タイピング風」に一文字ずつ表示させてみます。 「端的で、メッセージ性の強いクリエイティブに使える」スニペットなので、引き出しの一つにでもなるよう参考にしてみてく …
プラグイン無しでお気に入りに追加した記事をページ遷移せずにページ一覧で解除可能にするスニペット
ブックマーク機能は、後で見返したいときに簡単に呼び出せるように保存しておく機能です。 そんな「ブックマーク＝お気に入りに追加」の機能ですが、以前の記事のスニペットをカスタマイズし「ページ一覧でお気に入り解除」の機能を追加 …
JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変
最新のスマートフォンでも解像度・縦横比率が少しずつ変化しているように、デスクトップの解像度も少しずつ上がっていくかもしれません。 Webページのヒーローエリアは、ユーザーが最初に見る情報なので、離脱されないためにもこのサ …
JavaScriptの.addEventListener でフローティングバナーの表示・非表示
主に広告で使いそうで、日常的な実用性がなくCSSメインの為JavaScriptなのかは微妙なところですが、ごく簡単なコードで実装できるフローティングバナーです。 簡単なコードでできているスニペットなので、JavaScri …
JavaScriptの.addEventListenerクリックで検索フォームのモーダル
ユーザーが検索フォームに検索条件を入力して「検索」ボタンを押すと、一覧画面に表示される。Webサイトのどのシーンでも当たり前に活用されている「検索フォーム」ですが、この記事では、そんな検索フォームをボタンクリックで「モー …
GA4とGoogle Search Consoleの連携方法
既に、「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。」と、Google Analyticsのヘッダーにデカデカ表示されています。 「そろそろGA …
JavaScriptの.lastModifiedでページの最終更新日を表示
JavaScriptの .lastModified プロパティを使用して「そのページが、最後に更新された日時＝最終更新日時」を表示します。 簡単なので、参考にしてみてください。 目次.lastModifiedページの最終 …
JavaScriptのライブラリSwiperでタブのメニューに連動したスライダー・カルーセル
JavaScriptライブラリの「Swiper」は、スライダーを簡単に設置できるライブラリです。これをベースに、ほんの少しコードを書けば「タブ」のUIと絡めたスライダーを実装することができます。 そんなUIを、Swip …
JavaScriptの.querySelectorAll()でアクティブになったタブメニューの背景が左右に動いて表示
タブの切り替えに動きを少し付けたいと思っている方は、是非参考にしてみてください。 目次.querySelectorAll()アクティブになったタブメニューの背景が動くサンプル実装の手順と方法ざっくりとしたコードの解説HT …
