Canvaテンプレートで高級なwebサイトが作れる?!

告知
デザイン・イラスト
前回の採用LPテンプレートに続き今回は高級なwebサイトのテンプレートを出品しました!
今回のホテルのテンプレートはこちら👇
前回の採用LPのテンプレートはこちら👇

Webサイトの外注には、平均で30万円から50万円かかります。この金額は企業の規模によっては、大きな負担となることがあります。コストを抑えたい方には、自分でWebサイトを作成することをお勧めします!
Canvaは初心者にも使いやすく、YouTubeやブログなどで多くの情報が提供されているため、わからないことがあっても自分で解決できます。


どんなテンプレートなの?

今回紹介するこちらのテンプレートは、ホテルの魅力を最大限に伝えるための要素を盛り込んでいます。トップ画像、施設紹介、館内情報、プランやイベントのお知らせ、予約ボタン、周辺観光情報、アクセス情報まで、必要な情報が一目で分かるように構成されています。

2407_note_リクルートテンプレート_2.jpg


こんな方におすすめ!

このテンプレートは、以下のようなニーズを持つ方に最適です。

▶︎手間を省きたい方
ヒアリングなしで注文できるので、時間を節約したい方に最適です。
▶︎ 自分で修正したい方
自分で修正してwebサイトを作りたい方におすすめ!
▶︎コストを抑えたい方
プロフェッショナルなデザインを低コストで作成したい方にピッタリです。

テンプレートの付属内容

このテンプレートには以下の内容が含まれています。
▶︎webサイト用テンプレート
▶︎TOP用背景画像テンプレート(画像がふわっと切り替わるアニメーション)
スクリーンショット 2024-07-29 11.22.03.png

素材付き

テンプレートには、デザイン素材も付属しています。例えば、TOPは画像が4秒後に切り替わるアニメーションを実装されています。サイトに動的なコンテンツを入れることで、より印象的で、品のあるデザインに仕上げることができます。
トランジション効果.gif

また、写真やアイコンなどの素材も全て含まれており、Canvaの無料会員の方でもご利用いただけます。

TOP用背景画像のアニメーションの作り方

TOPのメインビジュアルはスライドショーのように写真が切り替わる効果を入れています!
Canvaにはスライド機能はなく、、
3枚の写真を繋げて動画として書き出して、配置しました。
画面が切り替わる際に、ディゾルブされるトランジションを使うとより、
より画面に集中できる深みのあるデザインに仕上げることができます。
「TOP用背景画像」をテンプレートを開きます。
スクリーンショット 2024-07-29 11.10.00.png
スクリーンショット 2024-07-29 11.11.21.png
3つの画像が挿入されています。こちらを入れたい写真に差し替えます。
追加したい場合は、プラスボタンをクリックして、追加することもできます。

画像が徐々に拡大するアニメーション

画像が徐々に拡大するアニメーションは「フリーズ」というアニメーションを使っています。
スクリーンショット 2024-07-29 11.15.13.png

画面がスムーズに変わるトランジション

1枚目の画像から2枚目の切り替わる際に、スムーズに変わる効果を入れていますが、下記順番で設定すると一括で同じ効果を入れることができます。
スクリーンショット 2024-07-29 11.15.18.png


スマホでも綺麗に表示される

Canvaは自動でレスポンシブ対応してくれるため、とても便利ですが、細かい調整が必要な場合もあります。このテンプレートでは、PCでもスマホでも文字や画像、アイコンの配置がきれいに表示されるように工夫しました。
2407_ココナラ_ホテルテンプレート_6.jpg

アイコン一覧修正の際の注意点

サービスのアイコン一覧はPCでは2行で、スマホでは、4行の3列で表示されています。
アイコン一覧を編集する際のポイントは、まずアイコンの背景に図形を挿入して、透明度は0にしています。
どんな意味かというと、
スクリーンショット 2024-07-29 10.51.19.png
⬇️透明にすることで、茶色の図形が見えなくなる。
スクリーンショット 2024-07-29 10.51.25.png

なぜわざわざ図形を入れるの?と疑問を感じる方もいるでしょう。
理由は、スマホで綺麗に整列させるためです。
PCでは、図形を入れなくても、思いの通りに表示されますが、
モバイルで見るとアイコンとアイコンの間隔が少しずれてしまいます。
スクリーンショット 2024-07-29 10.55.42.png
右は四角い透明の図形を入れることで、上下左右が同じ間隔で揃っていますが、左は、2行目と3行目の間に少しスペースが空いてしまいます。
この現象を防ぐために、透明の図形を入れる必要があります。


こちらの動画テキストの編集方法・色の変更・webサイトの公開方法も紹介していますので、もしCanvaの操作方法に不安を感じてる方はこちらの動画を一度ご覧になってから、購入してください!

今では誰もがデザイナーのようにコンテンツを作れる時代


現代は、デザインテンプレートやSNSを通じた情報が溢れている時代です。誰もがデザイナーのようにコンテンツを作成できる環境が整っています。これは、時間や費用の節約になるだけでなく、自分のスキルアップにもつながります。つまり、自己投資の一環として非常に価値が高いことだと私は考えてます!

私自身、もともとwebデザインに関する知識は浅かったのですが、他の人が作った様々なデザインやSNSでの情報発信を参考にして、時には、私もテンプレート購入してデザインスキルを身につけることができました。大切なのは、他人の作品を見て学び、それを自分のものにしようとするマインドセットです。

このテンプレートを通じて、少しでもデザインに興味を持ち、Canvaの仲間が増えたら嬉しいと思っています!
次回、新しいテンプレートが完成した際には、またご紹介しますので、どうぞお楽しみに!


テンプレートの購入はこちら



サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら