抹茶

WEBデザイナー│勉強は泥くさく、でも無理なく自分のペースでしっかりやりぬく！│技術向上のための勉強や日々のことを呟きます

[築地 海露穂（つきじ ひろほ） @hiroho150cm]

❌「このスクショのレイアウトを再現して」

⭕️「まずピクセルを解析して、x／y／幅／高さを数値で出して」

この一行を足すだけで、参考サイトの再現度が高まります👌

Claude Codeは「見る」のが苦手なので、先に「正確に測る」工程をはさむのがコツです📏📐

___
参考の正確なワイヤーフレームをつくるプロンプト👇

参考スクショのレイアウトを、HTMLのワイヤーフレームで再現してください。

【手順】
1. 目測で組まない。まずPythonでスクショのピクセルを解析し、主要ブロックの x / y / 幅 / 高さ を数値で書き出す。

2. その数値をそのままpxで置き、絶対配置のHTMLをつくる。

3. つくったHTMLを、ヘッドレスChromeで参考と同じ幅（例：1440px）でレンダリングして画像に書き出す。

4. 手順1と同じ方法でレンダリング結果を測り、参考との差分表をつくる。

5. 差が大きい箇所を直して、3〜4を繰り返す。

【出力】最後に「要素名 / 参考の値 / 出力の値 / 誤差px」の一覧を出してください。
___

ポイントは「測る→つくる→測りなおす」のループを、Claude Code自身に回させること🔃

実際にやったら、ナビ・ボタン・写真ブロックは誤差1px以内に収まりました😊

#ClaudeCode #ワイヤーフレーム

[뭐해먹고사냐🫠 @gwamoleipstop]

요즘 유행인 레이스코어 디자인 쉽게하는법!
다들저장해🥹

[くにちゃんʚ🍅ɞ@Tiktok準備中 @Kuni37tomato]

謎の機能発見…これって合体するんや

[Y Combinator @ycombinator]

A very special guest on this episode of the Lightcone! @bcherny, the creator of Claude Code, sits down to share the incredible journey of developing one of the most transformative coding tools of the AI era.

00:00 Intro
01:45 The most surprising moment in the rise of Claude Code
02:38 How Boris came up with the idea for Claude Code
05:38 The elegant simplicity of terminals
07:09 The first use cases
09:00 What’s in Boris’ https://t.co/OAtnXdxccP?
11:29 How do you decide the terminal’s verbosity?
15:44 Beginner’s mindset is key as the models improve
18:56 Hyper specialists vs hyper generalists
21:51 The vision for Claude teams
23:48 Subagents
25:12 A world without plan mode?
28:38 Tips for founders to build for the future
30:07 How much life does the terminal still have?
30:57 Advice for dev tool founders
32:11 Claude Code and TypeScript parallels
35:34 Designing for the terminal was hard
37:36 Other advice for builders
40:31 Productivity per engineer
41:36 Why Boris chose to join Anthropic
44:46 How coding will change
46:22 Outro

[ホンダ @yuichirohonda_]

カードUIの「違和感」を解消する処方箋。

最近フィードバックでよくお伝えしているのが、
角丸の数値調整です。

外周と内周のアールが同じだと、
どうしても野暮ったく見えがち。

内周の角丸を外周より小さくするだけで、
視覚的な整合性が生まれます。

小さな調整が、大きな差を生む。

[ホンダ @yuichirohonda_]

ボタンが複数あると、なんだかバラバラな印象に…

そんなときは「両端揃え」が良いかも。
左右をピタッと揃えるだけで、目線が迷わなくなり、すっと情報が入ってきます。

規則的なレイアウトは、見た目の美しさだけではなく
情報の伝達スピードも上げてくれます。

[ホンダ @yuichirohonda_]

アイコン付きボタンの余白、左右のパディングが一緒になってませんか？

機械的に同じ値にすると、アイコンの分だけ文字が寄って見えてしまうことも。

目立つ部分は視覚的なバランスで微調整すると、まとまりがよく見えるかも。しっかり調整されているサイトを見ると「おっ」となります。

[もとやま @ysk_motoyama]

https://t.co/15CX8eTumb

[日本経済新聞 電子版（日経電子版） @nikkei]

「SaaSの死」業務ソフトにAI代替の荒波　4社時価総額15兆円消失
https://t.co/Z3obN1miEr

AIが人間の業務を代行するようになり「業務用のアプリの概念自体が崩れ去る」。
米マイクロソフトのサティア・ナデラ最高経営責任者による予言が実現に向かいつつあります。

[ババレオ✏️日常マンガ @babareonichijo]

僕の発見したマンデラエフェクト 3/3

[ババレオ✏️日常マンガ @babareonichijo]

僕の発見したマンデラエフェクト 2/3

[ババレオ✏️日常マンガ @babareonichijo]

僕の発見したマンデラエフェクト 1/3

[CSS Design Awards @cssdesignawards]

Website Of The Day is KOKUYO
https://t.co/fyfiPxeYe3
by mount inc. @mount_inc
#webdesign #webdev #cssdaWOTD #CSSDesignAwards

[ムラマツヒデキ｜クオートワークス @muuuuu_chang]

12年ぶりにhttps://t.co/osaWCs5kQ1 リニューアルしました。
4月からの様々な作戦を立てて年内に走り切れたこと、
制作チームの皆様まじでお疲れ様でした！
皆様が喜ぶ必要なもの、
すべて用意できたと思っています。

引き続きよろしくお願いします！
https://t.co/IgdMjRJiQc

[岩松翔太｜M-HAND, Inc. @IwamatsuShota]

💥 WARP／公開 💥

Webサイトにおける動きの共通言語化を目指し、モーションを集めた参考サイト「WARP」を公開🌈優れた他社様の実績と自社の実績から事例を収集・分類。それぞれに解説を添えて紹介しています。デザインや実装のヒントになれるよう地道に更新を続けます 🙌

● https://t.co/QyGEqsgxXv

[了@Lism @ddryo_loos]

svgアイコンライブラリで個人的に一番気に入ってるのは Phosphor Icons !
https://t.co/XyxFm0T8Im

ほどよく個性があってどれも美しい。
数もめちゃくちゃ多いし、Reactでも簡単に使える。
なぜ無料なのかマジでわかんないレベル...

いつもありがたく使わせてもらっています🙏

[ミヤマ @mmmiyama_D]

Googleの「Mixboard」に直接赤入れできる機能が追加されました！
生成画像に、そのまま手書きで修正指示の書き込みが！
無料・透かしなし・大量生成OKで、ついに“実務でも使えるAIボード”に進化した感じ。
Googleさんのアップデート速度、ほんとに早い…😲
👇

[抹茶 @umbs_megane]

@Maruo_AI ほしい

[Tomoya Okada @__o_state]

自作の制作補助サイトをまとめました。
少しでも制作のお役に立てれば幸いです。
..
▼イージング確認・取得
↪︎ https://t.co/KeVqZgI3cu

▼Google fonts Preview
↪︎ https://t.co/m8j3JKGs42

▼環境デバッグ
↪︎ https://t.co/12nbWdmUBM

▼vh検証
↪︎ https://t.co/CDBoomWVe9

[Brandon K. Hill | CEO of btrax 🇺🇸x🇯🇵/2 @BrandonKHill]

売れるパッケージは「デザイン」じゃなく「戦略」。HI-CHEWはアメリカ市場での袋を大胆リデザイン。
1. ロゴを中央へ配置（棚で隠れない）
2.フレーバー名を大きく（迷わず選べる）
3. キャッチコピーを整理（買う理由を一瞬で伝える）
デザインは“自分好み”ではなく“忙しい消費者の1秒”のためにある。