Pikagi
Eri Matsushita 松下 絵梨 Profile Banner
Eri Matsushita 松下 絵梨 Profile
Eri Matsushita 松下 絵梨

@matsu_eri

4,464
Followers
1,006
Following
705
Media
4,040
Statuses

大阪のweb/UIデザイナー、講師。『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』の著者。株式会社ロクナナ所属。Friends of Figma Osaka Leader ｜Adobe Community Expert｜LottieFiles Evangelist

大阪府
https://t.co/AA6tPff02C
Joined August 2009
Don't wanna be here? Send us removal request.
Pinned Tweet
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 month
💠大阪対面イベント💠アーカイブあります LottieFiles Meeting Osaka 01 〜Webデザイナーのためのアニメーション勉強会&交流会〜 1️⃣Figmaでアニメーション作成 ↓ 2️⃣LottieFilesに書き出し 3️⃣実装してWebページで表示 のワークフローをご紹介します✨
Tweet media one
0
12
51
Last Seen Profiles
想長大

@wanna_grow_up

Dadaismo Sonoro

@pedrohmc

Neale Von

@VonNeale

B.

@brotadisima_

Ruben

@benjoel26

🌱aquilai🌱

@aquilai111

ATEEZ makes Sunnie purrrrr

@Sunstar710

Pressa 🇿🇦

@Pressa1360

DG

@1dgrn

Cole Wyant

@WyantCole

CBSE Guess

@CBSEGuess

Jadon Haselwood 🎱

@jadon_haselwood

Bradford Hardin

@bradford_hardin

Croatia Rally

@croatia_rally

Steph 🤘🏻

@Steph_PerryCuff

肉肉 小成成

@lyc10lyc

Tante Cindy

@jandakembangstw

禾禾

@off_0128

𝗝𝗲𝗰𝘆𝗹

@seyjessica

🪶Dann🪶

@dann_awa

central committee of the WFH pajama patrol

@windcomecalling

Kirei

@kizzmehun

Leonardo Daverio

@LeoDaverio

huh

@idr_c21

Anastasia Kvitko

@AnastasiaKvitko

Michelle Keary

@michellekearyc6

Julio Rosas

@Julio_Rosas11

Gen GD bakshi 🇮🇳

@Genbakshi_in

𐙚

@soheerror

Asia Eriksen

@AsiaEriksen

Jessie 💋

@Jessie_S856

CTV(Cantik Tapi Viral)😍🍆🤤

@KasihLudah

‏َ

@outecomers

kghn fans mexico

@etrenalfaith

kelli.

@ohplzkelli

🫶🏽 🏳️‍🌈 🫧

@lyssagodumb

@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
#THETA360 で360度撮影したものを球体にしたデモデータを、Adobe Aeroで机の上にぽんっと配置。中に入れる・・・楽しい・・・ #AdobeMAXJapan #AdobeMAXJapan360
0
350
1K
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
Light Mode ↔️ Dark Mode #cssnite #adobexd
4
171
967
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
「余白はできるだけ8の倍数を使う💡」というルールを決める→ Figmaの変数（Variables）にあらかじめ8の倍数を登録しておく→ 「24の次に大きい8の倍数ってなんだっけ🤔」と考えることなく、プルダウンから選択できるのでラク🥳→ 開発モードで見ても確認しやすい🫶→ コーダーさんにパス！ @hiro_ghap1
1
82
867
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figmaの公式チュートリアル「Figma Basics」を日本語訳したものを、コミュニティに公開しました✏️ 個人での学習や、勉強会、授業などでご活用ください✨ #figma
Tweet media one
Tweet media two
Tweet media three
Tweet media four
0
95
662
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
11 months
5月のFigma勉強会で行った「Figmaの基本」のアーカイブ動画を一般公開しました🎥 Figmaの公式チュートリアル「Figma Basics」の日本語版を一緒に触りながら、Figmaの8つの特徴について知りましょう✨ 1. Frames / フレーム 2. Constraints / 制約 3. Components / コンポーネント 4. Styles /
Tweet media one
1
54
422
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XDUF大阪で紹介したデモ、XDのゲームパッドトリガーと自動アニメーションで作った【○×△□で攻撃するにゃんこ】。 猫なのであまりダメージを与える攻撃はできません。 6/22のCSS nite甲府、6/27のCC道場でも登場します🐱 #adobexd #xdufes2019 #cssnite #ccdojo
5
67
302
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
Figma上ではPC版でのデザインしか用意していないのに、STUDIOのプラグイン上でレスポンシブ対応できてる😳 思ってたよりだいぶすごい🙌 Figmaオートレイアウトをちゃんと設定すると、より精度が高まるとのこと。 #FigmatoSTUDIO #studio #figma
1
17
287
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
【Illustratorでの、版ずれ文字の作り方】 🔉音声付き解説✨ 1.アピアランスパネルで、線に対して［パスの変形］>［変形］ 2.水平方向と垂直方向にマイナスの値を入れると、線だけが左上にズレます。 🍀Photoshopでの版ずれ文字の作り方は明日ツイートします。 #Illustrator
1
33
288
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
✨XDでレスポンシブwebデザインする時のコツ✨ 🍀ブレイクポイントでレイアウト切り替え →「パディング」をON 🍀幅可変（リキッドレイアウト） →「レスポンシブサイズ変更」をON &必要に応じて「手動」で調整 ※「パディング」は2020年1月新機能 #adobexd #cssnite #xdug
0
38
250
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
【Photoshopでの、版ずれ文字の作り方】 🔉音声付き解説✨ レイヤースタイル3つ！ 1.境界線：線の色（ex.黒） 2.ドロップシャドウ：テキストカラーと同じ色 3.シャドウ（内側）：背景色と同じ色（ex.白） 💡ドロップシャドウとシャドウ（内側）の距離を同じ値に設定するのがポイントです。 #Photoshop
1
28
228
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
11 months
💠Figmaで版ずれ文字を作る方法💠 1️⃣文字の塗りを好きな色にします。 2️⃣文字の線を設定します。 3️⃣ドロップシャドウを追加します。 🔹B（Blur・ぼかし具合）：0 🔹色：文字と同じ色に設定 4️⃣インナーシャドウを追加します。 🔹X、Y座標：ドロップシャドウと同じ値 🔹B（Blur・ぼかし具合）：0
1
21
226
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
9 months
💠Figmaで作ったアニメーションをLottieFilesに書き出してウェブページに表示させる方法💠 Figmaでアフターディレイとスマートアニメーションを組み合わせてループアニメーションを完成させます。 ⬇️ プラグイン「LottieFiles for Figma」を実行します。
0
32
215
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
写真をシェイプでマスクする方法の、アプリごとの違い。 特に重ね順がややこしいですよね。 ✅Photoshop→写真が上 ✅Illustrator→シェイプが上 ✅Adobe XD→どっちでもOK ✅Figma→写真が上 #Figma 入門 #figma #adobexd #Photoshop #Illustrator
2
41
206
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figmaのオートレイアウトが効いて縦に（横に）並んじゃう～😂フレーム内に自由に配置したい！！ 🔽 「絶対位置」アイコンをクリックで解決🫶 #figma #cssnite
0
15
196
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
【宣伝】5/29に、私単著のXD書籍が翔泳社さんから発売されます。 Adobe XDではじめるWebデザイン&プロトタイピング一歩先行く現場のスキル XD勉強会やセミナー、学校の授業でもらった質問や疑問を解消すべく、コツやノウハウをぎゅっと詰め込みました✨ #adobexd #xdug
Tweet card media
『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』

松下絵梨『Adobe XDではじめるWebデザイン＆プロトタイピング』の紹介サイトです。

book.tsukiakari.design
6
60
190
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
9 months
💠9/22（金）13時〜 オンライン・無料💠 「Figmaを使いこなすための初歩のステップ」として、 ・基本操作 ・UIパーツ作成 ・デザイン作成 ・プロトタイプ作成 を、1時間でぎゅぎゅっとお伝えします✨ ご視聴いただいた方には、デモで使用したFigmaファイルのプレゼントもあります。
0
35
192
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
6 months
💎「LottieFiles for Figma」を使ってSTUDIO上に簡単にアニメーションを実装する方法！💎 1⃣Figmaでの作業 ・Figmaのスマートアニメート機能で、アニメーションを作成します ・フレームの塗り（背景色）は透明にしておきます ・プラグイン「LottieFiles for Figma」を起動 ・「Export to
1
27
192
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
6 months
💎「Figma to STUDIO」でラクラクレスポンシブ💎 1⃣Figmaのオートレイアウト機能を使ってデザインを作成 2⃣プラグイン「Figma to STUDIO」を立ち上げて「クリップボードにコピー」 3⃣STUDIOに移動して⌘ + Vを押して「デザインをインポート」
0
25
182
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
2 years
私がデモでよく使うプレゼンツールはこちらです！（どちらもMac用） 🍏Snipposé 画面の一部をドラッグして拡大表示するツール 🍏DemoPro 画面上に四角や矢印を描画するツール #xdug_osaka #cssnite
@by15816785
by｜Sasaki
@by15816785
2 years
松下さんが使ってる「選択範囲が画像（？）としてポップアップするプレゼンツール」なんだろ？！ めっちゃ便利！！笑 #xdug_osaka
1
0
7
2
30
181
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
Premiereのオートフレーム機能を使うと、人工機能で横型の動画を縦型に変更できる。 画面の端にいて見えなくなる被写体も自動的に真ん中にしてくれる。 #AdobeMAXJapan
1
50
174
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
Adobe MAXに初登壇させていただきます。 10/21（水） 14:30〜 Webデザインの初心者や、まだAdobe XDを使ったことがない、始めたばかりの方向けに、Adobe XDでできること、XDを中心にしたワークフローをご紹介します。 #AdobeMAX #AdobeMaxJapan #xdug_osaka #xdug
Tweet media one
Tweet media two
3
25
173
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
✨オートレイアウトを使用した、レスポンシブなカードUI✨ 🔹サイズ調整 親コンテナー：固定幅 子オブジェクト：コンテナに合わせて拡大 🔹「間隔：自動」にすると両端揃えになります。 ※CSSでのjustify-content: space-between;に該当
0
18
165
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
2 years
✨4/8（金）20:00〜オンラインセミナー✨ 鹿野 壮（ @tonkotsuboy_com ）さんと共にCSS Niteに出演します💁🏻‍♀️💁🏻‍♂️ Adobe XDで作った動きのあるデザインカンプを、コーディングで実装するという内容です😊 ぜひご参加くださいませ！ #adobexd #cssnite
0
22
149
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
あさって開催の #朝までイラレ では、「ウェブページで使うためのSVG書き出し」について解説します🖋️ ✅なぜSVGが必要なのか ✅データを軽量化するコツ ✅ウェブページで表示する方法 リアルタイム＋アーカイブ視聴の方には、デモファイルの特典付き🎁
Tweet media one
2
24
145
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
＼内容をチラッとご紹介／ 明日11/25開催の、【Adobe XDではじめる「動くプロトタイプ」Webデザイン講座】で解説する内容の一部です✨ 他にもたくさん、XD便利機能をご紹介しますのでぜひご参加ください！ 当日参加できなくても1週間アーカイブ見れます📺 #MdN #adobexd
0
16
138
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
【Photoshopで要素間の距離を計測するには】 1.スマートガイドが「オン」になっているか確認 2.計測元のレイヤーを選択 3.移動ツールまたはパスコンポーネント選択ツールを選択 4.⌘キー(Ctrlキー)を押しながら、計測先の要素の上にマウスポインタを置く #Photoshop
0
19
140
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
うに爆弾 #adobexd #ccdojo
3
21
134
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
💠Figma オンラインセミナー💠 今週日曜は「Adobe XD難民のためのFigmaスピードマスター」というお題で、Figmaの基本から使いこなしの勘どころまでお話させていただきます ✨当日の視聴のみは無料✨
Tweet media one
Tweet media two
Tweet media three
Tweet media four
2
18
129
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
「リピートグリッドに画像を一気に流し込み」っぽいことをFigmaでする方法🍀 Illustratorみたいに「⌘ + Dで繰り返し」ができるのが嬉しい😊 画像の配置：shift + ⌘ + Kも早めに覚えてしまいましょ✨ #adobexd #Figma #Figma 入門
0
11
124
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
コリスさんに、書籍『Adobe XDではじめるWebデザイン&プロトタイピング』をご紹介いただきましたー！ web初学者の頃から10年以上コリスさんのファンですが、このような形で関われてすっごく幸せです♡ #adobexd #xdug #xdug_osaka
@colisscom
コリス🍡🍭
@colisscom
4 years
Adobe XDの解説書を探していた人に、間違いのない決定版の一冊！ Adobe XDの実践的な使い方が、これでよく分かる！WebページのUIを設計するワークフローに沿って学べる解説書
Tweet media one
0
59
238
0
20
121
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【XDでアートボードを整列するには】 アートボードを複数選択して、プラグイン「Artboard Plus」＞[Rearrange Artboads into Grid]で整列します。 「Settings」から、アートボード同士を何px空けるかを、水平・垂直方向ごとに設定することができます。 #adobexd #xdug #xdug_osaka
0
14
119
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
今日はFigma×コーディングで全5時間のセミナー、がんばります😆 当日参加、まだ残席あります✨ アーカイブ参加も人気です🫶 CSS Nite in Osaka, vol.58「デザイナーとコーダーがお届けする、今日からできるFigma & Coding」 #cssnite #figma
Tweet media one
1
12
115
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
FigmaでもXDのように、シェイプにドラッグで画像できたらいいのに〜 と思ってたら、それっぽいことできるそうです！ 知らなかった〜😻 #cssnite #XD ユーザー向けFigma入門 #figma
@armytoru
黒葛原 道（つづらはら・とおる）｜EC×商品写真��本・発売中
@armytoru
8 months
XDでできて、Figmaでできないことに、 「図形に画像をドラックで画像を配置したい！」 ってのがありますが、近しいことはできます。 パネルの「塗り」に画像をドラッグ！ #figma #fof_miyazaki
1
18
179
0
11
110
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
✨感謝御礼✨ おかげさまで販売5日目で増刷が決まりました！ お買い上げくださったみなさま、本当にありがとうございます。 Kindle版はもうしばしお待ちくださいませm(_ _)m
Tweet media one
2
21
106
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
【XDで△→❤️】 ✨XDでハートを描画する方法✨ 1.三角形を描画 2.プロパティインスペクターのアピアランスの「コーナーカウント」に「<3」と入力 3.return（enter）キーを押す #xdug_osaka #adobexd
0
25
103
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
11 months
✨今週土曜💠神戸対面開催✨ 「Figmaの基礎からウェブデザイン、マイクロインタラクションまで学ぶ3回シリーズ」の第1回目では、Figmaの基本操作と、プラグインを活用したバナー作成について学びます。 （添付画像は作例の一例） 当日参加できない方はアーカイブ参加（後日動画視聴）をどうぞ😁
Tweet media one
0
15
106
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figma for VS Codeを使うと、VS CodeでFigmaファイルを開くことができる✨ まるっとそのまま使えるコードではないけど、コーディングの補助としてすごく良いですね。 #cssnite #vscode
Tweet media one
1
4
105
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XDデザインとHTMLで見比べて差分を出してくれるプラグイン ほしいです！ #AdobeMAXJapan #adobexd #xdug
Tweet media one
0
17
100
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
LottiFilesのプラグインで、マスクがサポートされるようになりました🥳 1️⃣Figmaのスマートアニメートでアニメーション作る 2️⃣プラグイン「LottiFiles for Figma」を使って書き出し 3️⃣LottiFilesページからJSONファイルをダウンロードし、実装 👉Webページで軽量なSVGアニメーションが表示できる🎉
1
16
104
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【XDで伸び縮みする矢印を作るには / responsive arrow】 レスポンシブリサイズを使います。 思うような動きにならなオブジェクトがあれば、ダブルクリック（もしくはcommandクリック）してそのオブジェクトだけ選択し、「手動」に切り替えて調整します。 #adobexd #cssnite
0
13
100
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
フリーランスとして13年間活動してきましたが、2023年1月1日より、株式会社ロクナナに所属することになりました! 大阪からフルリモート勤務で、引き続き制作案件のご相談もお待ちしています。 これまで通り、セミナーや勉強会の活動、講師業、執筆業も続けていきますので、よろしくお願いいたします！
Tweet media one
4
3
102
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
11 months
Figmaの2023年新機能、変数と条件式を組み合わせた「高度なプロトタイプ」の作り方です。 ✅フレーム1枚で、アイテムの個数と合計金額が増減できる ✅マイナスの値にならないようにする ⚜️この機能はプロフェッショナルプラン以上で利用可能です。 🔽明日の「Friends of Figma Osaka
0
16
103
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
#朝までフォトショ 私のセッションでは、Photoshopのタイムライン機能と、APNGやWebPアニメーションとして書き出す方法についてご紹介します✨
1
9
93
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figmaのプラグイン「Export style to CSS Variables」を使うと、設定した色スタイルやテキストスタイルを変数として書き出すことができる。 #cssnite #figma
Tweet media one
Tweet media two
0
11
92
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
💠CSS Nite in Osaka, vol.58の再演版💠 東京で、Figma×コーディング 全5時間のセミナーします！ 1️⃣Figmaで、制約やオートレイアウトを活用したレスポンシブWebデザイン制作 担当：松下絵梨 2️⃣Figmaからデータを読み取り、効率的にコーディング 担当：長谷川 喜洋（ @hiro_ghap1 ）
Tweet media one
2
20
85
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
(っ’-‘)╮ =͟͟͞͞🔪ブォン 話題のまさかりをXDで投げてみました。 #adobexd
@tonkotsuboy_com
鹿野 壮 Takeshi Kano
@tonkotsuboy_com
5 years
（っ'-')╮ =͟͟͞͞🪓ﾌﾞｫﾝ macOSとiOSのアップデートによりOS標準で斧🪓の絵文字が使えるようになりました！ （っ'-')╮ =͟͟͞͞🪓ﾌﾞｫﾝ 今まで「マサカリを投げる人」の顔文字には包丁🔪が使われていましたが、今後は斧🪓を使って適切に表現可能に！ （っ'-')╮ =͟͟͞͞🪓ﾌﾞｫﾝ #絵文字
Tweet media one
2
49
78
1
15
87
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
7 months
STUDIOとLottieFilesが連携した記念に、オンラインイベントします✨ 🔸Figmaでアニメーション作成 ↓ 🔸LottieFilesに書き出し ↓ 🔸STUDIOに読み込み ↓ 🔸STUDIOで公開🥳 のワークフローを、STUDIOの粟屋 元太さんと対談形式でご紹介します😊 参加費無料なので、お気軽にご参加くださいね〜😆
@studiodesignapp
STUDIO | Web制作を、ノーコードで。
@studiodesignapp
7 months
【イベントのお知らせ】 LottieFiles Evangelist 松下 絵梨 さまを講師としてお招きしてのイベントを開催します✨ [ オンライン開催 / 参加費無料 ] LottieFilesにアップした自作アニメーションをSTUDIOで実装するワークフロー解説 日程: 12/15 (金) 19:00 ~ 20:00
1
14
104
0
14
87
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
Figmaオンラインセミナー無事終了しました！ ご視聴&応援ありがとうございました😊 #cssnite #XD ユーザー向けFigma入門 #figma
Tweet media one
Tweet media two
0
0
85
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
2020年から使えるiPad版Illustratorには、XDのリピートグリッドみたいな機能が！ #AdobeMAXJapan
0
20
83
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【リピートグリッドでマスクアニメーション】 Mask Animation by Repeat Grid リピートグリッドのハンドルをドラッグした時の挙動を利用したマスクアニメーションの作り方。180°回転させてからリピートグリッド化&再度180°回転すれば、逆向きの動きも可能です。 #ccdojo #adobexd
0
19
80
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
大阪のFigma公式コミュニティがついに立ち上がりました💠 オンラインでも対面でも、勉強会や交流会を行なっていきますのでぜひ「Join」してくださいね✨ もちろん大阪の方じゃなくてもOKです😻 #figma #fof_osaka
Tweet card media
Figma

Friends of Figma

friends.figma.com
3
16
83
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
益子さん（ @takahiromashiko ）が紹介された、スクロールすると小さくなるスティッキーヘッダーの作り方。「スクロールに位置を固定」にチェックを入れるのがポイント。「スクロール時に位置を固定」は、デザインモード・プロタイプモードどちらにもあります。 #cssnite #adobexd
0
15
76
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figma × コーディングイベント無事終了しました！ 長時間ありがとうございましたー🥰 #figma #cssnite
Tweet media one
Tweet media two
4
5
75
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【XDでアートボードガイドをコピペするには】 1.アートボードを選択し、上部のメニューバーから[表示]＞[ガイド]＞[ガイドをコピー]をクリック。 2.ガイドの貼り付け先のアートボードを選択し、[表示]＞[ガイド]＞[ガイドをペースト]をクリック。 #adobexd #XDUFes2019
0
13
74
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
6 years
え、どうなってるん？PSDファイルやんな？？ #AdobeMAXJapan
0
43
72
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
どっちも使ってると、たまにショートカットとかこんがらがりますよね。 自分用メモも兼ねて、Adobe XDとFigmaの違いを、noteにまとめました📗 #adobexd #figma #figma 入門
Tweet card media
Adobe XDとFigmaの違い｜松下 絵梨

Adobe XDとFigma、どちらもよく使う、どっちも好きという人が増えてきましたね。 共通点も多いアプリだからこそ、「どっちがどっちだっけ」と混乱しないように、違いをざっくりまとめました。 気づいたらまた更新します！ よく使うショートカット 図形ツール スタックとオートレイアウト リピートグリッドの代わりに・・・ Figmaには、Adobe XDのように、リピートグリッドや、シェイプに画...

note.com
0
21
69
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
7 months
Adobe MAX Japan の「Design/Photoコミュニティプレイス」前夜祭 （スペシャルゲストも混じってる👀） 明日は楽しもう🙌 #AdobeMAX #AdobeMAXJapan
Tweet media one
0
4
70
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
本屋さんに、自分の本が並んでいるのを確認😍 『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』 無事本日発売です✨見かけたらぜひお手に取ってごらんくださいませー📖 #adobexd #xdug_osaka #翔泳社
Tweet media one
1
11
67
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
鹿野 壮（ @tonkotsuboy_com ）さんと、「デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作 」についてお話しました。ご静聴ありがとうございました！ XDのTIPSはこちらにもまとめてます。 ⚡️「Adobe XD Tips」（ @matsu_eri による: ） #cssnite
1
16
66
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【リピートグリッドでマスクアニメーション 2】 XDの自動アニメーション機能で作った、ECサイトでよく見る「カラーバリエーションの切り替え」のプロトタイプ。 #adobexd #cssnite
1
13
64
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XD×ゲームパッドでここまでできる！ #AdobeMAXJapan #adobexd #xdug
0
14
62
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XDの操作やおすすめプラグイン、セミナーでいただいたご質問への回答などを紹介するモーメントを作成しました。 ⚡️ "Adobe XD Tips" #adobexd #cssnite #xdug
0
27
65
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
💎大きい画像を縮小せずFigmaに読み込むには ➡️Figmaでは、縦横どちらかの幅が4096pxより大きい画像を読み込むと強制的に4096pxに縮小されます。 プラグイン「Insert Big Image」を使用すると、自動的に大きい画像を分割してから配置してくれるので、意図しない画像の縮小を防ぐことができます。
0
8
63
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
昨晩はご視聴ありがとうございました。他の出演者のみなさまも、おつかれさまでした！勉強になった✨ Illustratorから書き出したSVGをウェブページに表示する方法について、記事を書きました🖋️ #朝までイラレ #note
Tweet card media
SVG Tips vol.2 - SVGをウェブページに表示する方法｜松下 絵梨

前回の記事（SVG Tips vol.1）では、SVGの特徴とIllustratorから適切に書き出す方法について紹介しました。 今回は、書き出したSVGをウェブページに表示する方法について解説します。サンプルファイルも用意しているので、ぜひ一緒に手��動かしてみてください。 サンプルファイルのダウンロード svg_practice.zip 6.64 KB ファイルダウンロードについて...

note.com
0
7
60
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
CC道場 Adobe XDやろうぜ！すぐ使えるWebデザイン Tips vol.2/松下絵梨・鹿野壮（ @tonkotsuboy_com ） ご視聴ありがとうございました！ 本日使ったXDファイルとコーディングデータの一部を配布します↓ よかったらフォロー&感想をリプしてくださると励みになります😻 #ccdojo
2
13
57
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figma本社におじゃましてきました💠 #figma
Tweet media one
Tweet media two
2
1
60
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
ひさびさに、CSS Nite in Osakaをオンラインにて開催します😊 8/28（土） テーマ「Googleに寄り添うマークアップとBootsrap5で始めるCSSフレームワーク」 出演： 森 和恵（ @r360studio ） 朝平 文彦 長谷川 喜洋（ @hiro_ghap1 ）（星のソムリエ） 詳細はもうしばらくお待ちくださいませ✨ #cssnite
Tweet media one
3
19
58
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
7 months
打ち上げ🍺 #AdobeMAX #AdobeMAXJapan
Tweet media one
Tweet media two
0
1
58
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』Kindle版、 Kindleプライムデーセールで10/14(水)まで半額とのことです！ 詳しくはコリス( @colisscom )さんが紹介してくださってます（いつもありがとうございます！） #翔泳社 #adobexd
Tweet card media
これは見逃したらダメ！「Adobe XDではじめるWebデザイン＆プロトタイピング」のKindle本が半額に！！

「Adobe XDではじめるWebデザイン＆プロトタイピング」のKindle本が、半額セールになっています！ 半額になるのを待っていた人も多いと思います。 2020年5月に発売されたばかりで、Amaz

coliss.com
1
14
57
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XDユーザーグループ！ #xdug #AdobeMAXJapan
Tweet media one
Tweet media two
0
7
52
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
岡山来てます🍑 今日は「チームで活用できるデザインツールFigmaを使ってみよう!」というお話をさせていただきます。 「Figmaの基本」をデモで使うので、一緒に作業したい方は開いておいてくださいね😄 #okaweb
okaweb vol.51「リアルでしか得られないもの」

2023-04-15（土）14:00 - 18:00 2019年12月以来、コロナ禍を経て3年ぶりのリアル開催となりました。okawebセミナーイベントの復活第一弾です。今回のテーマは「リアルでしか得られないもの」です。コロナ禍に入ってから、オンラインやリモートで完結するものが増えてきていますが、リアルでしか得られないものがたくさんあることにも気づかされます。続きはリアルで、お会いしまし...

okaweb.doorkeeper.jp
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
Figmaの公式チュートリアル「Figma Basics」を日本語訳したものを、コミュニティに公開しました✏️ 個人での学習や、勉強会、授業などでご活用ください✨ #figma
Tweet media one
Tweet media two
Tweet media three
Tweet media four
0
95
662
2
5
56
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
XDの新機能「3D変形」 オブジェクトを選択して、プロパティインスペクターで「3D変形」アイコンをクリック。面白いですね！ #AdobeMAX #adobexd
1
16
55
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
軽くネタばらしをすると、Photoshopから直接APNGやWebPアニメーションを書き出すことはできないので、連番で書き出した静止画のPNG画像を「アニメ画像に変換する君」を使って変換します。 #朝までフォトショ
Tweet media one
1
4
54
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
視聴無料Photoshop講座📺ネオン風のバナー作成 制作を通して、髪の毛の切り抜き、レイヤーマスク、レイヤースタイル、色調補正、ブレンドモードといったPhotoshopの機能を学びます。 7/19（月）20:00 -21:00（アーカイブも見れます○） ▼ご視聴はこちら。 #67ws #photoshop
Tweet media one
0
13
55
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
8 months
なんとお申し込み人数が1,000人突破🥳 ありがとうございます。 2時間でぎゅぎゅっと、Figmaの基本から使いこなしの勘どころをお伝えします✨ 「当日の視聴のみ」は無料です😆 #figma #cssnite #XD ユーザー向けFigma入門
@cssnite
CSS Nite
@cssnite
8 months
今週日曜日の午後に開催 現在、1,000名超！ Adobe XDがメンテナンスモードに入りました。「やっとXDを覚えたのに…」「せっかくチームでの体制が整ったのに…」とどんよりされている方向けに、Figmaの基本から使いこなしの勘どころまで松下 絵梨さん @matsu_eri にギュッと凝縮して解説いただきます。
Tweet media one
0
17
76
1
10
55
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
セッションをご静聴いただきありがとうございました。 XDの書籍を執筆しました。 XDでWebデザインを制作しながら、現場のワークフローに沿って学んでいく本です。 この機会にXDを始めようかな？という方はぜひご覧ください！ #AdobeMAX #AdobeMAXJapan #adobexd #翔泳社
Tweet card media
『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』

松下絵梨『Adobe XDではじめるWebデザイン＆プロトタイピング』の紹介サイトです。

book.tsukiakari.design
2
15
54
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
先ほどご紹介したプラグイン含め、こちらにまとめております〜！ ⚡️「Adobe XD Tips」（ @matsu_eri による: ） #XDUFes2019
0
15
54
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
CSS Nite in Kobe 復活おめでとうございます🎉 復活第1弾を担当させていただくことになりました！ 💠Figmaの基礎からWebデザイン、マイクロインタラクションまで学ぶ3回シリーズ 第1回目 ①基礎編：基本操作を学んでバナーを作ろう ぜひご参加ください〜
Tweet media one
0
13
52
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
📺Adobe CC道場 / XDやろうぜ！すぐ使えるWebデザイン Tips vol.2 アーカイブ動画📺 鹿野壮さん（ @tonkotsuboy_com ）と共に、XDでの動きのあるUIデザインの作り方、CSSグリッドレイアウトやFlexboxを使った実装方法について解説しました。ぜひご覧ください🐱 #ccdojo #adobexd
Tweet media one
Tweet media two
Tweet media three
0
13
51
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
6 years
先日行った勉強会「ツキアカリMeet-up #01 Adobe XD ファーストインパクト」で使用したスライドを公開しました。 #ツキアカリmeetup #デジハリ大阪 #adobexd
Tweet media one
0
11
49
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
9 months
💎緊急開催Figmaセミナー💎 Adobe XDからFigmaへの乗り換えを検討している方、ぜひご参加ください🥳 「当日の視聴のみ」は無料です✨ #XD ユーザー向けFigma入門 #cssnite #figma
@cssnite
CSS Nite
@cssnite
9 months
【緊急開催!!】 いよいよAdobe XDがメンテナンスモードに入りました。「やっとXDを覚えたのに…」「せっかくチームでの体制が整ったのに…」とどんよりされている方向けに、Figmaの基本から使いこなしの勘どころまで松下 絵梨さん @matsu_eri に解説いただきます。 2023年11月5日[日] 14:00 -
Tweet media one
0
81
346
0
16
50
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
#Figma 入門 無事終了！ ご視聴ありがとうございました😊 （Figma Tシャツ買うか・・・）
Tweet media one
0
0
49
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
Q：XDのアニメーションをコーディングするTipsが知りたい A：おすすめ動画 CC道場/Adobe XDやろうぜ！すぐ使えるWebデザイン Tips vol.1 vol.2 vol.3 w/鹿野 壮（ @tonkotsuboy_com ）さん #xdug_osaka #CCDojo #adobexd
Tweet media one
0
11
46
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
2 years
Lottieアニメーション × Adobe XDで作成する、スプラッシュスクリーン（ローディング画面）のプロトタイプ 2パターン 1️⃣一度再生したら、次のアートボードに遷移 2️⃣リピート再生し、一定時間経過したら、次のアートボードに遷移 Lottie #adobexd #lottie #cssnite
3
10
50
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
あけましておめでとうございます✨ 今年はオンライン勉強会や動画配信をがんばっていきたいです🎥 Adobe XDの「自動アニメーション」を利用し、背景が透けて見える無限ループテキストアニメーションを作る方法を、テロップつき動画で解説しました。 #AdobeXD
Tweet card media
すぐ使えるXD Tips vol.4 - テキストアニメーションをデザイン編｜松下 絵梨

Adobe XDの「自動アニメーション」を利用し、背景が透けて見える無限ループテキストアニメーションを作る方法を、動画で解説します。 使用している画像素材と完成形のXDファイルは、こちらからダウンロードできます。 text_animation.zip 1711084 Bytes ファイルダウンロードについて ダウンロード ・background.jpg / 画像素材 ・text_animat...

note.com
1
6
48
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
✨オンライン💻ワンコイン💰✨ 5/25（木）「みんなではじめるFigma入門」で、Figmaの基本となる使い方をお伝えします。 「使っている人が増えてきたし、そろそろFigmaはじめてみようかな」という方、ぜひご参加くださいませ😁 #figma #ひろクリギルド #ヒロフロ
Tweet card media
みんなではじめるFigma入門【ひろクリギルド #17】

ひろしまクリエイターズギルドは、クリエイターの【つながり・交流】と【学び】を目的に活動しています。 第17回目となる今回は みんなではじめるFigma入門！ AdobeがFigm... powered by Peatix : More than a ticket.

peatix.com
0
18
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
7 months
Adobeカクテル飲めた🍸 #AdobeMAX #AdobeMAXJapan
Tweet media one
Tweet media two
Tweet media three
0
1
48
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
backdrop-filterで背景ぼかしの表現！ 背景色を半透明にするのがポイント😊 今日ご紹介していただいているのは、今すべてのモダンブラウザで使えるCSSテクニック✨ #cssnite
Tweet media one
Tweet media two
0
4
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
本日14:30〜、XDのセッションを担当します。ぜひご覧ください！ ご質問もお気軽にどうぞ！ 「いろは」始めるなら今！これからのwebデザインのワークフローに欠かせないUI/UXツール Adobe XD #AdobeMAX #AdobeMAXJapan #adobexd
Tweet media one
Tweet media two
0
8
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
4 years
鹿野さんのデモ：要素をテキストの形でくり抜く「background-clip: text」 XDでのプロトタイプは、「シェイプでマスク」と自動アニメーションのトリガー「時間」を使い、アートボード4枚で作成しました。 #cssnite #shift14 #adobeXD
0
9
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
XDユーザーフェス大阪、開場しました！ #XDUFes2019 #デジハリ大阪 #adobexd
Tweet media one
Tweet media two
Tweet media three
0
10
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
3 years
📺明日2/25（木）20:00〜 Adobe CC道場 鹿野 壮（ @tonkotsuboy_com ）さんと一緒に、「Adobe XD×モダンコーディング」をテーマに出演します。 デモの一部をご紹介✨ 1月のXD新機能、「破線の自動アニメーション」の作り方と、コーディングで実装するときのコツをご紹介します！ #adobexd #ccdojo
0
9
44
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
鹿野さんまた来てね！ #cssnite
Tweet media one
1
3
47
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
【XDでダミー画像を入れるには】 「PhotoSplash」というプラグインを使います。 1.長方形や楕円を選択し［プラグイン］ メニューの[PhotoSplash]をクリック 2.「Search by Keyword」にキーワードを入力して[Find Photos] 3.（必要であれば欲しいものを選び直してから）[Applay] #adobexd #xdug_osaka
0
14
46
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
5 years
本日20:00〜CC道場見てくださいね！ 「Adobe XDやろうぜ！すぐ使えるWebデザイン Tips – 松下絵梨」 #ccdojo
Tweet media one
1
8
45
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
大阪で、鹿野 壮（ @tonkotsuboy_com ）さんのコーディングセミナーをセミハンズオン形式で開催します👨‍💻 脱IE時代のモダンなCSSの書き方を学びましょう✨ 遠方の方、当日参加できない方は「アーカイブ参加」をどうぞ！ #cssnite
Tweet card media
CSS Nite in Osaka, vol.59「Modern Coding 2023〜現場で働くコーダーのためのCSSテクニック〜」

2023-06-10（土）14:00 - 16:30 当日参加できない方は、「アーカイブ参加」にお申し込みいただければ、後日アーカイブ（録画）を視聴いただけます。 CSS Nite in Osaka, vol.59は、リアル会場での開催となります。 講師、司会者など出演者は、ライブ要素的な観点からマスクなしで行います 参加者の方のマスクの着用は、各個人の判断におまかせします Mode...

cssniteosaka.doorkeeper.jp
0
13
45
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
1 year
「チーム全員でUIデザイン 今日からはじめるFigma入門」第2弾✨ 前回に引き続き、綿貫 佳祐（ @xrxoxcxox ）さんと共演させていただきます🙋‍♀️ 共同編集を活用したデザイン制作を、リアルタイムでお見せします✏️ 当日の視聴は無料😁ぜひお申し込みください🫶 #cssnite #figma 入門
Tweet card media
チーム全員でUIデザイン 今日からはじめるFigma入門 2

2023-06-17（土）21:00 - 23:00 noteにてアーカイブ（スライド・動画）を販売しています。「アーカイブを見たい方」「申し込みそびれてしまった方」はご利用ください。https://note.com/cssnite/n/n389afcfc958b 『Figmaデザイン入門〜UIデザイン、プロトタイピングからチームメンバーとの連携まで〜』を執筆された綿貫 佳祐さん、そしてA...

cssnite.doorkeeper.jp
0
14
44
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
10 months
明日の「CSS Nite in Kobe, vol.58」では、Figmaでのレスポンシブデザインについて解説します。 復習用にお使いいただける「作業手順書」も用意しております✨ ※「作業手順書」はアンケート回答特典です 👇お申し込みはこちら アーカイブ参加もあります🫶 #cssnite #figma
0
15
45
@matsu_eri
Eri Matsushita 松下 絵梨
@matsu_eri
6 years
XDの自動アニメーション気持ちいいです！ #AdobeMAXJapan
0
9
45