html-ppt-zhangzara-long-table について
飲食、コミュニティ、ライフスタイル関連の企画向けに、温かみのあるエディトリアルなプレゼンを作るHTMLスライドスキルです。統一されたデザインシステムと、付属テンプレートの編集方法を備えています。
主な機能
- 01単体で使えるHTMLスライドテンプレート
- 02温かみのあるクリーム色と錆赤の配色
- 03太字とイタリックのタイポグラフィ
- 04スライドの編集・追加ガイド
- 05デザイン維持のルール
活用シーン
- 01サパークラブやディナーシリーズの紹介
- 02小規模レストランやスタジオイベントの資料作成
- 03会員募集の提案資料作成
- 04ライフスタイルやワインブランドのプレゼン作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ nexu-io/ open-design --skill html-ppt-zhangzara-long-tableインストール後、Claude Code で/html-ppt-zhangzara-long-tableを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
example.htmlLICENSEtemplate.json詳細
Long Table
温かみのあるクリーム色と錆赤を基調としたサパークラブ風の美学。大胆な大文字のグロテスク体の見出し、イタリック体の Fraunces、ピル型の輪郭線ボタンが特徴です。
タイポグラフィ、パレット、装飾システム、スライドの語彙を一体として調整した、単体で動作する HTML デッキです。テンプレート間でレイアウトを混在させるとシステムが崩れるため、このテンプレート内で統一してください。
概要
- 配色: ライト
- フォーマル度: 中
- 情報密度: 中
- デモのスライド数: 8
おすすめの用途
温かみのある親密な雰囲気を持つ、モダンなホスピタリティ/コミュニティブランドに適しています。サパークラブ、ディナーシリーズ、小規模レストラン、クリエイティブスタジオのイベント、会員募集の提案、ライフスタイルやワインのブランドなどが対象です。温かみのあるアクセントカラーを一色使い、イタリック体と太字を組み合わせたタイポグラフィ、ソーシャルメディアを意識したモダンなエディトリアル調の表現を求めるデッキにも最適です。
避けるべき用途
企業向けの洗練された印象、技術的な高密度情報、または冷たくミニマルな雰囲気が必要なデッキには適していません。錆赤のパレットと太字・イタリック体の組み合わせは、意図的に温かみのある、人を中心としたデザインです。
ワークフロー
example.htmlを複製し、作業ファイルとしてユーザーのワークスペースに配置します。- プレースホルダーの内容を置き換え、ユーザーの実際の見出し、本文、数値、名前、日付、セクションラベルを入れます。画像のプレースホルダーを差し替える際は、既存の寸法に合わせます。
- デザインシステムを維持します。 フォントの変更、パレットの色替え、レイアウトグリッドの再構成、装飾要素(コーナーブラケット、紙の質感、幾何学図形、イラスト入り SVG)の削除はしないでください。これらはデザインのアイデンティティの一部です。
- レイアウトを複製してデッキの長さを調整します。 デモに収まりきらないコンテンツがある場合は、最も適した既存レイアウトのスライドを複製します。コンテンツが少ない場合は、末尾からスライドを削除します。ページ番号のラベルも更新してください。
- 不足しているレイアウトのデザイン: テンプレートにないレイアウトが必要な場合は、同じフォント、パレット、装飾表現、余白のリズム、コンポーネントの文法を使って一からデザインします。別のテンプレートに切り替えてはいけません。
- 同梱されているナビゲーションランタイムをそのまま維持します。 デッキに
assets/deck-stage.jsまたはインラインのキーボードハンドラーが含まれている場合は、そのまま残してください。
出力仕様
<artifact> タグで囲んで出力します:
<artifact identifier="zhangzara-long-table" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
ソースとライセンス
MIT ライセンスの上流プロジェクト
zarazhangrui/beautiful-html-templates からベンダーとして取り込まれています。
元の著作権表示を含む上流の MIT ライセンス全文は、このスキル内の
LICENSE に収録されています。example.html、template.json、またはベンダーとして取り込んだ assets/ ランタイムのコピーを再配布する際は、ライセンスも併せて再配布する必要があります。上流メタデータのスナップショットについては template.json を参照してください。