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

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

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

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

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

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

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

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

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

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

デザインの仕組み化としてデザイントークンを考えてみる(カラー編)

こんにちは。 エキサイトで内定者アルバイト(デザイナー)をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記…

Figmaの新機能「Variables」でデザインシステムを作る際に使えそうなカラーの管理手法を試してみた

こんにちは。 エキサイトで24卒内定者アルバイトとしてデザイナーをしている齋藤です。 はじめに Variablesとは? 何ができるのか カラー管理周りの機能を試してみる カラーの変数化 Variablesの設定を開く 変数を作成する 変数を定義する 変数をグルーピン…

「伝わるFigma」を考えてみた

こんにちは。内定者アルバイトデザイナーの齋藤です。 今回は、UIデザインをさせていただく中で気がついた、デザイナーからエンジニアさんに「伝わるFigma」にするにはどうしたらよいのか、自分なりに考えてみましたので自戒も含めて共有します。 超超新米で…

【<script setup>対応版】Nuxt3で効率的にスタイルを書く

こんにちは。エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。 先日、「Nuxt3で効率的にスタイルを書く」と題して、TSで定義した変数を<style>で参照する方法をご紹介しました。が・・・。 Vue3.2以降では<script>の構文が変更となり、同じCompos…

Nuxt3で効率的にスタイルを書く

こんにちは。 エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。 デザイナーとしてマークアップを行う場合、HTMLやスタイルを書くことが多いと思います。今回はNuxt3(Vue)で効率的にスタイルを書く方法を備忘録的に記します。 通…

【インターン】デザイン初学者がはじめてバナーを作って学んだこと

こんにちは! エキサイトで就業型インターンをさせて頂いている齋藤と申します。 今回は、インターンの中で初めての業務である「バナー制作」を通じて学んだことを共有したいと思います。 自己紹介 はじめての業務でやったこと はじめての業務で学んだこと …