【リボン/かわいい/ギフト】SWELLサイト型トップページ参考デザイン

この記事では、リボンをモチーフにしたガーリーなかわいい系ブログに使えるトップページデザインのアイディアをご紹介します。

ギフト系ブログにもおすすめです。

トップページ全体のデザインイメージ

※画像読み込みに数秒程度かかることがあります。しばらくお待ちください。

このデザインの作り方は、本編の動画で解説しています。

各デザインの解説｜SWELL×Canva【リボン/かわいい/ギフトブログ】

パーツごとに、画像の推奨サイズや素材の検索方法などを解説していきます。

ヘッダーロゴ

メインビジュアル

メインビジュアルの高さはお好みで調整してください。

画像サイズにより読み込み速度も変わるので、トップページをカスタマイズしたあとはサイトスピード（Page Speed Insigt）を確認してみてください。

セクション見出し

見出しタイトルはお好みで

アイキャッチ画像

こんなデザインも

フルワイドブロック

---

---

カラー・フォント・素材の解説｜SWELL×Canva【リボン/かわいい/ギフト】

この記事で使っているフォントや素材は、Canva内の検索窓に上記をコピーして入れると検索できます。

Canvaを使ったことがない方はまずこちらから！

カラーコード

▼カラーコードのコピーはこちらをご利用ください。

・ベージュ　#DDD8D4
・ブラウン　#B69388
・アイボリー　#F8EFEF
・ライトグレー #F3F3F3

フォント

▼フォントのコピーはこちらをご利用ください。

Pacifico

使用素材

「リボン」「ドット」で検索すると素材がでてきます。

お好きな素材を使ってみてくださいね。

【動画】Canvaでのデザイン作成手順｜リボン/かわいい/ギフトブログ

ここからは、Canvaでのデザイン作成の手順を動画で解説します。(音声はありません)

画面が小さくて見づらい場合は、全画面+スマホを横画面にして見てみてください。

SWELLメインビジュアルの作成手順動画【Canva】

カラーコードやフォント名はこの記事内のテキスト部分をコピーして検索窓に入力してください。

もふこさんによる「リボン」メインビジュアルの作り方

SWELLアイキャッチ画像の作成手順動画【Canva】

ひとつめに紹介したアイキャッチ画像の作り方を解説した動画です。

もふこさんによる「リボン」アイキャッチ の作り方

SWELLヘッダーロゴの作成手順動画【Canva】

メインビジュアルのページからコピーして、リボンの素材を飾りとしてあしらっています。

リボンを２つ繋げるのは少し難しいかもしれませんが、画面を拡大しながらやってみてください。うまくくっつかなくてもテキストで隠せばOKです。

もふこさんによる「リボン」ヘッダーロゴの作り方

フルワイドブロック用のセクション見出しもヘッダーロゴと同じ要領で作れます。

当サイトでは、デザインをよりクオリティの高いものにするために、Canva pro版の素材や機能も一部使用しています。


もちろん無料版でも素敵な素材がたくさんありますが、おしゃれなブログを目指すならCanva pro版にするとクオリティが断然アップします。

ブログデザインのご使用にあたって

当サイトの記事でご紹介しているデザインは、そのまま真似してOKです。（当サイトのトップページ以外OKです！）

でもせっかくなので、あなたのブログの世界観を出したオリジナルデザインへのアレンジも挑戦してみてください。自分のブログに愛着がわきますよ。

当サイトはリンクフリーです

当サイトのリンクは許可なく掲載いただけます。

当サイトのデザインを参考にされたブログ内で、「モフデザイン-mofu design-」をなるべくご紹介いただけると嬉しいです。

参考にしていただいたブロガーさんをこちらで紹介しています

まとめ｜SWELL×Canvaでつくるおしゃれなブログデザイン【リボン/ガーリー/ギフト】

「リボン/ギフト」のブログデザインは参考になりましたか？


お好きなようにアレンジしていただき、素敵なブログデザインを作ってみてくださいね。

今後ともワクワクするデザインを提供していきたいと思います！参考になれば嬉しいです。

SWELLのサイト型カスタマイズまとめ記事はこちらから

\ Canvaの使い方解説はYouTubeから /