Boostrapテンプレート『Canvas』の使い方 | コーディングを効率化してWebサイト制作!

Boostrapテンプレート『Canvas』の使い方 | コーディングを効率化!おしゃれなWebサイトが一瞬で作れる

本記事は、Envato様から商品を提供いただき作成しています。

この記事では、Boostrapテンプレート『Canvas(キャンバス)』のダウンロード~サーバーにアップするまでの使い方や特徴を徹底的にレビューします。

当サイトはWordPressを利用していますが、今回はTwitter社が開発したCSSフレームワークBootstrapのテンプレート『Canvas(キャンバス)』を使用してみました。

Canvasの使用がおすすめな人
  • 現在コーディングを勉強している
  • コーダーあるいはデザイナーで、クライアントサイトを効率よく制作したい
  • CMSを使用しない、自分だけのオリジナルのWebサイトを制作したい

Canvasは1,200以上のHTMLテンプレートや160以上のデモサイトを備えているので、 駆け出し程度のコーディング知識とFTP操作、サーバー・ドメイン設定が可能なら自由自在にWebサイトを制作できます。

Canvasを使用すればWebサイト制作の勉強・仕事の効率化など、あなたの生活をワンランクアップ!

ぜひこの記事をじっくり読んで、Canvasの魅力を体験してみてくださいね。

Boostrap(ブーストラップ)
WebサイトやWebアプリを制作するためのフレームワーク。HTML/CSS/Javascriptから構成されており、誰でも無料で利用することができます。

使い方だけすぐに知りたい方はこちら

まだCanvasを未購入の方はこちら

タップできる目次

Canvasを使う前に知っておくべきこと

以下で、Canvas(キャンバス)を使う前に最低限知っておくべきこと2つを解説しますね。

Canvasを使用する前に準備すること

Canvasを使用する前に準備すること
  1. HTML/CSS/Javascriptの基礎知識
  2. Boostrapに関する知識
  3. コードエディターの取得
  4. FTPツールのインストール&操作方法
  5. レンタルサーバー契約&独自ドメインの取得

本記事を読んでいるあなたは、おそらく①~④まで完了していますよね。

『⑤レンタルサーバーの契約&独自ドメインの取得』は、「コーディングの勉強も進んだから、いよいよ本番環境に移行してみるかな!」という方が該当します。

ランニングコストを抑えられる高機能レンタルサーバーならConoHa WINGがおすすめ

レンタルサーバー+独自ドメイン2つ無料で月額1,000円以下で、キャンペーンを活用すればさらにお得ですよ。

>>ConoHa WINGの公式サイトはこちらimpression?a id=1949330&p id=2312&pc id=4967&pl id=30490

当サイト運営者の場合

※インストール不要でブラウザでも操作できます

当サイト運営者の場合

※インストール不要でブラウザでも操作できます

Canvasを使用するときの注意点

1ライセンスは1ドメインしか使えない

Canvasはライセンスを購入して使用するため、1ライセンスに1ドメインしか使えません。もしドメインを2つ以上使用する場合は、個数分のライセンスを購入する必要があります。

ただ、練習のためや自分のWebサイトを制作するなら1ライセンスで充分ですし、クライアントサイトで使用するとしてもWebサイト制作費に含んでおけば問題ありませんね。

デフォルトの言語は英語になっている

Canvasパッケージ内にあるテンプレートのデフォルト言語は英語です。

HTMLの言語設定

Canvasを使用するときは、忘れないよう最初に『lang=”ja”』に変更しておいたほうが安心です。

必要なテンプレートを探すのにひと工夫必要

Canvasはテンプレート数が膨大なため、パッケージの中から必要なテンプレートを探すには少し工夫が必要です。

【Canvasのパッケージ内】

手探りするのは効率が悪いため、Canvasを使用するときはデモデザインのURLを参考にしましょう。

手順は以下のとおり

STEP
デモデザイン一覧ページからデザインを選ぶ
Canvasのデモデザイン

使用したいデモデザインを選んでクリックします。

STEP
表示されたURLを確認する
CanvasのテンプレートURL

表示されているURLを確認して、パッケージ内から見つけます

※ショートカットキーで検索すると速い

以上のように、使用したいデモデザイン・テンプレートを選択して、コードエディター内にファイルをドラッグ&ドロップすればOKです。

テンプレートの見つけ方がわからないままだと時間をムダに消費してしまうので、注意しましょう。

Canvasの使い方

Canvasの使い方
  1. コードエディターでCanvasパッケージ開く
  2. 新規ファイルをCanvasパッケージとの2画面表示で開く
  3. 使用したいファイルをコピペで新規ファイルに追加・編集する
  4. 完成したファイルおよび必要なファイルを、FTPツールでWebサイトのディレクトリに配置する

Canvasの使い方は以上の4ステップなので、さっそく見ていきましょう。

STEP
コードエディターでCanvasパッケージ開く
Canvasデモデザインのコード
STEP
新規ファイルとCanvasパッケージとの2画面表示で開く
Visual Studio Codeの2画面表示
STEP
使用したいファイルをコピペで新規ファイルに追加・編集する
パッケージとコピペしたコード

上の画像ではFooter(フッター)コードをコピーして『HOME』『About』を変更しています。

画像やコピーライトなど変更したい項目を編集しましょう。

STEP
完成したファイルおよび必要なファイルを、FTPツールでWebサイトのディレクトリに配置する
FTPツールのデータ転送画面

Canvasテンプレートのパッケージフォルダから、必要なファイルを選択してWebサイトのディレクトリに転送します。

事前に作成したトップページのファイル名は『index.htmlとして転送しましょう。
※デモサイトをそのまま使う場合、『demo-〇〇.html』は『.html』以前を『index』に書き換えるだけでOK

転送ファイルのディレクトリ構造を間違えると、サイトが表示されないので気をつけて転送してください。

必要なファイルの選び方

Webサイトに必要なファイルは、Canvasパッケージ内にある『Documentation』をブラウザで開けば注意事項とともに記載してあります。

Webサイト制作に慣れていれば必要ありませんが、もし練習中の人はチェックしておきましょう。

Webサイト表示に必要あなファイル
STEP
Webサイトの完成

テンプレートブロックを組み合わせて文字を編集した程度の、かんたんなトップページを制作しました。

このようなWebサイトであれば5分以内で作れます。

Webサイトの制作にはサーバー&独自ドメインの取得が必須なので、まだの方は取得しましょう。
おすすめはConoHa WING!サーバー+ドメイン2つが月額1,000円未満で、キャンペーンならさらにお得です。
>>ConoHa WINGの公式サイトはこちら

Canvasの特徴5つ

「そもそもCanvasの特徴はなにか?」と疑問に思う方のために、5つの特徴を解説します。

豊富なテンプレートで効率的にコーディングできる

Canvasの公式データ

出典:Envato Market

Canvasは豊富なテンプレート、Webサイト、UI機能などがあります。

  • 1からコードを記述する必要がない
  • Boostrapのデフォルトテンプレートだけでは簡素なWebサイトになる

Canvasのようなカスタマイズされたテンプレートを用いれば、必要な部分のみコード記述を変更すればいいだけなので、効率的にコーディングできます。

160以上のデモサイトがあり、すぐにWebサイトが作れる

Canvasのデモサイト

出典:Envato Market

Canvasには、ニッチデモ・LPなどデモサイトが合計160以上あるため、あなたやクライアントのニーズに合わせたWebサイトをすぐに制作できます。

デモサイトはどれもオシャレかつ機能的に設計されているため、Webサイトの質を落とすことなく制作時間を大幅にカット可能。クライアントワークも捗ります。

HTMLテンプレート/ショートコード/UI機能の組み合わせ自由自在

出典:Envato Market

Canvasに包括されているもの
  • すでに構成された140以上のデモブロック
  • 20以上のコンタクトフォーム
  • 1,500以上のショートコード・UI機能
  • 140以上のレボリューションスライダーテンプレート

Canvasに包括されているテンプレート/ショートコード/UI機能は組み合わせが自由自在で、必要なものをコードエディターで追加・編集するだけ。

パーツは1,000以上あるので、あなたの発想次第でオリジナリティのあるWebサイトを制作することができますね。

マルチデバイスに100%レスポンシブ対応している

マルチデバイスにレスポンシブ

出典:Envato Market

PC・タブレット・スマートフォンなど、マルチデバイスに100%レスポンシブ対応!

昨今ではスマホ閲覧が増えており、SEOでもMFI(Mobile First Index:モバイルファーストインデックス)を重要視しています。すでにマルチデバイスに対応しているのはありがたいですね。

ライセンス料は$16で購入ハードルが低い

Canvasの料金について

出典:Envato Market

Canvasはライセンスを購入する必要がありますが、1ライセンス$16(1,800円前後※1)/6か月サポート※2

例えばWordPressでWebサイトを作り、有料テーマを17,800円(当サイト使用テーマ『SWELLimpression?a id=3074583&p id=3885&pc id=9646&pl id=53798』基準)で購入した場合と比較して、Canvasで約60か月(5年)分になります。

有料テーマ:17,800円
Canvas:約1,800円/6か月×10≒18,000円
※60か月 ⇒ 5年

また、多くの有料テーマは買い切りですが、もしテーマ変更するとなると新たなテーマ購入の料金が発生します。変更も一筋縄ではいかず時間と労力を消費します。

Canvasであれば、たった$16(1,800円前後)であなたのサイトでも、クライアントサイトでも、自由にデザイン変更できます。

コーディングの練習、自サイトやクライアントサイトの制作、どのような使い方でもライセンス$16(1,800円前後)は購入ハードルがかなり低いですね。

※1:レートにより前後します
※2:+$4.50で12か月サポート

Canvasがおすすめな人・おすすめしない人

Canvasの使用がおすすめな人
  • 現在コーディングを勉強している
  • コーダーあるいはデザイナーで、クライアントサイトを効率よく制作したい
  • CMSを使用しない、自分だけのオリジナルのWebサイトを制作したい
Canvasの使用をおすすめしない人
  • コーディングの知識がまったくない
  • ノーコードでWebサイトを制作したい
  • 単純にSEOアフィリエイト(ブログ)をやりたい

ノーコードでWebサイトを制作したい人は、WixSTUDIOペライチWordPressなどを使ったほうがいいですね。単純なブログならWordPressがいいでしょう。

あなた自身のコーディングの勉強や、質を落とさず効率的にクライアントワークを行いたい人には、CanvasはうってつけのHTMLテンプレートです。ぜひ、Canvasを使ってみてください。

※現在、最新WordPressバージョンは5.8.2です。WordPressバージョン5.9からフルサイト編集機能が実装されるので、ノーコードでのサイト編集が可能になる予定です。
>>「やっぱりWordPressでブログを始めよう(Web制作しよう)」と思う方はこちら

Canvasの購入~ダウンロード方法

CanvasはEnvato Marketで購入します。
※購入前に『Canvas』の特徴を知りたい方はこちら

Canvasの購入~ダウンロード方法は以下のとおり

Canvasの購入手順

STEP
Envato MarketのCanvasページで『Add to Cart』をクリックする
Envato MarketのCanvas販売ページ

※事前にEnvatoのアカウント登録が必要です

STEP
『Go to Checkout』をクリックする
Envato Marketのカート内
STEP
支払方法を選択して必要情報を入力、購入を完了する
Canvasの購入画面

必要情報を入力して支払いすれば、Canvasの購入が完了します。

Canvasのダウンロード手順

Canvas購入完了時にダウンロードも可能ですが、いつでも新しいフォルダをダウンロードできます。
※あくまで使用できるのは1ライセンス1ドメインまで

STEP
アカウントの『Setting』をクリックする
Envatoアカウントのメニュー
STEP
『Doenloads』⇒『Doenload』をクリックして、Canvasをダウンロードする
Canvasのダウンロードページ

以上で、Canvasをダウンロードすることができます。

フォルダはzipファイルなので、すべて解凍してファイルを使用してください。

▼Canvasの使い方を知りたい方はこちら▼

▼サーバー&ドメイン契約がまだの方はこちら▼

※サーバー+ドメイン2つで月額1,000円以下

Canvasのよくある質問 | FAQ

  1. そもそもCanvasとは?

    Canvasは、Boostrap5のフレームワークをベースとしたHTML5のテンプレートのこと。
    豊富なデモサイト、ランディングページ(LP)などのテンプレートHTMLファイルを含んでいるため、HTMLファイルの組み合わせでさまざまなWebサイトを簡単に制作できます。

  2. Canvasは初心者でも使える?

    はい、誰でも簡単に使えます。
    ただし、HTML/CSS/Javascript・Boostrapの基礎知識、コードエディター・FTPツールの操作は最低限行える必要があります。コーディングを少しでもかじっていれば問題ないです。

  3. ライセンスは複数ドメインに利用できる?

    いいえ、1つのライセンスは1ドメインのみ利用できます。
    2つ以上のドメインの場合は、1つにつき新たにCanvasライセンスの取得が必要です。

  4. ライセンスはクライアントサイトにも使える?

    はい、クライアントサイトでも使用できます。
    ただし、ライセンスサポートは6か月(最大12か月)のため、Webサイトの保守管理をするかクライアントとの相談が必要と思われます。
    ※ライセンスが切れたからといってWebサイトが利用不可になることはありません。しかし、Canvas公式のサポートやアップデートを受けることができなくなるため、後に支障が出る可能性があります。

  5. スマホにはレスポンシブ対応している?

    はい、スマホ画面にも対応しています。
    パソコン・タブレット・スマートフォンなど、複数のデバイスにレスポンシブな設計となっているため、どのデバイスでも快適に操作できます。

  6. Canvasのライセンス価格は?

    ライセンスは$16(1,800円前後)です。
    ライセンスのサポート期間は6か月で、購入時に+$4.50(500円前後)すると12か月に延長されます。
    ※購入後にサポートを追加しようとすると$7.50(850円前後)かかります

CanvasでWebサイト制作を効率化 | まとめ

ここまで、Boostrapテンプレート『Canvas(キャンバス)』の使い方と特徴を解説しました。

CanvasはWebサイトのデザイン/コーディングを大幅に時短できる優れたテンプレートで、最低限のコーディング知識を持っていれば難しい設定は一切ありません。

Canvasの使用がおすすめな人
  • 現在コーディングを勉強している
  • コーダーあるいはデザイナーで、クライアントサイトを効率よく制作したい
  • CMSを使用しない、自分だけのオリジナルのWebサイトを制作したい

現在コーディング勉強中の人は、Canvasテンプレートの使用によるWebサイト制作だけでなく「こんなコードがあるんだ」といったことも学べます。プロが作ったテンプレですからね。

また、クライアントサイトを制作するような人は、たった$16(1,800円前後)でデザイン/コーディングの時短による仕事の効率化ができ、案件受注数の増加、事業拡大を図ることも可能です。

Canvasが少しでも気になった方は、ぜひ実際に使ってその性能を体感してみてください。

ライセンス$16/6か月サポート

最新の口コミ

まだ口コミはありません。ぜひ最初のご感想をお聞かせください。

Canvasの口コミを投稿する

目次
タップできる目次
閉じる