【ナビメニュー機能追加!】Canvaでオリジナルホームページ作成(ポートフォリオサイトを0から作成チュートリアル)

今回は、Canvaを使ってオリジナルのポートフォリオサイトを作ります。

Canvaはノンデザイナーの方でも簡単にデザインが作れるクリエイティブツールです。

Webデザインはもちろん、動画作成やHPも作ることができます。

今回は、

  • トップページ
  • プロフィール紹介ページ
  • メニュー
  • 料金
  • ポートフォリオページ
  • お問い合わせページ

を入れた1ページ完結型のサイトを作っていきます。

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)


Canva Pro 登録クーポンコード 45日間無料トライアル

解説動画:【ナビメニュー機能追加!】Canvaでオリジナルホームページ作成(ポートフォリオサイトを0から作成チュートリアル)

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

トップページ

ウェディングのフォトグラファーのサイトを作っていきます。

素材

検索窓に「ウェディング」で検索

写真に絞って写真を選択

サイズが合うように調整

文字を引き立たせる加工

素材

線と図形から「正方形」を選択

正方形のサイズを合わせる

正方形のカラーを「」に変更

右上アイコンから「透明度」を選択

程よいくらいに透明度を下げる

今回は37くらいに納めました!

文字を重ねる

テキスト」から「見出しを追加

サイトのタイトル

フォントを変更

使用したフォント
  • Amazing Magic…Dream Avenue
  • Wedding Photo…Afarsek Light
  • 日本語…セザンヌ

サイズを変更

ピンクのサジェストを活用すると真ん中に配置できます

線と図形を「すべて表示

縁のみの正方形を選択

サイズを調整

線が太い場合は、一度四角を小さくしてからサイズ調整のバーを伸ばすと線が細くなります!

カラーをに変更

文字を入れる

Canva初心者の方はまずこちらの動画で詳しく学びましょう♪

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

目次

プロフィール紹介ページ

ページを増やすときは

  • 下矢印アイコン→ボードの横にある「+ページを追加」から
  • 下の「+」をクリックしてページを増やす

どちらかで追加しましょう。

素材

フレームから「正円」を選択

フレームの中に写真をドラッグして入れ込む

表示位置を変えたいときはダブルクリックして調整して「完了」

文字を入れる

文字のフォントは1ページ目で使ったものを使用したいので、使いたいフォントの文字を選択して⌘+C→ ⌘+Vでコピペ

テキストの色は「」に変更して文字を変更

文字の配置を揃えたいときは「配置」から変更

文字の位置を揃えてから、画像とも揃えて「グループ化

中心に来るように位置を変更

下の方にイラストを入れる

素材

ウェディング系のイラストを入れる

2022年最新!Canvaの基礎を学びたい方はこちらの動画をチェック♪

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)


Canva Pro 登録クーポンコード 45日間無料トライアル

メニューページ

背景をつけます。

素材

線と図形から「正方形」を選択

サイズとカラーを変更

カラーはF8F8F8

フレームを選択

写真を入れる

見出しの下にノーマルを入れる

線の太さを調整

写真に立体感をつける

素材から「正円」を選択

カラーを変更

背景より少し濃いめのグレーを使います!

写真と近い大きさに調整

写真を右クリック「最前面へ移動

写真、文字を選択して2つコピペ。

Option(Alt)+Shiftで並行に移動できます!

Canvaでできること、まとめました!

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

料金ページ

各メニューの料金表をつくります。

テキストを入力

スペース」アイコンで2行になったテキストの行間隔を調節

少し狭くします

塗りなしの四角を選択して文字を囲む

図形に対して真ん中に来るように調整

同じように2つ作る

オシャレな水彩デザインもできるよ!一緒に作ってみよう!

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)


Canva Pro 登録クーポンコード 45日間無料トライアル

ポートフォリオページ

3ページに渡って作成します。

背景はメニューページと同じものを使用します。

写真の下に説明を入れても良いと思います!

ページを複製して追加していきます

違う写真を入れ込む

Canvaならスマホでもデザイン作成できちゃう♪

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

お問い合わせページ

背景に写真使います。

素材」から写真を選ぶ

サイズを合わせる

四角を中心に置くカラーは

四角に中に文字を入力

お問い合わせフォームのリンクをつけます。

Canvaの中でお問い合わせフォームを作ることはまだできないので、外部のフォームにリンクさせる必要があります。

文字を選択

リンクアイコンを選択

URLをペースト

ステッカー風のデザインにも挑戦してみよう♪

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)


Canva Pro 登録クーポンコード 45日間無料トライアル

ナビゲーション

新しいアップデートでナビゲーションが追加できるようになりました。

ナビゲーションあり」を選択

上の方にナビゲーションを入れることができます。

ナビ名を整えるには

下にページを並べて各ページの3つ丸アイコンをクリック

「ページタイトルを追加」からページ名を入力

Canvaで動画編集してみたい方はこちらの動画をチェック!

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

Webサイトを公開

Webサイトとして公開

ナビゲーションの有無を選択

ドメインを選択

続行

URLやファビコンの変更

Webサイトの説明はSEOで大切な部分になります。キーワードを入れて入力しましょう!

発行

これでWebサイトの完成です!

まとめ

無料でこれだけのサイトが作れるのはすごいことです!

ぜひ、CanvaでのHP作成に挑戦してみくださいね♪

Canva Proは、通常30日間無料でトライアルすることが出来ますがこちらのリンクから登録すると45日間無料でお試しが可能です。
(Canvaに登録済みでもOK)


Canva Pro 登録クーポンコード 45日間無料トライアル

基礎からCanvaを知りたい方から収益化させたい方まで受講できる、日本初Canva公式アンバサダーが教える・ゼロから始めるCanva Webデザイン講座もご用意しております!

▶︎0から始めるCanva Webデザイン講座

解説動画:【ナビメニュー機能追加!】Canvaでオリジナルホームページ作成(ポートフォリオサイトを0から作成チュートリアル)

よかったらシェアしてね!

この記事を書いた人

目次
閉じる