wix作成編　動画1〜10

動画1

◾︎wixの基礎知識
wixとは？
使うメリット
①専門知識不要
②豊富なデザインプレート
③動きのあるページを簡単に作れる
④いろいろな機能が簡単に組み込める

◾︎アカウント作成
省略

動画2 wix講座
多様なテンプレートの確認
ダッシュボードとは？
wixエディタとは？
省略

動画3 エディタの基本操作
メニュー&ページ
患者さんの声やブログや問い合わせなどを入れれる。

背景
画像や動画を入れれる

追加
どういう要素を追加して行くか。
ここはとても重要

メディア
サイトの中で使う画像や動画などを管理

アプリ　
ここは決済方法などのシステムを入れれる

◾︎ページセクションの追加
サイトメニュー
無駄なものは削除する

HP作成前に構成などを、決めておく

動画4 トップページの製作編
◾︎ヘッダー（MV）の作成
このページがなんなのか
コンセプトはなにか？メリットは？など明記されてることが大事
動きが華麗であるか。など。

PC サイトメニュー
SP ハンバーガーメニュー

◾︎フッター作成
フッターとはサイトの一番下
google mapなどを追加しても良い

◾︎SNSのリンク
ソーシャルリンク設定でできる

動画5
◾︎photoACから画像を選択
◾︎GIFの取得
◾︎HPから動画を選択

①イラストAC
→無料のイラストをダヴロードできるサイト
②photoAC
フリー素材の写真を無料でダウンロードできるサイト
③シルエットAC
トーンを抑えて作りたいときはイラストやシルエットを使用する

アドビストック
ピクスタ
↑月額制や1枚を購入していく有料サイト
写真の質や幅がたくさんあり、尚且つ周りと被らない！

動画素材
pixaboy
高品質な動画を選べる

動画6 お問い合わせページ作成

お問い合わせページを設定してないとかなりの機会損失？
仕事の依頼、お客からの問い合わせなど

◾︎レイアウト作成
◾︎お問い合わせフォーム作成
◾︎google map の埋め込み

画面操作のみのため、省略

動画7 ブログ記事を書こう！

ブログページの作成
◾︎ブログ昨日の使い方
レイアウトは利用者に合わせてデザイン
フィードに表示する項目
表示設定ポスト　で投稿日や読了時間などを非表示にしたりできる。

記事はダッシュボードですると簡単

◾︎URL取得　LPリンク
SNSシェア設定
シェアされたときに画像などをしっかり表示される設定

動画8 スマホのレイアウト

画面操作のみのため、省略
　

動画9 SEO対策（WIx）

設定のやり方

◾︎WIxのSEO対策の設定方法
ダッシュボード→SEOレポート→トップページの設定がメインになる！
→詳細を見る→検索エンジンに表示するタイトルを設定→キーワード三つ
①wix ②ホームページ③webデザイナー
おすすめのものが出てくる。
おちけいご/WIxを選択
ページのサイトメニュー→ページ設定Googleプレビューに表示されているはず。

トップページにseoディスクリプションを追加しよう
ディスクリプションとは？
検索したときにサイトのタイトルが出てきて、その下に説明が出てくる。それの設定
①キーワードを設定
②ビジネス名またはサイト名を追加
③50〜320文字以内で入力してください
の手順で確認していく

ホームページのエディタに戻り、検索エンジンに表示するの下のページディスクリプション
「このサイトはmupTVでwix紹介をするために作成されたサイトです。
wix/おちけいごというタイトルはSEOの条件に則って決めています。
webデザイナーおちけいごの個人サイトです。
→保存→条件に当てはまってなければ却下される

独自ドメインに接続しましょう。
→年間1000円くらい
サチコにサイトを提出してください。

ブログページやお問い合わせページもSEO対策の検索エンジンに表示するタイトルなどを設定する（各項目すべて）
googleのSEOは変わったりする。その時のルールに沿って変えたりする。

◾︎googleへの提出方法

無料ドメインでは厳しいことがある。

動画10 デザインのコツ
◾︎ホワイトスペースの活用
less is more
→ホワイトスペースを活用しよう

ビルの隣に白がある。だから目線を一点に集めれる。

適度な余白を開けることでグループ分けが分かる。
いちいちデザートみたいな言葉はいらない

→情報の詰め込み過ぎはNG

◾︎グーデンベルグ・ダイヤグラム
目線を意識した導線作り
Z型の法則
F型の法則
↑の型に沿ったホームページ制作をすれば目線を操れる。

◾︎フォントについて
①文字のサイズのメリハリ
英文と和文の同じサイズでと見た目の大きさが変わる。英文<和文
②スマホの文字サイズ、pcサイズと同じでいいね？
→高齢者向けなら、大きくしなきゃいけない

◾︎アニメーション
①アニーメーションの効果
→現在の状態を知らせる注意喚起　　「は？」
今ここ見て！というもの
②過度なアニメーションはNG
ユーザーにストレスがかからないようにする

◾︎トレンド
ファッションと同じでサイトにもある。
2020年のデザイントレンド
①巨大な、タイポグラフィ
→雑誌のようなレイアウトで伝えたいテキストをより際立たせる

大きく大胆にテキストが印象強く表現されている。

②余白を使ったレイアウト
→余白を使ってメリハリをつけましょう

写真を見ただけで
「スマホ一つで簡単に支払えるんだ。」とすぐわかる。
伝えたいことがMVだけで伝わる。
→写真はスマホの写真
左にはテーマ
上にはテキスト
程よく間があいている。

一番大事なのは自分のビジネスに合うサイトにする必要がある。