おじこさん

Web業界で、少し長く生きています。
大事にしていること：歩くこと、いなくならないこと。

[おじこさん @daisukehiguchi]

数字だけを並べるとただの比較表になりがちですが、罫線の太さで「おすすめ」を示すなど、色に頼らず情報の強弱をつけることを意識しました。
#ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

ClaudeParts. Phase2、012は「物件比較テーブル」。
価格・間取り・アクセスを並べて、暮らしの条件を見比べるパーツです。
011から続くモノクローム・エディトリアルなトーンはそのまま。 https://t.co/sa54DG9YDc

[おじこさん @daisukehiguchi]

パーツ単体としても"映える"ことを意識した回です。装飾色を排して、明朝体の大小と1pxの罫線だけで高級感を出す方向にトライしました。 #ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

ClaudeParts. Phase2スタート。今回からNext.js + Tailwind CSSに切り替えました。 011は不動産向け、罫線と余白だけで魅せるモノクローム・エディトリアルなデザインです。 https://t.co/Z2dbJyNK9P

[おじこさん @daisukehiguchi]

ClaudeParts. 010番、できました。 「物件検索フィルター」不動産向け。タグ選んで絞り込める、直感的なUIです。
https://t.co/RVsqex5fgs #ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

上の建物群のビジュアル、間取り図をCSSで表現しています。

#HTML #CSS

[おじこさん @daisukehiguchi]

ClaudeParts. 009番、できました。
「物件詳細カード」不動産向け、黒×ゴールドの上質トーンに一新。
https://t.co/RVsqex5fgs

#ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

ClaudeParts. 008番。
「混雑状況インジケーター」
医院・クリニック向けの待合室混雑表示です。
空いてます／やや混雑／混雑中の3段階で色分け表示。ゲージと待ち時間も連動します。
これで医院編、005〜008番が完成。次は不動産編です。
#ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

残り3回でした

[おじこさん @daisukehiguchi]

ClaudeParts. 007番。
「院長・スタッフ紹介カード」
医院・クリニック向けUIです。
院長プロフィールをメインに、スタッフはタブ切替で、田中・佐藤…とタップした人だけ表示されるようにしてみました。
これでPhase 1、残り2回です。
#ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟

[おじこさん @daisukehiguchi]

ClaudeParts. 006番、できました。
「初診の方向けフローチャート」

医院・クリニック向けの来院ガイドです。

予約→受付→問診→診察→会計の流れを、持ち物・所要時間つきで案内。チェックを入れると進捗バーが伸びて、残り時間の目安も出ます。

#ClaudeParts #Claude #Web制作 #UIコンポーネント

[おじこさん @daisukehiguchi]

【ClaudParts.】便利なWebパーツを、Claudeと一緒に作るチャレンジ。
005 / 診療時間・休診日カレンダー
医院・クリニック向け。カレンダー上で診療日・休診日を色分け表示し、日付をクリックするとその日の診療時間の詳細が表示されます。
GitHub: https://t.co/RVsqex5fgs
#Claude #Web制作 #新潟

[おじこさん @daisukehiguchi]

点検スケジュールは点線でつながった時系列で表示し、完了した点検には「済」のハンコがスタンプされます。カードがスクロールで画面に入ると、済スタンプが左から順番に押されていく演出付きです

#HTML #CSS #Javascript
#ClaudeCode

[おじこさん @daisukehiguchi]

地方の中小企業向けWebパーツを、Claudeと一緒に作るチャレンジ。

004 / 保証・アフターサービス案内カード
工事完了後の「保証年数」と「点検スケジュール」を1枚の証書にまとめた、建設業向けUIパーツです。

GitHub: https://t.co/RVsqex5fgs
#Claude #Web制作 #新潟

[おじこさん @daisukehiguchi]

Web UIパーツを、Claudeと協働制作するチャレンジ「ClaudeParts.」の第3弾。

003 / 施工の流れ・ステップ表示

「お問い合わせ」から始まる施工フローを、現場の工程表をモチーフにしたステップタイムラインとして表示します。

GitHub: https://t.co/RVsqex5fgs

#Claude #Web制作 #新潟

[おじこさん @daisukehiguchi]

こうなってくると、
デザインが先ではなくて、

実装が先 → デザインを整える

の方が、圧倒的に効率がよい

#Web開発 #Web制作 #Claude #ClaudeCode

[おじこさん @daisukehiguchi]

002 / Before / After スライダー
建設業サイト向けのUIパーツです。スライダーを動かすと、位置に応じて「改修前」「改修後」のタグがふわっと濃淡を変えながら現れます。
Claudeと一緒に作ってます

GitHub: https://t.co/RVsqex5fgs
#ClaudeParts #Claude #Web制作 #新潟

[おじこさん @daisukehiguchi]

これくらいだとClaudeCode使うまでもなく、チャットだけで。
プロジェクトはローカルにちゃんと整理しておいたので、git add / commit / GitHubへのpushだけ、いちおうClaude Code使いました（VSCode）。

Claudeすげー

[おじこさん @daisukehiguchi]

0001 / 施工実績カード 建設業サイト向けのUIパーツです。
検収印を押すとちょっと反応するギミック付き。 Claudeと一緒に、地方中小企業向けのWebパーツを作るチャレンジ、はじめます。

GitHub: https://t.co/RVsqex5fgs

#ClaudeParts #Claude #Web制作 #新潟

[おじこさん @daisukehiguchi]

【ClaudeParts.】
Claude Codeがすんごいので、どんどんプロダクトが作れそうです。
中小企業や小規模事業者さんのWebサイトで使えそうなUIパーツをどんどん作って、
GitHubで公開していきます。

プロジェクト名は ClaudeParts. です

#ClaudeParts #Claude #Web制作 #UIコンポーネント #新潟