ooooo

株式会社メンバーズ メンバーズキャリアカンパニー所属 デザイナー 大手メディア企業に常…

ooooo

株式会社メンバーズ メンバーズキャリアカンパニー所属 デザイナー 大手メディア企業に常駐し、自社サービスのサイトリニューアルや新規開発などをこれまでに担当。 2019年Adobeアンバサダー就任。

記事一覧

固定された記事

社内でハンズオン形式のオンライン勉強会を実施しました。

社内で参加者を募り、ハンズオン形式の勉強会(オンライン)を実施。 開催までの準備や当日の進め方、実施してみた感想などをまとめました。 開催フロー1.告知 ・勉強会の内…

ooooo
3年前
1

XD「タブ」の作り方

Step.1 タブメニューを作成してコンポーネント化 (command + K) ↓ Step.2 初期設定のステートの「+」を押して 「新規ステート」を追加 ↓ Step.3 「プロトタイプ」…

ooooo
3年前
2

余白を理解する

1.余白について 余白とは ・空間的に何もない部分 ・要素間の領域 ・白でなくてもOK 余白をとる目的 ・情報同士の干渉を防ぐ ・情報を明確にする ・ユーザー心理、導線を…

ooooo
3年前
4

XD「知っておくと便利な小ワザ」

〜要素間のアキを調べる〜 Step.1 パーツを選択。 ↓ Step.2 パーツを選択した状態でアキを調べたい要素にカーソルを合わせ、Optionキーを押す。 ↓ Complete! 要素同…

ooooo
3年前

XD「スタック」の使い方

スタックを設定し、各パーツの間隔を一定に保つ。 Step.1 各パーツを作成し、コンポーネントに変換。 (command + K) もしくは、グループ化だけでもOK。 ↓ Step.2 マ…

ooooo
3年前

XD「パディング」の使い方

パディングを設定し、文字数に応じて横幅を可変させるボタンを作る。 Step.1 ボタンを作成し、コンポーネントに変換。 (command + K) ↓ Step.2 マスターコンポーネ…

ooooo
3年前

XD「3D変形」を使ってみた

3D変形+アニメーションでタップした要素を横に1回転 Step.1 アニメーション前と後のアートボードを用意(コピペでOK) ↓ Step.2 プロパティインスペクター(右側)の変形…

ooooo
3年前
2

チームに欠かせないデザイナーになるために、ツールを使うのではなく「活かす」。

クリエイターのための総合情報サイト「CREATIVE VILLAGE」にデザイナー向けのコラムを寄稿しました。 デザイナーの必須アイテムはやはりデザインツール。 ただ、そのツー…

ooooo
3年前
社内でハンズオン形式のオンライン勉強会を実施しました。

社内でハンズオン形式のオンライン勉強会を実施しました。

社内で参加者を募り、ハンズオン形式の勉強会(オンライン)を実施。
開催までの準備や当日の進め方、実施してみた感想などをまとめました。

開催フロー1.告知
・勉強会の内容や日時、エントリーフォームのURLを知らせる告知文を作成
・社内で使用しているコミュニケーションツールや告知専用サイトに投稿

使用ツール:Google Forms、Currents、Google sites

↓↓↓
2.連絡用

もっとみる
XD「タブ」の作り方

XD「タブ」の作り方



Step.1
タブメニューを作成してコンポーネント化
(command + K)


Step.2
初期設定のステートの「+」を押して
「新規ステート」を追加


Step.3
「プロトタイプ」に切替え、ボタンの移動先を
追加したステートに設定する


Step.4
「プロトタイプ」に切替え、タブの移動先を追加したステートに設定する

[インタラクション]
・トリガー:タップ
・アクショ

もっとみる
余白を理解する

余白を理解する

1.余白について
余白とは
・空間的に何もない部分
・要素間の領域
・白でなくてもOK

余白をとる目的
・情報同士の干渉を防ぐ
・情報を明確にする
・ユーザー心理、導線を操作する

余白をうまく使うことで、
美しいレイアウト、見やすさ、要素のバランスなどの「見ための印象」と、導線、操作性、わかりやすさなど「ユーザーを操作」することができ、ユーザーにストレスと混乱を与えないデザインにすることができ

もっとみる
XD「知っておくと便利な小ワザ」

XD「知っておくと便利な小ワザ」

〜要素間のアキを調べる〜

Step.1
パーツを選択。


Step.2
パーツを選択した状態でアキを調べたい要素にカーソルを合わせ、Optionキーを押す。


Complete!
要素同士のアキの数値(px)が表示される。

Optionキーだけ押した場合は、ボードに対しての上下左右のアキが表示される。

以外に便利な時短テク。

XD「スタック」の使い方

XD「スタック」の使い方



スタックを設定し、各パーツの間隔を一定に保つ。

Step.1
各パーツを作成し、コンポーネントに変換。
(command + K)
もしくは、グループ化だけでもOK。


Step.2
マスターコンポーネントを選択した状態で、
プロパティインスペクター(右側)の「スタック」にチェックを入れて有効化。


Step.3
垂直方向 or 水平方向を選択し、
任意の間隔の値(px)を入力。

もっとみる
XD「パディング」の使い方

XD「パディング」の使い方



パディングを設定し、文字数に応じて横幅を可変させるボタンを作る。

Step.1
ボタンを作成し、コンポーネントに変換。
(command + K)


Step.2
マスターコンポーネントを選択した状態で、
プロパティインスペクター(右側)の「パディング」にチェックを入れて有効化。


Step.3
任意のパディング値(px)を入力。


完成
複製したコンポーネントの文字を変更。

もっとみる
XD「3D変形」を使ってみた

XD「3D変形」を使ってみた



3D変形+アニメーションでタップした要素を横に1回転

Step.1
アニメーション前と後のアートボードを用意(コピペでOK)


Step.2
プロパティインスペクター(右側)の変形にあるキューブ型のアイコンを選択、3D変形を有効化。


Step.3
X軸、Y軸、Z軸の回転を加える


Step.4
プロトタイプモードに切り替え、
・トリガー:タップ
・アクションの種類:自動アニメー

もっとみる
チームに欠かせないデザイナーになるために、ツールを使うのではなく「活かす」。

チームに欠かせないデザイナーになるために、ツールを使うのではなく「活かす」。

クリエイターのための総合情報サイト「CREATIVE VILLAGE」にデザイナー向けのコラムを寄稿しました。

デザイナーの必須アイテムはやはりデザインツール。
ただ、そのツールを使うのではなく「活かす」こと。活かし方次第でデザイナーとしての強みとチームに欠かせない存在になっていきます。

それをどうやって実現していくか。
↓↓↓

----------

株式会社メンバーズ メンバーズキャリア

もっとみる