XD経験者がFigmaで戸惑いやすいポイントとその対処法
弊社では、近々XDからFigmaへwebデザインツールを移行するためFigma導入準備を進めています。私は仕事での本格的なFigma使用が今回初なので、やれることが徐々に増えていく初学者特有の楽しさを感じ日々新鮮な気持ちです。Figma楽しい！ 同時に、長年Adobeにどっぷり浸かっているためXDで「自然にやっていた操作」や「クセになっていた機能」がいくつかあり、Figmaの作業で「あれ、これど
デザイン
Illustratorユーザー必見！AI入稿時のチェックを効率化するスクリプトをつくる！
みなさんは普段、イラストレーターを使用したai入稿のチェックにどれくらいの時間をかけていますか？ 今回はイラレで使用できる「入稿時のチェックを自動化するスクリプト」の作成方法を紹介します。 スクリプト作成の目的 入稿前チェックでは誤字脱字など定量的でないチェックも必要となりますが、一方で「ドキュメントのカラーモードがCMYKか」「フォントはアウトライン化されているか」など定量的なチェックも多々
2024.11.5
ミニマムで始めた勉強会「デザインレビュー会」が５周年を迎えるまで
デザイン戦略部のスエノです。 2019年から月1回行っている部内勉強会「デザインレビュー会」が昨年で5周年を迎えました。主催として立ち上げ、現在デザイン戦略部の12名が参加・活動しています。内容はすごくシンプルでスタンダードな勉強会なのですが5年も続くにはそれなりに理由があると思い、良い機会なのでまとめました。企画を継続することの面白さ・難しさ・大切さを身を持って知れた勉強会なので、これまでの経
Vueで試すCSS modules
新年あけましておめでとうございます！ 入れ替わりが激しいフロントエンドの技術をキャッチアップするモダンフロントエンド勉強会を社内で月2回開催しています。今回はVueの単一ファイルコンポーネントからCSS Modulesを使う方法を取り上げました。 今回のテーマはCSS Modulesです。VueのCSSモジュールではありません。紛らわしいですね・・この先VueのCSSモジュールの話は一切出てき
駆け出しデザイナーに知ってほしい、コミュニケーションのコツ
今回は駆け出しデザイナーに知っておいて欲しい、デザイン制作をするうえで役立つコミュニケーションのコツをお教えしたいと思います。 私がデザイナーとして経験してきた成功や失敗がベースになっていますので、一般的に定説とされている内容とは若干違いがあるかもしれませんが参考になれば嬉しく思います！ デザイナーに求めらるコミュニケーションスキル デザイナーと聞くと表現スキルがすごい人と真っ先に想像しがちで
今日から書けるSass(SCSS)入門！
今回は社内でも導入され始めている、Sassについて簡単にまとめてみようと思います。 これを読めばとりあえず今日からSassの基礎的な書き方はばっちりです！ (環境構築などは今回は触れません) Sass(SCSS)とは Sassとは「Syntactically Awesome StyleSheets」の略称で、CSSの拡張言語です。 CSSをより便利に見やすく使えるようにしたようなもので、基本的
2023.4.12
今さら聞けない！社内印刷をすると余白ができる理由とは
本記事を書くきっかけ 日々社内の様々な資料や販促物を作成するインハウスデザイナーの筆者が良く言われる言葉があります。 「これフチに余白ができてしまうんだけど、余白をなくして印刷することはできますか？」 資料を会社のプリンターで印刷したり、取引先へデザインの試し刷りを依頼した際などに、似たような質問をされた経験はありませんか？ この余白というのは、紙面のフチにインクやトナーが乗らず白色のまま
CSS4の疑似クラス使ってますか？
皆さまCSS4の疑似クラス使ってますか？ 発表されたばかりの頃は対応ブラウザが少なく後回しにされがちですが、そろそろ対応ブラウザも多くなってきたので色々な疑似クラスを紹介していきたいと思います。 ちなみにCSS4という規格は存在せず、Level4のモジュールを総称してCSS4といわれています。 :has() 指定したセレクターがある場合、その親要素にスタイルを適用することができます。 ブラウザ
2023.3.31
【地味に便利】Photoshop2023の新機能
今回はPhotoshop2023版でバージョンアップされた機能についてご紹介したいと思います。 その中でも「選択機能の向上」と「ワンクリックで削除して塗りつぶし」をご紹介したいと思います。 選択機能の向上 オブジェクト選択ツールが強化されたことでより簡単に画像上の物体を選択できるようになりました。 パワーアップしたAIの力でより正確に空、水、自然の地面、植物、建物などの要素をワンクリックで選択
2023.3.29
dialogタグでセマンティックにモーダルを作成するには
新しく追加されたdialogタグの特徴に触れつつ弊社のサイトで使われているモーダルをつくってみます。 対応ブラウザ 執筆時のSafariバージョンが16.xxのため、気になるのはSafariくらいでしょうか。 ブラウザ バージョン Safari 15.4 Safari ios 15.4 Chrome 37 Firefox 98
2023.3.28
基本のcss疑似クラス:has()を振り返ってみよう！
今回は基本のcss、疑似クラス:has()について振り返ってみたいと思います。 :has()の使い方 子要素の中に指定した要素がある場合にスタイルを利かせる事ができます。 例えば以下のようなhtml,cssだと、 html <div class="hoge"> <p></p> <p></p> </div>
2023.3.28
脱！配色難民～色選びのときに見るツール8選～
デザインをしていく中で配色難民（色選びに悩んで途方に暮れる民）になったことがあるデザイナーも多いのではないでしょうか？ 私もその一人です。 何となく色を選んでみたけどこれでいいのかわからない メインカラーは決まったもののアイコンや見出しなどでどの色を使えばいいのかわからない そもそもどんな色を使ったらいいかわからない などなど。 そんなときに私が参考にしているデザ
2023.3.27