LPD ヘルプ

はじめに

1. 登録して、届いた確認メールのリンクを開く
2. 「デザイン」一覧で「＋ Web（LP）」か「＋ 印刷物」を押す
3. テンプレートを選ぶ → 文言・写真・色を差し替える → 「公開」

登録は無料です。Free プランでデザイン 10 枚・公開 3 ページまで作れます（プランと上限）。

デザインを作る

テンプレートから

「＋ Web（LP）」を押すとギャラリーが開きます。上のタブで種類を切り替えます。

白紙から

Web は header / main / footer の骨だけの板から、印刷物は判型（A4 縦、B5 横、はがき、名刺など）を選んだ白紙から始まります。

イベント向けのテンプレート

「オフラインイベント（会場・QR つき）」と「イベントチラシ（会場・QR つき）」は、会場の地図・電話・日時・関連 Web の QR がプロジェクトから自動で入る前提で組んであります。

編集画面

キャンバスでできること

• クリックで選ぶ。⇧ で追加選択。何も無いところをドラッグで範囲選択
• ドラッグで動かす。角や辺を掴んで大きさを変える。他の要素の辺・中心にスナップします
• ダブルクリックで文字を書き換える。打つそばから反映されます。Esc かキャンバスの外を押して確定
• 並びの中のものは、掴むと並べ替えになります（縦・横に並べた箱の子）。⌥ を押しながら掴むと並びから外して座標で置けます
• スペースを押しながらドラッグで画面を動かす。⌘＋ホイールで拡大縮小
• «＋»（main の節と節のあいだに出る）から、その場所にセクションを差し込めます
• 右クリックで、選んでいる要素の設定が右に出ます

ツールパレット

選択（V）・フレーム（F）・テキスト（T）・長方形（R）・楕円（O）・線（L）・画像（M）・ボタン（B）・入力欄。道具を選んでキャンバスをクリックすると既定の大きさで置け、ドラッグすると大きさを決めて置けます。テキストは置いた直後にそのまま打てます。

右のインスペクタ

• 何も選んでいないとき：板（大きさ・背景・ファイル名）と、デザイン全体（配色・書体・スマホのメニュー・スナップ）
• 要素を選んだとき：文字・画像・位置と大きさ・並べ方・見た目・背景の画像・HTML にしたとき・意味づけ・整列
• 複数選んだとき：整列・均等配置・グループ化・塗り・不透明度

数値の欄は ↑↓ キーで動かせます。色は「@primary」のようなテーマの色か、「色を指定」で直接決められます。テーマの色を使っておくと、配色を差し替えたときにまとめて変わります。

保存

変更は 1.5 秒後に自動で保存されます（上の帯に「保存済み」と出ます）。⌘S で今すぐ保存。

セクションと共通パーツ

セクションを足す

左の「追加」タブから押すと、その板の main の末尾に足されます。「選んで下見する…」を使うと、選ぶたびにキャンバスに下見が出て、Enter で決められます。キャンバスの «＋» なら好きな場所に差し込めます。

種類：上下（ヘッダー・フッター）／ヒーロー 3 種／段組み（サブメニュー付き・2〜4 カラム）／内容（特長・お悩み・手順・お客様の声・メンバー・ギャラリー・料金表・料金プラン・時間割・FAQ・アクセス）／イベント（会場・地図／QR コード／公式サイト・SNS）／申し込み（帯・フォーム）。

ヘッダー・フッターの型

ヘッダーかフッターを選ぶと、右に「型」が出ます。ロゴ＋メニュー、ロゴ＋電話番号、3 列＋著作権表示、基本情報＋SNS（会員の情報が入る）など。型を選ぶと中身だけ入れ替わり、帯の色や貼り付きは残ります。

プロジェクト（ページの束）と共通パーツ

左の「ページ」タブで「プロジェクト」を押すと、未登録のページがひとつのプロジェクト（＝ひとつのサイト）にまとまります。ヘッダーを選んで「この帯をプロジェクトの全ページへ配る」を押すと、そのヘッダーが正本になり、全ページに同じものが配られます。メニューの文言と行き先は、ページタブの「メニュー（ヘッダー・フッター）」で直します。

ここでいう「プロジェクト」はページの束のことで、次の節の「プロジェクト（会場・イベント）」とは別の設定です。

プロジェクト（会場・イベント・関連 URL）

上のナビの「プロジェクト」から作ります。ここに入れた情報が、公開するときにページへ差し込まれます。

差し込み

要素には「差し込み」の設定があり（右のインスペクタの文字／画像の節）、公開・プレビュー・書き出しのときにプロジェクトや基本情報の値に置き換わります。キャンバス上は見本の文字のままです。

テンプレートの「会場・地図」「QR コード」「公式サイト・SNS」のセクションは、最初からこの設定が入っています。

基本情報と SNS

ナビの自分の名前 → 「基本情報」で、表示名・肩書・屋号・自己紹介・電話・公式サイト・アバターを。「URL 一覧」で公式サイトや SNS（X・Instagram・Facebook・YouTube・TikTok・LINE・Threads・note など）を最大 10 個。空欄は消えます。

公開

1. 右上の「公開」を押す
2. 出す板（PC 版など）と題を確かめ、URL の末尾（英小文字・数字・ハイフン、3〜40 字）を決める
3. プロジェクトが結びついていれば、会場や QR が差し込まれます
4. 「公開する」→ https://lpd.cracsome.com/p/あなたの名前/ の URL と、その QR が出ます

直したらもう一度「公開する」を押せば同じ URL で更新されます。「停止」で一時的に「準備中」の表示に、「取り下げ」で URL ごと消えます。何回見られたかも出ます。

公開ページは 1 枚の HTML（CSS 込み）で、Google Fonts と画像以外は外部に依存しません。スマホでは横並びのメニューがハンバーガーに畳まれます（畳み方は右のインスペクタの「スマホのメニュー」）。

他のサイトに埋め込む

公開ダイアログの各ページにある「埋め込み」を押すと、貼るだけのコードが出ます。WordPress の固定ページ、会社サイトの HTML など、他のドメインのページの中に置けます。

<iframe id="lpd-xxxx" src="https://lpd.cracsome.com/p/xxxx/" style="display:block;width:100%;min-height:60vh;border:0" scrolling="no" loading="lazy"></iframe>
<script>addEventListener("message",function(e){if(e.origin!=="https://lpd.cracsome.com"||!e.data||!e.data.lpdHeight)return;document.getElementById("lpd-xxxx").style.height=e.data.lpdHeight+"px"});</script>

• 幅は貼った場所いっぱいに広がり、その幅で組み直されます（狭ければスマホの見え方）
• 高さは中身に合わせて自動で伸びます。中にスクロールバーは出ません
• <script> を貼れない場所（一部のブログサービスなど）では、iframe の style に height:2000px のように高さを書いて、1 行目だけ貼ってください（中でスクロールします）
• 埋め込んで使うときは、右のインスペクタ「スマホのメニュー」の「スマホでは畳む」を切っておくと、つまみが変な位置に出ません

自分のドメインで配る

https://event.example.jp/ を開くとそのページが出る、という形にもできます。ドメインが cracsome.com と同じ Xserver アカウントにあることが条件です。

1. Xserver の「ドメイン設定」でそのドメインを追加し、無料 SSL を有効にする
2. そのドメインのドキュメントルート（/home/…/event.example.jp/public_html/）に、運営から渡す index.php と .htaccess の 2 枚を置く
3. 公開ダイアログの「別ドメイン」でドメイン名を入れて「結びつける」

www. あり／なしは同じ扱いです。ドメインが別のサーバにある場合は、次の ZIP を展開して置くか、埋め込みを使ってください。

書き出し

取り込み

Illustrator（SVG）から

Illustrator で「書き出し → SVG」したファイルを、上の「取り込み」から。長方形・楕円・線・文字・画像はそのまま要素に、パスやグラデーションは切り出した SVG 画像になり、Illustrator のレイヤー（グループ）はそのまま左のレイヤーになります。色はテーマにまとめられるので、あとから一括で変えられます。取り込んだものはそのまま公開・書き出しできます。

.ai ではなく SVG で書き出してください。.ai の中身は PDF で、文字が文字として残りません。

画像から

写真やスキャン画像を板いっぱいに敷いた 1 枚を作ります。板の大きさは画像の比から決まります（長辺 1587px まで、16:9 前後はスライド扱い）。

書体と配色の道具

上の「道具」から。

• フォントの組み合わせ：24 種のおすすめ（見出し × 本文）と、自分で組む欄。「このデザインに当てる」で、テーマの文字スタイルと要素の書体が役割ごとに置き換わります。Google Fonts はページに自動で読み込まれます
• 配色：12 のプリセット／ベース・メイン・サブ・アクセントの 4 役で決める／写真から色を取る／メインから調和（補色・類似・トライアドなど）を出す／スポイト（Chrome）。「このデザインに当てる」でテーマの色に流し込みます。文字色は地の上で読める側に自動で寄ります

どちらも 1 手の取り消しで戻ります。

ショートカット

プランと上限

画像は 1 枚 8MB まで（PNG・JPEG・GIF・WebP・SVG）。Pro の申し込みは準備中です。

よくある質問

確認メールが届かない

迷惑メールを確かめてください。no-reply@cracsome.com から届きます。

公開したページに会場や QR が出ない

プロジェクトがそのデザインに結びついているか、公開ダイアログの「プロジェクト」の欄で確かめてください。オンラインだけのイベントでは会場の節は出ません。

キャンバスの文字を書き換えても公開ページが変わらない

もう一度「公開する」を押してください。公開は押した時点の写しです。

スマホで文字が大きすぎる／小さすぎる

見出しは画面の幅に合わせて縮みます。スマホ用の板（390）があるテンプレートは、そちらを出す板に選ぶと細かく直せます。

要素を動かしても位置が戻る

縦・横に並べた箱の中では、位置は順番で決まります。掴むと並べ替えになり、⌥ を押しながら掴むと座標で置けます。

ヒラギノが Windows で違う書体になる

公開 HTML では Noto Sans JP を補いに読み込むので、Windows でも近い顔になります。

デザインを消したい

編集画面の「一覧」から。公開していたページは同時に停止されます。