Codexへ「見やすいランディングページを作って」と頼んでも、似たカードが並ぶだけの画面になったり、紫のグラデーションに寄ったりすることがあります。
そこで試したのが、Nutlope氏がGitHubで公開しているHallmarkです。Hallmarkは単体で起動するデザインアプリではなく、Claude Code・Cursor・Codexへ追加して使うデザインスキルです。
今回はHallmarkを隔離したテスト用Gitリポジトリへ実際にインストールし、架空の家庭菜園記録サービス「TANE LOG」のランディングページを作りました。公式画面だけでなく、インストール後のファイル、完成したPC表示、390pxのスマホ表示までスクリーンショット9枚で紹介します。
- 検証日：2026年7月24日
- Hallmark：公式リポジトリの
package.jsonで1.1.0を確認 - Node.js：v25.2.1
- npm / npx：11.6.2
- Git：2.50.1
- Codex CLI：0.145.0-alpha.30
- 検証範囲：インストール、スキルファイル確認、UI作成、7画面幅の表示、CTA操作
Hallmarkやskills CLIは更新される可能性があります。実行前にHallmark公式GitHubリポジトリと、自分の画面に表示される確認内容も見てください。
先に結論を言うと、公式の基本コマンドはnpx skills add nutlope/hallmarkです。初めて試すなら、普段の大切なプロジェクトではなく、新しいGitリポジトリへプロジェクト単位で入れると変更を確認しやすくなります。
今回、公式説明の要約だけで終わらせず、次の3点を実機で確認しました。
- 隔離したGitリポジトリへHallmarkを導入
- 架空サービス「TANE LOG」のUIと判断ログを作成
- 320〜1920pxの7画面幅、CTA操作、コンソールエラーを確認
Hallmarkとは：アプリではなくAIエージェント用のデザインスキル
Hallmarkの公式READMEでは、Claude Code・Cursor・Codexへデザイン判断の基準を追加するスキルとして説明されています。
インストールされるのは、一般的なMacアプリのような.appファイルではありません。中心になるSKILL.mdと、レイアウト、テーマ、タイポグラフィ、アクセシビリティなどを扱う参照ファイルのまとまりです。Codexはそれらを読み、ページを作る前の質問、構造の選択、仕上げの確認に利用します。
Hallmarkが主に助けるのは、次の部分です。
- 誰が何のために使う画面かを先に整理する
- ページ全体の構造と見た目の方向を選ぶ
- 同じ形のカードや過剰な装飾へ偏るのを避ける
- 文字、余白、操作状態、レスポンシブ表示を確認する
- 採用した構成やテーマをログへ残す
一方、バックエンドの処理、データベース設計、事業内容そのものの正しさを自動で保証するツールではありません。Hallmarkを入れれば何でも高品質になるのではなく、デザイン工程の判断材料と確認項目が増えると考えると分かりやすいです。
インストール前に必要なもの
今回の方法で必要なのは次の4つです。
| 必要なもの | 役割 | 確認コマンド |
|---|---|---|
| Node.js | npxを動かす | node --version |
| npm / npx | Hallmarkを取得する | npx --version |
| Git | テスト用プロジェクトと変更履歴を管理する | git --version |
| Codex | Hallmarkを読み、UIを作る | codex --version |
ターミナルで次を順番に実行します。
node --version
npx --version
git --version
codex --versionバージョン番号が表示されれば、次へ進めます。command not foundになったものがある場合は、先にその公式手順で導入してください。
Hallmarkは第三者が公開するスキルです。スキルはAIエージェントの作業方針へ影響するため、名前だけを見て常用環境へ入れず、公式リポジトリ、ライセンス、SKILL.md、インストール時の表示を確認してください。最初の検証にAPIキー、顧客情報、未公開データを使わないことも大切です。
HallmarkをCodexへインストールする手順
1. 公式READMEのInstall欄を確認する
HallmarkのREADMEには、共通のインストール方法として次のコマンドが掲載されています。
npx skills add nutlope/hallmark
HallmarkはMIT Licenseで公開されています。利用・改変・再配布が認められるライセンスですが、著作権表示とライセンス表示の条件があります。詳しくはHallmark公式LICENSEを確認してください。
2. 新しいGitリポジトリを作る
今回は普段のブログや制作物へいきなり入れず、空のテスト用フォルダで試しました。
mkdir hallmark-test
cd hallmark-test
git initこの状態なら、Hallmarkが追加したファイルをgit statusやgit diffで追いやすくなります。不要ならテスト用フォルダだけを片付けられます。
3. インストール対象を一覧で確認する
実際に追加する前に、--listでリポジトリ内のスキルを確認できます。
npx --yes skills add nutlope/hallmark --list今回の検証では、hallmarkというスキルが1件表示されました。
4. Hallmarkをプロジェクトへ追加する
対話形式で進める場合は、公式どおり次を実行します。
npx skills add nutlope/hallmark表示された対象エージェントからCodexを選び、個人全体ではなく、まず現在のプロジェクトを選びます。
この記事の再現テストでは、選択内容を固定するために次のコマンドを使いました。
npx --yes skills add nutlope/hallmark \
--skill hallmark \
--agent codex \
-y \
--copy--copyはスキルをプロジェクト内へコピーする指定です。対話画面や利用中のskills CLIのバージョンで選択肢が変わる可能性があるため、表示内容を読みながら進めてください。
今回のインストール完了画面では、skills CLI側のセキュリティ確認として「Gen Safe」「Socket 0 alerts」「Snyk Low Risk」と表示されました。これはCLIが表示した検査結果であり、筆者がコード全体の安全性を保証するものではありません。
5. 追加されたファイルを確認する
今回の環境では、Hallmarkが次の場所へコピーされました。
.agents/skills/hallmark/中にはSKILL.mdのほか、構造、テーマ、タイポグラフィ、テストなどの参照ファイルがありました。直下のreferencesには29項目、サブフォルダを含む参照ファイルは105個、Hallmarkスキル全体は約932KBでした。
ここで気づいたのは、公式READMEにあるCodexの手動配置例と、skills CLIが選んだ保存先が同じ表記ではなかったことです。
- 公式READMEの手動配置例：個人用
~/.codex/skills/hallmark/、プロジェクト用.codex/skills/hallmark/ - 今回の
skillsCLI完了表示：.agents/skills/hallmark/
失敗と決めつけてフォルダを移動せず、まず完了表示と次のコマンドで認識状態を確認します。
npx skills list
git statusskills CLIは複数エージェント向けの配置を仲介します。保存先は記事の文字列だけで判断せず、自分が使ったCLIの結果を優先して確認するのが安全です。
Hallmarkを実際に使ってUIを作る
インストールだけでは違いが分かりにくいため、実際に1ページ作りました。
今回の題材は、架空の家庭菜園記録サービス「TANE LOG」です。実在するサービス、利用者数、成果を示すものではありません。Hallmarkの流れとレスポンシブ表示を確認するためのオリジナル作例です。
Codexへは次のように依頼しました。
Hallmarkを使って、架空の家庭菜園記録サービス
「TANE LOG」のランディングページを作ってください。
Audience: 家庭菜園を始めたばかりの人
Use case: 今日の記録を無料で始める
Tone: calm editorialAudience、Use case、Toneを最初に書いたのは、Hallmarkがページを作る前にこの3点を確認するためです。質問へ一つずつ答えても進められますが、用途が決まっているなら最初の依頼に入れたほうが往復を減らせます。
今回は次の方向が選ばれました。
| 項目 | 選ばれた方向 |
|---|---|
| ページ構造 | Workbench |
| テーマ | Garden |
| ヒーロー | Split Diptych |
| 機能説明 | Annotated Screenshot |
| CTA | Sticky Bottom Bar |
| ナビゲーション | Newspaper Masthead |
| フッター | Mast-headed |
完成したファイルには、HTMLとCSSだけでなく、色や文字サイズをまとめたtokens.cssと、選択内容を記録する.hallmark/log.jsonも含まれました。あとから「なぜこの構成になったか」を追いやすい点は、単発の見た目生成との違いです。
大きな写真素材を使わず、文字、罫線、余白、入力例を中心にページの目的を伝える構成になりました。同じ形のカードを3枚並べるのではなく、記録と振り返りを左右で見せています。
PCからスマホまで7種類の幅で確認した結果
Hallmarkがコードを出しただけでは完成にしません。ブラウザで次の幅を確認しました。
- 320px
- 375px
- 390px
- 414px
- 768px
- 1280px
- 1920px
7種類すべてで横方向のはみ出しはなく、クリックできるラベルの不自然な折り返しもありませんでした。1280×800pxでは、ヒーローの要点と下部CTAが画面内に入りました。
スマホではPCの2列をそのまま縮小せず、縦1列へ組み替えています。カレンダーも横スクロールなしで確認できました。
下部の「無料で記録する」CTAも実際に押し、読み込み状態を経て記録を始められますへ変わることを確認しました。ブラウザのコンソールエラーは0件でした。
この結果は今回の短い架空ページでの確認です。Hallmarkを使ったすべてのサイトで、アクセシビリティや表示崩れが自動的になくなるという意味ではありません。
Hallmarkで使える4つの頼み方
公式サイトでは、通常のBuildに加えて、Audit、Redesign、Studyが紹介されています。
| 頼み方 | 向いている作業 | 依頼例 |
|---|---|---|
| Build | 新しいページを作る | Hallmarkを使って料金ページを作って |
| Audit | 既存画面の問題を調べる | hallmark audit このランディングページ |
| Redesign | 既存画面を作り直す | hallmark redesign このページ |
| Study | 参考画面の構造を学ぶ | hallmark study このスクリーンショット |
Studyで参考画像やURLを扱う場合も、他社のロゴ、文章、写真、独自UIをそのまま複製してよいとは限りません。構造や情報の優先順位を学ぶ用途と、公開物へ使える素材の権利は分けて確認します。
実際に試して分かった4つの注意点
1. 「Hallmarkを使う」と明記すると確認しやすい
デザイン系の依頼に自動で参照される場合もありますが、検証では「Hallmarkを使って」と明記しました。どのスキルを使う作業かが人にも分かり、ログを追いやすくなります。
2. Audience・Use case・Toneを先に決める
「おしゃれにして」だけでは、判断の基準がありません。誰が、何を始めるための画面で、どんな温度感にするかを3行で書くと、装飾ではなく用途から構成を選びやすくなります。
3. 公式の説明と配布ファイルに数字の差があった
2026年7月24日の確認では、Hallmark公式サイトに「57-gate check」という表記がありました。一方、実際にインストールした1.1.0のslop-test.mdには、事前の自己批評に加えて58項目を確認する説明がありました。
数字だけを記事の売り文句にせず、今回は手元へ入ったファイルの58項目を検証時点の基準として扱いました。公式サイトやREADMEの紹介文が配布ファイルより先または後に更新される可能性があるためです。
4. 最後はブラウザで操作する
デザインのチェック項目が増えても、実際の表示と操作を省略できません。最低でもPCと390px前後のスマホで、横はみ出し、見出し、ボタン、フォーカス、エラーを確認します。
Hallmarkの価値は「派手な画面を一発で出すこと」より、ページの目的、構造、テーマ、仕上げ確認を同じ作業へ入れやすくする点にありました。
更新・削除する方法
利用中のスキルを確認するには、次を使います。
npx skills list更新候補を確認するコマンドは次のとおりです。
npx skills check更新する場合は、変更内容を確認できる状態で実行します。
npx skills update不要になったスキルは、対象とスコープを確認して削除します。
npx skills remove hallmarkプロジェクト単位で試した場合は、削除前後にgit statusを見れば、どのファイルが変わったか確認できます。個人用へ追加した場合はほかのプロジェクトでも参照している可能性があるため、勢いで消さないでください。
まとめ：最初は新しいGitリポジトリで試す
今回の検証では、Hallmarkを使って架空の「TANE LOG」を作り、320〜1920pxの7画面幅で横はみ出し0件、CTAの状態変化、コンソールエラー0件を確認できました。
Codexをブログ運営全体でどう使っているかは、個人ブログを続けるためのCodex活用術にもまとめています。ほかのAIツールと実利用・未検証を分けて選びたい場合は、ChatGPT・Claude・Gemini比較も参考にしてください。
参考にした公式情報
本記事はHallmarkと提携した広告記事ではありません。公式情報の確認と、筆者の隔離環境で行った独自検証を分けて記載しています。
最終更新：2026年7月24日
コメント