WEBデザイン

Adobe XDの無料おすすめプラグイン その③

投稿日:2021年5月7日 更新日:

こんにちは、デザイナーのAです。
今回もAdobe XDの便利なおすすめプラグインをご紹介します!

Mimic

Mimicは既存のWebサイトから、カラー・フォントファミリー・画像などの情報をワンクリックで抽出することができるプラグインです。

サイトのURLを入力して、「抽出」ボタンをクリックするだけなので、とても簡単です。
参考サイトの分析や既存サイトの情報を確認する際、大変便利です。

 

Adobe XDの無料おすすめプラグイン

プラグインの検索画面から「Mimic」と入力後、インストールしてください。

Adobe XDの無料おすすめプラグイン

インストール後、「Mimic」を起動。分析したサイトのURLを①に入力。「抽出」ボタン②をクリックしてください。

Adobe XDの無料おすすめプラグイン その③

使用されているフォントファミリー・カラー・画像が抽出されます。

Adobe XDの無料おすすめプラグイン

 

 

Stark

「Stark」は、カラーアクセシビリティをチェックできるプラグインです。

無料で使用できるのは下記の2つの機能になります。

・色覚シミュレーション
・コントラスト比

Stark

プラグインの検索画面から「Stark」と入力後、インストールしてください。

(1)色覚シミュレーション

アートボードを選択して、プラグインパネルの「Colorblind Simulation」をクリック。カラーブラインドを持った人たちにどのように見えるのかをチェックすることができます。

Adobe XDの無料おすすめプラグイン その③

色覚シミュレーション

通常時

色覚シミュレーション  通常時

色覚シミュレーション時

 

(2)コントラスト比

チェックをしたいオブジェクトをふたつ選択して、プラグインパネルの「Check Contrast」をクリック。
背景色とテキスト色のコントラスト比を確認することができます。そWCAG2.0の基準を満たしているかも診断してくれます。
標準文字(日本語全角22ポイント未満)と大きい文字(22ポイント以上)に分けて診断され、レベルAA(最低限の基準)とレベルAAA(高度な基準)があります。
※レベルAAA(高度な基準)は7:1以上のコントラスト比が必要です。

 

コントラスト比

 

 

Tategaki

テキストを一文字ずつ改行して縦書きのように見せてくれるプラグインです。

XDではまだ横書き機能しかないため、縦書きを表現する際は、一文字ずつ改行するしかないのですが、このプラグインを使えばショートカット(ダウンロード後、任意のショートカットキーへの登録が必要です。)で自動に改行してくれます。

※単純に改行してくれるだけなので、句読点や拗音、「~」や「()」「-」の表示は調整が必要です。

まず、下記サイトからzipファイルをダウンロードします。
https://github.com/ashryanbeats/tategaki-for-xd

Tategaki

zipファイルをダウンロード後、解凍せずに拡張子を「.zip」から「.xdx」に書き換え、ファイルをダブルクリックすると、XDにインストールされます。

縦書きにしたテキストを選択し、プラグインパネルの「Tategaki」をクリック。「テキストを縦書きにする」をクリックすると、テキストが改行されます。

Tategaki

Tategaki

いかがでしたでしょうか?
プラグイン導入でより快適なXDライフを送ってください!

-WEBデザイン

関連記事

WEBデザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

WEBデザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …

デザインリサーチとは?役割や実際の進め方を手法とともにわかりやすく解説!

デザインリサーチとは?役割や実際の進め方を手法とともにわかりやすく解説!

ユーザーのニーズと行動を深く理解した効果的なWEBサイトを作ることができれば、ユーザーに使いやすいWEBサイトが制作できます。ここで、注目を集めているのが「デザインリサーチ」という方法です。 デザイン …

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

こんにちは!デザイナーAです。 WEB制作時にサイトに掲載する画像を写真ではなく、お洒落なイラストにしたい…! でも制作費用は極力抑えたい~!!そんな方にオススメな写真をイラスト風に加工できるアプリを …

WEB制作における商用利用OK!お洒落な無料フォント6選

WEB制作における商用利用OK!お洒落な無料フォント6選

こんにちは、デザイナーのAです。 今回は商用利用OKな無料フォントをご紹介します! 無料フォントとして紹介されているフォントでも、中には商用利用は不可とされているものもありますので、ライセンスをしっか …

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

デザインをしている時に、最も人の目に触れるメインの処理について悩む事はありませんか? そんな時、フォントをPHOTOSHOPで少し凝ったエフェクトを使ってデザインすることで、デザインの質が2倍にも3倍 …