【保存版】理想の「手帳デコ」ロードマップ｜カバーブロックからAIデザインまで徹底解説

理想の「手帳デコ」ロードマップ
1. STEP 3：【こだわり派】AIに合体を頼む
  1. 実録！「壁打ち」で理想に近づける

理想の「手帳デコ」ロードマップ

お気に入りの素材を並べる楽しさを。🩷
直感的なデコからAIを使ったプロ級の重ね技まで、一気に解説します。

STEP 1：お気に入りの素材をコピー

🔗 ナチュラル素材集 / 🔗 羊皮紙・和紙集

STEP 2：土台（カバーブロック）を置く

🔗 カバーブロックの基本と背景色の変え方

STEP 2.5

【直感派】カバーブロックにペタペタ貼る

コードがわからなくても大丈夫！カバーブロックの中に「カスタムHTML」ブロックを複数追加して、素材を貼り付けるだけ。

コツ1：ブロック設定の「配置」で右寄せ・左寄せを選んでずらす。
コツ2：「スペーサー」ブロックを間に入れて、高さのバランスをとる。

※これだけで、スマホでも崩れにくい「手帳風デコ」が楽しめます！

STEP 3：【こだわり派】AIに合体を頼む

「もっと複雑に重ねたい！」「絶妙な角度でずらしたい！」という時は、Geminiにこのプロンプトを送ってみてください。

📋 Geminiへの魔法のプロンプト

下記の2つの素材コードを組み合わせて、スマホで綺麗に見える「1枚の合体デザイン」としてコードを書き直してください。

❶ 背面素材：（コードを貼る）
❷ 前面素材：（コードを貼る）

【お願い】素材がバラバラに並ばないよう、position:absolute等を使って、前面素材が背面素材の中央に重なるように1つのdiv内にまとめてください。

実録！「壁打ち」で理想に近づける

「壁打ち（やり取り）」を繰り返すことで、
理想のずらし配置が完成します。🩷

一発で完璧を目指さなくて大丈夫。
AIと楽しくおしゃべりしながら、あなただけの世界を作ってください。

ご利用規約（免責事項）

本素材（コード）は、個人・商用を問わず無料でご利用いただけます。
著作権は放棄しておりません。コードの再配布、販売、自作発言はご遠慮ください。
動作確認はしておりますが、お使いの環境によりデザインが崩れる場合があります。本素材の使用によって生じたトラブルや不具合について、当ブログは一切の責任を負いかねます。
個別のカスタマイズ方法や不具合に関するサポートは行っておりません。