【ロードバイク】SWELLサイト型トップページ参考デザイン

2025年4月1日

当ページは広告が含まれているリンクがあります。

このサイト mofu-designは

Canva公式クリエイターのもふこです

この記事では、ロードバイク/自転車をテーマにしたトップページデザインのアイディアをご紹介します。

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

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

デザイン難易度
レベル3

やさしい

むずかしい

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

一部、Canvapro版の背景透過機能が必要ですが無料ユーザーの方は一般の背景除去アプリ等を使用して背景除去も可能です。

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

Canvaでブログアイキャッチ等の公式テンプレを作ってます。
クリエイターページのフォローをしていただけるととっても励みになります！

各デザインの解説｜SWELL×Canva【ロードバイクブログ】

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

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

可能であればCanvaproの背景透過や、一般の背景除去アプリ等を使用するとさらに自然にきれいに作ることができます。

もふこ

Canvaproは30日間無料トライアルもあるので気軽に試してみてくださいね。
快適さがケタ違いでデザイン作成がとても楽しくなりますよ。

画像サイズ・・・

【PC】横幅 1600 × 高さ900px

【スマホ・タブレット】
横幅 960 × 高さ800px
素材の検索方法・・・「自転車」「ロードバイク」など

その他、円形素材や図形を周りに配置しています。

ご自身で撮ったオリジナルの写真を使うとさらに良いです。

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

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

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

画像サイズ・・・
横幅1200 × 高さ630px
使用フォント

英文フォント・・・Oswald
和文フォント・・・コーポレート・ロゴ
素材の検索方法・・・
「自転車」「道路」など

図形（長方形・円）を使用しています。

2枚目のアイキャッチの下半分のなみなみは「シェイプ」で出てきます。

カラーコード・・・#dcdcdc
上下の境界線・・・上下ともに波 [ 高さレベル 5 ]

イメージ画像では白い背景を挟んで2つ配置しています。

使用フォント

英文フォント・・・Oswald
和文フォント・・・コーポレート・ロゴ
使用カラー

・ライトグリーン　#7bd143
・ブラック　　　 #222222
素材の検索方法

「自転車」「ロードバイク」「道路」など

その他あしらいは「円形」「シェイプ」

図形の円形と長方形（角を丸くする）を使用しています。