Yuki-Kanayama / Developer / spicato inc. @spicato_kana Twitter profile

Last Seen Profiles

@Lila1Abadie

@stw_pdg

@Scorpio_girl_

@piyu4449

@beafandraw

@begabojo

@LakelanderG

@RyBrooks

@jemmaiueo

@bokeplokalmalam

@OliverGR93

@capitanaperales

@MARIANDRYSMONTE

@nadiamurad

@snujemengage

@bokeplokalmalam

@Galera30

@hanan_1_1_2

@lic_sergiolara

@MaNatonaba

@AdriEspallardo

@arminvanbuuren

@al_nwf12501

@idle_personA

@cihan0xeth

@Msliwi73

@DylanSleva

@ntr_sara4

@ftm3213

@nuriyecakmak

@33r30

@LorinaLozi96875

@narumeron_1212

@MatthewTooRaw

@GlobalSexWork

@halki_kanzaki

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

ブッ刺さるサイトきた！全部めちゃくちゃ好きだけど、ニュースの日付の部分が結構好き笑

1

189

2K

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

こりゃまたすごいサイトだ。。。題材もデザインも実装全部がすごい。

安倍元総理 “銃撃の記憶” | 三つの視点で再現する犯行までの75秒

安倍晋三元総理銃撃事件。あの日、あの場所で、何が起きたのか。安倍晋三元総理や山上徹也容疑者は、どんな光景を目にしていたのか。事件当時の空間を複数の視点で再現した「75秒の記憶」。

www.mbs.jp

3

305

2K

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

この発想おもしろい！ clip-pathの新しい使い方、CSS変数をインラインで付与する、スクロールの進捗率を使う等、小技を複数使って大きな表現するの楽しい。

0

89

1K

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 years

このデザインの発想凄すぎる。めちゃくちゃいい。。。

EMIOZAKI WEB

オザキエミ／Emi Ozaki　東京を拠点にするイラストレーター&アーティスト。1991年生まれ。広島県出身。ポップなキャラクターたちが織りなす、ユーモアのある世界観を描く。表現方法は絵画を始め漫画やアニメーション、陶芸など多岐にわたる。広告や雑誌、商品デザイン、企業やブランドとのコラボレーションなど様々なジャンルと媒体で国内外を問わず活動の幅を広げている。

emiozaki.com

0

89

956

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

この湯煙から出てくるような演出から生まれる世界観良い。。。 CSSでMaskを使用していて、同じような手法を使ったことあってマスク画像を自分で作れないから linear-gradient を使用してたけど、これを見ると自分で作れるようになると表現の手札増える。少なくともイメージ出来るようになりたい。 ↓

2

54

694

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 months

すげぇクオリティだな〜、と見てたら Webflow やった。。。ノーコードツールでここまで出来るのすごいな。中身わからんので、結構がっつりコード書いてるのかも知れやんけどもすごい。ちなみにサービス内容はブロックチェーンに関することで、よくわかってない🙂

2

38

686

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

あまりにもチル度が高いサイト。 Astro island を使用してて自分の理解していた使い方ではなさそうで、今後自分の環境でも使いたい。（なんなら使った方がいい）

2

49

686

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

この雑誌、新聞のような感じ最高や。遷移の演出もかわいい。特に遷移時のヘッダー。あとメニューの開閉時のアイコンの動きも可愛い😍

1

38

553

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

11 months

このページ遷移良すぎです。

3

38

447

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

24 days

ここまで最初から最後まで盛りだくさんなサイト久ぶりに見た気がする。場面転換がはっきりしてて、本当に本を読んでいる体験を得られる。デザインとコーディングを基礎レベルが高くて本当に良き😇

1

27

411

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

書き方がすごく参考になる。 JSとCSS変数の組み合わせがすごくいい！

Carousel with drag and wheel

Experience the elegance of simplicity with this fully custom-made carousel of images. No frameworks, no fuss – just pure and fast performance, powered ...

codepen.io

1

34

364

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

ニノのビジュが良すぎてなんか言い方悪いかもですが、ずるい（笑）

デザインのこと - Web design gallery

@designnokoto

7 months

シンプルなデザイン。（すっきり素敵です）オフィスにの #Web デザイン #アイデア

0

262

1K

0

32

352

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

STUDIO x lottie 再来週ちょうど lottie の作ってみよう配信をする予定ですが、目指したい姿がここにありました。。。！このボタンとかで使用するマイクロインタラクション良すぎる。こちらのサイトではたくさんのlottieが使われているので、目の保養です！🥳

1

21

299

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

横スクロール、無限スクロール、SPA（swup）という構成をAstroで実装してる！子供を持つ身としてすごい刺さる内容、温かみのあるデザイン（余白感最高）、それでいて高い実装技術。最高👍

1

16

293

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

本日、社内共有されたサイト。はちゃめちゃ感がありつつ、内容はしっかりと濃く、インタラクションも多くすごく印象に残るサイト。レジの音がたくさん使われているので、音ありがおすすめです。別ページ遷移時にレシートの演出が良すぎて1人で興奮してました😎

0

20

284

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

9 months

このメニューが画面端で回る演出すごいな。どういう流れでこれになったのか気になる。 ↓ サイトURL

2

21

281

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

FVのアニメーション気持ちいい。ちょっと前に、yui540さんに教えて頂いたSVGやつを使ってるっぽい。。。！下のスライダーのビリビリも可愛い。最初Gifかなと思ったらAPNGで想像以上に軽かった！写真自体が良いのにプラス要素でさらに良くなる感じがたまらん。

2

15

269

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 months

WordPress + SPA + Tailwind CSS で全体の完成度がたけぇ。。。 1つ1つの小さなインタラクションにこだわりを感じる。特に連続ホバーしたときに一切かくつかない。かっくいい😎

1

8

264

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 months

ドットかわいすぎ。

0

13

261

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 month

Lottieやと思ったらHTML,CSSで組んでた。ここまでスムーズすごい。 ease の調整がすごいのかな？？

2

17

241

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

ワンポイントWebGLイイ！🙆 ちょっとした工夫で、世界観を構築出来る使い方がとても参考になります。

2

13

221

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

最近惚れたWebサイトのケーススタディきた。。。！これは必読すぎる！しかもコードの紹介、解説まである！これは宝物庫です💎

Case Study: Design Embraced Portfolio – 2024 | Codrops

A look behind the code and collaboration of the new portfolio for Anthony Goodwin at Design Embraced.

tympanus.net

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

今日の SOTD が自分がやりたい方向性のデザイン、実装すぎるぜ。。。次のプロジェクトへの滑らかな遷移、詳細ページのスクロールと連動した画像のインタラクションが特に好き。スクロールに対しての連動感がすごく感じるのはなぜだろう？イージング？変化量？🤔

0

13

201

0

19

208

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

メイン実装、WordPress、アニメーションを担当しました！弊社ではめずらしい量のアニメーションを採用し、グラフィックをそのまま動かしたようなサイトになったのではと思っています！スレッドにアニメーションで意識した部分について、お話しします！ ↓

spicato Inc.

@spicato_inc

6 months

調理師や美容師を目指すための専門技術が学べる大竹高等専修学校さまのWEBサイトリニューアルを担当させていただきました大竹学園さまとは10年来のお付き合いでWEBサイトは3回目のリニューアルです是非ご覧ください

1

15

111

1

21

204

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

今日の SOTD が自分がやりたい方向性のデザイン、実装すぎるぜ。。。次のプロジェクトへの滑らかな遷移、詳細ページのスクロールと連動した画像のインタラクションが特に好き。スクロールに対しての連動感がすごく感じるのはなぜだろう？イージング？変化量？🤔

0

13

201

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

FigmaでLottie作れるの結構やばくない？前から聞いてはいたけどFigmaのアニメーションのイーズがカスタムも出来るし手軽にいい感じのアニメーション作れるぞ。

0

18

199

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

23 days

これでWebGL(Canvas)なしだと。。。？途中のフレア？が広がる部分はなるほどすぎるテクニック。

1

10

189

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

16 days

SVG Filterでのアニメーション。でも、Safariくんでは動かないんでしょ？と思ったら普通に動く。。。！逆になんで？

2

7

171

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

404ページを集めたギャラリーサイトデザイナーとエンジニアの遊び心が良い👍

404s — gallery of error 404 page designs

404 pages, where joy and errors meet. A growing gallery of 404 page designs from around the internet. For all those lost pages, error pages & page not found out there.

www.404s.design

0

17

163

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

最高にかわいいイラスト＆デザインだけど、TenCy通信の内容がすごい真面目な内容でギャップ萌えというのを感じました。下記は一覧ページ！

0

7

154

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 months

立体感めちゃくちゃ好きです！ただ、自分が知っているTailwindと違う可能性がある。。。🤔

SHIFTBRAIN Inc.

@SHIFTBRAIN

3 months

＜サイトを公開しました＞ ●MOTA コーポレートサイト「世界へもっと、フェアトレードを。」をミッションに掲げ、自動車流通市場のDX変革に取り組む株式会社MOTAのコーポレートサイトを制作しました。

1

5

127

0

4

147

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

出る時は早く、消える時はゆっくり。いいね😊

0

5

144

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

サイトとコンテンツが最高。 2026年まで江戸が続いたらってコンセプトがおもろいし、アニメーション制作を『実験場』と称して様々な実験していくみたいでここでは書ききれないほどの実験を計画しててどれもおもろそう。。。今後もぜひ続いていって実現してほしい。

0

7

140

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

あまりにも印象的すぎるFV。スクロールに応じて人の顔が動くのは、結構強烈な印象を与えるんだと感じた。。。おそらくコマ送り画像を canvas 上で動かしている。たぶん。

1

3

134

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

ホバーアニメーションの参考！

Design Finds: Detail Hovers on Images | Codrops

A set of diverse image effects that reveal some more information on hover.

tympanus.net

0

10

134

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

初見、WebGLやと思ったけど違った。いい意味で裏切られた感！ FVとか途中の手の部分は特にWebGLかなと思ったけどCSS見てみて確かに使わずいけるなと納得した。。。発想の勝利すぎる。サイトURL ⇩

0

12

133

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

『このホバーのアニメーションいいな〜』ってよく見てたら、ホバーした位置よって動き出しの起点が違う！細部のこだわりすごい👍

0

6

129

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

画面遷移のシームレス感がいい。シンプルな遷移やけどイーズが良すぎて特別感がすごい。。。イーズインって個人的には扱いが難しくてあまり使わないんだけどこれはめちゃくちゃ良き。

1

3

128

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

Three.js journey の動画の字幕、Google翻訳で日本語にしたら自動で翻訳されるんだが前からなってたっけ！？くそ見やすくて、テキスト教材じゃなくなって動画教材になったんだが！？（失礼）

1

11

125

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

すごいフロント側に目がいってたけどバックすごい。 Alpine.js で WordPress の REST API 構成かな？もしくは、独自のAPI作成コードでカスタマイズしてそう。ただ、フロント側で差し込みしてないし JavaScript で投稿管理してないのか？

株式会社日本テレビアート | スペースデザイン・グラフィックデザイン・Webデザイン

日本テレビアートは、歴史ある日テレのビジュアル面をデザインで支え続けてきたクリエイティブ集団です。美術セットや照明といったスペースデザインや、テロップやポスター、CGなどのグラフィックデザインで、みなさんの毎日に感動や驚きのエンターテインメントをお届けしています。

www.ntvart.co.jp

2

7

120

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

ページ遷移がイイね👍 ってよく見たらSPAじゃなくリンクのデフォルトイベントを無効化して、アニメーション完了後に遷移してた。 Awwwards の SOTDでこのタイプのサイト自分は初めて見たかも🤔

2

4

114

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

sticky の入れ子構造結構いいな！ JSいらずでいい感じの表現できる。参考サイト ↓ #css #HTML

0

3

114

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

11 months

なんとびっくりコーディングを担当させていただきました！弊社ではめずらしいコーディングのみを担当させて頂くお仕事でとても刺激をもらいました。。。！

STUDIO DETAILS Inc. / スタジオディテイルズ

@studiodetails

11 months

【リンナイ様カラーオーダービルトイン食器洗い乾燥機 ILOプロダクトサイト】 6色の扉材カラーからキッチンやインテリアに合わせてカラーを選べる食洗機「ILO Dishwasher」のメインビジュアル・WEBサイトを始めとしたクリエイティブ制作を行いました。

1

13

93

0

11

105

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

海外の人から見た日本のWebデザイン。明朝体と日本の風景の相性って抜群だな。。。ちなみに弊社実績があってにっこりした😊 6 web design styles that are uniquely Japan by @jayhan

6 web design styles that are uniquely Japan

I’ve been a fan of Japanese style design since I started my career as a designer. The uniqueness of culture, lifestyle, and relationship…

bootcamp.uxdesign.cc

0

7

103

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

lottie の使い方最高か。。。？やっぱりこういうロゴのとの組み合わせやってみたい。

0

4

100

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

初めて見るタイプのホバーだ。。。！この情緒感凄く好き。

1

7

99

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

少し前に見た滅茶苦茶好みのトレーディングカード風のサイトを探してて見つからなかったけど、Awwwards にノミネート？されてて見つかった。。。！ほとんどのカードがCSSで実装されてて無限の可能性を感じた！

0

5

98

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

話題のきのこの山のワイヤレスイヤホンのサイト（？）いろいろ完成度が高くて面白い笑そしてなんだろうこの既視感は。。。🤔 🍎

1

9

97

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

約半年ぶりの投稿です。今回は技術的な話ではないですが、よく使う、参考にしているツールやサイトをまとめました。ただ紹介したいというエゴで投稿しています笑 Web制作会社で働いているコーダーがよく使うWebツール｜Yuki-Kanayama / spicato #zenn #Web 制作

Web制作会社で働いているコーダーがよく使うWebツール

zenn.dev

0

10

90

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

イーズが滑らかで気持ち良すぎるサイト😎 手触りがよくて実際に手に取って動かしている感覚を得られる。。。 #SOTD

0

5

92

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

background-image ってアニメーション出来たっけ。。。？ transition でも動く。。。しかも Safariでも。

Background Image Transition

Works in Chrome, Safari, Opera, but not all Firefox…...

codepen.io

1

6

87

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

今更ながら学習させてもらっています。

【Three.js】スクロールでぐにゃぐにゃする画像を実装する

zenn.dev

0

3

85

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

ちなみに、これで良い感じの改行になる！ break-word がないと『ー』等がすごい長い時にはみ出すのでその場合は改行をするようにしています！ body に指定してもいいかも？？

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

CSSだけで日本語の禁則処理（『っ』とか『ー』の改行）を調整できるの知らんかった。。。

0

12

0

3

77

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

10 months

実装を担当しました！弊社ではめずらしいスタイリッシュでかっこいい感じのデザインとなっております。アニメーションは社内MTGで案を出し合いそれを組み合わせながら実装していきました！試行錯誤の結果今の形になっております！

spicato Inc.

@spicato_inc

10 months

アニメ・ゲームなどの「ポップカルチャー」と、WEB・アプリの「デジタルコンテンツ」を掛け合わせるのが得意なデザイン会社 RaywarpさまのWEBサイト制作を担当いたしました。

1

9

92

1

6

72

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

担当しました！アニメーションとパフォーマンスを頑張りました！環境によって前後しますがそこそこの高得点が出せたので満足です！

細尾正行／spicato inc.

@MasayukiHosoo

2 years

ビジネスとテクノロジーの融合を軸に、企業の経営課題解決に取り組まれているACTBE Inc.さんの採用サイトの制作を担当しました。めちゃめちゃいい会社です。ご興味お持ちの方いらしたらぜひご応募を！

3

6

110

2

9

71

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 months

Google Fonts の読み込みする際のちょっとした小技。当時、日本語のフォントの読み込みの時に使ったら、Lighthouseの点数が20点あがったはず！結構前の記事だから、新しいのあるかなと思って調べたらTAKさんが上げてくださっていた🙇‍♂️ これは試してみないと😎 当時 :

Speed Up Google Fonts – CSS Wizardry

Google Fonts is fast. Now it’s faster. Much faster.

csswizardry.com

0

7

69

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

MEFILASさん（ @mefilas_inc ）と spicato で合同勉強会を実施しました！🎉🎉🎉🎉🎉 激つよ制作会社の制作フローを聞くことができて、とても刺激になりました！いろいろ参考にしてどんどん試していきます。。。！

1

4

67

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

この攻めたFVいいな〜。実装の仕方も好き。クリックからのギミック良い。トータル最高。

HAIR ICI｜ヘアーアイス

HAIR ICIは『衣食住美』4つの視点を軸に一人ひとりの多様性に寄り添いながら「より良き日常」をライフスタイリングする事を目指すヘアサロンです。

hair-ici.com

0

2

66

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

3 months

GSAPの公式にチートシートあったん知らんかった！

GSAP | Docs & Learning

GSAP Cheat Sheet

gsap.com

0

2

64

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

9 months

長年の悩みだった Astro の Prettierが上手く動かない問題、 defaultFormatter を Prettier から Astroプラグインに変更したら解消された！！！🎉🎉🎉

1

3

64

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

自分の好みに刺さりすぎてやばいここまで好きだ！！！ってなったの久しぶりだ。。。動きのイーズ、サイトの雰囲気、グラフィック全てグッとくる。

0

4

65

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

投稿しました！参考になれば。。。！ Web制作のための画像圧縮とWebP生成｜spicato Inc. #zenn

Web制作のための画像圧縮とWebP生成

zenn.dev

1

5

64

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

SANKOU! さんに縦長ウィンドウで見るとかあったんだ！検証見たらコードわかったけど、これで開くWindowの大きさの調整もいけるんや。

0

1

62

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

クオリティすごいし Design and Develop ってほんとにすごすぎる。すごいしか出てこない。

Garden Eight

@GardenEight

1 year

Our latest project ‘QINO’ is up 🌲 👉 Design and Develop: @misatodaiq Project management: @natsukosakai

3

21

250

0

2

59

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

海外サイトに多いこういうナビゲーション等のホバーアニメーションが好き協会です。 ☟ 素晴らしい参考サイト

1

61

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

死ぬまでに言いたいセリフ。『実装とデザインを担当しました！』

1

0

59

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 months

これもやりたいし、Three.js journey も進めたい。

1

2

58

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

Lottie を作成するWebツールが2つになったのでちょこっと比べてみました！ lottieファイルを作成できる『LottieLab』と『Lottie Creator』を比べてみた｜Yuki-Kanayama #zenn #lottie

lottieファイルを作成できる『LottieLab』と『Lottie Creator』を比べてみた

zenn.dev

3

8

59

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

好きなホバーとロゴ☺️ フッターのロゴを中心にして左右にナビゲーションの要素を配置してる感じ刺さります。

0

2

59

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

17 days

OPとかホバーのフォーカスが当たる演出がいい。演出自体もいいけど、ぐっっっと引き込まれる ease感がよりよく感じる。なんのサイトかなと思って調べたらどうやら映画制作の学習コースの販売っぽい。映画制作をオンラインで。。。？気になる🤔

1

3

57

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

食品パッケージを製造している会社さんのコーポレートサイト。初見で見た時に何を製造している会社さんか知らずに見たけど、食品系の何かやろなと想像できたのはデザインのおかげな気がする。透明感があってすごく清潔感を感じる。

0

6

56

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

最近読みたくなったアクセシビリティ系の記事3つ👀 1. 2. 3.

少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。

www.tak-dcxi.com

0

6

55

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

APNGとスプライト画像を比べてみた。フレーム数（画像の枚数）は60で比較したら動画じゃ伝わりづらいけど圧倒的にスプライト画像の方が動きが滑らか。。。！ hoverにも使えるし、画像によるとは思うけどスプライト画像の方が使い勝手は良さげな気がする！

1

2

53

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

Babelが『バベル』じゃなくて『バブル』って発音なの今年一番の驚きです。モダンJSの一時代を築いたBabelから学ぶトランスパイル｜からころ #zenn

モダンJSの一時代を築いたBabelから学ぶトランスパイル

zenn.dev

2

7

52

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

Safariで overflow: scroll がカクツク問題にぶち当たってこの記事を参考に祖先要素全部のz-indexを消していったら改善した。。。そんなことある？笑

Safariだけoverflow-x : scrollをかけてもスクロールできなかったトラブル

zenn.dev

0

3

52

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

知人にCSSについて聞かれたから何事かと思ったら配信ソフトのOBSってCSSで装飾するらしい。。。もしかして俺って配信画面の装飾できる？？

4

3

51

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

有料レベルの解説記事👀

Case Study: Gabriel Contassot’s Portfolio — 2024 | Codrops

A look into the making of Gabriel's 2024 portfolio website, complementing minimal design choices with subtle animations.

tympanus.net

0

1

51

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

表示向きを保ったまま回転させてるのJSで結構計算してるのかなって思ったら、リストのブロックを正の方向に360度、アイテムを負の方向に360度回転させることで実現していた。気がつくとめちゃくちゃ単純なことだったのに難しく考えすぎてた。。。やわらかく考えないと��

0

1

50

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 month

全部いい。 ease の付け方と delay の調整がうまい。 JS使った小手先のテクニックでアニメーションつけるんじゃなくて、基礎をしっかり振り返ってCSSアニメーションを見つめ直そう。。。センスを磨かないと。

yui540

@yui540

1 month

陽向葵ゅか( @yukanyan2525 )さんのHPを制作させていただきました。装飾を多めにデザインして、CSSアニメーションで色々動かさせていただいているのでぜひご覧ください。 HP: また、全国のローソンで「陽向葵ゅかBOOK」が発売中なので、そちらもぜひお買い求めください！

0

48

380

0

3

50

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

WebGLの学習だけじゃなくて表現の引き出しも探してます。結構好きな演出。探偵ものの映画とかでありそう。参考 ↓ #css #javascript

0

3

48

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

学校のサイトを制作したときに学校の先生から言われたのが、最近の子は海外サービスを小さいことから触れてきてるから確認画面の存在を知らなくて、フォームの送信ボタンを押さずに離脱することが多いらしい。確認画面をつけないでくださいと逆に言われてすごいジェネギャを感じた笑

TAK

@tak_dcxi

6 months

お問い合わせフォームの送信確認画面って日本独自の文化だと聞いた ECサイトみたいに金銭取り扱うサービスなら必須だけどお問い合わせなら不要ではないかな？コスト掛かるし有名どころだとGoogleフォームは確認画面ない

0

2

55

0

5

49

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

7 months

この尖り方いいな〜。振り切ってる感じが好き。インパクト強くて印象に残るし、これは忘れることはなさそう👍

2

4

49

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

6 months

弊社YouTubeチャンネルで配信予定！🥳 配信テストという人生でも稀有な挑戦を、週末にしようと思います！笑チャンネルこちら↓

スピッカートチャンネル

大阪の片田舎にあるデザイン事務所、株式会社スピッカートのyoutubeチャンネルです。スタッフのインタビューを通じて、社内の雰囲気や、制作に込めた思いなどを発信しています。 https://spicato.com/

www.youtube.com

こびと

@kobitoCode

6 months

mask-imageの講釈を垂れる会の終盤で「次はlottieに関する講釈おねしゃす」と @spicato_kana さんにぶん投げたところ、 3/15(金)の夜「lottieで、あるアニメーションを再現する手順をライブ配信で見せびらかす会」を、双方の都合が合えばやって頂ける事になりました！感謝！！！コソ連するぞ！！

3

6

61

1

3

48

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

いつか使ってみたいカーソル移動で変化するグラデーションテキスト。 #javascript

1

2

48

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

5 months

実装担当しました👍 まるでここだけ時間がゆっくりを流れているような、そんな雰囲気を出すように意識しました！全体的にゆっくりなアニメーションと、レトロ感を出すために画像にエフェクトをかけたり、背景に砂嵐を敷いたりしました。また、白い線はチョークをイメージしてます！

spicato Inc.

@spicato_inc

5 months

淡路島にある旧江井小学校を改修した、サステナブルがテーマの複合施設「ei-to（エイト）」のWEBサイト・ECサイト制作を担当させていただきました。ゆったりとしたレイアウトと写真で、一度は訪れてみたいと心を動かされるようなデザインを目指しました。ぜひご覧ください。

1

9

71

1

3

47

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

FVの背景の文字のスライダーもWebGLなのか！こういうのもWebGLでやるとたしかにより自由ど高さそうやしブラウザの差異も少なそう。。。？文字色の反転とかも良い感じ。

Imagination - 「想像」が現実化すると、突破力が半端ない。 | LIONS GOOD NEWS 2024

「Eurythenes plasticus」「The Ant Rally」「Animal Copyrights」など、カンヌライオンズの過去・現在の素晴らしい作品に触れながら、今日のコミュニケーションにおけるさまざまな課題を考えます。

lionsgoodnews.com

0

1

45

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

GSAPのScrollTriggerのスマホのメニューバーによるずれを解消できるらしい。。。驚き！参考URL：

0

5

45

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

11 months

ほぼ1年ぶりに更新しました。。。ネタが無さすぎて辛いので好きなサイトまとめとか、実績解説とかしたい所存。最近好きな『要素が重なっていく表現』を簡単に再現してみた！｜Yuki-Kanayama #zenn

最近好きな『要素が重なっていく表現』を簡単に再現してみた！

zenn.dev

0

8

41

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

10 months

ノイズの表現を背景に敷いたノイズ画像を transform でランダムに動かすことで表現してるサイト。ボタンのオーロラの実装もCSSだけで実装してて、すごい参考になる。見た目が良すぎてずっと触ってる。今後の表現の手札が増えた。。。！

Sling Shot Intergalactic

Sling Shot Intergalactic Is Your Secure Solution

slingshotintergalactic.tv

0

1

43

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 months

！！！

0

42

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

8 months

本日はありがとうございました！めち��くちゃ様々な方とお話出来て楽しかった。。。！知ってくださってる方が多くて恐縮です。。。東��の方はお話したことがない方ばかりで新たなつながりが出来てうはうはです🤘 #CASESTUDY2024

0

1

42

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

できた！！！ @yui540 さんありがとうございます。。。！ただ、逆再生動き（消えていくやつ）を offset の値をマイナスでやっていたら Safari だとうまく動かないので調べると offset の値を2倍にしてやるとうまくいった！これは新しい知見だ。。。

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

最後の描きながら消えてるパスのアニメーションとどうやってるんだろう。。。自分がやるなら色付きのパスに白パスを重ねてディレイをかけて表現するけど、それだと背景次第になるから他の方法があれば知りたい。

3

0

10

1

2

41

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

些細な変更ですが、ファイル名に『no-webp』を��む場合はWebpの生成をしないようにしました！昨日見た CodeGrid さんの記事を参考に、使用する画像形式にもこだわっていきたい。。。！

Web制作のための画像圧縮とWebP生成

zenn.dev

1

41

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

Astro SEO 使いやすいな！ Astro使ってるとブロックごとにコンポーネント化してしまう。 1ファイルの記述量をどんどん減らしていきたくなるんだがこれはReactでもそうなのか？（Vueだとそんなに気にならんかった。）

GitHub - jonasmerlin/astro-seo: Makes it easy to add information that is relevant for SEO to your...

Makes it easy to add information that is relevant for SEO to your Astro app. - jonasmerlin/astro-seo

github.com

0

1

40

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

記事を投稿しました。 Tips増やしたい。案外知らない！って刺さるといいな〜と思い書きました。知らなそうで知ってる flex のおすすめの使い方｜Yuki-Kanayama #zenn #Web 制作

知らなそうで知ってる flex のおすすめの使い方

zenn.dev

0

6

37

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

2 years

@sakata_web もしよければこちらをどうぞ！海外の制作会社さんのプラグインですが、コードがとても参考になります！

0

39

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

上にはいかない無限スクロール！ lenis すごいな〜。

0

2

37

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

4 months

恥ずかしながら、mountさんの受賞きっかけで Webby Awards の存在を知り、受賞作品の一覧みた。見るだけでモチベーションが爆上がりするのでおすすめ。世界には素晴らしい作品が多いんだな。。。

NEW Webby Gallery + Index

DISCOVER THE BEST OF THE INTERNET. Welcome to the NEW Webby Gallery + Index. Discover the best of the Internet and uncover trends, insights and talent that define the future of Internet excellence.

winners.webbyawards.com

0

37

Yuki-Kanayama / Developer / spicato inc.

@spicato_kana

1 year

さっそくフルページ風スクロールアニメーションをやってみた。気持ち同期移動よりリッチに見えるからいいね👍 #javascript #Web デザイン