Blau

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

Blau

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

最近の記事

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

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

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

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

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

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

        • サクッと金色・銀色を作成する(Figma)

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

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

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

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

        • サクッと金色・銀色を作成する(Figma)

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

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

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

          ツールチップの作り方(Figma)

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

          ツールチップの作り方(Figma)

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

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

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

          ページ内リンクの設定(Figma)

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

          ページ内リンクの設定(Figma)

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

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

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

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

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

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

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

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

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

          トグルの作り方(Figma)

          今回の記事では、Figmaプロトタイプ上で動くトグルの作成方法を記載します。 なお、Xdでの作成方法は以下の記事に記載しています。 実際の挙動トグル部分を選択することでONとOFFを交互に切り替えられます。 トグルの作成方法まず、初期値(今回はOFF)のトグルを作成し、コンポーネント化します。 コンポーネントにバリアントを追加し、ONの状態になるように修正します。 OFFからONへとプロトタイプを繋ぎます。 先ほどとは逆に、OFFからONへとプロトタイプを繋ぎます

          トグルの作り方(Figma)

          3D変形の適用方法(Figma)

          今回の記事では、Figma上でオブジェクトに3D変形を適用する方法について記載します。 なお、今回の方法は『SkewDat』というプラグインを使用したものとなります。 また、Xdでの作成方法は以下の記事に記載しています。 3D変形の設定方法3D変形を適用したいオブジェクトを選択した状態で、『プラグイン』内の『SkewDat』を選択します。 下画像では『最近使用したリソース』に『SkewDat』がありますが、初回仕様時には検索欄に名前を入力して『コミュニティ』の欄から選択し

          3D変形の適用方法(Figma)

          波線の作り方(Figma)

          今回の記事では、Figma上で波線を作成する方法について記載します。 なお、今回の方法はプラグインを使用しないものとなります。 また、Xdでの作成方法は以下の記事に記載しています。 波線の作り方まず適当なサイズの正方形を作成し、45度傾けます。 正方形をコンポーネント化し、『バリアントの追加』(下画像赤枠部分)から任意の数を複製をします。 その後バリアント間の余白をマイナスに設定し、正方形同士が重なるようにします。 コンポオーネント全体を90度傾けたあと、正方形部分の

          波線の作り方(Figma)

          ファビコン用画像のサイズ差分をPhotoshopで作る(Photoshop)

          今回の記事では、ファビコン(favicon)やアップルタッチアイコン(apple-touch-icon)用の画像をサイズごとに分けて作成する方法を記載します。 サイズ差分画像作成各サイズの準備 まず、必要になるサイズのアートボードを作成します。 今回はファビコン用に48×48、32×32、16×16の3サイズを作成しています。 次に、最も大きいアートボードいっぱいに長方形を作成します。 ここの長方形は背景にあたりますが、この時点では色は適当で問題ありません。 作成した

          ファビコン用画像のサイズ差分をPhotoshopで作る(Photoshop)

          Figmaでルーレットを再現する(Figma)

          今回の記事では、Figmaプロトタイプ上でのルーレットの再現方法を記載します。 なお、Xdでの方法は以下の記事に記載しています。 実際の挙動『開始』ボタンを押下するとルーレットが回転し、『停止』ボタンを押下すると徐々に遅くなり停止します。 『もう一度』ボタンを押下すると回転が再開します。 ルーレットの作成方法画面の作成 ①任意のマスを入れたルーレットとマス目を指す▼、回転を開始させるトリガーとなるボタンを配置した画面を作成します。 また、停止後の結果表示のために下画像

          Figmaでルーレットを再現する(Figma)