【レトロカラー】SWELLサイト型トップページ参考デザイン

この記事では、レトロカラーを使用したかわいいトップページデザインのアイディアをご紹介します。

このデザインはすべてCanvaの無料素材・無料機能で作ることができます。

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

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

\ ほかのデザインはこちらから探せます /

各デザインの解説｜SWELL×Canva【レトロカラーブログ】

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

ヘッダーロゴ

ヘッダーの背景色とロゴ画像の背景色を同じにすることで、背景透過保存(Canvapro版の機能)にしなくても背景の色が浮かずに使うことができます。

無料ユーザーの方はお試しください。

メインビジュアル

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

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

セクション見出し

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

英文フォント・・・IM Fell English SC
和文フォント・・・Kaisei Tokumin

アイキャッチ画像

「レトロカラーがおしゃれ」の部分は、エフェクト→湾曲させる→レベル20に設定しています。

他にもこんなデザイン

フォントは「オススメ」の部分のみNotoSansJP（太さはBlack）を使用しています。

フルワイドブロック

カラー・フォント・素材の解説｜SWELL×Canva【レトロデザイン】

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

カラーコード

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

・レッド　　 #CD0B11
・水色　　　#ADD4E7
・ベージュ　#EFEFE9

フォント

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

鉄瓶ゴシック

Kaisei Tokumin

Noto Sans JP

IM Fell English SC

使用素材

使用している四角形は、下図のように角に丸みをつけています。お好みで調整してやってみてください。角の丸みの調整はフォント選択の左隣、三本線のマークからできます。

メインビジュアルの四角形の上には文字を透かしとして入れています。そんなに難しくなくおしゃれ見えするのでやってみてくださいね！

レトロカラーブログのCanvaサイト型テンプレート配布中！

この記事のデザインはCanvaで真似して作っていただければ無料で作れるようになっています。

ですが、イチから作るのはムリ！大変！という方に向けて、有料にはなりますが「サクッと作れるCanvaテンプレートセット」を用意しました。

内容はこちら

1. PC用メインビジュアルテンプレート(1600×900px)
2. スマホ用メインビジュアルテンプレート(960×800px)
3. アイキャッチテンプレート2種(1200×630px)
4. ヘッダーロゴテンプレート(1600×360px)
5. セクション見出し2種(1000×300px)

使い方はこちら

▼下記のnote記事内のテンプレートリンクからご自由にデザインの編集・作成ができます。詳しい説明はnote記事本文にてご覧ください。

noteの有料記事購入で支払い完了です。そのほかに費用はかかりません。

\今だけRTで割引中 2,980円→1,980円に!/

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

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

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

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

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

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

また、掲載して頂いた場合や、デザインを参考にして作ってみたよ！という場合はよかったらぜひ教えてください。



X(Twitter)にてメンション（@mofudesign_c）付きでご紹介いただけたら、私からお返事に伺い引用RTでブログをご紹介させていただきます。



2023年8月に新しくアカウントを作りました。ブログ読者さんが気軽に質問や交流できるアカウントです。
フォローもご自由にどうぞ!

˗ˏˋ お気軽にリプください    ˎˊ˗

ꕤブログカスタマイズの疑問
ꕤCanvaについての質問
ꕤブログのご感想
ꕤデザインリクエスト
ꕤデザインについてポストしてほしいこと

こちらの固定ポストにリプいただければご質問にリプや引用でお答えします✎𓈒𓂂𓏸♥

☟画像タップで詳細がみれます pic.twitter.com/QozBrZMsDR

— モフデザイン│SWELL×Canvaでつくるおしゃれなブログデザイン (@mofudesign_c) August 26, 2023

あなたのブログを紹介させてください！

この記事のデザインアイディアを参考にしてくださった方のブログを当サイト内で紹介させてください♬

以下の5点をもふこ宛にブログ掲載依頼フォームまたは X(Twitter)のDMまでご連絡ください。

該当の記事内もしくはリンク集として掲載します。

皆さんのブログをこちらでご紹介しています 

まとめ｜SWELL×Canvaでつくるおしゃれなブログデザイン【レトロカラー】

「レトロカラー」のブログデザインは参考になりましたか？


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

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

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

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