いよいよ実際に手を動かしてWEBサイトを構築してもらいます！

はじめてのWEBスキルの学習を進めていく上で行き詰まることもあると思います。

ゆっくりでいいので止まることなく、頑張っていきましょう！

以下のフローに沿ってこの初級編を進めてください！

==

1. 制作課題を確認する。

2. 動画を視聴しながら、実際にWEBサイトを制作してみる。

3. 間違っているところがないか自己添削する

4. コーチにSlackにて共有する。

==

それでは、頑張っていきましょう！

こちらが制作課題となります！

Wixはかなり直感的に操作することができます。

この動画でも直感的に操作方法を解説しているので、5つの動画を見れば基本的な操作は網羅することができます。順番に焦らず進めていきましょう！

a. 使用教材

b. ポイントチェック

• HPセットアップの際の初期設定をしましょう！ WIXでは主に以下の２つの方法でHPを制作することができます。

  • Wix ADIを用いた自動制作

    AI の技術でホームページ作成をもっと簡単にする Wix ADI（Artificial Design Intelligence）。

    ビジネスの種類や名前などの質問に答えるだけでAIが制作者の意図を汲み取り、最適なHPをデザインします。 簡単なSEO対策や画像やデザインを自動で修正してくれます。しかし、クライアントの意向を完璧に反映することが難しいため、フリーランスの方に使われることはほとんどありません。

  • エディタによる制作

    主にテンプレートを用いて、自分で編集して制作する方法です。 クライアントの意向を反映しやすいため、基本的にはこちらを使いましょう！

• 基本操作について理解しよう！
  • 配置方法 ドラッグ&ドロップで行う。ピンクの線が中央であることを意味するのでそれに合わせて移動させます。 また、あらゆるものがコピー&ペーストできます！

• ヘッダーを編集してみよう！ たくさんのデザイン方法があるので、一つ一つ暗記するのではなく、実際に手を動かして少しずつ覚えましょう！ 以下2点、動画で確認してください！
  • 色・不透明度の変更
  • 枠線の編集方法
• テキスト編集 以下の項目を動画で確認しましょう！
  • フォント選択 サイト全体でフォントがバラバラだと統一感が出ない場合が多いです。特に目的がない場合には統一するとよいでしょう！
  • サイズ調整
  • 太字・斜体の利用
  • エフェクトの利用
  • 色選択
  • 配置 中央揃え、左揃え、右揃えなど選ぶことができます。

a. 使用教材

b. ポイントチェック

• Wixの主な編集ツールを把握しよう！ ┗編集ツールとは画面左側にカーソルを合わせると、出てくるものです。
  • パーツを追加
    • 以下の機能がここから利用できます✨
      • テキスト
      • 画像
      • ボタン
      • ストリップ
      • 装飾
      • ボックス
      • ギャラリー
      • メニュー・アンカー
      • フォーム
      • 動画・音楽
      • インタラクティブ
      • リスト
      • 埋め込みコード
      • ソーシャル
      • コンテンツマネージャー
      • ブログ
      • ショップ
      • サービス予約
      • イベント
      • コミュニティ
      • マイデザイン

  • セクションを追加

    セクションは、サイトページの構成要素です！

    セクションを有効活用して、ページを分割し、サイト訪問者にとって明確で構造化されたレイアウトを作成しましょう✨

  • ページ・メニュー

    こちらよりHPにページを追加することができます！様々なテンプレートが準備されているので、有効活用しましょう！

    詳しくは「Wix -中級編-」でやります！

  • サイトデザイン

    デザインに自信がない方でもこの機能を用いれば、サイトのデザイン性が向上します！ 「サイトスタイル機能」を用いて、業務最適化をしましょう！

  • アプリ

    アプリを用いて、サイトに機能を追加することによりサイトのクオリティを向上させましょう✨

    種類が豊富なので暗記するのではなく、必要な際にリサーチをして、最適なものを選びましょう！

  • マイビジネス

    こちらからインストールしたアプリケーションの設定、追加などができます。

  • メディア

    画像・動画の格納、編集などができます。あまり使用されることはありません。

  • コンテンツマネージャー

    こちらで制作したテキスト、画像などのコンテンツを管理します。

a. 使用教材

b. ポイントチェック

• ストリップを活用しよう！ 以下のポイントを押さえて、しっかり設定しましょう。
  • カラム機能（今回は使用しません） ストリップを縦に分割することができます。
  • 背景画像 ストリップでは背景画像を選択することができます。
  • ストレッチ機能 全幅 or ページを選択することができます。

• ツールバーを活用しよう！ 便利なのでツールバー / レイヤー / ルーラー / グリッド線 / スナップは全てオンがおすすめです👌 以下、各機能の特徴についての説明です。
  • ツールバー 特に傾き、サイズ、位置を数値で指定できるのが便利です。
  • レイヤー アイテムが自分が意図しない順番で重なって困ることがよくあります。そんなとき、レイヤーですぐに順番を調整できます。
  • ルーラー 好きなX座標に縦線を配置することができます。

• フォントサイズの決定基準を設定しよう！ 基本的にはタイトル、サブタイトルは大きくしましょう。本文は15~16pixelにするのが一般的です。

• アイテム間のスペースを均一に整えよう！

  • WIXはノーコードで簡単に作れる一方、スペースを揃えるのが難しいです。 WIXにおいては長さが同じボックスを使うorツールバーを活用することによってスペースを揃えることができます。

a. 使用教材

b. ポイントチェック

• リスト機能について理解しよう！

  リピーターで簡単にアイテムを複製し綺麗に配置することができます。

  一つのリピーターを編集すると、他のリピーターにも反映されるため、作業時間が短縮される一方で、融通が効かないというデメリットもあります。

• フォトスタジオについて理解しよう！ Wixでは画像編集サイトを用いることなく、簡単な画像編集をすることができます！ 以下の簡単な機能を利用できます！
  • クロップ・切り抜き✂️
  • 画質調整
  • フィルター
  • テキスト挿入

a. 使用教材

b. ポイントチェック

• スクロールエフェクトを活用しよう！

  種類がたくさんあります！ まずはパララックスを使いこなせるようになり、余裕があれば他のエフェクトも試しに使ってみましょう！

• お問い合わせページを作ろう！

  色んなデザインパターンがあるので、WEBサイトにあったものを選択しましょう！

  今回のお問い合わせのデザインは非常にシンプルですが、この後学習するFigmaによるデザインを習得すれば、デザイン性を上げて送信率を高めることが可能です！

  以下の機能はよく使うのでマスターしましょう！

  • 通知メール

    フォームが送信されたことに気付くためにEmailを設定する必要があります。

  • 自動返信

  自動返信するメールのテンプレを作っておけば、フォームが提出された際、自動で返信することができます。

  • 送信完了メッセージ

  フォームが提出された際に、新たに表示されるメッセージです。一般的には、別のサイトに遷移させるようになっています。

part.6では、主にフッターとチャット機能について解説しています！

あともう少しです！頑張りましょう🙌

a. 使用教材

b. ポイントチェック

• フッターを作ろう！

  今の時代全てのWEBサイトはPCで見たときだけでなく、スマホver.にも対応する必要があります。

  WEBサイトにおいてはフッターは必須です

  ロゴ、サイト内他ページへのリンク、著作権表示、特定商取引法表示などを表示するケースがほとんどです。

• チャット機能を搭載しよう！

  他社製品を導入すると高額な費用がかかるチャット機能ですが、「Wix チャット」というアプリケーションをインストールすれば無料で利用することができます！

次回は「 Wix実践 -中級編- 」です。初級編で出てきた知識に加えて、より高度なスキルを学習し、高クオリティなサイトを制作していただきます🙌