XD経験者がFigmaで戸惑いやすいポイントとその対処法
弊社では、近々XDからFigmaへwebデザインツールを移行するためFigma導入準備を進めています。私は仕事での本格的なFigma使用が今回初なので、やれることが徐々に増えていく初学者特有の楽しさを感じ日々新鮮な気持ちです。Figma楽しい！ 同時に、長年Adobeにどっぷり浸かっているためXDで「自然にやっていた操作」や「クセになっていた機能」がいくつかあり、Figmaの作業で「あれ、これど
投稿者: design
Storybook駆動開発とは？UIコンポーネントを効率よく作る
Storybook駆動開発を知っていますか？ ページ全体をいきなり作るのではなく、「ボタン」や「モーダル」、「入力欄」などのUI部品を先に個別に作るという開発スタイルがあります。 こうしたUIパーツをひとつずつ作って確認できるツールが、Storybook（ストーリーブック）です。 この記事では、Storybookとは何か、Storybook駆動開発の考え方やメリット・デメリットなどを紹介してい
2025.4.11
Reactで初めてページを作成した感想
こんにちは、デザイン戦略部の塚原です。 今年の5月にReactの開発に初めて携わる事ができました。 ボタンをクリックするとモーダルが開き、その中でフォームを送信する。という規模としてはとても小さい機能開発です。 通常であれば、1週間ほどで開発終了になると思いますが、 私の会社では、これまでVueを使った開発が多かったため、Reactとその関連技術に慣れるまでに時間がかかりました。 すべての内容を
2024.11.5
Illustratorユーザー必見！AI入稿時のチェックを効率化するスクリプトをつくる！
みなさんは普段、イラストレーターを使用したai入稿のチェックにどれくらいの時間をかけていますか？ 今回はイラレで使用できる「入稿時のチェックを自動化するスクリプト」の作成方法を紹介します。 スクリプト作成の目的 入稿前チェックでは誤字脱字など定量的でないチェックも必要となりますが、一方で「ドキュメントのカラーモードがCMYKか」「フォントはアウトライン化されているか」など定量的なチェックも多々
2024.11.5
ミニマムで始めた勉強会「デザインレビュー会」が５周年を迎えるまで
デザイン戦略部のスエノです。 2019年から月1回行っている部内勉強会「デザインレビュー会」が昨年で5周年を迎えました。主催として立ち上げ、現在デザイン戦略部の12名が参加・活動しています。内容はすごくシンプルでスタンダードな勉強会なのですが5年も続くにはそれなりに理由があると思い、良い機会なのでまとめました。企画を継続することの面白さ・難しさ・大切さを身を持って知れた勉強会なので、これまでの経
今さら聞けない！社内印刷をすると余白ができる理由とは
本記事を書くきっかけ 日々社内の様々な資料や販促物を作成するインハウスデザイナーの筆者が良く言われる言葉があります。 「これフチに余白ができてしまうんだけど、余白をなくして印刷することはできますか？」 資料を会社のプリンターで印刷したり、取引先へデザインの試し刷りを依頼した際などに、似たような質問をされた経験はありませんか？ この余白というのは、紙面のフチにインクやトナーが乗らず白色のまま
CSS4の疑似クラス使ってますか？
皆さまCSS4の疑似クラス使ってますか？ 発表されたばかりの頃は対応ブラウザが少なく後回しにされがちですが、そろそろ対応ブラウザも多くなってきたので色々な疑似クラスを紹介していきたいと思います。 ちなみにCSS4という規格は存在せず、Level4のモジュールを総称してCSS4といわれています。 :has() 指定したセレクターがある場合、その親要素にスタイルを適用することができます。 ブラウザ
2023.3.31
dialogタグでセマンティックにモーダルを作成するには
新しく追加されたdialogタグの特徴に触れつつ弊社のサイトで使われているモーダルをつくってみます。 対応ブラウザ 執筆時のSafariバージョンが16.xxのため、気になるのはSafariくらいでしょうか。 ブラウザ バージョン Safari 15.4 Safari ios 15.4 Chrome 37 Firefox 98
2023.3.28
脱！配色難民～色選びのときに見るツール8選～
デザインをしていく中で配色難民（色選びに悩んで途方に暮れる民）になったことがあるデザイナーも多いのではないでしょうか？ 私もその一人です。 何となく色を選んでみたけどこれでいいのかわからない メインカラーは決まったもののアイコンや見出しなどでどの色を使えばいいのかわからない そもそもどんな色を使ったらいいかわからない などなど。 そんなときに私が参考にしているデザ
2023.3.27
担当サービスのマスコットキャラクターのロゴ作ってみた
私は株式会社ラクーンで運用しているスーパーデリバリーのデザインを担当しています。 スーパーデリバリーにはマスコットキャラクターのスーデリちゃんがいます。 名前：スーデリちゃん 性別：不明 国籍：ドバイ この記事を書くにあたってスーデリちゃんのプロフィールを調べましたが、どうやらスーデリちゃんの国籍はドバイだそうです。なんで？ とっても可愛いスーデリちゃんをもっと知ってほしい スー
【メリットだらけ！？】WebPでサイトのパフォーマンスを向上！
突然ですが、WebP（ウェッピー）という画像フォーマットをご存じでしょうか？実はWebサイトにおいてすごく「優秀」な画像フォーマットなんです！ では具体的にどこが「優秀」なのか。簡単に紹介していきます！ WebP（ウェッピー）とは？ WebPの概要 Googleが開発した新しい画像フォーマット。 拡張子は「.webp」で表記され、「ウェッピー」と読みます。 ウェッピー
文字をオブジェクトの上下中央に配置できる「字形の境界に整列」が地味に便利【Illustrator】
たびたび便利にアップデートされるIllustrator、バージョン24.3から「字形の境界に整列（24.3時はグリフバウンドに整列）」という機能が実装され、これがとてもかゆいところに手が届く良アプデでした。 知らない方も多くもったいないのでご紹介します。 イラレあるある：文字をオブジェクトの上下中央に配置できない Illustratorを使用していると「整列」ツールを使ってオブジェクト内に文
2023.3.13