← ノートへ戻る Claude Code でフロントエンドデザインを実践する方法（2026年版ガイド） Claude Code は本当に質の高いフロントエンドデザインを生み出せます。ただし、それは適切なセットアップとプロンプトがあってこそです。本ガイドでは、frontend-design プラグインのインストールから、ピクセル単位ではなく美的方向性で指示するプロンプト術、デザインの各次元の導き方、そして一回限りの画面を自分のものにできるデザインシステムへ昇華させるまでを実践的に解説します。 初期状態の Claude Code に「ランディングページを作って」と頼むと、たいていは誰もが手にするのと同じありきたりな結果が返ってきます。無難なフォント、デフォルトのブルー、主張のないデザイン。これはモデルの能力の限界ではなく、プロンプトとセットアップの問題です。適切なプラグインといくつかの習慣さえ

Time tracking software application designed to help teams manage their work time more effectively.

この記事には、映画ちいかわとマッドマックス怒りのデスロードと、ダンジョン飯のネタバレが含まれている。 映画を見たり長編小説を読んでいるとき、頭の中で使っている物差しがある。 それが「郵便配達ベンチマーク」だ。 説明をすると、この「郵便配達ベンチマーク」とは、「郵便配達員が険しい山を越えて手紙を届け、無事帰ってくる」というだけの架空の映画を最低基準として、それ以上の必然性や変化などなどがプロットに存在するかを評価する、自分用の物差しである。 なんでこんなことを改めて考え出したのか。きっかけは『映画ちいかわ 人魚の島のひみつ』を見たからだ。 面白かったかどうかで言えば、面白いに決まっている。ちいかわが面白くないわけがない。なのでその話はここではしない。強いて言うならセイレーンがマジで可愛かった、ということだけ書いておく。 そしてその後、あまり出来がいいとは思えない作品に触れた。 出来のいい作品

【当店限定特典】 オリジナル L HOOK 3本がついてきます。 ＿＿＿ 場所を気分を道具を切り替える。それだけで、停滞していた物事がスッと上手く動き出す、なんてことがある。 お家でお店で仕事場で、日常に”切り替え"を生む新しいワゴンを作りました。 詳しくはこちらから 有孔ボードにフックなど様々なパーツをとりつけて、工具や文具はもちろん、鞄やリュック、鍵や財布や帽子、ガジェットやケーブル類を整理収納できます。 4種類のオリジナルフックも販売中。 キャスター付きなので表面と裏面をクルッと入れ替えることができ道具類をそのまま作業場所まで動かすこともできます。 天面にはノートパソコンやタブレットを置けるため、スタンディングデスクとして使用可能。好きな場所へ移動させられるので在宅ワークでの気分転換にも最適。 鉄部品は新潟・燕三条で職人が製造しています。 ＿＿＿ ※本製品は組み立て式です。組み立ての

1971年東京生まれ。デイリーポータルZウェブマスター。主にインターネットと世田谷区で活動。 編著書は「死ぬかと思った」（アスペクト）など。イカの沖漬けが世界一うまい食べものだと思ってる。（動画インタビュー） 前の記事：2002年の動画を撮る ＞ 個人サイト webやぎの目 質問に答えてくれるのはライフネット生命 田中さんと古川さんだ。田中さんは保険商品をつくるアクチュアリーと言われる専門家、古川さんはライフネット生命の開業時に約款を担当したことがある生命保険のプロフェッショナルである。 約款、きちんと読んでませんでした 林： 生命保険の約款って、読むの大変ですよね。やっぱり読まなきゃだめですか。 田中： 保険の約款というもの、はっきり言って一人で読み切ったとしても理解するのは相当難しいですよ、大きな声では言えないですけれども。 契約なので「読んでなかった」で通用しないという現実はありつつ

横坂 拓也_Webディレクター｜群馬の制作会社emo planning LLC @taku_coco9 デザイン参考はPinterest使いますが 最近はAIで参考作ってデザイナーさんに渡す でもそうするとデザイナーは 「いやいや もこれ80点ラインですやん」 「ここからどうデザインしろと？」 となる だから相当に細かく指示してあげないと デザイナーさんが辛い... ので注意しないとなーと思った🤔 pic.x.com/Wrxs2eR6nP 2026-07-17 12:34:19 そい@SOI_market @SOI_market @taku_coco9 それ本心で言われてるか注意した方がいいかもしれません… というのも、AI参考画像プラス、企業のトンマナがあるので、AI生成したもの➕企業トンマナが乖離してる場合、結構デザイナーにとってきついです！ 何がきついって、これまでワイヤーフレーム

ホーム資料ダッシュボードデザインの実践ガイドブックとデザインテンプレート ダッシュボードデザインの実践ガイドブックとデザインテンプレート デジタル庁は、ダッシュボード開発において品質向上、および設計の効率化に貢献するため、実践ガイドブックとダッシュボード開発のためのデザインテンプレート（Power BI用）を公開しています。 更新情報2026年7月17日 カラーパレットのカラーコードを更新しました2026年5月29日 活用事例に「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」の活用事例集（デジタル庁ニュース）を掲載しました2026年3月31日 ダッシュボードデザインの実践ガイドブックとデザインテンプレートの正式版をリリースしましたデザインテンプレートに、7色のカラーパレット、地図、ナビゲーションボタン等を追加しました目次1.公開の目的2.実践ガイドブックの特徴3.実践ガイ

📌 この記事のポイント ChatGPTバナーは15人以上で同じお題を作ると「3点ポイント」「左キャッチ右画像」など5つの癖でほぼ同じデザインになる AIっぽさの脱却テク4選｜素材持ち込み・メリハリ指示・逸脱プロンプト・配置指定で個性を取り戻す 「中島プロンプト」式の逸脱指示はアイデア出しに有効、ただしガチャ要素強めで複数生成前提 ChatGPT × Canva Magic Layers（2026年6月8日連携拡大）で叩き台→仕上げのフローが実用域に Figma Design Agentはバナー弱い、UIやワイヤーフレーム向き｜用途で使い分けるのが正解 2026年6月16日更新 ChatGPTバナーは「みんな似る」｜15人以上で検証して見えた現実ChatGPTバナーは15人以上のデザイナーが同じお題で作ると驚くほど似たデザインに収束します。理由は「3点ポイント並べがち」「左にキャッチ右に画

Matt Pocockさんが作った「grill-me」というAgent Skillsが、とてもシンプルなのですがとても良いので紹介したいと思います。 追記（2026/06/08） grill-meを少しだけカスタマイズした自作スキルを今は使っています。是非参考にしてみてください。 たった3行のスキル Agent Skillsってだいたい数十行〜150行くらいあるものが多い印象ですが、なんと grill-me はたったの3行。 この計画のあらゆる側面について、私たちが共通の認識に達するまで、徹底的に私に質問を投げかけてください。 設計のツリーを枝分かれの先まで一つひとつたどり、決定事項間の依存関係を順番に解決していきましょう。 各質問に対し、あなたの推奨する回答も併せて提示してください。 質問は一度に一つずつお願いします。 もしコードベースを探索することで答えが得られる質問であれば、質問する

tmuxとの違い tmuxやZellijは汎用的なマルチプレクサとしては非常に優秀ですが、「現在動いているプロセスがAIエージェントである」という概念を持っていません。そのため、エージェントがAPIキーの入力を待って止まっていたとしても、画面を切り替えて確認するまで気づくことができません。Herdrはエージェント特有の状態を自動で認識し、サイドバーで通知してくれます。 cmuxとの違い cmuxはAIエージェントを管理するために作られ、内蔵ブラウザなどを持つ強力なツールですが、Mac専用の独立したデスクトップアプリケーションです。自分の好きなターミナル環境やシェル設定を捨てて、cmuxの世界に移行する必要があります。一方Herdrは、「あなたのターミナル環境を維持したまま、足りないレイヤー（状態認識と永続性）を追加する」というアプローチをとっています。 3. Herdrのコア機能 ① エー

Claude is built to work the way you work, and in Claude Code you can customize it. There are seven methods for instructing Claude's behavior: CLAUDE.md files, rules, skills, subagents, hooks, output styles, and appending the system prompt. Each method controls: When an instruction loads into context; Whether it persists through long sessions (compaction behavior); and How much authority it carries

このリポジトリは何か shanraisshan/claude-code-best-practice は、GitHub Trending 1位を獲得し、現在5万スター近くまで伸びている Claude Code のベストプラクティス集です。 中身を一言でいうと、設定ファイルを配るテンプレート集ではなく、「Claude Code をうまく使うための知識」をリンク付きで整理したリファレンス です。大きく次の3パートで構成されています。 概念リファレンス（CONCEPTS） — Subagents / Commands / Skills / Hooks / MCP / Memory など、Claude Code の各機能が「どこに置くファイルで、何をするものか」を一覧化 Tips & Tricks（82個） — Prompting / Planning / Context / CLAUDE.md /

Chromeに表示したWebページや特定のセクションをコピペで、Figmaの編集可能なレイヤーに変換できる拡張機能を紹介します。 以前紹介したhtml.to.designと似ていますが、html.to.designはサブスクで無料版はかなりの制限があります。この記事で紹介するCopy to Figmaは完全に無料で、すべての機能を利用できます！ Copy to Figma -Chrome ウェブストア コピペでWebページをFigmaに変換 Copy to Figmaの利用方法 Copy to Figmaの使い方 コピペでWebページをFigmaに変換 Copy to FigmaはChromeの拡張機能で、Chromeに表示したWebページ（オンライン・オフライン）をコピーして、Figmaの編集可能なレイヤーに変換してペーストできます。 作者様によると、単にWebページやセクションをFig

任天堂は6月9日、『ファイアーエムブレム 万紫千紅』を9月17日に発売すると発表した。対応プラットフォームはNintendo Switch 2。 『ファイアーエムブレム 万紫千紅』は、『風花雪月』の流れを汲む『ファイアーエムブレム』シリーズの最新作だ。巨大な闘技場を舞台に、神威法王なる人物によって開催される「ダグシオン大剣闘祭」がテーマになるという。 主人公は4人の戦士。投獄された父を救うため大剣闘祭への出場を決意した「カイ」、強者との戦いを渇望する剣士「ディートリヒ」、サラミス王国の悲願を果たすために戦う女王「セオドラ」、全てを復讐に捧げたというビウエラ奏者「レダ」。選んだ主人公によって異なる物語が展開されるといい、それぞれの思惑が交差したり、秘密が明かされていくのだろう。また大会までの期間はターン制となっており、訓練場で鍛錬したり、新たな仲間をスカウトしたり、ダグシオンの外に遠征したり

はじめに こんにちは！ この記事では、Claude Codeをインストールした後に「ぜひやっておくべきこと」を3つ厳選して紹介します。 Claude Codeは、インストールするだけですぐに会話ベースで簡単にコーディングができて非常に優秀なツールです。 しかし、実はただ適当に指示を出すだけだと、自分の求めているアウトプットが出るまでに時間がかかってしまうことがあります。 AIを最大限に活かし、開発を劇的にスピードアップさせるためのおすすめ設定やテクニックを分かりやすく解説します。 対象読者 AIコーディングに慣れていない方 Claude Codeをすでにインストール済みの方 ※「まだインストールしていない！」という方は、下記を参照し、導入ください。 1. CLAUDE.mdを作成しよう 「このコードを修正して！」と、ざっくり依頼しながら完成形に近づけるやり方もあります。 しかし、曖昧な指示

みなさんは「動画を作ってみたい」と思ったことはありますか？ 現代は個人から企業まで、誰もが動画を投稿できる大SNS時代。 YouTuberやVTuberなどの言葉も定着してきた昨今、「自分でも動画を作りたい」と思う機会はかなり増えたのではないでしょうか。 しかし、一度でも動画制作を試みた多くの方がこう思ったはず。 そう、動画制作とは、 あまりにも「めんどくせぇ～～～～」のです。 「10分の動画を作るのに10時間かかる」なんて冗談めかして言われることもありますが、これがまったく笑えないくらいには大変です。 どうにかして作業を楽にしたい……初心者でもお手軽にそれっぽい動画を作りたいだけなのに……でもそんなサービスがあるわけ…… ありました。 “無料で”、初心者にも優しくて、「ずんだもん」など各種素材も豊富で、Live2Dを簡単に動かせて…… そんな夢のような動画エディター、それが『nizima

こんにちは。ソフトウェアエンジニアの inari111 です。 弊社ではClaudeを全社で使っており、エンジニアはClaude Codeを用いて日々の開発を行っています。 本記事では、私が開発時に使っているClaude Code Skillsについて紹介します。 superpowers よく使っているのは brainstorming, subagent-driven-development, executing-plans です。 brainstorming 質問を通して案を検討し、設計書を保存するSkillです。 「計画したものは {プランを保存するpath} にマークダウンで出力してほしい」とプラン出力用のディレクトリを指定しています。 subagent-driven-development, executing-plans 出力されたプランに沿って実装を行ってくれます。 プランには