SwiperのslideTo()とslideChangeで、タブとSwiperを融合させた、進捗表示付きカードカルーセル
タブをクリックするとカルーセルが該当のカードへ移動し、逆にカルーセルをスワイプするとタブや進捗バーが連動して切り替わる、タブとカルーセルを融合させたUIの作り方を解説しています。
AI×デザインに、PhotoshopとIllustratorのような「王道の組み合わせ」はもうないのかもしれない
AIとデザインの組み合わせについて考えていて、ふと気づいたことがあります。少なくともWebの領域では、PhotoshopとIllustratorのような「これさえあれば大丈夫」という王道の組み合わせが、もう存在しないのかもしれません。
AI時代のデザイナーに必要なのは「作る力」より「判断する力」かもしれない
AIによってデザインの現場は大きく変わりつつあります。「作る力」から「判断する力」へ、デザイナーに求められる価値がどう移り変わっているのかを考えてみました。
CSSの新機能「クラスプレフィックスセレクタ」で、似た名前のクラスをまとめて指定できるようになるみたいです
同じプレフィックスを持つ複数のクラスをまとめて指定できるCSSの新機能「クラスプレフィックスセレクタ」について調べてみました。
JavaScriptのgetBoundingClientRect();でカードをクリックしたらカードからモーダルを拡大縮小して表示
この記事では、カードをクリックしたらカードからモーダルを拡大縮小して表示する方法とコードについて解説します。 具体的には、HTML、CSS、JavaScriptを使用して、ユーザーがカードをクリックすると関連情報を表示す …
JavaScriptの.nextElementSiblingでアコーディオンの開閉と画像の切り替え
この記事では、JavaScriptの.nextElementSiblingを使って、ユーザーがクリックしたアイテムの直後に位置する要素を操作することで、スムーズな開閉アニメーションと画像のロードを実現します。 簡潔なコー …
フリーランスデザイナーのはじめての経費基礎講座
フリーランスデザイナーの自由な働き方の魅力と同時に、経費管理も必要です。 この記事では、フリーランスWebデザイナーが押さえておくべき経費の基礎知識を解説します。 目次経費管理の基本必要な経費の種類確定申告と経費の関係確 …
デザイナーが制作に時間をかけず時給を上げる方法
フリーランスのデザイナーとして成功するには、質の高い仕事を迅速に提供することが重要です。しかし、多くの駆け出しデザイナーは、制作に時間がかかりすぎて時給が低下してしまうという課題に直面します。 この記事では、自分の実体験 …
JavaScriptのfor (let i =)で10問の質問の回答でスコアを出してリダイレクト
この記事では、JavaScriptのfor (let i =) のループを使って、10問の質問の回答でスコアを出してリダイレクトをかける方法について解説しています。 比較的診断系のコンテンツで使えそうなスニペットなので、 …
JavaScriptの.addEventListener()でボタンクリックで画像の切り替え
JavaScriptの .addEventListener() を使ってボタンクリックで画像を切り替えするのと同時に、JavaScriptのループを使って「どのボタンが現在アクティブなのか？」を視覚的に切り替えます。 応 …
