けんじ / UX Designer
@kenji_clown5
Followers
4,114
Following
2,443
Media
1,409
Statuses
18,504
ゲーム会社のUX Designer / Gamer / LottieFiles Evangelist / たまにセミナー登壇 / ボーダーコリーのベルがいます
日本
Joined November 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Doom
• 514422 Tweets
Marvel
• 342014 Tweets
ANILPIN WORLD PREMIERE
• 291919 Tweets
#TheLoyalPinGalaPremiere
• 284843 Tweets
ワンフェス
• 160974 Tweets
Belal
• 130627 Tweets
Leon
• 122165 Tweets
#超RIZIN3
• 69601 Tweets
Kang
• 62576 Tweets
一本負け
• 56779 Tweets
Iron Man
• 52312 Tweets
アイビスSD
• 35730 Tweets
YIN YIN
• 32037 Tweets
Tony Stark
• 31734 Tweets
#シャニマスLIVEFUN_day2
• 26327 Tweets
クイーンS
• 25602 Tweets
アイビスサマーダッシュ
• 23510 Tweets
Alexa Moreno
• 20667 Tweets
モズメイメイ
• 19038 Tweets
#sumo
• 16932 Tweets
詩ちゃん
• 16119 Tweets
コガネノソラ
• 15583 Tweets
#花龍列車の待合室
• 14541 Tweets
照ノ富士
• 11512 Tweets
ボンドガール
• 10795 Tweets
Pinned Tweet
8月21日(水)19時より、Figmaオンラインセミナーをやらせていただきます！今回はConfig 2024特集といいうことで、新しいUIとAI機能についての解説になります。無料なので、お時間の合う方はお気軽にご参加ください！
0
5
71
ホテルのお風呂に夢の泡泡セットがあったので試してみたんだけど、想像してたものと違うものが生まれてしまった・・・
19
6K
11K
Webページにお手軽にリッチなアニメーションやインタラクションを組み込めるのが素敵。そう、Lottieならね。
1
76
823
ジョジョランズのタイトルロゴができるまでの解説、めちゃくちゃ参考になる。
0
177
660
1
83
610
【朗報】FigmaのLottieFilesプラグインから、FigmaのSmart animateで作ったアニメーションを、Lottieファイルとして書き出せるようになりました。注意点をツリーに書きます。
1
56
453
Lottieアニメーション実装について完全に理解できる30枚超のスライドを作りました！キーボードの左右キーでページ送りできます。
WebデザイナーのためのLottieアニメーション実装講座
1
60
424
Figmaで作ったマイクロインタラクション「それ誰が実装すんの？」問題。Lottieアニメーションにして秒で実装します。（すべてのアニメーションがLottieにできるわけではないです）
1
33
417
Microsoft Bingに作ってもらったロゴを、でSVGにして、Figmaで清書して、プラグインでLottieアニメーションにして実装してみたよ。これで充分感あるな…
1
45
384
Figmaのオンラインセミナーで、バリアブルモードを使ったレスポンシブデザインについて語るのをうっかり忘れていたので、動画で解説します。もちろんこれが唯一解ではなく、あくまでこんなアプローチもあるよ、というふうに捉えていただけたら。
#Figma
1
35
342
XDでスライド作るのが話題にあったので便乗してw 去年のAdobe MAX Japanで登壇したときの配布用XDスライドはこんな感じです。見てわかるようにところどころ分岐して人によって異なるルートとなります。実際にアップロードされたのはこちら。 #できるぞAdobeXD
1
76
327
0
27
287
#ホグワーツレガシー、スペック重視にするとクソダサ装備になりがちですが、装備そのままで、見た目だけ別のアイテムに変更したり透明にもできます（モンハンの重ね着的なやつ）。変えられないという人は、装備品にカーソルを合わせて□ボタンを押すんだ！
0
72
290
Figmaセミナー内で、Noto Sansだと上下センターがズレるのでどうしたら？という質問を頂いたので、FigmaのHiraginoとNoto Sansで、いくつか条件を変えて検証しました。確かにフォントサイズと行間との組み合わせでNoto Sansの上下の余白バランスが変わっているように見えます。続く。
1
18
272
本日のAdobe MAX Japanで発表した「伝言ゲームをなくしてデザインの質を高める！Adobe XDを使ったライブデザインのコツ」のプロトタイプがこちらになります。選択によって分岐するので、全ルート制覇を目指してみてください！
#maxjapan
0
63
263
つまりこういうこと。ネストされている要素に対して、スクロールの動作を「追従（上端で停止）」を指定しておくと、スクロールして上端で停止するけど、下の要素に押し上げられてスクロールする、というよくある構造が作れる。
#Figma
0
15
265
先日のCSS Niteでも紹介した、XDの地味に便利な「アピアランスをペースト」の機能。本来は塗りや線、ぼかしなどのスタイルを別のオブジェクトに適用する機能だけど、画角の同じ画像をまとめて入れ替えたりもできます。ちなみにこの動画は、XDのデザインモードを再現したプロトタイプです。
#AdobeXD
1
44
251
FigmaからLottieアニメーションを作るプラグインの「LottieFiles」と「Lottielab」の違い。LottieFilesは、プラグイン上でテンプレートを選んでアニメーションを作る（スマートアニメートからも作れる）。LottielabはプラグインからWebサービスに飛んで、タイムラインアニメーションを作る。
1
12
238
Figmaで4桁の数字パスコードを入力するプロトタイプ（3回間違うとロックされる）。アップデート前は膨大なパターンを作る必要があったけど、Variablesで正しいコード、入力されたコード、間違えた回数を変数で管理・照合することで、これだけのフレーム数でできます。
#Figma
1
21
229
Illustratorの生成AIでベクター画像を作り、FigmaにコピーしてLottieFilesプラグインで手書き風アニメーションを作成、Lottie形式のJSONファイルとしてHTMLに実装、という流れが数分でできるヤバい（ベータ版のため商用利用不可です）。
#AdobeFirefly
#Illustrator
#LottieFiles
2
34
226
触発されて。LottieアニメーションをGSAPのScrollTriggerで制御するデモです。
2
16
220
Astroについて連載始めました。自分がそうなのですが、初めてフレームワークに触れるような、ちょっと背伸びしたいWeb制作者目線で書いていきます。
Webフレームワーク「Astro」とは？ 開発初心者からベテランまで注目する理由 (1/2)|CodeZine（コードジン）
@codezine
から
1
33
212
Figmaのアップデートで追加された、Auto Layout「wrap」、Min widthを使うことで、3列→2列→1列のレスポンシブデザインができるようになったよ！さらにLocal variablesと組み合わせることで、配置した画面によって自動的に幅を変えることもできるよ！
#Figma
2
30
204
欧米のデザイナーさんとやり取りしてますが、スタイルガイドでまとめられた分かりやすいレスポンシブデザインデータ納品、JSまで使ったサンプルコードの提案、gitも当たり前のように使いこなして実装者（僕）とやり取りする、という方で「Webデザイナーとは？」となりました…
欧米ではデザインだけでなくコーディングやJSプログラミングができて「Webデザイナー」らしいので、イケてる海外のWebサイトのデザインを考えた人がコーディングの知識がないと言うのは疑問があるな。
1
70
487
0
37
201
Figmaのバリアブルモードをプロトタイプから動的に変更できるようになったので、今までテーマカラー切り替えなどを全パターン作らないといけなかったものが、一つのフローで完結できるようになりました！これを待ってた！
#Figma
💡"Set variable mode"を使ったプロトタイプでのモード切り替え
先日リリースされたプロトタイプの新しい設定"Set variable mode（バリアブルモードを設定）"をつかった、プロトタイプ上の操作によるモード切り替えのサンプルを公開しました！
#Figma
#FigmaSnacks
0
9
144
0
17
189
PS4だと思った？残念！DUALSHOCK®4で操作するAdobe XDのプロトタイプでした。
Did you think this was PS4? Sorry! this is a prototype of Adobe XD operated by Gamepad(DUALSHOCK®4).
#AdobeXD
#スダ氏
5
45
176
Figma to Lottie Challenge.
FigmaからLottielabプラグイン経由でLottieアニメーションを作りました（ここからJSONやMP4出力可能）。ブラウザで動作する専用ツールなので、タイムライン編集がシンプルで分かりやすい。
@LottielabHQ
2
18
176
Figmaで表現できるアニメーションは、だいたいCSSで実装することが多いですが、ちょっとしたモーフィング的な変形を試したいときは、LottieFilesプラグインでLottieアニメーションにすることができます。
#LottieFiles
1
13
176
Astro 2.9から試験的に実装されたトランジションAPIで、静的サイトに完全に後付けで設定追加するだけで、SPAのような画面遷移アニメーションつけられたよ！Astroはどこに向かっているんだ！？
2
18
170
Lottieに興味を持たれた方のために、お役立ちリンクをぶら下げておきます！まず手前味噌ですが、Lottieの作り方と実装方法の基本を解説した記事を書きました。
Lottieアニメーションについて深堀りしてみる｜けんじ
#note
1
22
169
フードコートにあるドリンクとポテトのセット、両手をふさがないコンパクトなデザインが素敵。映画館もこれでいいよ。
1
31
168
Figmaでバリアブルを使ったタイポグラフィーの管理ができるようになりました！
文字列のバリアブルでフォント名を入力しておくことで、テキストのフォントに適用できるようになります。
また、フォントサイズや行間にもバリアブルを適用できるようになりました。
#Figma
We were dropping hints about typography
Now our typography drop:
→ Font family
→ Font weight and style
→ Font size
→ Line height
→ Letter spacing
→ Paragraph spacing and indent
63
296
2K
0
19
168
事前に「IEを無視して良いなら」と伝えて納得してもらった上で、後から「IEでバグがありました」と言われたときに心が無になりました。
エンジニアに対して軽い気持ちで「バグ」だと言ってはいけない。心理的なダメージが大きく気持ちが萎えてしまう
自分の想定と違うことをバグと言ってしまうケースをよく見かけるけど、複数の要因から発生している事象かもしれない
安易にバグ判定せずに、丁寧に認識合わせをするのが大事な気がします
11
58
352
3
66
159
3/22発売予定の「豊富な作例で学ぶ Adobe XD Webデザイン入門」に、共著で参加させていただきました。
XDの基本情報から実務で使える作例、マニアックな使い方まで網羅しつつ、購入特典の学習用ダウンロードファイルもあり。超素敵な表紙が目印です！
#AdobeXD
#豊富な作例XD
5
29
156
間が空いてしまいましたが、ちょっと背伸びしたいコーダーさん向けのAstro入門記事、第2回を公開しました。Astroのインストールから環境構築までを解説しています。Node.jsってなに？という方も是非。
「Astro」で爆速Web開発をはじめよう！
@codezine
より
0
18
155
Figmaでフォトギャラリーのプロトタイプを作る場合、今までは写真枚数分の分岐フレームが必要でしたが、Local variablesの変数をコンポーネントのVariantsに接続することで、サムネイルクリック→対応する変数を指定→拡大フレームに移動で、2フレームで全パターンのアニメーションができます。
#Figma
1
8
152
Figmaで、スライドインやプッシュで画面全体を横スライドするけどヘッダーは固定したい、みたいな場合、「マッチングレイヤーをアニメーション化」にチェックを入れておくと、同名のレイヤー（ここではヘッダー部分）だけ固定できます。ちょっと便利な小技。
#Figma
1
12
149
Figmaのプロトタイプは、パス変形のアニメーションができない（一見繋がっているように見えてディゾルブになっている）ので、LottieFilesプラグインで滑らかなLottieアニメーションに変換して、JSONファイルとしてダウンロードするまでのデモです。
#LottieFiles
#Figma
0
8
149
FigmaでHoverアニメーション付きのボタンコンポーネントを作る場合、Variantsを複数つなぐことで、時間差のあるアニメーションもできます。この場合While hoveringではなく、Mouse enterで起動、After Delayの1msで順次遷移して、Mouse leaveで最初に戻っています。
#Figma
0
7
143
Figmaで、見出しと本文のfont-sizeとline-height用のバリアブルを作成し、複数のモード(スクリーンサイズ)ごとに数値を設定する。
見出しと本文用のテキストスタイルにバリアブルを組み込む。
これで一つのスタイルで、スクリーンサイズごとにタイポグラフィーを制御することも可能。
#Figma
2
15
146
XDでロゴのアイソレーションゾーンや、アイコンボタンの見た目より広いヒットエリア、Webコンポーネントのpadding/margin用に、不可視の領域を追加するプラグイン作りました。Invisible Spaceという厨二的な名前。
#XDplugins
#AdobeXD
2
26
136
HTMLとCSSに関しては、自己学習とネット記事による補完でほぼほぼ事足りると思ってるけど、初学者の方は
@tak_dcxi
さんのnote、CSS設計について深く学びたい場合は、
@assialiholic
さんの書籍を推しておきます！#ベテランエンジニアと繋がりたい
2
16
136
最近、プライベートの時間にも勉強しないとダメですか？みたいなことを気にされる方をちょいちょい見かけるんだけど、聞いてる時点で本心やりたくないだろうから、聞くだけ無駄じゃない？
1
14
133
もしかして、XDやFigmaでWebデザインする人は、そのツールだけで完結してると思われてる？普通にPhotoshopやIllustratorも使います。最終的なアウトプットをどれにするかで、その後の工程の作業効率が変わってくる、という認識。
0
8
129
Figmaで、オートレイアウトを使った可変デザインを構築していると、プロトタイプのプレビューオプションからレスポンシブな挙動を確認できます。実装を完全に再現することはできないけど、ブラウザで見たときのイメージを掴むのに良いかも。
#Figma
1
5
132
Figmaのスマートアニメートは、一つのアニメーションに対してイージングを一つしか設定できないけど、コンポーネント内のバリアントを使ってアニメーションを作ると、一つの画面で異なるイージングを同時に表示できます。
#Figma
1
11
129
Adobe MAXで習ったAdobe Aeroを5歳児に教えたら、AR空間にオブジェクトを配置して、タップしたら上昇、旋回して戻ってくるところまでプログラミングしてた・・・Aeroって子供のプログラミング学習にも使えるんじゃなかろうか？
#AdobeAero
#AR
#プログラミング
1
21
127
FigmaのLottieFilesプラグインがアップデートして、マスクにも対応したそうです。簡単なLottieアニメーションを書き出すなら、Figmaもありかもです！
🥳 Our LottieFiles for
@Figma
plugin just got an upgrade: we added vector mask support!
Now you can hide or reveal selected contents of your layers with the Figma to Lottie feature, allowing you to create complex visual effects & apply selective visibility to your animations.
6
122
842
0
19
125
LottieとRiveのアニメーションを比較してみました。LottieはFigmaからLottieFilesプラグイン経由でJSONファイルを書き出し、Riveは専用ツールから.rivファイルを書き出し。見た目はほぼ同じですが、所感をツリーに書きます。
@LottieFiles
@rive_app
1
8
121
デザインデータに、見出しや段落のタイポグラフィーが含まれているだけで、デザインに多少の間隔揺れがあっても、コーダーはどれを是とすれば良いのかを判別できるのでおすすめ。ついでにrem表記しておけば、それが相対的な間隔であると暗に伝えられたり。 #豊富な作例XD
1
8
116
データ整理してたら、2009年に作ったPlayStation15周年記念サイトのデータが出てきた。FlashのProgressionフレームワークと、Papervision3Dライブラリを使った懐かしい記憶が。触ってて気持ちの良い動きを目指していて、自分の中では今でも結構お気に入りです。
1
14
120
FigmaのLocal variablesを使えば、今までは分岐の数だけフレームを作らなければならなかったプロトタイプも、一つのフレームで動的に変化させることができます。これはカラー変数をスケボーの塗りに連結して、それぞれのボタンをタップしたら変数の色を変えています。
#figma
1
11
120
そもそも、「意味のないアニメーションはユーザーにとって害悪である」ということは、Flasherが2000年前に通過した場所だッッッ
0
8
118
娘のあつ森攻略本が、駆け出しエンジニアの参考書みたいに読み込まれてる。次のアップデートが楽しみで仕方ないらしい。
0
2
115
Bootstrapの名誉(？)のために言うと、今のBootstrapはbootstrap.min.cssを読み込んで上書きしてナンボ、というものではなく、Sassおよび変数管理により、最初からデザインを再現するために、必要なものだけを呼び出して使うような設計思想です。使い方によっては便利ダヨ！
2
10
113
こちら無料のオンラインセミナーにて、Figmaについてお話しさせていただきます！（すでにFigmaを使用されている方向けの内容となっています）
新機能「バリアブル」を活用した、体系的デザインとプロトタイピング手法
0
9
109
来週6月12日(水)19時より、Figmaの無料オンラインセミナーにて、テキスト周りの基本から応用までお話させていただきます。デモファイルのお土産もあるので、お気軽にご参加ください！
#Figma
0
9
100
コーディングやプログラミングする人は、正規表現による検索や置換を覚えておくと非常に便利です。正規表現と聞くとなんだか敷居が高そうに思えるけど、一度覚えてしまえばツールが変わっても使えるので一生ものです。僕もたまに忘れるのでよく復習してます。
0
18
98
Figmaで作ったロゴタイプを、LottieFilesプラグインでなんちゃってアニメーションロゴにして、Lottie-webライブラリを使って秒で実装します。
0
6
96
XDの埋め込みコード活用について初note書きました！Adobe XDで125パターンのキャラクリエイト #できるぞAdobeXD
2
18
95
XDのステート機能がアップデートして、キーボードやゲームパッドトリガーに対応したので試してみました。このPS4プロトタイプは一つのアートボードのみで、PS5のDualSenseで操作しています。
#AdobeXD
1
10
95
Adobe XDがビデオ(動画再生)に対応したので、こんなプロトタイプが可能になりました。爆発エフェクト以外は自動アニメーションです。
#AdobeMAX
#AdobeXD
#CreateWithAdobeXD
1
16
96
Figmaでも変数や条件分岐を使えるようになったところで、プログラミング経験のないデザイナーが論理的思考を楽しく学ぶのにおすすめなのがコレです。
0
11
94
Lottieのコーディング特化セッションの仕込み中です。Lottieに興味の沸いた方、GW後になりますがお気軽にどうぞ！
0
6
94
ICSさんのfont-familyの記事は、「今年もこの時期が来たか！」というくらい毎年見させていただいております。
2024年に最適なfont-familyの書き方 - ICS MEDIA
0
15
92
Kite(
@ixkaito
) さんの講座で、Figmaで幅1600pxのフレームで作ると、ベースのフォントサイズが16pxなので、ちょうど1vw=16pxになるため、レスポンシブデザインの計算がしやすい、というのがめちゃくちゃ「なるほど！！」と思いました。
0
5
89
海外のデザイナーさんとSketchファイルでやり取りしてるんだけど、カラーパレットやフォントサイズ、マージンなどが、CSS設計を想定したデザイントークンとしてまとめられていて、きっちり寸法指示まで入ってて、なんならサンプルコードのリンク付きで神レベルのデザインデータになってた。
1
5
85
「デザイナーがコーディングを学ぶとデザインの幅が狭まる」と言う人もいるらしいけど、XDやFigmaで本気でモーション作ったら「それ誰が実装すんの？」とか言われるので、結局はバランスやで。ちなみに自分で実装します。
0
4
87
Flash全盛時のFlashクリエイターの皆さんが、今も様々なスキルで第一線でご活躍されてるのを見ると、新しいトレンドや技術を学ぶことを苦としないどころか、むしろ喜びを見い出す「好奇心」が一番大事なんじゃないかと思えてくる。
2
4
87
Lottieによるアニメーションを一人で制作から実装まで完結させようとすると、デザイン(AfterEffects)とコーディングの知識が必要になりますが、今ならコーディング側はAIでかなり補えるので、デザイン専門の人こそ凄いものを実装できそう。
0
6
84
Google FontsのMaterial Symbolsを使うと、ブラウザ幅に応じて太さの変わるアイコンもできる（Weightパラメータをブラウザ幅に比例させる）。元がバリアブルフォントなので、アイコンを選択してコピーすると、テキストデータになる。
0
14
86
LottieFilesさんのEvangelistとして活動させていただくことになりました。Lottieを使ったアニメーションについて発信していきますので、引き続き宜しくお願いします！
0
6
86
Astro × WordPressで作ってた自ブログ、PageSpeed Insightsでモバイルだとパフォーマンス80前後だったんだけど、Google Analyticsをastrojs/partytown経由にしたら100になった。そんな違うの！？
0
6
83
先程のDISTでお話したことをnoteにまとめました！「Marvel's Spider-Man」に学ぶ、見せないで魅せるUI/UX｜けんじ
@kenji_clown5
｜note（ノート）
#dist27
0
25
83
Figmaでトグルボタンのような真偽値のVariantsを持つコンポーネントを作り、Boolean変数をリンクさせると、ページ遷移してもトグルの状態を維持することができます。（この場合、トグル切り替えと同時にBoolean変数もセットしています）
#Figma
1
4
83