こびと @kobitoCode Twitter profile | Pikagi

Pikagi

こびと

@kobitoCode

11,903

Followers

337

Following

1,766

Media

21,283

Statuses

Learning Figma|Ps|Ai|Ae|blender|Photo|SEO|GA|HTML|SVG|CSS|JS|TS|webGL|Node.js|Nuxt|PHP|SQL|API/Docker|test|Git|CI/CD|Linux|Server|Network|Security

in learning FE | BE | Design

https://t.co/OtgyVvpfhu

Joined October 2021

Don't wanna be here? Send us removal request.

Pinned Tweet

@kobitoCode

こびと

8 months

自己紹介用のwebサイトをつくりました！クリエイティブコーディングとグラフィックデザインが趣味です！過去に作ってきたものを掲載しています！自主制作掲載が目的なので、今年はグラフィックデザイン練習しまくってクリエイティブコーディングとうまいこと融合させたい

4

99

1K

Last Seen Profiles

@kmizu

@LissetBertru

@TAKUMIBeat

@ThankGawd4Feet

@IL_Graphic

@bokeplokalmalam

@Michael_Lucas01

@beliacosplay

@Sportsmom861

@tqrnish

@dm_designs___

@JustJayIRL

@KojekRapBetawi

@Ja09724729

@Falah23456

@fujiran_jikkyo

@pelinkarahan

@kawamoriexpo

@GRESIB_CDSIB

@dfo7E2Ur9hLR0XR

@iam_damayor

@Sr_Millionaire

@JaredsGems

@Oh_KerjaKosong

@Sidneystardance

@Osayininyumrugu

@stw_pdg

@NatGeoIndia

@wtnk_manabiyori

@ateh_mar

@asuka_partyon

@benwerschkul

@DHAbooks

@LesPatriotes_75

@SexyTumpa

@JohnWozniak2

@kobitoCode

こびと

2 years

Twitter、「やっちゃダメなデザイン」と「なぜダメか」が回ってくるから受動的にNGパターンの予習ができてすごくいい、ありがとうございます

Tweet media one

Tweet media two

Tweet media three

Tweet media four

175

16K

56K

@kobitoCode

こびと

4 months

目次の攻撃力高すぎてﾜﾘｮﾀ読むメモ

Tweet media one

Tweet media two

44

10K

36K

@kobitoCode

こびと

1 year

これ良過ぎるパワポとかじゃない。webデザイン書として読める。「デザイン」は具体的に何をするか「わかりやすさ」の作り方「理解」はいつ起きるかみたいな最強セクションが山のようにある。「動き」の塩梅についても言及されてる。デザインが始まってから終わるまでのフローの解説が丁寧過ぎる

Tweet media one

5

2K

19K

@kobitoCode

こびと

9 months

背景消しゴムやばいわ...

Tweet media one

Tweet media two

@DesignSpot_Jap

タマケン | Design Spot

@DesignSpot_Jap

10 months

フォトショの「背景消しゴムツール」かなり優秀なのでおすすめです👍 #Photoshop

8

2K

11K

6

2K

16K

@kobitoCode

こびと

1 year

すげえええええええええ！！これ、「色味合わせる」の一番簡単な方法かもしれない...

Tweet media one

Tweet media two

@StudioT_ppp

パパ📦Photoshopダンボール

3 years

Photoshopで合成するときトーンを馴染ませるのって最初は本当に難しいです。ニューラルフィルター「調和」も登場しましたが、まだまだ「カラーの適用」も現役なので推していきたいです。 #Photoshop

2

484

4K

0

594

5K

@kobitoCode

こびと

2 years

これマジで神だ神しか語彙がなくて申し訳ないが、フロントエンドでいうとAstroと同じくらい神

Tweet media one

7

311

4K

@kobitoCode

こびと

7 months

命救われた...

@_calamarify

Calamarify

7 months

みなさん知っていると思いますが、円を画面いっぱいにブワーってやる系のアニメーションをしたいならまずブラウザの対角線を求めて、それを円の直径に当てないと四隅なんかはみ出るよ。適当に数字出すと絶対失敗するのでちゃんと計算しようねという話。

1

66

1K

1

263

4K

@kobitoCode

こびと

2 years

@HIRO_YUKI_ 自分は目が見えるので当事者の立場になりきれず定かなことは言えませんが、もし自分が目が見えなくてこのタイルに頼っていたとしたら「あれ？今まで直線的だったのに直線の延長線上にタイルがない？今左右のどっちにいるんだ？」的な混乱を持つ気がします

7

171

3K

@kobitoCode

こびと

1 year

色マジでよくわかってないんだけど、「トーンを揃える」ってどうやってるんだろう...トーン一覧みたいな配色リボルバーみたいな表は死ぬほど見るんだけど、「じゃあ今からこの青色使います。この色と同じトーンの赤のカラーコードはなんでしょう？」みたいなの、どうやって揃えてるの...

@makiko_sakamoto

もち | デザイナー・CDO・起業家

@makiko_sakamoto

1 year

デザイン初心者でもいい感じに配色するコツ３つ⭐

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

189

2K

7

542

3K

@kobitoCode

こびと

6 months

いやマジかよーーーーーー！！！！！これはデカい！！！！！デカすぎる！！！！！！！

@DesignSpot_Jap

タマケン | Design Spot

@DesignSpot_Jap

6 months

【Photoshopベータ版のアップデート】生成塗りつぶしで「参照画像」を選択できるようになりました！これにより、今よりも具体的で狙い通りの生成をすることができます！（通常版にもいずれ搭載されると思います） #Photoshop

15

1K

6K

1

311

3K

@kobitoCode

こびと

1 year

コード8時間書いてても疲れないけどデザイン2時間でめっちゃ使れる...これが、「ゴールが用意された状況でやる」のと「ゴールが不明なままアレコレ試す」の脳みその疲れ方の違い...か...デザイナー、マジ凄い...

15

427

3K

@kobitoCode

こびと

9 months

このフォントめっちゃ良い！！！

Tweet media one

@suzusho1115

スズショー｜デザイン

10 months

【もうデジタル数字はDSEGで】左上のサイトのような電卓系フリーフォントは「DSEG」がオススメです。こういう系ではレアな商用可。以前、キッチンスケールの操作方法に関するデザインで使用しました。DSEGの英語を使えばデジタル系のサイトにもはまりそうですね。URLはコメントらんで😊グッナイ🌙

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

237

2K

1

194

2K

@kobitoCode

こびと

2 years

@Yoshi_Seno デザインとアートをわけるべきと考えるか、デザインに失敗していると考えるべきか...

5

41

2K

@kobitoCode

こびと

1 month

TLで見かけた良さそう過ぎる書が届いてた。表紙だけ見て良さそうのオーラを感じて買ったけど、目次最高すぎるな

Tweet media one

Tweet media two

2

185

2K

@kobitoCode

こびと

2 years

ABSTERってフォントあまりにも良すぎませんか？あまりにも良い...

Tweet media one

1

142

2K

@kobitoCode

こびと

2 years

これの左、死ぬほど最高特にコーダーが読んだら「デザイナー全員これやってくれ」ってくらい最高、駆け出しwebデザインのみなさんが全員左の本読みますように。figma最高や

@kobitoCode

こびと

2 years

Figma、対戦よろしくお願いします右の黒いやつ、コーダーにもいい！「コーダーがfigmaデザインもらったときはこことここ見てこの操作しとき」みないなセクションあった！

Tweet media one

3

63

704

5

182

2K

@kobitoCode

こびと

2 months

神サイト過ぎる！！！！！

@focru_ino

ふぉくる

2 months

ゲームUIをたくさん見れるサイトを見つけた。

2

401

2K

0

129

2K

@kobitoCode

こびと

1 year

↑これ神！！！！神すぎる！！！！

@suzusho1115

スズショー｜デザイン

1 year

【背景が透明なフリー素材】をゲットできるサイト4選！形式はピング（png）です。右下以外はPNG特化。水系素材の探し方→しぶき系は「スプラッシュ」、ぶくぶくは「バブル」、しずくが落ちて王冠みたいになるのは「ミルククラウン」です。サイトURLはコメントらんで😊グッナイ🌙 #web デザイン

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

753

5K

2

171

2K

@kobitoCode

こびと

3 years

実務未経験からweb制作会社にコーダーとして入社して100日間で「実務未経験の時と何が変わったか」を簡単にまとめました！ web制作勉強中が「何を勉強するか」目安になればいいなぁとおもいます勉強中の方からよく頂く質問と回答(主観)をツリーにぶら下げておきました！ #Web 制作 #web デザイン

Tweet media one

Tweet media two

Tweet media three

Tweet media four

5

152

1K

@kobitoCode

こびと

1 year

デザインを学んでいけば行くほど、「動きのあるサイト」を合理的というかなんというかUX的な意図を持って設計するの難しい。「この演出、ユーザーを待たせる以外の効果なくね？」みたいなのになってしまう。一口目はウマいけど二口目はクドいスナック菓子みたいな。そういうの削っていくと静止画になる

12

203

1K

@kobitoCode

こびと

11 months

ピンタレストで参考探してて「めっちゃいい〜〜」となるサイトに共通している法則を見つけてしまった

Tweet media one

3

72

1K

@kobitoCode

こびと

2 years

すご！！マジでなった！！ *{ all:unset; display:revert; } ↑ all ...全プロパティ unset ... ブラウザが初期値として設定してくる値を全部消す react ... revertを書いたところはunsetが取り消される display以外の要素全てのリセットが2行で出来た...

5

141

1K

@kobitoCode

こびと

4 months

だいたい1年くらい前、「webコーダーの経験しかないけど社内のディレクターとデザイナーを見てる感じこういうフローがあると良さそう」と思っていたモノを、それから1年経って「バックエンドとデザイン勉強中のフロントエンド人間」になった視点で【自分が見やすいように】作り直してみた

Tweet media one

Tweet media two

3

113

1K

@kobitoCode

こびと

1 year

webデザインのフッターの引き出し増やしたくてピンタレスト回遊してるんだけど、海外サイトの「3分割して真ん中にロゴ的なモノ」なレイアウト、ビジュアルが締まるというか、webサイトの雰囲気がピシッと整う感ある

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

102

1K

@kobitoCode

こびと

1 year

わかったぁぁぁーーーー昼くらいに自問したやり方でいけた！選択範囲作る→調整レイヤーかませて濃さ変える→ぼかすとりあえずサッと試したかったから「F」をテキストで配置してワープさせて物陰っぽくした

Tweet media one

@kobitoCode

こびと

1 year

こういう影ってどうやって作ってるんだろう。物体の影じゃないよね、あしらいとしての影というか、なんかこうイイ感じの影...

Tweet media one

2

34

978

1

112

1K

@kobitoCode

こびと

2 years

金色のテキストの作り方がわかったエンボスは最強

Tweet media one

1

91

1K

@kobitoCode

こびと

5 months

これやばすぎる！これやばすぎる！これやばすぎる！！！！！

@DesignSpot_Jap

タマケン | Design Spot

@DesignSpot_Jap

5 months

イラレで簡単な3D素材を作ってから、Fireflyの構成参照に読み込むと様々なスタイルに変換できます！ #AdobeFirefly #Illustrator

17

520

4K

0

103

1K

@kobitoCode

こびと

1 year

これマジで今日初めて知ったんですが、photshopでもcommand + hoverで距離が測れる...

Tweet media one

2

149

1K

@kobitoCode

こびと

6 months

「HTMLは文書構造的に適切な順番で書こう〜」みたいなやつ説明するの億劫だったけどこういうガイドブックでてくれたのはありがたすぎる

Tweet card media

ウェブアクセシビリティ導入ガイドブック｜デジタル庁

デジタル庁は、デジタル社会形成の司令塔として、未来志向のDX（デジタル・トランスフォーメーション）を大胆に推進し、デジタル時代の官民のインフラを一気呵成に作り上げることを目指します。

www.digital.go.jp

1

199

1K

@kobitoCode

こびと

2 years

この見せ方最高すぎる！！！よく見る「flexで画像とテキスト」だけど、テキストにZ軸があるだけで一気に量産型との差別化になる！！！アート(芸術)とデザイン(設計)が最高の塩梅で融合している...

Tweet media one

@studiodetails

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

2 years

【RCIエージェンシー様　ブランディング】 ITコンサルティング事業とIT人材プラットフォーム事業を２本柱とするRCIエージェンシー様のブランディングをいたしました。MVV策定のお手伝いからはじまり、ロゴ・Webサイト・採用ピッチにいたるまでのトータルブランディングを是非ご覧ください。

1

58

451

4

89

1K

@kobitoCode

こびと

2 years

webデザイン技能検定は良い資格は取らなくて良いから、無からweb始めますって人に3級のテキスト読む事を勧めたい。今後、基礎的な部分でわからない事が出てきた時にweb業界の共通言語で検索する基礎力がつく気がする。(自分はついた) 資格は取らなくて良い(2回目)

@hideki_climax

セカヤサフリーランスエンジニア&Web制作者💻小林秀樹

2 years

こういうちゃんとした検定あるんだなぁ。問題ざっと見てみたけど、勉強になりそう。

0

15

176

1

97

1K

@kobitoCode

こびと

1 year

「文字の大きさはユーザーの行動決定にかかるプレッシャーと比例する」という学び、あまりにも納得した... デカ文字購入ボタンは「今からとてつもなく大きな行いをするんだ」みたいな圧があるけど、チビ文字ボタンは「まぁこれくらいパッと買うてええやろ」くらいの肩の軽さを感じる

Tweet media one

2

136

1K

@kobitoCode

こびと

1 year

これは革命だわ...チョロメ115から追加される、 CSSのkeyframesをスクロールと連動させられるってやつ、マジでCSSだけでスクロールと連動させられる...イージングも書ける。スクロールインタラクションがありえんほど楽になる。「固定して横スクさせる」みたいなのもCSSだけでできる

6

157

1K

@kobitoCode

こびと

8 months

このスクロールインタラクションめっちゃいい

@FigmaTuts

UI/UX Design - Tips, Tricks, & Tutorials

8 months

Simple Figma Tutorial 🔥

3

194

1K

0

92

1K

@kobitoCode

こびと

7 months

そのまんまwebにできる...マジでイイ... 「動きのあるサイトのプロトタイプをafter effectsで作る」という行い、いわゆる「figmaでは出来ないことをやりたい」みたいなシガラミがないのでめっちゃ良い。逆はある(AEではできるけどブラウザではできない)(これはブラウザの制約把握してれば問題ない)

@PMGWork

ぴくせる

7 months

「COFFEE」コーヒーをテーマにしたモーショングラフィックスを創りました！ #motiongraphics

1

270

2K

0

90

1K

@kobitoCode

こびと

1 year

こういう影ってどうやって作ってるんだろう。物体の影じゃないよね、あしらいとしての影というか、なんかこうイイ感じの影...

Tweet media one

2

34

978

@kobitoCode

こびと

4 months

マジでコレなので世の中の「リンク」を<button>で作ってジャバスクで遷移させるの誠に根絶されてほしい <a>をつこてクレちょっど前にTLで「リンクをaで作るのはナンセンスなのでbuttonで作ろう」みたいな闇のtips流れてたけど、元締めはどこなんや...<a>つこてクレ

@yend724

YEND@砂滑

4 months

放送大の放送授業一覧ページ。aタグじゃないのか？別タブで開きたいんだが。

2

5

63

5

220

980

@kobitoCode

こびと

1 year

これがデザインを勉強する前にCSSとSVGで遊び倒した者のphotoshop遊戯だ...

2

71

952

@kobitoCode

こびと

1 year

photoshopちょっとわかりはじめてきたけど、全くわからんかった時に買ったコレをちょっとわかり始めたタイミングでもう一回読むと理解度がすごい、これ宝の山だ...

Tweet media one

1

120

935

@kobitoCode

こびと

2 years

gulp動かし始めたらgulpはもう終わりと言われ、webpackに乗り換えたらvite使ってないのお前だけと言われ、vite動かせるようになったらturbopackはviteの10倍速いしwebpackからマイグレできるとこ　こ　ま　で　わ　ず　か　1 年

2

176

895

@kobitoCode

こびと

2 years

駆け出しの方「web制作会社に就職するために必要なものはなんですか！」プロ「コミュニケーション能力かな...」 ↑みたいな構図をよく見るけど、じゃあコミュニケーション能力って何を指すの？を主観と偏見で言語化してみました 1 / 3

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

121

879

@kobitoCode

こびと

8 months

凄すぎる！！！CSSで出来るんかコレーーーッッッ！！！キリストが蘇ったくらいの衝撃ある...

@Ln_north

Ln-north

8 months

できた

1

54

478

2

79

902

@kobitoCode

こびと

10 months

2023年はデザイン勉強の年だった何をどう勉強するかワカランな段階から、「コテコテのLP作れるようになる事をスタートラインに」として、一旦本を読みまくり、自分の思う「コテコテのLP」がどうやって作られていて、どう手を動かすのかは掴めた...気がする！notionのデザインメモも大量にできた

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

48

888

@kobitoCode

こびと

1 year

inset ↑あまりにも便利すぎる... 今まで「親要素の100%より20pxだけ小さいabsoluteを中心に配置」とかしたい時、 width:calc(100% - 20px); height:calc(100% - 20px); top:50%; left:50%; translate:-50% -50% とかしてたけど、 inset:20px ↑これだけで上の5行全部要らなくなった...

Tweet media one

1

95

896

@kobitoCode

こびと

2 years

うおああああああああああああああああああできたああああああああああああああああああああああ！！！！ JavaScript + WebGLで波紋(ripple)エフェクト！！ codemafia先生のwebGL講座のおかげでthree使わずにやる可能性に気づけた...でかい...

5

74

876

@kobitoCode

こびと

2 years

おーグラデーションのシャドウいいな、CSSの可能性は無限だ...

Tweet media one

2

44

865

@kobitoCode

こびと

1 year

髪の毛を含む複雑な形状の切り抜きマジでようやく理解した...今日だけで覆い焼き・焼き込み・カラーチャンネルとかなりトモダチになれた気がする。向こうがどう思っているかは不明だが、カラオケに誘えるくらいの仲にはなった TLで見かけるphotoshopのtipsみたいなやつ全部この本に書かれてるまである

Tweet media one

Tweet media two

Tweet media three

2

68

827

@kobitoCode

こびと

1 year

デザイン、学べば学ぶほど「デザイン」という文字から感じるイメージと実態のギャップを感じる。「デザイン」という字面からはキレイに仕上げたりオシャレを着せたりというアートをイメージしがちだけど、「課題の解決」みたいなのを掲げた途端にやってる事が「マーケター」になるんだよな

2

90

812

@kobitoCode

こびと

2 years

このタグ全部にclass名を付けてください選手権やりたい...(みんなのCSS設計が見たいだけ)

Tweet media one

13

115

797

@kobitoCode

こびと

2 years

Figma、対戦よろしくお願いします右の黒いやつ、コーダーにもいい！「コーダーがfigmaデザインもらったときはこことここ見てこの操作しとき」みないなセクションあった！

Tweet media one

3

63

704

@kobitoCode

こびと

1 year

「CSS変数をstyle属性で書いてしまえばユニークな値入れ放題」という技をエスイチさんから盗みました。義賊なのでみなさんに再配布します(感動の共有)

Tweet media one

5

72

701

@kobitoCode

こびと

1 year

ここあまりにも良すぎる... シンプルなSVGの波線アニメーションで一筆書き、maskと違ってパスが重なってても一筆書きっぽくできるからイイ... 平面に存在してるのに立体っぽく見えるのめっちゃイイ、blurがいい仕事してる気がする、めっちゃイイ

@studiodetails

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

1 year

【NEWPEACE Inc.様リブランディング】企業やブランド、社会の多様な課題をクリエイティビティで解決するビジョニングカンパニーNEWPEACEの「コミュニティマネジメント」を核とするビジネスへの挑戦と、壮大なリブランディングプロジェクトに、Goodpatch Inc.と弊社がタッグを組んで取り組みました。

3

149

1K

1

42

691

@kobitoCode

こびと

2 years

HTMLとCSSだけでぷるんぷるんなボタンできた！SVGアニメーションおもしれーーーｯｯｯ!!!🐟✨🎉🐟🍤✨🍤🐟

3

41

686

@kobitoCode

こびと

6 months

コレは良過ぎる！！！！

@DesignSpot_Jap

タマケン | Design Spot

@DesignSpot_Jap

6 months

パス上文字オプションの効果を「歪み」にすると、文字をリボンのように表現できます！ #Illustrator

4

1K

11K

0

69

689

@kobitoCode

こびと

2 years

CSSでリストのマーカーがポーンしながら進行バーがノビ〜するやつを再現してみた

4

46

676

@kobitoCode

こびと

2 years

position:absoluteな要素、widthとheightを指定しないと幅を確保できないと思ってたけど、 position:absolute inset:0 ↑これだけで「親要素と同じ幅と高さなabsolute」になるんだなぁ... ← inset widthとheightあり→

3

60

681

@kobitoCode

こびと

1 year

これをtipsって流しちゃダメでは...

6

137

672

@kobitoCode

こびと

2 years

SVGフィルター　× ハンバーガーメニュー🍔

6

41

634

@kobitoCode

こびと

1 year

このメニューの演出最高過ぎる...こういう開閉の仕方めっちゃイイ...

1

40

578

@kobitoCode

こびと

2 years

@webcreaterfrm30 眼鏡かけてても見落とす自信あります...

2

12

570

@kobitoCode

こびと

1 year

web"デザイナー"を志す者、"web"を一旦捨てて"デザイナー"に振り切るためにグラフィックデザインに突っ走る方がいい気がする(15億回目の再認識) アートに振り切った方が結果的にいい塩梅で引き出し使いこなせる気がする。アートしないのとアートできないのは全然違う

2

25

579

@kobitoCode

こびと

2 years

これまだ読み終わってないけど神の書物だわ...webデザインの知りたかった基礎がまとまってる...最初に読めばよかった...

Tweet media one

2

32

552

@kobitoCode

こびと

1 year

うおおおおおおーーー！！初めてwebサイト(架空かつ練習用)をヘッダーからフッターまでデザインしてみたぞおおおおお！！！ 1週間前にfullmeで添削修正もらったものの自分的に自分に全く納得行ってなかったから、少なくとも今の自分が見て「ショボくね？」と感じるビジュアルではなくなった、デカい！

2

18

543

@kobitoCode

こびと

2 years

VScodeのlive serverをインストールしてる駆け出しの頃のワイへ live serverを立ち上げてる状態で例: localhost:8080 ↑これの8080を自分のプライベートIPアドレスの末尾に追加するとスマホからlive serverにアクセス(ローカルで実機確認)できるぞ例 192.168.0.10:8080/

4

44

536

@kobitoCode

こびと

2 years

web制作勉強中の方のポートフォリオをいくつか拝見させて頂いて、「ここ、惜しい...」って所がある程度共通してたのでまとめました！ヘッダー(ページ内スクロール) ↓ スライダー ↓ 制作物一覧 ↓ お問い合わせ 100人中96人は↑の構成ですが、変に「他と違う」を目指す必要はないです。

Tweet media one

2

50

525

@kobitoCode

こびと

1 year

これマジだ！！！！！やばすぎる！！！！！！ Macユーザー、もう「画像の文字起こし」に別ツール噛ませる必要がない！！シンプルに画像をプレビューで開いたら文字ドラッグできる！！！

Tweet media one

@hiro_ghap1

長谷川喜洋★星のソムリエ®/HASEGAWA Yoshihiro

1 year

iPhone のカメラから文字をコピペできるようになったとき、今まで手打ちしないといけなかった画像資料がほとんど撮影→ユニバーサルクリップボードコピペで解決できるようになって「優勝！」と思ったのが、いつの間にか Mac OS

0

20

139

1

74

529

@kobitoCode

こびと

1 year

VScode、imgのwidthとheight自動入力してくれるの便利過ぎる... img要素をホバー command + shift + p 「emmet: イメージ　サイズの更新」←入力 ↑これ、 <img src ↑どこか1箇所でここまでドラッグしてcommand + d でimg要素全選択してから実行すると全部まとめてwidthと heightが入る、やばすぎ

3

36

525

@kobitoCode

こびと

1 year

「動きのあるサイト」スキーとして、「動きのあるサイトを作る上での注意点(主観)」をまとめておきたくなってきた、まとめなくても深層心理でそう感じてるから言葉にしてきてるのであって、実際作る時はストレスの琴線に触れるはずなのでまとめなくてもいいが、脳を刺激するためにまとめたい

1

67

513

@kobitoCode

こびと

1 year

display:none→display:blockにtransitionが効くようになっとるやんけェ！！！

@yuito_miki

ユイト

1 year

まだほとんどのブラウザで対応していないため、使う機会はない

0

6

44

6

99

523

@kobitoCode

こびと

2 years

CSSにsin()やcos()が来るってヨォ！円周配置や円形スライダーがCSSだけでできるようになるからサァ！みんなもやろうヨォ！！(まだよくわかってない)

Tweet media one

Tweet media two

2

73

516

@kobitoCode

こびと

1 year

photoshopのレイヤー効果、option押しながらドラッグで複製できるヤンケー��ーーッッッ！！(同じ数値チマチマ設定してたマン)

2

59

511

@kobitoCode

こびと

2 years

親要素Aの中でだけ子要素Bをposition:fixedさせる ↑これ、重なり方の仕様上無理だと思ってたけど親要素の形にclipしたらできるわ...気づかなかった clip-path: inset(0 0 0 0) とかでこれいろんなところで使えそう、捗りそう

0

43

507

@kobitoCode

こびと

2 years

みなさんの隠し事がウマすぎて今まで知らなかったんですけど、flexコンテナのの要素の横幅を均等にしたい場合 flex-growとflex-shrinkを1にしてflex-basisを0ににする ↑これで実現できるではないですか...(flex:1;が↑の短縮系) 今まで要素数とってcalcで%出してた者です

Tweet media one

6

40

504

@kobitoCode

こびと

5 months

マーーーージで知りたい事が知れた！問い合わせフォーム付きのペライチみたいなのを作る時、先方から共有されるアドレスがgmailな事があり、「gmailだと迷惑メール行きますぞ」って言ってたけど・なぜ迷惑メールに行くのか・迷惑メールに行かせない方法は知らなかった。コレが知りたかった

@kobitoCode

こびと

5 months

これ、ほしい知識にﾄﾞﾝﾋﾟｼｬっぽい。気になる

Tweet media one

0

8

95

3

40

512

@kobitoCode

こびと

2 years

読み終わった！配色系の本色々読んだけど、学問としての色の勉強も配色の作例も同時に勉強できるから、最初からこれ読んでおけばよかった感がすごい。あと表紙のあしらいが「いろいろな色」そのもので感動しています。「デザイン」を感じる...洗練された「見た目」の効果は「見た目だけ」に留まらない

0

27

505

@kobitoCode

こびと

1 year

マウスカーソルの位置に応じて影の位置が変わるやつ、モノの座標と連動するようにして再現してみた

@kon_corder

𝚈𝚞𝚞𝚔𝚒 𝙺𝚘𝚗 | QUOITWORKS Inc.

1 year

影をカーソル座標に連動させるの面白いな (元サイトは各要素の座標を起点に動かしてるから厳密には違う) 元サイト:

0

6

68

1

47

493

@kobitoCode

こびと

9 months

波紋できたああああああああ！！！フレームバッファを2つ用意して切り替え続ける！！ GLSLスクールの目標はコレ(引用元の波紋の再現)だった！！vanillaJSで波紋フルスクラッチ！！幸福！幸福！幸福！幸福！幸福！幸福！ God!bless!GLSLSchool! doxas Hallelujah---------!!!!!!!!!!!!!!!!!!!!!!!!!!

@re_d

渡辺祐樹｜Re:design / HOLON

1 year

水と生きる SUNTORY サントリーホールディングス株式会社様のトップページを制作させていただきました！！常に挑戦し続け新しい商品を生み出し、様々な文化事業や社会貢献もされているサントリー様の「今」を伝えるトップページです。是非ご覧ください。

1

30

466

3

30

483

@kobitoCode

こびと

2 years

素のJavaScriptでSPA作ってるんですけど、DOMツリーの変更を検知して変更があったら処理を実行してくれる MutationObserver が便利すぎる... SPAとかじゃなくても、「ここのHTMLが書き変わったら、ここのstyleが書き変わったらこの処理を実行したい」とかでめっちゃ使える

Tweet media one

4

40

477

@kobitoCode

こびと

7 months

CSSでアニメーションさせているようす mask-imageはいいぞ

@kobitoCode

こびと

7 months

アニメ画像に変換するキミを初めて使ってみたけどバチコリと便利過ぎる...

2

12

256

2

41

480

@kobitoCode

こびと

4 months

<a><button></button></a> ↑コレHTML記述規則違反だと認識してるんだけど、一定数「こういうときはa>button」という反応がくるので、そのbuttonタグは何のために置いてるのか聞いてみたい...「見た目がボタンだからbuttonタグを使っている」のであれば、見た目とHTMLは切り離そう、と思ったり

Tweet media one

@tadsan

にゃんだーすわん

4 months

<a> でリンクすることと <button> を使うことは両立することを認識されたい <a href="/path/to/link"><button>テキスト</button></a>

1

101

792

5

88

481

@kobitoCode

こびと

2 years

多くのコーダーを悩ませたであろう「タイトルの位置がPCとSPで違い、flexの仕組み上キツい」を、flexを使ったまま解決できたdisplay:contents;とorderでもうgrid化しなくても対応できる...

4

50

470

@kobitoCode

こびと

2 years

死ぬほどわかりやすすぎて死んだ

Tweet card media

君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。

0

41

470

@kobitoCode

こびと

2 years

できたー！！最高すぎる！！！！波紋にテクスチャ使う発想なかった！！というか、three.jsはテクスチャ使う引き出しちゃんと理解して持っておかないともったいないな...煙みたいなエフェクトも画像でやってたし、テクスチャ熱い

@NowMoDesign

nowmo.design

2 years

Another amazing stream on youtube from @akella : Ripples effect with three.js Tutorial: Live: Code: #threejs #frontend #animation #javascript #threejsjourney #webgl #glsl #creativecoding

1

39

230

1

33

465

@kobitoCode

こびと

1 year

「動きのあるサイト」に対するストレスを募集しております(箇条書き・殴り書き歓迎) 動きのあるサイト好き言っときながらめっちゃ自分で悪い所書いてるけど、「動きのあるサイト」が嫌われてるのではなく、「ストレスのある動き」が嫌いなだけなんだよな。サイトが生むストレスは原理主義的ではない

@kobitoCode

こびと

1 year

「動きのあるサイト」スキーとして、「動きのあるサイトを作る上での注意点(主観)」をまとめておきたくなってきた、まとめなくても深層心理でそう感じてるから言葉にしてきてるのであって、実際作る時はストレスの琴線に触れるはずなのでまとめなくてもいいが、脳を刺激するためにまとめたい

1

67

513

29

68

461

@kobitoCode

こびと

2 years

Figmaの勉強通して得た気づき □ 思考A 横幅360pxの枠を作り、この中に文字を置いてボタンにする。このボタンが360pxなのは、私が最初に決めたから □ 思考B ボタンの枠を作り、この中に文字を置く。規則的な余白を持たせた結果、ボタンの横幅は360pxになった ↑Bが「コーディングに配慮」の正体

1

43

465

@kobitoCode

こびと

2 years

なんでみんなfigmaになった途端「figmaしか使えない」って思考になるんだろう、photoshopもillustratorも使ってfigmaで仕上げる、という選択肢がデザイナーの中で生まれないのであればその理由が知りたい...機能的に無理な理由があるなら確実に自分もその落とし穴にハマるため、先に知っておきたい...

9

38

455

@kobitoCode

こびと

2 months

CSSだけでページ遷移にカーテンかけるやついけた ::view-transition-old(root) ::view-transition-new(root) ↑これらの子孫要素にアニメーションかけたかったけど、セレクタの辿り方わからずじまいだったのでbodyに背景色もしくは背景画像仕込めばいいことにきづいた

0

41

456

@kobitoCode

こびと

2 years

background-clip: text ↑で↓ができるの熱い CSSで指定できるってことはアニメーションもできるということ...タイポで遊びたい勢に勧めてまわりたいbackground-clip: text

Tweet media one

2

31

444

@kobitoCode

こびと

1 year

「課題の解決」は「デザイナーの仕事」ではなく「成果物に求められる結果」だよな、やっぱり。「デザイナーが課題を解決する」はどうしても納得いかなかった、課題を解決するのはチームであるはずだと感じてしまう。ただこの考え方はあまりにも90〜100点を目指しすぎてるのかもしれない

3

40

440

@kobitoCode

こびと

2 years

これ面白い！！イラレで文字置く ↓ アウトライン化 ↓ ナイフツールで切る ↓ SVG書き出し ↓ path毎にclass振ってCSSコネる

1

37

421

@kobitoCode

こびと

5 months

超低レベルだけど、 dockerの環境作って立ち上げられる node.js動かせるバックエンドとDB動かせてAPI作れるフロントエンド実装できるデザインﾁｮｯﾄﾜｶﾙようやく「これくらい知ってるなら新卒で採用してもいいか」くらいのスタートラインにギリギリ立てた気がする...GA4とSEOもやるぞ

3

27

429

@kobitoCode

こびと

2 years

TLに流れてきた、コンテンツの両端に暗くなっていくグラデを固定するようにかけるのめっちゃいい！なんというかオシャレ！(語彙力) 例↓ -webkit-mask-image: linear-gradient(to right, #0000 , #000 , #000 , #0000 );

0

20

420

@kobitoCode

こびと

2 months

全然他人の人生とかに干渉したいモチベ全くないけど「コーディングで在宅で稼ぎたい」 ↑というモチベなら、「HTMLとCSSとちょっとJSとちょっとWordPress」みたいなスタックで勝負しにいくより、reactとかrailsとかまで踏み込んだ方が140時間60〜70万みたいな世界��広がってて、よさそうです

1

31

424

@kobitoCode

こびと

2 years

ボタンとかでたまに要求される矢印、clip-pathのおかげでdivを何個も組み合わせなくてよくなったの楽だなぁ

Tweet media one

Tweet media two

6

28

417

@kobitoCode

こびと

2 years

やべーアカウント見つけちゃった photoshop楽しくなってきた

@gisellaesthetic

Photoshop Tricks!

@gisellaesthetic

2 years

Spot Light Effect

20

739

6K

1

39

418

@kobitoCode

こびと

7 months

デザインの基礎を学べる神の書の中に、「理解とは、読み手が予め持っている情報とこちらが持っている情報を比べた時の、足りない情報を補ってあげた時に起きる」みたいな事が書いてあるんだけど、これはデザイン関係なく社内での意思疎通でもその通りなのでみんなでこれをよもう(布教)

Tweet media one

@kobitoCode

こびと

7 months

わかる指示した側が認識している事の6割しか伝えていないのに「残りの4割は会社の文化や顧客の性格、これまでのやり取りを遡って察するように」 ↑をやってしまうと手戻りは当たり前に起きる言われた事はやる気になる事は聞く依頼する時は誰が読んでも理解度が同じになる書き方を心がけたい

0

3

34

1

28

415

@kobitoCode

こびと

2 years

弊社、実務未経験のポートフォリオ見る機会が割とあるんですけど、ほぼ100%の割合で「スクロールするとふわっとでてくる」んですけど、ふわっとの距離がデケェ...スクロールする度に交差した要素のYを50pxから0pxとかにtransitionされると目が疲れる...10とかでいい...(主観)

1

16

403

@kobitoCode

こびと

8 months

figmaってここまでアニメーション作れるのか、すごい

@FigmaTuts

UI/UX Design - Tips, Tricks, & Tutorials

8 months

Carousel in Figma 🍊

4

90

567

0

26

412