Blau

デザインやデザインツールの操作法などの記事を書いていきます。

Blau

デザインやデザインツールの操作法などの記事を書いていきます。

【小ネタ】横スクロールのプロトタイプをマウスの縦スクロールで動かす方法（Figma）

今回の記事では、プロトタイプ上で横スクロールのデザインをマウスの縦スクロールを使って動かす方法について記載します。 注意点今回の方法はプロトタイプ上の制約があり…

Blau
Blau
7時間前

スクロールを疑似的にプロトタイプのトリガーにする方法（Figma）

今回の記事では、アニメーションなどのプロトタイプのトリガーを疑似的にスクロールにする方法について記載します。 なお、今回の方法では『マウスエンター』トリガーを使…

Blau
Blau
7日前

文字化けするデータを元の見た目でアウトライン化する方法（illustrator）

今回の記事では、illustrator上で文字化けして表示されてしまうデータを元の見た目でアウトライン化する方法について記載します。 なお、今回の記事の方法はデータによっ…

Blau
Blau
2週間前

『テキストからベクター生成』でベクター画像を生成する（Illustrator）

今回の記事では記事執筆時点でIllustratorのベータ機能である『テキストからベクター作成』を使用した、ベクター画像の生成方法について記載します。 『テキストからベク…

Blau
Blau
3週間前
1

Figmaの各種書き出し保存方法（Figma）

今回の記事では、Figmaにおけるファイルや画像の書き出し保存方法について記載します。 1. ローカルコピーを保存プロジェクト全体を『.fig』という形式でローカル上に保存…

Blau
Blau
4週間前

エンボスっぽく立体的にサクッと加工する（Figma）

今回の記事ではFigmaでオブジェクトをエンボスっぽく立体的に加工する方法について記載します。 エンボス今回の方法ではエフェクト内の『インナーシャドウ』を重ねること…

Blau
Blau
1か月前
1

アートボードを整理するプラグイン『Artboard Plus』（Adobe Xd）

今回の記事では、アートボードの配置やレイヤー順を整理できるプラグイン『Artboard Plus』について紹介します。 インストール方法①Xd画面左下のプラグインアイコンを選…

Blau
Blau
1か月前

配置済みのコンポーネントを一括で別のコンポーネントに置換する方法（Adobe Xd）

今回の記事では、Xd上に配置済みのコンポーネントを一括で別のコンポーネントに置換する方法について記載します。 置換する方法今回は下画像のファイルでコンポーネントを…

Blau
Blau
1か月前

サクッと金色・銀色を作成する（Figma）

今回の記事ではFigma上で金色・銀色を作成する方法について記載します。 金銀の作り方グラデーションに使用する色を3色決めます。 金：『黄土色』『オレンジっぽい黄色』…

Blau
Blau
1か月前

共有リンク上のプロトタイプの順番の直し方（Adobe Xd）

Xdで作業している際、作成した共有リンクでのプロトタイプの表示順番がXdとズレてしまう場合があります。 そこで今回の記事では、Xdプロトタイプ上でのアートボードの順番…

Blau
Blau
2か月前

ツールチップの作り方（Figma）

今回の記事ではFigma上でのツールチップの作り方について記載します。 ツールチップの作成まずツールチップを表示させる対象のパーツを作成して配置します。 別フレーム…

Blau
Blau
2か月前

【小ネタ】テキストだけを抜き出す方法（Figma）

今回の記事ではFigmaで作成したデザイン上に存在するテキストだけを抜き出す方法について記載します。 抜き出す方法テキストを抜き出したい部分を選択後、Figma以外でペー…

Blau
Blau
2か月前
1

ページ内リンクの設定（Figma）

今回の記事ではFigmaでのページ内リンクの設定方法について記載します。 設定方法トリガーとなるオブジェクトから移動させたい箇所のオブジェクトへプロトタイプを繋ぐこ…

Blau
Blau
2か月前

Xdを開かずにクラウドドキュメントをローカルに保存する方法（Xd）

Xdで作業していると、たまに以前まで利用できていた共有のクラウドドキュメントが開けなくなることがあります。 その対処法として今回の記事では、共有のクラウドドキュメ…

Blau
Blau
3か月前
1

ページ全体がフワッと浮かび上がるアニメーション（Figma）

今回の記事では、プロトタイプ上でページ全体がフワッと浮かび上がるアニメーションの作成方法を記載します。 なお、Xdでの作成方法は以下の記事に記載しています。 実際…

Blau
Blau
3か月前

スライドしてくるモーダルアニメーション（Figma）

今回の記事では、特定の方向からスライドしてくるモーダルウィンドウのアニメーションの作成方法を記載します。 なお、モーダルウィンドウ自体の作成方法は以下の記事に記…

Blau
Blau
3か月前
6

【小ネタ】横スクロールのプロトタイプをマウスの縦スクロールで動かす方法（Figma）

今回の記事では、プロトタイプ上で横スクロールのデザインをマウスの縦スクロールを使って動かす方法について記載します。 注意点今回の方法はプロトタイプ上の制約があり、使いづらいです。 その為、使用するのは「横スクロールの操作感確認」などのワンポイントに抑えた方がよさそうです。 実際の挙動下Gif画像からではわかりにくいですが、ドラッグではなくマウスの縦スクロールで画面を横にスクロールしています。 横スクロールをマウスの縦スクロールで動かす方法まず、今回の方法では以下の制約が

Blau

スクロールを疑似的にプロトタイプのトリガーにする方法（Figma）

今回の記事では、アニメーションなどのプロトタイプのトリガーを疑似的にスクロールにする方法について記載します。 なお、今回の方法では『マウスエンター』トリガーを使用します。 その為、マウスカーソルを使わないモバイル操作でのプロトタイプではうまく機能しません。 『ドラッグ』トリガーでのアニメーション開始については以下の記事をご確認ください。 実際の挙動『Concept』『Cats』の部分までスクロールすると、それぞれスマートアニメートでのアニメーションが表示されます。 また、

Blau

文字化けするデータを元の見た目でアウトライン化する方法（illustrator）

今回の記事では、illustrator上で文字化けして表示されてしまうデータを元の見た目でアウトライン化する方法について記載します。 なお、今回の記事の方法はデータによっては対応できない場合もあります。 またテキスト自体をアウトライン化する方法であるため、文言の変更はできません。 あらかじめご了承ください。 文字化け他人が作成したりオンラインデザインツールから保存したファイルを編集するためにllustrator上で開こうとした場合、対応するフォントがPCにインストールされ

Blau

『テキストからベクター生成』でベクター画像を生成する（Illustrator）

今回の記事では記事執筆時点でIllustratorのベータ機能である『テキストからベクター作成』を使用した、ベクター画像の生成方法について記載します。 『テキストからベクター生成』の使い方『テキストからベクター生成』はプロパティ内及び【テキストからベクター生成】ウィンドウから操作できます。 プロンプトに生成したい画像のワードを入力後【生成】を選択することで、画像を生成することができます。 また、長方形ツールなどで作成したオブジェクトを選択した状態で生成すると、そのサイズ

Blau

Figmaの各種書き出し保存方法（Figma）

今回の記事では、Figmaにおけるファイルや画像の書き出し保存方法について記載します。 1. ローカルコピーを保存プロジェクト全体を『.fig』という形式でローカル上に保存する方法です。 【メインメニュー】→【ファイル】→【ローカルコピーを保存】から保存できます。 保存した『.fig』ファイルはFigmaにインポートすることで再度確認及び操作を行えます。 2. フレームをPDFにエクスポートプロジェクト内のフレームを一括でPDF形式で保存する方法です。 【メインメニュー】

Blau

エンボスっぽく立体的にサクッと加工する（Figma）

今回の記事ではFigmaでオブジェクトをエンボスっぽく立体的に加工する方法について記載します。 エンボス今回の方法ではエフェクト内の『インナーシャドウ』を重ねることで、エンボスのように立体的にしていきます。 設定するインナーシャドウは2つ、明るい色と暗い色のシャドウ（今回は黒と白）を使用します。 また、このシャドウの設定位置（インナーシャドウ内の『X』と『Y』）を調整することで凹凸どちらかにするのかを選べます。 明るい白のシャドウを正の数値に、暗い黒のシャドウを負の数値

Blau

アートボードを整理するプラグイン『Artboard Plus』（Adobe Xd）

今回の記事では、アートボードの配置やレイヤー順を整理できるプラグイン『Artboard Plus』について紹介します。 インストール方法①Xd画面左下のプラグインアイコンを選択します。 ②『プラグイン』右の『＋』アイコンを選択します。 ③Creative Cloudのプラグイン画面が開かれるので、『Artboard Plus』を検索してインストールすれば完了です。 機能Artboard Plusには以下の機能があります。 Rearrange Artboards in

Blau

配置済みのコンポーネントを一括で別のコンポーネントに置換する方法（Adobe Xd）

今回の記事では、Xd上に配置済みのコンポーネントを一括で別のコンポーネントに置換する方法について記載します。 置換する方法今回は下画像のファイルでコンポーネントを置換します。 以下が置換の手順になります。 1. 置換するコンポーネントをコピー 2. 置換先のコンポーネントの中にコピーしたコンポーネントをペースト 3. コンポーネント内を整列 4. 元のコンポーネントを削除（ペーストしたコンポーネント以外のレイヤー） 5. ［ステートがある場合］置換先のステートとペース

Blau

サクッと金色・銀色を作成する（Figma）

今回の記事ではFigma上で金色・銀色を作成する方法について記載します。 金銀の作り方グラデーションに使用する色を3色決めます。 金：『黄土色』『オレンジっぽい黄色』『明るい黄色』 銀：『濃いグレー』『薄めのグレー』『白に近いグレー』 今回は下画像の色を使用しています。 設定した3色でグラデーションを作成すれば、金色・銀色の完成となります。 また作成したグラデーションに透明度を設定し、下にノイズやテクスチャを加えるとよりリアルっぽい質感になります。 色含めて調整し

Blau

共有リンク上のプロトタイプの順番の直し方（Adobe Xd）

Xdで作業している際、作成した共有リンクでのプロトタイプの表示順番がXdとズレてしまう場合があります。 そこで今回の記事では、Xdプロトタイプ上でのアートボードの順番の直し方について記載します。 なお、使用しているXdは記事投稿時点の最新verのものになります。 直し方対象のアートボードを選択した状態で、縦方向の座標を揃えます。 その後、共有リンクを更新すればXdでの順番（左から右へ）通りに表示されるようになります。 複数行で配置する場合は、下画像のように配置すれば数字

Blau

ツールチップの作り方（Figma）

今回の記事ではFigma上でのツールチップの作り方について記載します。 ツールチップの作成まずツールチップを表示させる対象のパーツを作成して配置します。 別フレームでツールチップを作成します。 トリガー箇所からツールチップのフレームをオーバレイとしてプロトタイプで設定します。 この際、オーバーレイの表示位置は『手動』を設定してドラッグで調整します。 また、今回は『？』アイコンにホバーした際に表示させたいので、プロトタイプには『マウスオーバー』を設定します。 あとはプレ

Blau

【小ネタ】テキストだけを抜き出す方法（Figma）

今回の記事ではFigmaで作成したデザイン上に存在するテキストだけを抜き出す方法について記載します。 抜き出す方法テキストを抜き出したい部分を選択後、Figma以外でペーストするとテキストだけが貼り付けられます。 なぜテキストだけ抜き出されるのかFigma内ではXdと同じように、各オブジェクトをコピー&ペーストで複製できます。 ですがクリップボードを見てみると、FigmaとXdではコピーの形式が異なることがわかります。 クリップボード上ではFigmaはテキスト部分のみ、

Blau

ページ内リンクの設定（Figma）

今回の記事ではFigmaでのページ内リンクの設定方法について記載します。 設定方法トリガーとなるオブジェクトから移動させたい箇所のオブジェクトへプロトタイプを繋ぐことで、特定位置へのページ内リンクを設定できます。 この際に『アニメーション』を設定することでスクロールのアニメーションを適用することができます。 オフセットの調整 追従ヘッダーなどを配置している場合、リンク先のオブジェクトがヘッダーに埋もれてしまうことがあります。 その場合はY（縦軸）のオフセットに【追従ヘ

Blau

Xdを開かずにクラウドドキュメントをローカルに保存する方法（Xd）

Xdで作業していると、たまに以前まで利用できていた共有のクラウドドキュメントが開けなくなることがあります。 その対処法として今回の記事では、共有のクラウドドキュメントのXdファイルをXdを使わずにローカルに保存する方法について記載します。 なお、今回の記事で使用しているキャプチャ画像では諸事情により『自分のファイル』を対象としていますが、『共有されたアイテム（共有ドキュメント）』でのダウンロードが可能であることを確認しています（2024年01月26日現在）。 手順Web上で

Blau

ページ全体がフワッと浮かび上がるアニメーション（Figma）

今回の記事では、プロトタイプ上でページ全体がフワッと浮かび上がるアニメーションの作成方法を記載します。 なお、Xdでの作成方法は以下の記事に記載しています。 実際の挙動テキストが一瞬消えた後、再度フワっと表示されます。 作成方法まず画面を作成していきます。 今回は以下の三画面を作成しました。 注意点として、スクロール位置を保持したままリロードさせたい場合、フレーム名のプレフィックス（接頭辞）を同一にする必要があります（今回は『フワッと/アニメーション前or後』の『フワッ

Blau

スライドしてくるモーダルアニメーション（Figma）

今回の記事では、特定の方向からスライドしてくるモーダルウィンドウのアニメーションの作成方法を記載します。 なお、モーダルウィンドウ自体の作成方法は以下の記事に記載しています。 今回はアニメーションを設定するため、以下記事内の『2.表示前後の画面両方を作成する場合』のモーダルウィンドウを使用します。 通常のアニメーション実際の挙動 ボタンを押下すると、モーダルウィンドウがふわっと表示されます。 作成方法 モーダルの表示前と表示後の画面を作成後、トリガーとなるボタンから

Blau