見出し画像

URUオンラインスクールで超学べた「WixのHP作成スキル」徹底理解

Kota

こんにちは！
UR-Uで勉強中のKotaです！

皆さんはホームページを作れますか？
みんながそこから来店したり、購入したりする魅力的な
ホームページを作りたいなと思いませんか？

今では、5Gが当たり前の世の中になってきているので
ホームページの表示速度にそこまで差はうまれなくなりました。
今、重要視されているのは、
ずばり「デザイン性」や「機能性」です！！

「自分では良いのが作れないから外注しよう・・・」
お金があれば、解決できるかも知れませんがその分
高額なコストがかかることは避けられませんよね。

だったら、ここでホームページを自分で作れるように
なりましょう！

コストもかけない
時間もかけない
けど、オシャレなホームページの制作スキルを
ご紹介していきます！

スキルも何もない僕でも理解できたので
みなさんでしたら大丈夫です！
僕なりに学んだことをまとめてみました！

◼️この記事を読むと・・・
・20分でホームページを作れるようになる
・外注して無駄なコストをかけなくて済む
・デザインと機能性のあるオシャレなホームページを自力で作れる

◼️この記事を書いた人
Kota：2023卒でIT企業に新卒で就職するが、1年で退職。現在フリーター。
イギリスへ現地観戦に行った時に受けた衝撃がきっかけで、選手と観客の感情が溢れ出すサッカーチームを作ることを目標に、サッカースクールを相棒と立ち上げ日々奮闘中。無知な自分を変えるため、UR-Uに入学し、０からビジネススキルを学ぶ。勢いは良いが、思考が苦手な23歳。


Wixで魅力的なホームページ作成ステップ

ホームページ作成のためのステップを紹介し、
その後に画像などを用いて詳細に説明していきます！

  1. アカウント作成

  2. サイトを新規作成

  3. 作成方法を選択

  4. 一旦紙に書く

  5. デザインしていく

実際にやってみたWixでのHP制作


1　「アカウント作成」
まずは「Wix」と検索しましょう。
Googleで調べれば1番上に出てくると思います。

そして右上からログインしましょう。
アカウントを持っていない方は新規作成ですね。
僕も持っていなかったので今回、Googleアカウントでパパッと作りました。

2　「サイトを新規作成」

僕が今回学んだ動画は少し前に撮影されたものだったみたいで
Wixを開いた時の表示が変わっていました。

今はAIがどんなものを作りたいのかいろいろヒアリングしてくれて
そこから作成者にあったダッシュボードを整えてくれるみたいですね。

質問にいろいろ答えた後、ダッシュボードに来ますので
画面右上の「サイトをデザイン」を押すと作成段階にいけます。

3　「作成方法を選択」

どのようにウェブサイトを作成するかを選ぶ画面にきますので
どちらかを選択します。
今回、僕が学んだやり方は１から自分で作るやり方なので、
「テンプレートをカスタマイズ」を選びます。

次にテンプレート一覧が表示されます。
いろんなのがありますが、ここも今回学んだ方法に沿ってやってみます。
画面右側の「白紙テンプレート」を選択します。

4　「一旦紙に書く」

ここでいきなり作り始めるのではなく、
全体の設計はどうするのか・デザインはどうするのかを
大まかにでいいので紙に書き出してみましょう。

頭の中を少し整理してから作り始めることが
途中で悩まずに、時間短縮できるポイントの１つにもなります。

5　「デザインしていく」

実際にホームページを作っていきます。
今回かなり大雑把に作ったものにはなりますが、
最後に見本として載せますのでぜひみてみてください。

綺麗なデザインにするために使ったテクニックを今回ご紹介していきます！

  • アニメーションのついた線でカッコよくする

今クラブ名とキャッチコピーの間に2本の線が入っています。
これを実際に観にいくとアニメーションがついて動きが
ついていますのでぜひ確認してみてください。

線の付け方の方法を記載します。

「パーツを追加」
↓
「装飾」
↓
「おすすめライン」

追加後は、挿入したものをクリックすると、詳細が変更できます。
「ストレッチ」を押すと幅いっぱいにまで広がります。

動きをつけてかっこよくしたかったので、
「アニメーション」から追加しました。

「グライド」というアニメーションを追加し、
上線は左から右へ、下線は右から左へ流れるように
表示されるよう設定しました。

画像の右下「カスタマイズ」を押していただくと、
・アニメーションが開始される方向
・アニメーションを反映させる部分
・表示時間
等を変更できました！

プレビューもここにありましたので、確認しながら
少しずつ調整していきましょう！！

  • 動画の上から文字を入れる

動画の上に文字が入っていてオシャレだなと思うことはありませんか？

僕が今回作ってみたサッカークラブのホームページであれば
以下のような選手たちがプレーしているのを上から撮影した動画が
ホームページ内に入っていることだってあります。
（実際に見ると、選手たちが動いています）

しかし、この上から文字を書いてしまうと少し変ですよね。

ですのでもう少し色を薄く、もしくは暗めにします。

やり方
画像左下の「背景を変更」
↓
「⚙️設定」

「動画の不透明度」と「動画の背景色」の組み合わせ
によって、文字を入れても自然になりました！

今回は、暗めに設定したかったので
「動画の背景色」を黒色としました。

  • スライドを入れて横の動きをつける

1ページ目にコーチ（僕）の自己紹介を入れてみました。
ボタンには、リンクを入れて別ページにとべるようにするのもありですね！

他には、申し込みURLやサッカーブログにつながるリンク等を入れてみるのも今後検討していきます。

まだホームページについては制作途中ですので、
手直しをして、ここで見本として載せられるように作っていきます！！

まとめ

いかがでしたか？

今回Wixにてホームページ作成スキルを学んで
実際に作ってみるところまでやってみました。

僕はホームページを作ったことは1回もなく、
コードを打ち込んでいって作成するものだと思っていましたが、

今回作ってみてホームページを作ること自体の
ハードルはそこまで高くないのだと感じました。

今ではAIが作成を手伝ってくれたり、豊富なテンプレートがあったり
全てを1から作らなくてはならないわけではないことがわかりました。

また、これだけ揃っていればやはり機能性やデザイン性が
問われる時代になっていることにも納得できました。

このスキルをつけることができれば、
自身のサービスのホームページだけでなく、
ホームページ制作スキルを自分のビジネスにする日が来るかもしれません！

これからもUR-Uで学んだことをどんどんアウトプットしていきます！
自分が理解しきれていないところもあるかもしれませんが、
継続力によって少しずつ改善していきます！
アプトプットするまでがインプット！！

最後まで読んでいただきありがとうございました。

竹花さんのYoutubeチャンネルでは、
明日から使える実践的なスキルを楽しく学ぶことができます。

UR-Uオンラインスクールでは、
全てのビジネススキルをアプリ１つで学ぶことができます。
新学科も開校され、新しいコンテンツがどんどん増えています。
入学にご興味ある方は、下記のリンクから飛べます！
https://www.ur-uni.com/?original_id=100013132

ただ学ぶだけでなく、実際に自分で収益を生み出してみませんか？
UR-U生になると無料で代理店活動が可能です


いいなと思ったら応援しよう！