トップ > UIデザイン

UIデザイン

【保存版】デザイナーのインプット場所まとめ〜インスピレーションを求めて〜

Design SaaS事業部 UXデザイン UIデザイン

こんにちは！SaaS事業部デザイナーの澤田です！ エキサイトホールディングス Advent Calendar 2024 の最終日、25日目を担当します！ ここまでエキサイトホールディングスの各社に所属するエンジニア・デザイナーが力を合わせてブログのバトンを回してきたの…

UI管理の効率化：Figmaのブランチ機能を活用する

Figma Design UIデザイン SaaS事業部

こんにちは！SaaS・DX事業部デザイナーの鍜治本です。 エキサイトHDアドベントカレンダー シリーズ１の20日目を担当させていただきます！ この記事では、Figmaのブランチ機能を活用して、UI管理をどのように効率化したかについて詳しくお話しします。

Tailwind CSSで兄弟要素の状態を評価する方法

Tailwind CSS スタイリング フロントエンド UIデザイン

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の5日目を担当します。 qiita.com 今回は、Tailwind CSSで兄弟要素の状態を評価してスタイリングする方法をご紹介します。 兄弟要素の状…

担当デザイナーの経験則に依存しないデザインシステムづくり

Design UIデザイン デザインシステム

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の4日目を担当します。 qiita.com 最近、とあるサービスのデザインシステムの構築を担当する中で、他事業部のデザイナーに協力のもと、…

sourceタグとpictureタグでレスポンシブに画像要素を切り替える

マークアップ フロントエンド UIデザイン

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の2日目を担当します。 qiita.com 今回は、HTMLのsourceタグとpictureタグを使用してレスポンシブに表示する画像を切替える方法をご紹介…

Tailwind CSSで擬似クラス「:focus-within」をスタイリングする方法

スタイリング フロントエンド UIデザイン Tailwind CSS

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の2日目を担当します。 qiita.com 今回は、Tailwind CSSでCSSの擬似クラス:focus-withinをスタイリングする方法をご紹介します。 「:foc…

scroll-behaviorでページ内遷移のスクロールを滑らかにする方法

CSS UIデザイン フロントエンド スタイリング

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。 実現したい挙動 既定の挙動 実現したい挙動 どうやって実現するか Tailw…

scroll-snap-typeを使用して子要素単位にスクロールさせる方法

スタイリング UIデザイン CSS フロントエンド

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介します。 実現したいこと 冒頭、「子要素単位にスクロール」とはどんな状態かをご説明します。 CodePe…

Alpine.jsでドラッグ操作による並び替えを実現する方法（Sort Plugin）

Alpine.js UIデザイン フロントエンド マークアップ

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はAlpine.jsの公式プラグインを使用して、ドラッグ操作による並び替えを実現する方法をご紹介します。 使用するプラグインについて 実装方法 並び替えの情報を取得する方法 さいごに 使用するプ…

JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法

UIデザイン スタイリング マークアップ フロントエンド

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法をご紹介します。 実現したいこと 完成形 どうやるのか さいごに 実現したいこと 冒頭、実現したい状態…

Figma VariablesのScoping機能で使用先を間違わないトークン設計をする

Figma UIデザイン

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はFigmaのVariablesでデザイントークンを設計する際に、Scoping機能を用いて使用先を間違わないようなトークンを設計する方法をご紹介します。 解決したいこと Scoping機能で使用先を制限する …

Tailwind CSSで文章を行数制限したい場合はline-clamp-*が便利

Tailwind CSS スタイリング フロントエンド UIデザイン

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSを使用しているプロジェクトで、文章を行数制限（超えた部分は3点リーダーで省略）したい場合に使える便利なユーティリティクラス line-clamp-*をご紹介します。 純粋なCSSの場合…

Tailwind CSSでブレイクポイントをカスタマイズする方法

Tailwind CSS スタイリング フロントエンド UIデザイン

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介したいと思います。 はじめに 従来のCSS Tailwind CSSのユーティリティクラスを用いたレスポンシブデ…

Figmaのローカルバリアブルを使ってテキストにスタイルを適用してみる

Design SaaS事業部 Figma UIデザイン

こんにちは！SaaS・DX事業部デザイナーの鍜治本です！ 担当しているサービス「KUROTEN」のUI設計をする際にFigmaを使っており、デザインシステムの構築を日々進めています。 そんな中、スタイルの定義を行う際に気がついた機能があるので、TIPSとして記事に…

【社内カンファレンス登壇記】TechCon2024でFigma Variantsのお話をしました！

Excite × iXIT TechCon 2024 Design Figma フロントエンド UIデザイン

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 2024年2月16日に行われた、技術者向けの社内カンファレンス「Excite × iXIT TechCon」のLT枠で登壇させていただきましたので、その体験談を記したいと思います。 発表したこ…

【インターン体験記】UIの修正・改善提案で学んだこと

SaaS事業部 UIデザイン

こんにちは！エキサイトインターン生のやのふきです。 この記事では、エキサイトでの就業型インターン中に担当した業務とそこから得た学びを紹介します。 自己紹介 担当した業務内容 メッセージ機能のレイアウト修正 部門別分析のアラート設定に関するUI改善…

【2023年12月Firefox対応！】CSSの擬似クラス:has()とは？

スタイリング フロントエンド マークアップ UIデザイン Design

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。…

デザインシステムを活かすためのドキュメンテーション

Figma UIデザイン フロントエンド Design

こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023 シリーズ2の19日目は、私齋藤が担当させていただきます。 今回は、あるプロジェクトでデザインシステム構築を担当していた…

accent-colorでチェックボックスの色を指定する方法と注意したい落とし穴（CSS）

Design UIデザイン フロントエンド スタイリング

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2023シリーズ2の12日目は、私齋藤が担当させていただきます。 今回はチェックボックスなどの強調表示色を指定できるCSSプロパ…

ボタンにまつわるエトセトラ（HTMLとアクセシビリティ）

マークアップ Design Figma HTML アクセシビリティ UIデザイン

こんにちは。エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 202313日目は、私齋藤が担当させていただきます。 今回は『ボタンにまつわるエトセトラ』と称し、UIデザインで最も頻用される要…