Blau

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

Blau

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

ページ遷移時の緩急をつけたカーテンアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上でのページ遷移時に緩急をつけたカーテンアニメーションを挟む方法について記載します。 前提下画像の2フレームと1グループを元に、3…

Blau
Blau
5日前

モックアップ機能で写真内にベクター画像を立体的に配置する（Illustrator）

今回の記事ではIllustratorの機能である『モックアップ』を使用し、写真の中にベクター画像を立体的に配置する方法について記載します。 用意するものモックアップを作成…

Blau
Blau
12日前

ハンコ・スタンプ風に加工する（Illustrator）

今回の記事ではIllustratorでのハンコやスタンプ風のかすれの作り方について記載します。 使用するオブジェクト今回の記事では下画像のオブジェクトを使用していきます。 …

Blau
Blau
2週間前

Figma上のアニメーションをLottieで書き出す（Figma）

今回の記事ではFigma上で作成したアニメーションをLottieで出力する方法について記載します。 LottieとはLottieはAirbnb社が開発したアニメーションライブラリです。 ベク…

Blau
Blau
3週間前
3

ドラッグトリガーでオブジェクトを並び替え（Figma）

今回の記事では、オブジェクトの並び順をドラッグトリガーで操作できるプロトタイプの作成方法について記載します。 実際の挙動各オブジェクトをドラッグで並び替えできま…

Blau
Blau
1か月前

カーソルに追従するホバーアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上でのカーソルに追従するホバーアニメーションの作成方法について記載します。 実際の挙動カーソルに追従するように黒のオブジェクト…

Blau
Blau
1か月前

スマートアニメートのイージング（Figma）

今回の記事ではFigmaプロトタイプのスマートアニメートにおける『イージング』部分の設定について記載します。 イージングとは前提としてイージングとは、アニメーション…

Blau
Blau
1か月前
1

横幅に応じて折り返すタグの作り方（Figma）

今回の記事では要素の横幅に応じて折り返すタグの作成方法について記載します。 実際の挙動タグ内の文字数を変更すると、一定範囲外に出ないように折り返しが発生します。…

Blau
Blau
1か月前
4

追従ナビをスクロール位置に応じて変化させる（Figma）

今回の記事では、画面に追従ナビの状態をスクロール位置に応じて変化させる方法について記載します。 実際の挙動スクロールに応じて追従ナビの対応部分が強調するように変…

Blau
Blau
2か月前
6

一定方向からの画像切り替えアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上での一定方向からの画像切り替えを行うアニメーションの作成方法について記載します 実際の挙動ホバーすると上から表示領域が伸びて…

Blau
Blau
2か月前
1

覆い隠してから表示するアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上で文字などのオブジェクトを覆い隠してから表示させるアニメーションの作成方法について記載します。 実際の挙動長方形シェイプが左…

Blau
Blau
2か月前
1

定規及びガイドの表示（Figma）

今回の記事ではFigmaでの定規とガイドの表示方法について記載します。 定規定規は【メインメニュー】→【表示】→【定規】、もしくは『Shift』＋『R』キーで表示できます…

Blau
Blau
2か月前
1

寸法ツールの使い方（illustrator）

今回の記事ではillustratorの追加機能である『寸法ツール』の使用方法について記載します。 機能寸法ツールを使用すると下画像のように任意の部分の距離、角度、半径など…

Blau
Blau
2か月前
1

立体的な文字の作り方（Figma）

今回の記事では立体的な文字の作り方について記載します。 なお、今回の方法では『Blend』というプラグインを使用します。 また、エンボス加工風の立体的なデザインの作成…

Blau
Blau
3か月前
1

一定時間で他パーツと連動して切り替わるスライダーの作り方（Figma）

今回の記事では一定時間で他パーツと連動して画像が切り替わっていくスライダー（カルーセル）の作成方法について記載します。 実際の挙動下のバーや○と連動してスライダ…

Blau
Blau
3か月前
1

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

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

Blau
Blau
3か月前
2

ページ遷移時の緩急をつけたカーテンアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上でのページ遷移時に緩急をつけたカーテンアニメーションを挟む方法について記載します。 前提下画像の2フレームと1グループを元に、3パターンの方法でカーテンアニメーションを作成していきます。 【フレーム】遷移前 【フレーム】遷移後 【グループ】表示縦幅分のシェイプ×2（上に背景色、下にカーテン色） フレーム_遅延で制御するパターン実際の挙動 フレーム4枚かつコンポーネント無しで作成できます。 作成方法 遷移前1枚と遷移後3枚

Blau

モックアップ機能で写真内にベクター画像を立体的に配置する（Illustrator）

今回の記事ではIllustratorの機能である『モックアップ』を使用し、写真の中にベクター画像を立体的に配置する方法について記載します。 用意するものモックアップを作成するにあたり、配置先の画像と配置するベクター画像を用意します。 配置先の画像は数パターン用意されているAdobe Stockのサンプルを利用することもできます。 今回の記事では下画像の素材を使用していきます。 『モックアップ』機能の使い方まず、以下のどちらかでモックアップウィンドウを開きます。 ベクタ

Blau

ハンコ・スタンプ風に加工する（Illustrator）

今回の記事ではIllustratorでのハンコやスタンプ風のかすれの作り方について記載します。 使用するオブジェクト今回の記事では下画像のオブジェクトを使用していきます。 各方法の完成品ブラシで掠れさせる方法まず【オブジェクト】→【透明】のウィンドウを表示し、オブジェクトを選択した状態で『マスク作成』を選択します。 全体がマスクされている状態になるので、『クリップ』のチェックを外してオブジェクトが見える状態にします。 【オブジェクト】→【ブラシ】ウィンドウから【ブラシ

Blau

Figma上のアニメーションをLottieで書き出す（Figma）

今回の記事ではFigma上で作成したアニメーションをLottieで出力する方法について記載します。 LottieとはLottieはAirbnb社が開発したアニメーションライブラリです。 ベクターデータのアニメーションをjson形式で出力するため、Gif画像と比べて軽量で拡大縮小しても画質劣化を起こさないなどの利点があります。 なお、今回の記事ではFigma上で作成したアニメーションをLottieFilesというプラグインで書き出します。 書き出し方法まず書き出す元のアニ

Blau

ドラッグトリガーでオブジェクトを並び替え（Figma）

今回の記事では、オブジェクトの並び順をドラッグトリガーで操作できるプロトタイプの作成方法について記載します。 実際の挙動各オブジェクトをドラッグで並び替えできます。 作成方法まず初期状態のパターンを作成してオートレイアウトを有効化し、コンポーネント化します。 バリアントを追加して並び順を変更し、各並び順のパターンを作成していきます。 今回のように3つのオブジェクトで並び替えをさせる場合、6パターンのバリアントを作成することになります。 プロトタイプを設定します。 ド

Blau

カーソルに追従するホバーアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上でのカーソルに追従するホバーアニメーションの作成方法について記載します。 実際の挙動カーソルに追従するように黒のオブジェクトが移動します。 作成方法今回は6個のバリアントを含むコンポーネントを作成しています。 パーツの作成 まず初期状態のフレームを作成し、コンポーネント化します（バリアント1）。 今回は4段階にわけて表示させているため、全体横幅の25%ずつ黒部分が進む形でバリアントを作成しています。 そのため、下画像のようにグレ

Blau

スマートアニメートのイージング（Figma）

今回の記事ではFigmaプロトタイプのスマートアニメートにおける『イージング』部分の設定について記載します。 イージングとは前提としてイージングとは、アニメーションなどの動きに加減速を加える設定のことです。 下画像の例ではアニメーションの総時間は同一のまま、動きの部分を調整することで差を生じさせています。 イージングはプロトタイプのインタラクション内、下画像の赤枠部分から選択できます。 イージングの設定Figmaにはイージングの設定として以下の項目があります。 項目の

Blau

横幅に応じて折り返すタグの作り方（Figma）

今回の記事では要素の横幅に応じて折り返すタグの作成方法について記載します。 実際の挙動タグ内の文字数を変更すると、一定範囲外に出ないように折り返しが発生します。 折り返すタグの作成方法タグ タグのパーツを作成後、オートレイアウト化することでテキスト部分とシェイプ部分の間隔を固定できます。 下画像では左右12pxの上下1pxで固定しています。 間隔を固定した状態にすることで文字数の変更に応じてシェイプ部分を伸ばせます。 折り返し オートレイアウトを使うことで折り返し

Blau

追従ナビをスクロール位置に応じて変化させる（Figma）

今回の記事では、画面に追従ナビの状態をスクロール位置に応じて変化させる方法について記載します。 実際の挙動スクロールに応じて追従ナビの対応部分が強調するように変化します。 作成方法今回は以下の記事に記載している方法を使用しています。 全体の構成は下画像の通りです。 遷移時にスクロール位置を保持するためにアートボード名のプレフィックス（接頭辞、下画像の『Page/』の部分）が同一になるように注意してください。 追従ナビ部分には【スクロールの動作_位置：追従】を設定します

Blau

一定方向からの画像切り替えアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上での一定方向からの画像切り替えを行うアニメーションの作成方法について記載します 実際の挙動ホバーすると上から表示領域が伸びてきて画像が切り替わります。 マウスリーブでパターン1は下から上へ戻り、パターン2では再度上から下へ表示領域が伸びます。 作成方法まず切り替え前の画面と切り替え後の画像を用意します。 この際、画像は任意サイズでマスクします。 切り替え後の状態が上になるように重ね、コンポーネント化します。 切り替え後のシェイプ

Blau

覆い隠してから表示するアニメーション（Figma）

今回の記事では、Figmaプロトタイプ上で文字などのオブジェクトを覆い隠してから表示させるアニメーションの作成方法について記載します。 実際の挙動長方形シェイプが左から伸びて右へ縮むアニメーションの後で文字が表示します。 『ラグ無』では4行全てが同時に表示が切り替わり、『ラグ有』では切り替わりタイミングをズラして表示しています。 作成方法まずテキスト（覆い隠してから表示したい）部分を作成し、同サイズのフレームで囲みます。 1行ずつ囲むようにフレームを作成します。 1行

Blau

定規及びガイドの表示（Figma）

今回の記事ではFigmaでの定規とガイドの表示方法について記載します。 定規定規は【メインメニュー】→【表示】→【定規】、もしくは『Shift』＋『R』キーで表示できます。 ガイドガイドは表示した定規の目盛部分からドラッグすることで設定できます。 ドラッグの終了地点がフレーム上の場合はそのフレームのみのガイドとなり、キャンバス上の場合には全体のガイドとなります。 なお、定規を非表示にするとガイドもあわせて非表示になります。 設定したガイドは再度定規の目盛部分へドラッグす

Blau

寸法ツールの使い方（illustrator）

今回の記事ではillustratorの追加機能である『寸法ツール』の使用方法について記載します。 機能寸法ツールを使用すると下画像のように任意の部分の距離、角度、半径などの寸法を測定して表示させることができます。 使い方寸法ツールは下画像赤枠部分のアイコンから選択できます。 寸法ツールを選択するとタスクバーが表示されます。 下画像にある『寸法』各項目を選択することで対応した寸法の測定ができます。 長さ寸法 長さ寸法では以下の2パターンの方法で寸法を計測できます。

Blau

立体的な文字の作り方（Figma）

今回の記事では立体的な文字の作り方について記載します。 なお、今回の方法では『Blend』というプラグインを使用します。 また、エンボス加工風の立体的なデザインの作成方法については以下の記事に記載しています。 作成する立体文字今回は下画像のような文字を作成していきます。 プラグイン概要Blendはパスに沿ってオブジェクトを複製配置できるプラグインです。 パスとオブジェクトを選択した状態でBlendを適用してみます。 するとパス上にコピーオブジェクトを複数配置できまし

Blau

一定時間で他パーツと連動して切り替わるスライダーの作り方（Figma）

今回の記事では一定時間で他パーツと連動して画像が切り替わっていくスライダー（カルーセル）の作成方法について記載します。 実際の挙動下のバーや○と連動してスライダーが動きます。 スライダーの作り方今回の記事では2パターンのスライダーを作成しています。 スライダーA スライダーAでは各スライドのバリアントをコンポーネント内に作成し、 スライド1→スライド2 スライド2→スライド3 スライド3→スライド1 へと『アフターディレイ』『ディゾルブ』のプロトタイプを設定し

Blau

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

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

Blau