マガジンのカバー画像

UIデザイン

5
ツールの便利な使い方やデザインtips・UI考察など
運営しているクリエイター

記事一覧

アラートUIの色と使い方

WEBサイトや管理画面でよく使うアラートメッセージUIですが、ステータスの色と文言の使い分けがいまいちよくわかっていませんでした。 なんとなくテキストとアラートの色が合っていないな…と思うことがあったけど、うまく言語化できてなかったので調べてみました📕 セマンティックカラーについてセマンティックカラーとは、意味をもって定義された色のことです。 いろいろなデザインシステムやフレームワークをみていると、アラート関連は、次のようにセマンティックカラーとして定義されていることが多い

Adobe XDでオブジェクトの線をかんたんに消す方法

Adobe XDで長方形ツールや楕円形ツールでシェイプを描画すると、毎回枠線がついてしまいます。 1日に何回もサイドパネルで線のチェックをはずすのがめんどうくさいですよね。 プラグインの利用と、ショートカットの設定で、簡単に線を非表示にできるようになります。 1.プラグイン「Commono」をインストール XDのプラグインCommonoは便利機能を集めたプラグインです。 こちらをインストールし、この中の「Disable Stroke」を使うと、線を無効化してくれます。

使ってみて便利だったAdobe XDプラグインを紹介

Adobe XDの10月のアップデートで、ついにプラグインが使えるようになりました! 毎日追加されるプラグインを、ぽちぽちとインストールしては試しています。そこで便利だったプラグインをご紹介します。 Google Sheets スプレッドシートからテキストや画像が流し込める超便利ツールです。量産系がはかどりそう。csvでも読み込める。 Resize Artbord to Fit Contentコントロール+F(mac)を押すだけで、コンテンツに応じてアートボードのサイズを

PhotoshopをDLしたら!オススメのショートカット設定

ご存知の方も多いと思いますが、Photoshopではショートカットキーのカスタマイズができます。 自分はかなり独自でショートカットを割り当てているのですが、これがないと作業にならないってくらい大切で、これがあるのとないのでは作業効率がかなり変わります! 備忘録がてらおすすめのショートカットキーのカスタマイズ設定を書いてみます。 *使用頻度の少ないデフォルトのショートカットは上書きしちゃってます。この辺はお好みで調整してみてください。 設定の仕方 メニューバーの編集>キーボ

figmaで大きな画像が貼り付けられない。そんな時はプラグインを使おう

figmaを利用していて、大きな画像を配置しようとしたら縮小表示されてしまった経験はありませんか? figmaの仕様だと縦横4096pxを超える画像はペースト時に小さくなってしまいます。 スマホデザインなど縦長の画像を貼り付けたい時に不便ですよね。 こちらはどうやらプラグインで解決できるようです。 プラグインの使い方そもそもプラグインをどこからDLするのかよくわかってなかったので覚え書き。 ファイル一覧画面のSearchを選択。 上部にサーチバーがあるのでここで検索しま