IT企業就職・フリーランス

【凄く簡単】プロのようにウェブサイトのデザイン編集などができるデザインプラットフォーム Canva

最近 ウェブサイトや履歴書を作成するために偶然海外の知人から紹介されたデザインプラットフォームの Canva が使い勝手が良く素晴らしかったので紹介いたします。

作成の最中にはレイアウトなどWIXなどにあるようなカーソルを動かすだけで、自由に変更できるため大変使いやすいのです。

日本で浸透しているデザインプラットフォームかわかりませんが、海外では結構ウェブサイトや履歴書を作成するにも使われているようです。

以前の白黒形式の履歴書は古臭いようです。少し色味があったりデザイン性が高い履歴書が今時となっているようです。

resume
履歴書テンプレート

履歴書で使ったものの、それ以外のウェブサイトにもデザインを使用するすべてのことに使えるようで、今後もCanvaを使っていきたいです。

Canvaの詳細はこちら

ウェブサイト制作等をする私にとっては画像の処理等もするため大変重宝しそうです。

ウェブサイトデザインなど一人で作成するなら問題ないですが、上司に見せて変更を加えてもらったり、チームで作成するには、複数で編集出来るウェブサイトデザインプラットフォームなどがあると大変便利です。

素晴らしいウェブサイトなどのコンテンツをチームで共同制作するために必要なすべてが提供される Canva Pro

いったん登録するだけで、ウェブサイトの可能性は無限!

1億件以上のプレミアムストック写真、動画、オーディオ、グラフィックにいつでも、どこからでも、5までのチーム内の誰もが、アクセスして使用できます。

ウェブサイト制作するにもおススメ! おしゃれなウェブサイトデザインをホームページテンプレートで簡単に作成!

プロのウェブサイトデザイナーが作成したオリジナルテンプレートが多数用意されており、数クリックするだけで、自由にカスタマイズ出来、あなただけのウェブサイトデザインを作成できます。

design
ウェブサイト、HPテンプレート

デザインプラットフォーム Canva Pro の特徴

チームで協力してより優れたウェブサイトデザインなどを作成。
プレミアムツールとコンテンツを無制限で利用でき、プロ並みのウェブサイトデザインを簡単に作成できます。

  • ブランドキットでブランドの一貫性を維持

フォント、ロゴ、色をアップロードしてブランドキットを設定し、すべてのテンプレートに適用すれば、ブランドの一貫性を保つことができます。

  • ワンクリックで背景を削除する背景リムーバ

複雑なレイヤーはなし。ワンクリックで、ウェブサイトなどの画像の背景を消すことができます。

ウェブサイト画像の編集にひと苦労している私にとっては大変ありがたいです。

  • マジックリサイズでウェブサイトなどのデザインができたら簡単にサイズ変更

ウェブサイトなどのデザインが完成したら、正しいフォーマットとサイズにマジックリサイズを使って簡単に変更することができます。ソーシャルプラットフォームや印刷に最適です。

  • ウェブサイトなどのコンテンツプランナーで投稿を事前にスケジュール

事前にソーシャルコンテンツを読み込み、Facebook、LinkedInなどのウェブサイトなどのプラットフォームに投稿したい正確な時刻を設定します。

無料の機能に加えて、Canva Pro は以下をご利用いただけます。

  • 5まで利用可
  • 常に新しいウェブサイトなどのデザインが追加され、61万点以上のプレミアムテンプレートと無料テンプレート
  • 1億点を超えるプレミアムストック写真、動画、グラフィック、オーディオ
  • 8つのプラットフォームにソーシャルメディアコンテンツをスケジュール
  • ウェブサイトなどのデザインのサイズをマジックリサイズで好きなだけ変更
  • ウェブサイトなどの写真背景を瞬時に背景リムーバーで削除
  • ダウンロードの種類を透過背景のデザインをダウンロードしてカスタマイズ
  • 最大100組のブランドキットを使用して、ロゴ、ブランドやキャンペーンのカラー、フォントを簡単に保存&適用
  • ウェブサイトなどのデザインをチームが使用するテンプレートとして保存
  • 100GBのクラウドストレージ(無料は5GB)
  • 24時間365日のサポート(無料はなし)

team work

私がCanva Proに加入していた際に、Proだと無料で取得出来る上記の画像で画像編集してみました。
その他フリー素材画像が高素材で取得するには

透過背景のデザインでダウンロードすると、白抜きされた画像でダウンロードしてくれるようで、ウェブサイト制作などに助かります。

Canva Proでは、リアルタイム編集で共同作業を行い、フィードバック、コメントを追加したり、誰とでもデザインを共有したりできます。
こんなウェブサイトなどプラットフォームをお待ちしている作業者は多いでしょう。

無料でCanvaはいつでも誰でもウェブサイトなどの制作に自由に使えます。
でも Canva Pro や Canva for Enterprise にアップグレードして、プレミアムツールとコンテンツにアクセスすると、下記のようなメリットが得られます。

様々な企業、国、部門からチームを招集

1か所でどこからでもあらゆるものをデザイン

すぐに使えるテンプレート—ゼロからデザインする必要なし

リアルタイムのコラボレーション、コメント、承認

プロフェッショナルな誰でも使えるテンプレートとドラッグ&ドロップツール

Canva Proの価格

  • 年払いの場合:¥12,000

年額プランでは¥500/年(1人あたりのチームメンバー)

  • 月払いの場合:¥1,500

月額プランでは¥800/月(1人あたりのチームメンバー)

支払い状況は設定マークから以下の画像の部分で確認可能です。

payment info
支払いチェック

またCanva Proを無料で30日間お試しいただけます。

その際Canva Proのアカウントを有効化するには、クレジットカード情報を入力していただく必要があります。

いつでもトライアル期間中はキャンセルでき、請求は発生しません。

最大5人までどちらでもご利用いただけます。

デスクトップアプリ
デスクトップアプリもあり大変使いやすいです。

Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始!

ウェブサイトなどのデザインプラットフォームCanvaから新機能が登場

Canvaから新機能にはウェブサイトの作成に関わる新機能もあるのです。

Canva の六つの新機能について

「Canva Webサイト」の強みである600種類以上のウェブサイトのデザインテンプレート
  • ウェブサイトのコーディング不要でレスポンシブ対応
  • ウェブサイトのhtmlなどのコーディング知識不要! ウェブサイトのメニューも自動生成でPC、スマホのレイアウトに対応!
  • ウェブサイトの独自ドメイン(Pro)で無料ドメインも使える
  • その他のウェブサイトの便利機能
  • ウェブサイトアナリティクス
  • ウェブサイトのページ内、外部サイトへリンク
「Canva Docs」の強み
  • イラスト、グラフ、写真などを入れて綺麗な資料が作れる!
  • CanvaデザインをDocsの中に埋め込んでそのままプレビューできる!
  • ボタン1つでCanva Docsで作った資料をプレゼンに変換できる!
動画編集機能の強み
    • トランジション
    • 背景除去(Pro)
    • 色味をフィルター機能で調整
    • その他動画編集の便利機能
プレゼンテーションの新機能

リモコンにスマホをする機能でマジックショートカットの追加!

「ホワイトボード」で便利な機能
  • 2通りのホワイトボードの作り方があります。
  • 図形を使ったフローチャート
「Canvaプリント」で印刷注文
  • 「Canvaプリント」で注文
  • 「Canvaプリント」で印刷注文できる商品をご紹介

印刷注文1件につき1本の木を植えているようなので、地球に貢献出来ますね。

「Canvaプリント」のサイズなどの詳細はこちら

https://www.canva.com/ja_jp/print/what-we-print/

オリジナルホームページやウェブサイト、ポートフォリオサイトを作成できるツールはたくさんある中、Canvaでウェブサイトを作ると様々なシチュエーションで使える便利な機能やメリットがあります。

☑︎すぐにウェブサイトの無料ドメインを取得して公開できる
☑︎プライベート設定にもパスワードでできる
☑︎簡単にウェブサイトのデザインをドラッグ&ドロップで作成できる
☑︎自動でレスポンシブ対応にウェブサイトをできる
☑︎ウェブサイト分析がインサイト機能でできる

Canvaでウェブサイトを早速作ってみよう!

誰でも簡単に以下の8つのステップを踏むことで、ホームページやウェブサイトを作成できます。ここでは、順番にそれぞれのステップを解説します。

テンプレートを選択
②ウェブサイトのテンプレートのページを差し替え
③ウェブサイトのページをリサイズ
④ウェブサイトのテキストや素材などを編集
リンクを追加
デザインをプレビューで最終確認
メニューバーを設定
ウェブサイトを公開

①ウェブサイトのテンプレートを選択

「ウェブサイト」とCanvaのトップ画面にある検索窓に入力して、ウェブサイトテンプレートの一覧を開きます。

テンプレートを選択

プレビューでデザインを確認
プレビューでウェブサイトのデザインを確認
テンプレートカスタマイズ
ウェブサイトのテンプレートカスタマイズ

お好みのウェブサイトのテンプレートを一覧から選んで、エディター(編集画面)を開きます。

 

②ウェブサイトのテンプレートページを差し替え

複数のページによってウェブサイトのテンプレートは、構成されています。

気に入ったウェブサイトのデザインが他のテンプレートにあるページにあれば、現在のテンプレートのページと差し替えることができます。例えば、全体のデザインとして、画像にあるインテリア系ウェブサイトのテンプレートを使いたいとします。

ただウェブサイトのテンプレートの最後にある「お問い合わせ」ページがしっくりこないときは、他のウェブサイトのテンプレートにあるお問い合わせページのデザインと差し替えることができます。

他のウェブサイトのデザインとページを差し替えるときは、他のウェブサイトのデザインのページを差し替えたい現在のページを選択したままクリックします。「テンプレートを新しいページとして追加しますか?」というポップアップが表示されます。「現在のページと差し替える」をクリックするだけで、差し替えが完了です。

差し替えるのではなく、全体のウェブサイトのデザインの途中に差し込みたい場合は、「新しいページとして追加」を先ほどのポップアップで選択してください。

 

③ウェブサイトのページをリサイズ

各ウェブサイトのページの長さを調整します。上下に動くスライド式のつまみがページの下にはあります。このつまみをスライドし、それぞれのウェブサイトのページの長さをリサイズしてください。

 

④ウェブサイトのテキストや素材などを編集

テンプレートの中のウェブサイトのテキストや素材を編集します。

お手持ちの写真をアップロードして使うことも、エディターの[素材]からお好みの写真を使うことも、ウェブサイトのテンプレートに使われている写真を変えたいとき、できます。お手持ちのデザインとロゴを差し替えることもお忘れずに。

 

⑤ウェブサイトのリンクを追加

リンク設定リンク設定

遷移させたいリンクを追加します。リンクを追加するときは、画面左上にあるリンクアイコンをクリックして、URLをテキストボックスに入力します。

また、ウェブサイトのテンプレート内の違うページに遷移させたいときは、先ほどのリンクアイコンで「この文書のページ」の中から遷移させたいウェブサイトのページ先を選び、他のウェブサイトのページに遷移させることができます。

 

プレビューでウェブサイトのデザインを最終確認

プレビュー画面でウェブサイトのデザインが完成したあと、デザインを確認します。画面右上「プレビュー」ボタンをクリックし、プレビュー画面を開きます。
ウェブサイトのデスクトップだけでなくプレビュー画面では、スマホでの見え方も確認できます。

プレビューでデザインを確認
プレビューでウェブサイトのスマホデザインも確認

ウェブサイトのデザインがスマホのプレビュー画面で崩れているときは、レスポンシブに設定します。
ウェブサイトのプレビュー画面の左上の「モバイルでサイズを変更」のチェックボックスにチェックを入れてください。スマホ画面にあわせてウェブサイトのデザインがこれで整います。

 

⑦ウェブサイトのメニューバーを設定

canva メニューバー表示方法

ウェブサイトの「メニューバー」をウェブサイトの上部に表示させたいときは、プレビュー画面の上にある「ナビゲーションなし」を「ナビゲーションあり」に変更してください。

canva メニューバー表示方法ナビゲーションはウェブサイトのメニューバーのことです。ただ、メニューバーを表示させることが、それぞれのページにタイトルを追加していないと、できません。
エディターの下部にある「▿

各ウェブサイトのページの下に書かれてある番号をクリックすると、タイトルを入力できます。
ここでメニューバーに表示させたい商品、料金プラン、お問い合わせなどのテキストを入力してください。

ウェブサイトを公開

ウェブサイトをデザインが完成したら公開しましょう。画面右上の「Webサイトとして公開」をクリック。
ナビゲーションの有無を「モバイルでサイズを変更」にチェックを入れて、ウェブサイトの確認します。

無料ドメインでウェブサイトをCanvaでは公開できるため、「無料のドメイン」を選択します。
ウェブサイトの有料のドメインを購入、またはすでにお持ちのドメインの設定をしたい方はここで選ぶこともできます。

ドメイン設定
ウェブサイトのドメイン設定

※ベーター版なため一部表示されない場合もあります。

設定の確認を次のページで行います。細かくはURLは無料ドメインなため設定できませんが、自由な文字列をmy.canva.site以降はカスタマイズできるので、入力してください。さらにウェブサイトのファビコン、ブラウザのタブに表示される文言、SEOで欠かせないウェブサイトの説明文もここで入力できます。

「パスワード保護を有効にする」にウェブサイトを限定公開したいときは、チェックを入れてください。
「発行」ボタンを最後にクリックするとウェブサイト公開の完了! いつでもウェブサイトを公開したあとは、デザインの再編集をしたり、非公開にサイトをしたりできます。

また、ウェブサイトの閲覧数やURLのクリック数などを画面右上のインサイトアイコンをクリックすることで、確認することができます。(一部有料プランのみこのインサイト機能は利用可)

ウェブサイトに関するQ&A

Q.ウェブサイトのHTMLコードの埋め込みはできますか? 例えばGoogleMapなど

A. コードの埋め込みは現在できませんが、GoogleMapを入れることは可能です。

Q. Canva Web サイトでドメインはいくつ持てますか?

A. 無料ユーザー:my.canva.siteが付くウェブサイトの無料ドメインを5つまで。

Proユーザー:my.canva.siteが付くウェブサイトの無料ドメインは無制限。

独自ドメイン:5つまで接続することが可能です。

Q.ウェブサイトテンプレートに使われている有料素材を、無料版を使っているときに、確認する方法はありますか?

A. 画像の上にマウスを置いて、「透かしを削除」が出てくる素材が有料です。

ダウンロード時に「プレミアム画像」から、有料素材一覧を確認することができます。

Canvaではウェブサイトの作成以外に様々なことに多用出来ます。

 

「Canvaプリント」で印刷注文

「Canvaプリント」で印刷注文できる商品

紙もの商品とそれ以外も多くはカバーしています。

プリント製品と金額

金額はユーロのみで表示されました。

  • メッセージカード €7.5~
  • 名詞 €16.50~
  • チラシ €7.20~
  • ギフト券 €7.50~
  • 招待状 €7.50~
  • 送付状 €24.00~
  • ポストカード €7.50~
  • ポスター €32.59
  • リーフレット €7.70~
  • マグカップ €15
  • フラッシュカード
  • インフォグラフィック
  • 請求書
  • 広報誌
  • 履歴書・職務経歴書
  • メニュー表
  • コラージュ
  • 結婚式案内状 €7.50~
  • パンフレット €8.65~
  • 予定表
  • 結婚式招待状 €7.50~
プリント方法

メニューの機能の「デザイン機能」のうちの「印刷」を選択。

以下の画面が出ます。

年賀状などハガキをプリントされたい方
ウェブサイトで自由自在にプリント出来る年賀はがき【凄く簡単】 | パソコンで情報ゲットしよう (mixh.jp)
【凄く簡単】 ウェブサイトで自由自在にプリント作成出来る喪中はがき | パソコンで情報ゲットしよう (mixh.jp)

紙以外の商品で私はマグカップを選択しました。

高品質なセラミック製のマグカップ

鮮やかな色と耐久性を実現するため、非常に高品質なコーティングが施されたホワイトセラミック製。

あらかじめ用意されているCanvaのテンプレートか、両面マグカップのデザインを新規で作成ができます。見て楽しいマグカップをカスタマイズして、作りましょう。

マグカップ(€15.00)1点

オリジナルマグカップマグカップを作成して注文する方法
  1. デザインを作成
    1. マグカップのテンプレートを豊富なライブラリーの中から選びます。もしくは独自の画像などでカスタマイズし作成。
    2. デザイン素材をドラッグアンドドロップ操作でカスタマイズして、マグカップのデザインを完成させます。
  2. 赤く囲ってあるところからプリントすることが可能です。
    canva print
    マグカップのプリントを注文して、ご希望のプリントオプションを選択します。
  3. デザインや金額等確認
    canva print
    マグカップのデザインの最終校正を確認し、承認。サイズなどの詳細はこちら Canvaプリント-印刷可能な製品

  4. 配送先の設定で入力しましょう。
  5. 購入完了後にこのような画面が表示されました。
  6. 無料でご自宅までオリジナルマグカップが完成したらお届けされます。

世界に一つだけの商品になるため、プレゼントにも大変喜ばれるでしょう。

 

次回は「Canvaプリント」に関するQ&Aについて記載致します。