新田聡一郎 @soichiro_nitta Twitter profile

Pinned Tweet

新田聡一郎

@soichiro_nitta

1 day

CSSのみで作成ができる、repeating-radial-gradientによるギミックです。是非、コピー＆ペーストしてお試しください🌊

Ripple Gradient / ニッタスタジオ株式会社

CSS一行で、波紋が広がる模様を作ってみました。手軽に実装できるシンプルなギミックです。

nitta.studio

1

2

5

Last Seen Profiles

@GLAD_Int

@GETAGUlTAR

@MissGracieCat2U

@drluckett

@MlleAmaryllis

@PDVjourno

@Henrikmlkrj

@apolooceano

@ABasit30

@fc_travel_

@711089oOdG72n14

@CiudadRMeteo

@liam_kor

@graigueball

@Comunicacio21

@_Darrenhall

@corail_blanchi

@ExtinctionRush

@SydJColson

@CaseyBlaneBooks

@pisto_gol

@riku_aalto

@foofighters

@F8K8XcWaIRFh144

@ojuniorstaff

@CameronBinkows1

@DreaminNusquama

@jake_rigg

@LIMSFellows

@PongCha93039187

@mark_ungewitter

@3PyLyeYTRzz61c6

@akalegift

@jandakembangstw

@Firstkpp

@raynafathia00

新田聡一郎

@soichiro_nitta

5 years

渾身のタブバー！アプリっぽいUIにインタラクションを施して、ネイティブの体験により近づけるようにと思っています。

6

45

411

新田聡一郎

@soichiro_nitta

3 years

おもしろい！すごい！ Tailwind + React製とのこと。

0

46

262

新田聡一郎

@soichiro_nitta

5 years

供養です...🙏

2

12

208

新田聡一郎

@soichiro_nitta

6 years

Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。

11

49

176

新田聡一郎

@soichiro_nitta

3 years

わお...！サイト上のあらゆる要素をtailwindcssのコードに変換してくれるChrome拡張。これ神なやつじゃ...？

Marcel Pociot 🧪

@marcelpociot

3 years

Windy, our Tailwind browser extension, is now available as early access 🔥 Transform every element on any website to @tailwindcss

48

193

1K

1

32

152

新田聡一郎

@soichiro_nitta

5 years

ツイッタランドで出会った彼女と昨日、入籍しました💐

16

5

130

新田聡一郎

@soichiro_nitta

4 years

昨年10月オープンの「BAARD 理髪店」のホームページを制作しました。ロゴ・映像・デザイン・開発とトータルで任せていただきました。店舗の施工前から打ち合わせて、制作したロゴが実物になる（看板になる）という体験は新鮮でした！

9

14

122

新田聡一郎

@soichiro_nitta

3 years

なにこれ

1

10

116

新田聡一郎

@soichiro_nitta

6 years

Vueを知ってしまった人間の末路

1

50

98

新田聡一郎

@soichiro_nitta

6 years

フルリニューアルしました！初めて王道なデザイ��を攻めてみました。Nuxt,Netlifyで全記事を静的generate、Algoliaで爆速検索、localStorageでお気に入り・閲覧りれき機能、Simple GA Rankingでランキングと、新ネタもりもりで実装してみました。よろしくお願いいたします。

2

23

97

新田聡一郎

@soichiro_nitta

6 years

なんとCSS Design Awardsから、Best UI Design、Best UX Design、Special Kudos Awardをいただきました。こっそり応募していたのですが、これはうれしい...！

6

20

91

新田聡一郎

@soichiro_nitta

6 years

OPアニメーション / 爆速検索⚡️

3

16

88

新田聡一郎

@soichiro_nitta

3 years

Next.jsとTailwindcssで自社サイトを制作しました。ご依頼いただく制作案件のほうも、昨年頃からはめっきり同様の構成でやっております。Next.jsのISRでツイートはキャッシュしています。Vercel社によるISRの作例から着想しました。

0

5

74

新田聡一郎

@soichiro_nitta

6 years

WIP

1

7

64

新田聡一郎

@soichiro_nitta

6 years

うわー、このクオリティはヤバい。やられてしまった感が...。自分もがんばらねば。ヤバい。

SONICJAM Inc.

デジタルで新しい体験を。SONICJAM(ソニックジャム)は、デジタルコミュニケーション戦略立案、Webサイトの企画・制作、映像・モーショングラフィックス制作、インスタレーションデバイス開発などを行なうクリエイティブ・スタジオです。

www.sonicjam.co.jp

1

10

58

新田聡一郎

@soichiro_nitta

5 years

Nuxtのジェネレータを自作中...。・Airtableでマークダウン・Nuxtビルド時にJSON生成・link rel="prefetch"にjson追加・ルート生成・コンポーネントからは/_nuxt/xxx.jsonにリクエストって感じで出来たんだけど、爆速なんだが！

1

4

56

新田聡一郎

@soichiro_nitta

3 years

昨年の夏に、ニッタスタジオ株式会社を設立しました。よろしくお願いします！

ニッタスタジオ株式会社

Crafting on the web「ウェブで“工芸”をする」by 新田聡一郎

nitta.studio

1

9

56

新田聡一郎

@soichiro_nitta

6 years

jQueryを使うのはやめなさい

0

27

53

新田聡一郎

@soichiro_nitta

5 years

スマホの100vh問題、デザインによって（bottom基準でfixedさせる要素があるかどうかによって）、やり方変えてます。ある → bodyをheight: 100%に → 直下でスクロールエリアを設けて、子要素までheight: 100%を継承なし → bodyそのまま → innerHeightから計算結局こんな感じに収まってます。

1

6

52

新田聡一郎

@soichiro_nitta

5 years

Qiita、書きました！よろしくお願いします。 Nuxtでビルド時にAPIを静的化して、完全にサーバーへのリクエストをなくすト #Qiita

Nuxtでビルド時にAPIを静的化して、完全にサーバーへのリクエストをなくすト - Qiita

ビルド時にAPIを静的化するジェネレータを自作しましたので、ご紹介です。（コード有りです。）Nuxtのジェネレータを自作中...。・Airtableでマークダウン・Nuxtビルド時にJSON生成・…

qiita.com

0

13

52

新田聡一郎

@soichiro_nitta

6 years

よくいく喫茶店のトイレの照明が完全にVue.js

0

3

49

新田聡一郎

@soichiro_nitta

4 years

Craigslistの会社のことよく知らなかったのだが、社員50名という超少数精鋭だった。20年近くほぼ変更されていないあのWeb 1.0的デザインで、アプリなし。社員一人当たりの売上は10億円（そのほとんどが利益）やれUIだ、UXだのと日々いそしむおれたちはいったい...。

3

6

47

新田聡一郎

@soichiro_nitta

1 month

自社サイトをリニューアルしました。よろしくお願いします。

0

3

47

新田聡一郎

@soichiro_nitta

4 years

棚がきて最高になった！

2

3

42

新田聡一郎

@soichiro_nitta

5 years

Nuxt v2.4.0についてリリース報告をがんばって読みましたので笑、かいつまんで書きました！スマートプリフェッチはテンション上がった⚡️

Nuxt.js v2.4.0がリリース🎉 TypeScriptの公式サポート、スマートプリフェッチなど。まとめてみた。 - Qiita

Nuxt.js v2.4.0がリリース🎉🎉🎉🎉Nuxt v2.4.0 is finally here 🎉Official TypeScript support, smart prefetching…

qiita.com

0

14

41

新田聡一郎

@soichiro_nitta

6 years

特設サイトを自主制作しました✌🏻 20周年イベントの映像をいつものごとく @ken78twi がワンマンで。今回はサイトのアニメーションも手伝ってくれました。新しい作り方だった（Lottieです）。試せて良かった。この素晴らしい作品はちゃんと形に残しておかねば、という想いです。

4

14

40

新田聡一郎

@soichiro_nitta

6 years

デザインできてJS書けてサーバーサイド書けてインフラもできる人間のことをフロントエンドっていうのかと思ってた

0

15

36

新田聡一郎

@soichiro_nitta

3 years

Next.jsにレイアウト機能の情報が！ページ遷移間で維持されるので、出し分けしても、状態の永続化が可能に。しらなかったー

0

2

37

新田聡一郎

@soichiro_nitta

5 years

いまからウェブ（フロントエンド）やろう！って思ったらちょっと気が遠くなるねこれは……笑。

1

7

36

新田聡一郎

@soichiro_nitta

3 years

みんな笑って〜ハイ、チーズ📸

1

8

33

新田聡一郎

@soichiro_nitta

4 years

0

4

31

新田聡一郎

@soichiro_nitta

5 years

昨今のUIデザイナというのはもう半分エンジニアのようなもので、主戦場がエディタからデザインソフトになっただけで、SketchやFigmaのショートカット駆使しまくってバリバリと書いていくイメージ。

1

6

31

新田聡一郎

@soichiro_nitta

6 years

Qiita、書きました！サンプルコードを題材に解説しています。宜しくお願いします。

Vue.js ( Nuxt.js ) でアニメーションやってみたら最高だった話。 - Qiita

Nuxt.jsで自己紹介サイトを作りました。https://nitta.studio/見ていただくと分かる通りアニメーションをしまくったのですが、、https://t.co/CXj31medDjNuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます…

qiita.com

1

13

31

新田聡一郎

@soichiro_nitta

5 years

flutter_web/examples/gallery立ち上げて眺めてる。全部absoluteにしちゃえばこういう遷移できるけど、ウェブだとやっぱもたつき感あるよね。

0

4

31

新田聡一郎

@soichiro_nitta

3 years

Vue.js、コンポーネント内のdataで定義した変数を<style>層で使いまわせるようになった！見た目グリグリいじる人には嬉しいかも。

SFC style CSS variable injection (new edition) by yyx990803 · Pull Request #231 · vuejs/rfcs

This is an improved alternative of the previous version (

github.com

1

4

30

新田聡一郎

@soichiro_nitta

4 years

きました！でかいっ！

1

2

26

新田聡一郎

@soichiro_nitta

4 years

あ、Nuxtで完全静的化くるんだ👏 Full Static with Nuxt

0

7

29

新田聡一郎

@soichiro_nitta

5 years

importを関数として呼び出せるの知らなかったのだが、これ結構きれいなのでは？

2

27

新田聡一郎

@soichiro_nitta

3 years

Nuxt Tailwind v3.4.0、さくっとクラス探してコピペ出来るのめっちゃよさそう。ここまで用意してくれるのね！

0

2

25

新田聡一郎

@soichiro_nitta

3 years

Next.jsのTailwind公式サポートが！ tailwind.config.jsを検知していきなり書き始められるようになるっぽい。postcss.config.jsの設置やら、スタイル挿入（ @tailwind ~~）やら、手間要らずになるぞー🙌

Tim

@timneutkens

3 years

New Next.js RFC: Tailwind Support! ◆ Fast DX ◆ Zero Config ◆ Backwards Compatible

32

229

2K

1

2

27

新田聡一郎

@soichiro_nitta

6 years

「俺の若かった時はこうだったのに」みたいな話するオッサン正気か？フロントエンドは三ヶ月前の知識で環境語ってたら馬鹿だと思われるぞ

0

10

26

新田聡一郎

@soichiro_nitta

5 years

JSの呼吸静��ノ型 TypeScript

2

0

26

新田聡一郎

@soichiro_nitta

4 years

高級ワークチェアを手放して完全にスタンディングになった。ニトリの昇降デスク、安いし手軽でおすすめ。その代わり良い靴を履いて、土足でサギョしてる。

1

24

新田聡一郎

@soichiro_nitta

5 years

FontAwesome v5.7.0 ほんとだ増えてるー！最近のFontAwesomeほんと好きだなあ。とくにRegular。かわいい。クオリティ高い。BrandsにはSlackの新ロゴと、その他もいろいろ増えていて、Yarnなんかもある😺

1

6

23

新田聡一郎

@soichiro_nitta

6 years

1

24

新田聡一郎

@soichiro_nitta

2 years

my new home…

2

0

23

新田聡一郎

@soichiro_nitta

2 years

速報、日本にて @trilliumbrewing でございます🤤

0

23

新田聡一郎

@soichiro_nitta

5 years

これ300記事ほどあるWordPressサイトでやってみて、さらにvue-lazyloadでDOMを遅延ロードさせたら記事一覧ページ半端ない高速なことになっとる！

新田聡一郎

@soichiro_nitta

5 years

Nuxtのジェネレータを自作中...。・Airtableでマークダウン・Nuxtビルド時にJSON生成・link rel="prefetch"にjson追加・ルート生成・コンポーネントからは/_nuxt/xxx.jsonにリクエストって感じで出来たんだけど、爆速なんだが！

1

4

56

1

0

23

新田聡一郎

@soichiro_nitta

6 years

OP粗くて見えづらいのですが、すごく細かいことしてます！

1

2

22

新田聡一郎

@soichiro_nitta

5 years

まさかの @AWWWARDS のMobile Site of the Yearにノミネートされました。すごいことになった...！

1

22

新田聡一郎

@soichiro_nitta

5 years

UI/UXともに自分のオススメはインドのECのflipkart。パフォーマンスな観点もふくめ特にウェブ版、PWAのさわり心地がよすぎ。React製?でかれこれ3, 4年ほど前からこの感じでPWAの先駆け。誰にも教えたくないけどずっと前から個人的推し。ここまで仕上げたい。

0

1

22

新田聡一郎

@soichiro_nitta

6 years

募集終了しました��でみんなよろしくな！卍

3

0

22

新田聡一郎

@soichiro_nitta

6 years

Vue.jsそもそもデータ駆動でアニメーションの制御がほんと綺麗にできるので、インタラクション得意なデザイナさんには超おすすめなんだよね！・イベントハンドリング・ステート変更・ウォッチャで検知・複数コンポーネントでアニメーション発火みたいな書き方してるけど最高。

0

6

22

新田聡一郎

@soichiro_nitta

5 years

WIP

1

0

20

新田聡一郎

@soichiro_nitta

3 years

完成なう

2

0

20

新田聡一郎

@soichiro_nitta

3 years

「あのAppleもNext.js」って謳い文句、使えます

0

8

19

新田聡一郎

@soichiro_nitta

6 years

自分にも最近大切な人ができまして「平成最後の夏にお付き合いし始めた」ということになるみたいです、エモい！！！

2

1

20

新田聡一郎

@soichiro_nitta

5 years

ヤバイこれめちゃくちゃいいぞあらゆる瞬間に最適な音を: あなたの趣向や状況に合った音を生成する「Mubert」。

1

4

20

新田聡一郎

@soichiro_nitta

5 years

🎉🎉🎉

1

2

19

新田聡一郎

@soichiro_nitta

6 years

最近の仕事です。サイト作って、映像も友人とがんばりました！ぜひご覧下さい〜グッナイさん、ありがとうございました！また関係各位みなさま、感謝です🙏

グッナイ小形

@goodnightogata

6 years

ハウスコムさんのページで、高円寺についてのコラムと動画が公開されました。たくさん写してもらいました。高円寺が大好きになって、とっても寂しくなります。この街で、歌いたいです。この街で、暮らしたい。僕も、友達も、たくさん写ってます。見てみてください。

0

15

54

3

4

19

新田聡一郎

@soichiro_nitta

1 year

Next.jsのapp dirでこそ出来るデザインを早速やってみたけど良い感じだ。親動的ルートのlayoutでISR、子動的ルートのpageでもISRして、一覧と詳細のcachedなコンテンツが両方描画されている、というこれまで実現出来なかったやつ！（文章だと伝わりにくい）

1

0

19

新田聡一郎

@soichiro_nitta

3 years

Next.js、次のリリースでは、パフォーマンスが7倍に向上し、メモリが10分の1になる。すごい。

Lee Robinson

@leeerob

3 years

@JustJake We’re making Webpack better _and_ integrating new Rust-based tooling like SWC. The ecosystem moves quickly, so we’re not married to any single technology. The goal is to abstract that complexity away for users. 7x performance boost and 10x less memory in the next release 🤫

9

15

186

0

3

18

新田聡一郎

@soichiro_nitta

5 years

Nuxtのhead、nuxt.config.jsでも各pagesでも指定できちゃうのでめちゃくちゃになりがち。OGP周りは重複する情報多いですし。mixinつくって各pagesでのみ指定する（nuxt.config.jsにはなるだけ書かない）ようにすると、とってもスッキリします。

0

3

18

新田聡一郎

@soichiro_nitta

4 years

Escキー踏まれた

1

3

18

新田聡一郎

@soichiro_nitta

5 years

よーし、これでいいやんけ

2

4

16

新田聡一郎

@soichiro_nitta

5 years

ウェブはブラウザ上下のバーがユーザーの可視領域を狭めてしまっていて、それだけでダサくなってしまというのが最近の悩み。

2

1

17

新田聡一郎

@soichiro_nitta

21 days

よろしくお願いします✍️

0

4

17

新田聡一郎

@soichiro_nitta

5 years

心変わりする中できあがってしまった黒テーマを供養です。白黒どちらで生きていこうか。いまだに悩んでいます...。

0

1

17

新田聡一郎

@soichiro_nitta

6 years

機会があったので振り返りまとめています。こう見ると頑張った気がする......笑。

0

17

新田聡一郎

@soichiro_nitta

4 years

これCSSでやれる時代きちゃうのか〜

Wes Bos

@wesbos

4 years

CSS Grid Level 3 draft is up, includes Pinterest / Masonry layout!

25

408

2K

1

0

17

新田聡一郎

@soichiro_nitta

6 years

VuexとVue.jsのウォッチャを使って、・イベントハンドリング・ステート変更 → ウォッチャで検知・複数コンポーネントでアニメーション発火みたいなやり方まとめたら需要ありますかね？ Nuxt.jsとGSAPをサンプルにしてやる感じで。

1

2

16

新田聡一郎

@soichiro_nitta

3 years

リポジトリorファイルでに書き換えたらVSCode立ち上がるようになった、すげー！

2

3

16

新田聡一郎

@soichiro_nitta

5 years

NuxtPressだとー🤩

Jonas Galvez

@anothergalvez

5 years

Are you ready for NuxtPress? Just finished implementing blazing fast hot reload for Markdown files. Coming REAL SOON NOW to @nuxt_js 🤞

8

55

264

0

3

16

新田聡一郎

@soichiro_nitta

5 years

見せ方がすばらしー！良い！（内容はとくに覗いていない。） Build your own React

0

5

16

新田聡一郎

@soichiro_nitta

4 years

ESLintの設定をパッケージ化しました。自分用ですが勝手よければご自由にどぞですー。複数プロジェクトで存在する.eslintrcのメンテが面倒だったのと、新規のたびにeslint-plugin-xxxを入れるのが手間でしたのでやりました。だいぶpackage.jsonがスッキリします😄

GitHub - soichiro-nitta/eslint-config

Contribute to soichiro-nitta/eslint-config development by creating an account on GitHub.

github.com

1

16

新田聡一郎

@soichiro_nitta

5 years

ブラウザの挙動は、まず指定のWebフォントがローカルにあるか探しに行き、なければテキストを不可視代替フォントで描画する（このとき何も読めない）とのこと。font-display: swap;すれば最初からローカルの代替フォントを表示してくれるらしい。

display=swapとはなにか - MOL

最近はCSSもなにもコードを書いていないので、世間に疎くて困るのでリハビリする

t32k.me

1

0

16

新田聡一郎

@soichiro_nitta

7 months

hhkb studioのトラックポイント、カーソルセンスで加速度・感度を調整するといい感じにできるのでおすすめ。（これなしではかなり厳しいはず）

1

2

16

新田聡一郎

@soichiro_nitta

5 years

Nuxt v2.4.0キター！TypeScriptのサポートと、プリフェッチだ！

Nuxt

@nuxt_js

5 years

Nuxt v2.4.0 is finally here 🎉 Official TypeScript support, smart prefetching and many more features & bug fixes.

24

331

786

1

5

15

新田聡一郎

@soichiro_nitta

5 years

彼女のお勉強、3日目にしてNuxtデビューです！笑

1

0

16

新田聡一郎

@soichiro_nitta

6 years

ふと読んだらワッシがキッカケでVue.jsさわったみたいなくだりを書いてくれていて嬉しい😊 JSのフレームワークを知らない人間がVue.jsを2ヵ月触ってみたって話 - エンジニアの卵の成長日記

0

16

新田聡一郎

@soichiro_nitta

5 years

すんごくいいね

0

16

新田聡一郎

@soichiro_nitta

6 years

これで少しでも仕事が速くなるといいのだが！

4

0

16

新田聡一郎

@soichiro_nitta

6 years

徹夜はするな、睡眠不足はいい仕事の敵だ

0

14

新田聡一郎

@soichiro_nitta

5 years

ここのところオファーが結構くるのだけど、やっぱVue.js需要がすごいっぽい。

1

0

15

新田聡一郎

@soichiro_nitta

5 years

VSCodeでツリー時のnewFileとnewFolderのショートカット追加。幸せになった。 ``` { "key": "cmd+n", "command": "explorer.newFile", "when": "explorerViewletFocus" }, { "key": "cmd+shift+n", "command": "explorer.newFolder", "when": "explorerViewletFocus" } ```

1

15

新田聡一郎

@soichiro_nitta

5 years

ちょいと更新でございます。

1

4

15

新田聡一郎

@soichiro_nitta

4 years