【イチゴ/スイーツ】SWELLサイト型トップページ参考デザイン

この記事では、イチゴをモチーフにしたグルメ・スイーツ系ブログに使えるトップページデザインのアイディアをご紹介します。

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

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

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

各デザインの解説【イチゴ/スイーツ/グルメブログ】SWELL×Canva

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

ヘッダーロゴ

メインビジュアル

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

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

セクション見出し

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

アイキャッチ画像

他にもこんなデザイン

フルワイドブロック

---

カラー・フォント・素材の解説【イチゴ/スイーツ/グルメブログ】SWELL×Canva

カラーコード

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

・ベージュ　#F8F0EA
・レッド　　#D12507
・ピンク　 #E88278
・ホワイト　#FFFFFF

フォント

部分的にエフェクト→「スプライス」を使用しています。

使用素材

今回は「いちご」「いちご ケーキ」「水彩」「little girl」などで素材を検索してみました。


アイキャッチ画像で使用しているケーキの写真は、Canva pro版の背景リムーバで背景を消して使用しています。


無料版でも元々背景のない画像もあるので、お好きな素材を探して使ってみてくださいね。

【動画】Canvaでのデザイン作成手順｜イチゴ/スイーツ/グルメブログ

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

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

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

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

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

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

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

もふこさんによる「いちご」アイキャッチの作り方

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

メインビジュアルのページを別のタブで開いておいて、グループ化したタイトル文字をヘッダーロゴ作成画面にコピペすれば簡単にできあがります。

コピペ後にグループ化を解除して、サイズや配置を調整してくださいね。

もふこさんによる「いちご」ヘッダーロゴのつくりかた

テキストを中央に配置するときの便利な方法

動画の途中でもやっていますが、左側のグレーの目盛り枠をドラッグしながら引っ張ると、ガイド線が出せます。その線を出すとどこが中央なのか一目瞭然で合わせることができます。

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


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

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

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

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

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

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

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

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

まとめ｜SWELL×Canvaでつくるおしゃれなブログデザイン【イチゴ/スイーツ/グルメ】

「イチゴ/スイーツ」のブログデザインは参考になりましたか？



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

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

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

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