Wixでホームページを作成してもGoogleなどの検索エンジンにサイトが載らないと認知が広がりません。
実際に検索エンジンには膨大なウェブサイトが登録されており、ホームページの認知の広げ方は様々ですが、検索順位を上げておいた方がメリットは大きいと思います。
この記事ではWixで検索順位を少しでも上げるために抑えておくSEOの設定方法を解説していきます！

SEOとは？

SEOとは、Search Engine Optimization（検索エンジン最適化）の略で、GoogleやYahoo!などの検索エンジンでウェブサイトが検索されたとき、上位に表示されるようにウェブサイトの構造やコンテンツを調整するプロセスを指します。インターネット上での可視性を高めることで、ウェブサイトへの訪問者数を増やし、自社サイト・商品・サービスなどの認知、販売機会を拡大させることができます。

Wix SEOチェックリストを開く

さっそくWixで作成したサイトにSEOの設定をしていきましょう！
SEO設定項目はWixのチェックリストに沿って設定をしていくのがオススメです。

SEO設定を開く

ダッシュボード→マーケティング・SEO→SEOを選択します。

SEOチェックリストを選択します。

サイトの基本設定やキーワードなどを設定していくと、「SEOチェックリスト」の画面になります。

キーワード設定
サイト訪問者が自社ホームページを検索するときに予想される単語で設定をしましょう！

SEOチェックリストの流れ

「SEOチェックリスト」の画面を開いたら、上から順にSEOに関連する項目を「ステップ1」〜「ステップ3」までの流れに沿って設定していきます。

【ステップ1】トップページをGoogle検索に対応させる

「SEOチェックリスト」の画面を開いたら、上から順にSEOに関連する項目を設定していきます。

トップページのタイトル設定

サイトがGoogleで表示された際のタイトルを設定します。※10文字以上が推奨
「その他」を押すと任意のテキストに編集ができます。
画面右のプレビュー画面で実際にGoogleで表示された際の確認をしましょう！

ホームページの顔となるタイトルを設定しましょう！
キーワードで設定した単語を入れると効果的です。

トップページのディスクリプション設定

トップページのタイトル設定と同様にサイトの説明文を入力します。※50文字以上が推奨

Googleで検索をしたサイト訪問者がホームページをアクセスする前に見る文章のため、適切な文章を入れましょう。

トップページのテキスト設定

トップページにキーワードが最低1つ必要なためサイト編集からキーワードを入れます。

キーワードはサイト内に多く散りばめることがSEOの観点で重要です。
違和感にならないようにサイトの文章にキーワードを盛り込みましょう！

インデックス登録

サイト編集で画面右上の「公開」を押すとインデックス登録されます。

モバイル最適化

サイト編集のスマホ版を編集済みであればOKです。

あわせて読みたい

Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…

独自ドメイン

独自ドメインを設定します。※有料プランへの変更が必要です。
無料でサイトを公開したい場合は設定をしなくてOKです。

あわせて読みたい

お名前.comのドメインをWixに紐づけてサイトを公開する方法【初心者でも設定は出来ます】 Wixは直感的な操作で簡単にWebサイトが作成出来るため多くのユーザーに使用されていますが、いざサイトを公開しようと思ったときにドメインを変更したかったり、現在取…

ドメイン名はホームページに適した（自社の名前など）もので取得をしましょう！

Googleへサイトの提出

Googleで検索した際に作成したホームページを見つけてもらうため、サイトの提出をします。

これでステップ1は完了です！

【ステップ2】サイトページを最適化

画像のALT設定

サイト編集時に画像のALT（代替テキスト）が設定されていない箇所はすべて設定をしましょう。

画像のALT（代替テキスト）は編集画面から変更します。
対象の画像をクリック→設定→「代替テキストを入力」から適切なテキストを設定します。

画像のALT（代替テキスト）は目が見えない方がサイトを訪問した際に、画像を代替テキストで読み上げる形となるため設定が必要です！

ホームページのリンク設定

サイト編集時に追加したリンクテキスト、ボタンのリンク先をすべて設定します。

あわせて読みたい

Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】 Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけでは…

・サイト内の別ページ、アンカーリンク→内部リンクで設定
・サイト内に無いリンク先→新しいタブ（外部リンク）
で設定をしましょう！

下層ページの設定

トップページと同様にすべての下層ページの以下を設定します。
・タイトル
・ディスクリプション
・画像のALT（代替テキスト）
・リンク設定

これでステップ2は完了です！

【ステップ3】SEO対策の設定

SEOアシスタント

「SEOアシスタントへ移動する」から設定をします。

・【ステップ1】トップページをGoogle検索に対応させる
・【ステップ2】サイトページを最適化
上記の対応が完了していれば、残りはGoogleビジネスプロフィールとファビコンの設定だけとなります。

Googleビジネスプロフィール

店舗運営の場合はGoogleビジネスプロフィールも登録されている方が多いと思います。
「今すぐはじめる」からWixに連携の設定をしましょう。

ファビコン

Googleで検索した際に表示されるアイコン画像を設定しましょう。

これでステップ3は完了です！

ビジネス情報・SEOの設定

ここまで完了したら最後にホームページの基本情報とその他のSEO設定をしましょう。

ビジネス情報

ダッシュボード→設定→ビジネス情報を開きます。

プロフィールをすべて編集します。

場所と連絡先情報の項目をすべて入力します。
複数店舗があり、他の店舗も登録したい場合は「2番目の場所を追加」から登録が出来ます。

サイトの設定

ダッシュボード→設定→サイトの設定を開きます。

設定していない項目を設定します。

アクセシビリティ

ダッシュボード→サイト・モバイルアプリ→ウェブサイト→アクセシビリティ
からWixで指摘されている問題を解決してください。

検出された問題をサイト編集からすべて修正していきます。

装飾画像などのALT（代替テキスト）漏れ

h1やh2,h3のタイトルの定義

検出された問題をすべて修正すると「検出された問題はありません」となります。

以上で基本的なWixのSEO設定はすべて完了です！

SEO設定の編集

すべてのSEO設定を終えても、キーワードやタイトル、ディスクリプションなどを後からを編集したい場合もあるかと思います。
ダッシュボード or サイト編集から設定を変更出来るので、編集したい場合は参考にしてみてください。

タイトル・ディスクリプション

サイト編集→画面左のツールバー→ページ・メニュー

対象のページの3点マークから「SEOベーシック」を選択します。
・タイトルタグ（検索結果のタイトル）
・メタディスクリプション（検索結果の説明文）
を編集し、公開を押します。

キーワード

ダッシュボード→サイト・モバイルアプリ→SEOチェックリスト

SEOチェックリストの一番上の項目から変更が出来ます。

※変更してもすぐにGoogleの検索エンジンに反映はされません。
ウェブサイトの巡回（クロール）を定期的にGoogleが行っているため、次回ウェブサイトを巡回された際に更新されます。
気長に待ちましょう。。

アクセス解析

ダッシュボード→アクセス解析を押します。
こちらからホームページにアクセスしたユーザーの解析が出来ます。

・新規 or 常連
・閲覧デバイス
・アクセス元
・1日〜年間単位でのアクセス数
などユーザーの情報を調べて自社の発展に活かしましょう！

まとめ

今回はWixでサイトの検索順位を上げるためのSEO設定のポイントを解説しました。
「Wixで検索順位が上がらない」「そもそもサイトが検索しても出てこない…」といった悩みもすべて実施してみたら変化を感じることが出来るでしょう。
ぜひ実際にWixでSEO設定をしてみて、ホームページの検索順位の改善をはかってみてください！

投稿 Wix サイトの検索順位を上げるためのSEO設定のポイント【基本的に抑える項目を解説】 は なまはげブログ に最初に表示されました。

Wixは直感的な操作で簡単にWebサイトが作成出来るため多くのユーザーに使用されていますが、いざサイトを公開しようと思ったときにドメインを変更したかったり、現在取得しているドメインをWixに紐づけしたいと考える方も多いかと思います。

初心者の方にはドメイン、サーバーなどの設定は専門的な知識がいるため難しく感じますがWixでは多くの情報がブログやYouTubeに広がっているため、その内容を参考にやってみると案外簡単に設定が出来ます。

ぜひ諦めずにドメインを取得してオリジナルのサイトを公開してみましょう！

ドメインとは？

ドメインとは、インターネット上の住所のようなもので、ウェブサイトを訪れるために必要な独自の名前を指します。例えば、「〇〇.com」や「〇〇.net」、「〇〇.example.com」などがそれにあたります。このドメイン名によって、インターネット上でウェブサイトが特定され、訪問者は簡単にアクセスできるようになります。
会社の独自性やブランド、検索エンジンにも影響が出るためサイトを作成する際には重要な項目の1つです。

サーバーとは？

サーバーとは、ウェブサイトのデータやコンテンツを保管し、インターネット経由でユーザーに提供するコンピュータのことです。ウェブサイトを公開するためには、このサーバーが必要になります。

お名前.comでドメインを取得

この記事では一般的にドメインの取得で広く知られているお名前.comでドメインを取得し、Wixに紐づけをしていきます。

・ドメイン→お名前.com
・サーバー→Wixで提供しているサーバー
の形で設定をしていきます。

お名前.comにアクセス

まずはお名前.comにアクセスし、ドメインを取得していきます。

ドメイン名の入力

アクセスしたら検索欄に取得したいドメイン名を入力します。

ドメイン取得可否の確認

ドメインが取得可能であれば「◯」が表示されるため、そのドメインでの契約が可能です。
取得したいドメインに間違いがなければ「お申し込みへ進む」を押します。
※「メール通知」がついていると、すでに別のユーザーで仮登録されているため基本的には取得が出来ません。

ドメインの利用用途を選択

一番近いドメインの利用用途を選択します。

お申込み内容の確認

お申込み内容に相違がないか確認します。
※サーバーの申し込みが不要（ドメインのみ取得したい場合）であればサーバーの申し込み内容は削除します。（ドメイン申し込み時にデフォルトでついています）

新規のお申し込みはメールアドレスとパスワードの登録が必要です。→忘れないようメモなどに保管しましょう。
完了後「次へ」を押します。

会員情報の登録

会員登録に必要な情報をすべて入力します。
入力後「次へ進む」を押します。

お支払い情報の入力

お支払い方法（クレジットカード情報）を入力して、入力後「申込む」を押します。

以上でお名前.comでのドメイン取得は完了です！
登録したメールアドレスにドメイン登録完了の連絡が届くので、お名前IDとパスワードは必ず保管してください。
（お名前.comの管理画面ログイン時に必要です）

Wix 有料プランに変更

管理画面にログイン

ドメインを変更したいWixのサイトのダッシュボードを開きます。
「プランを比較」を押します。

料金プランの選択

外部ドメインの接続は有料プランであれば、すべて接続可能なため状況にあわせたプランを選択します。

お支払い周期を選択

• 2年一括払い→24,000円（19,200円お得）
• 1年一括払い→24,000円（7,200円お得）
• 1ヶ月ごとのお支払い

上記はパーソナルプランの金額になります。
※キャンペーンやWixのアップデートによって、各プランの金額は変動します。

状況にあわせたお支払い周期を選択し、「お支払いへ進む」を押します。

お支払い情報の入力

• 決済方法
• 請求先情報

を入力して「購入する」を押します。

以上で有料プランへの変更は完了です！

Wix ドメインの紐づけ

お名前.comで取得したドメインをWixのサイトに紐づけていきます。

ドメイン検索

ドメインを変更したいWixのサイトのダッシュボードを開きます。
お名前.comで取得したドメインを入力して「接続する」を押します。

「はい。このドメインを所有者しています」を押します。

ポップアップが出るため、画像箇所の「ドメインを接続」を押します。

ドメインを検索してくれるため、しばらく待ちます。

「スタート」を押します。

お名前.comのドメイン接続

お名前IDとパスワードを入力して、お名前.comの管理画面にログインします。

お名前.comの管理画面に入れたらOKです。

Wixの設定に戻り、「ログインしました」を押します。

「ドメイン設定を見つけました」を押します。

「ネームサーバーを見つけました」を押します。

「以下の Wix ネームサーバーを追加」の箇所から「〇〇.wixdns.net」のネームサーバー2つをコピーします。

お名前.comに戻り、ネームサーバーの箇所を押します。

ドメイン名の箇所にチェックを入れ、「ネームサーバー情報を入力」の箇所に先ほどコピーした「〇〇.wixdns.net」のネームサーバー2つを貼り付けます。
入れ込み後、「確認画面へ進む」を押して内容に間違いがなければ登録します。

Wixの画面に戻り「ネームサーバーを置き換えました」を押します。

あとはドメインが反映されるまでしばらく待ちましょう。

接続状況の画面は以下のようになっています。
ドメインの接続が完了すると「ドメイン接続」にチェックがつきます。

以上でお名前.comのドメインをWixに紐づける作業は完了です！
この段階では完全にドメインの接続は完了していないため48時間は気長に待ちましょう。

完全なドメイン接続までの流れ

実際に体験した流れは以下です。

STEP

1時間後

ドメイン接続の完了メールが届き、お名前.comで登録したドメイン（Wixに紐づけしたドメイン）でサイトが表示されました。

STEP

1日後

お名前.comで登録したドメイン（Wixに紐づけしたドメイン）でサイトを開くと「このサイトは安全に接続できません」となりました。

サイトにアクセスした際の先頭につく「http」→「https」のURLに移行する最中のため、このようなエラーとなります。
（外部からの妨害を防ぐために安全なウェブサイトへと変化をとげています）

STEP

2日後

Wixから特にメールなどは来ませんがWixのダッシュボードを見ると表示が変わっており、以降サイトにログインしてもエラーはありません。

これでドメインの接続が完全に完了です！
※48時間以上経ってもエラーが起きる場合はWixのサポートに連絡をオススメします。

まとめ

今回はお名前.comのドメインをWixに紐づけてサイトを公開する方法を解説しました。実際に設定してみるとそこまで難しく感じなかったはずです。
お名前.com以外のドメイン契約会社でも基本的に設定方法は変わらないので、ぜひドメインを取得してみてオリジナルのサイトを公開してみましょう！

投稿 お名前.comのドメインをWixに紐づけてサイトを公開する方法【初心者でも設定は出来ます】 は なまはげブログ に最初に表示されました。

ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。
私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが作成出来るかにめちゃくちゃ苦戦しました。

この記事ではSTEP1〜STEP3の順に解説し、1つのホームページを完成するまでの実際の作業の様子を動画で解説していきます。
・STEP1→Wix質問から作成
・STEP2→Wixテンプレートから作成
・STEP3→白紙テンプレートから作成

すべての動画を視聴した頃には、簡単なホームページは1から作成出来るイメージが掴めるでしょう！

STEP1　Wix質問から作成

動画は1.5倍〜1.75倍の再生速度がオススメです。
※1からオリジナルでサイトを作成したい方はSTEP3から視聴をして下さい。

Wixの質問に答えて、生成されたサイトを編集して完成させる内容です。

動画を視聴してみる　※クリックで開けます

STEP2　Wixテンプレートから作成

WIXの豊富なテンプレートから編集して、サイトを完成させる内容です。

動画を視聴してみる　※クリックで開けます

STEP2-1

【Wixテンプレートからサイトを作成①】
※動画の最後が中途半端に終わってますが、STEP2-2で続きを解説しています。
【Wixテンプレートからサイトを作成のポイント】
・基本的に選択したテンプレートは大きな変更点は加えず、そのまま使用するのがオススメです。
・一度選んだテンプレートは後から他のテンプレートに変更は出来ないため、他のテンプレートを使用してサイトを作成したい場合は作り直す必要があります。

STEP2-2

【Wixテンプレートからサイトを作成②】
※STEP2-1の動画の最後にリンク先が上手く設定できていませんが、Wix編集画面を閉じてキャッシュを削除したら正常にリンク先が機能しました。
STEP2-2の冒頭では上記の作業をした後に動画が始まっています。

■役立つ記事
・Wix アンカーリンクの設定方法を解説！
・Wix スマホレイアウトの編集の仕方を解説！

あわせて読みたい

Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】 アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在していま…

あわせて読みたい

Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…

STEP3　白紙テンプレートから作成

1からすべて自分でサイトを完成させる内容です。
テンプレートのサイトを編集するのも良いですが、基本的にお客さんのサイトを作成する場合などはこちらの対応となります。

STEP3の動画ではポートフォリオページの「架空レストランHP」を作成しています。

あわせて読みたい

ポートフォリオ このページではWixで自作したサイトを掲載しています。ご覧いただけたら嬉しいです。 架空レストランHP 架空ホームページ制作会社LP 架空インテリア小規模ECサイト

TOPページ作成

動画を視聴してみる　※クリックで開けます

STEP3-1

【作成サイトの仕様確認】
※「STEP3」からは実際にご自身でも手を動かしながら動画のようにサイトを作成してみてください。 1つ1つの動画は短いので、1週間以内を目安に完成を目指しましょう！
【参考サイト】
架空レストランHP

STEP3-2

【共通パーツの作成（見出し、ボタン）】
動画では毎回、フォント、フォントサイズの設定をしていますが一括で設定出来るため以下記事を参考に先に設定することをオススメします。

あわせて読みたい

Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】 Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができ…

STEP3-3

【ヘッダー・フッターの作成】
■役立つ記事
WixでGoogle Mapを埋め込む方法！

あわせて読みたい

WixでGoogle Mapを埋め込む方法！【たったの3分でWebサイトでよく見る地図を作成】 Google Mapはどのサイトでも会社説明やアクセスページなどで基本的によく見るパーツですよね。Wixでも埋め込むことができますが、サイト編集の項目が多すぎて初見だとお…

STEP3-4

【ファーストビューの作成】
■役立つ記事
Wix スライドショーの作り方！

あわせて読みたい

Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】 スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。しかし…

STEP3-5

【コンセプト・スタッフ紹介のセクション作成】

STEP3-6

【メニューのセクション作成】

STEP3-7

【当店の特徴のセクション作成】

STEP3-8

【ギャラリーのセクション作成】

STEP3-9

【よくある質問のセクション作成】
■役立つ記事
Wix よくある質問の作り方！

あわせて読みたい

wix フォントの追加の仕方！【既存のフォントにはないフォントをたった5分で追加する方法】 Wixでは多くのフォントが最初から使えるので特には困らないんですが、デザインにこだわると指定のフォントを使いたい場合もでてきます。しかし、使いたいフォントの追加…

STEP3-10

【パララックス・求人・お問い合わせのセクション作成】
■役立つ記事
Wix セクション背景の使える機能まとめ！

あわせて読みたい

Wix セクション背景の使える機能まとめ！【パララックスなどを用いてサイトをオシャレにする】 パーツの背景に画像や動画などを設定したいが、その方法が分からない。そんな方にセクションの追加の仕方や背景の変更の仕方を詳しく解説しています。また、サイトのオ…

STEP3-11

【リンク先の設定】
■役立つ記事
Wix リンク機能の使い方まとめ！

あわせて読みたい

Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】 Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけでは…

下層ページ作成

動画を視聴してみる　※クリックで開けます

STEP3-12

【下層ページの共通パーツの作成】

STEP3-13

【メニューページのアンカーリンクとパーツ作成】
■役立つ記事
Wix アンカーリンクの設定方法を解説！

あわせて読みたい

Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】 アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない…そもそもアンカーリンクが分からない…こんな悩みを解決すべくこの記事は存在していま…

STEP3-14

【スタッフ紹介ページ・求人ページの作成】

STEP3-15

【求人フォームの作成】
■役立つ記事
Wix お問い合わせフォームの作り方！

あわせて読みたい

Wix お問い合わせフォームの作り方！【たったの3ステップで初心者でも簡単にお問い合わせフォームが作成… お問い合わせフォームはWebサイトではもはや必須のパーツですよね。Wixではテンプレートでいくつかのフォームが用意されていますが、そのままのデザインだと何か物足り…

STEP3-16

【お問い合わせフォームの作成】

スマホ版作成

動画を視聴してみる　※クリックで開けます

STEP3-17

【スマホ時のレイアウト調整】
※この動画ではTOPページのみの解説しかしていないので、下層ページに関してはご自身で参考サイトを真似しながら調整してみてください。
■役立つ記事
・Wix スマホレイアウトの編集の仕方を解説！
・Wix モバイルツールの使い方！

【STEP3を完了した方へ】
ここまでお疲れ様でした！動画の最後が途切れていますが以下のような内容になります。 STEP3のサイトをすべて作成し終えた方はもう簡単なサイトは自力で作れる地盤が出来ています。あとは色々なサイトを作ってみて知見と経験をためていきましょう！

あわせて読みたい

Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W…

あわせて読みたい

Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】 Wixのスマホ時に必須と言ってもいいモバイルツールの設定。モバイルツールの設定の存在を知らないとスマホ時のデザインに大きな損失がでることでしょう。今回はモバイル…

まとめ

ここまでの動画の内容を見ることで、実際に作業している様子からWixで1からホームページを作成出来るイメージが掴めたと思います。
この記事を参考にオリジナルのホームページをぜひWixで作成してみてください！

投稿 Wixでサイト作成を実演！【実際に編集している様子を動画で解説】 は なまはげブログ に最初に表示されました。

ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ません。
・ChatWork（チャットワーク）って何？
・そもそも使い方が分からない…
・基本的に使う機能だけ抑えたい

そんな初心者の方に、この記事ではChatWork（チャットワーク）で基本的によく使う機能や小技をまとめて解説し、ビジネスシーンで抑えておきたい項目を解説していきます！

ChatWork（チャットワーク）とは？

ChatWork（チャットワーク）は、ビジネスコミュニケーションを効率化するためのクラウド型のチャットツールです。
テキストだけでなく、ファイル共有、タスク管理、ビデオ通話など多機能を備えており、リモートワークや多拠点でのチームワークに特に有効です。
使い方さえ覚えれば初心者でも簡単に操作でき、チームのコミュニケーションをスムーズにします。

ChatWork（チャットワーク）のアカウント作成

ChatWork（チャットワーク）を使い始めるには、まずアカウントを作成する必要があります。ChatWork（チャットワーク）公式サイトからメールアドレスを登録し、届いたメールの指示に従ってアカウントを設定します。

アカウントを作成する際は
・メールアドレス
・パスワード
は今後、ログイン時に必要になるため必ずメモなどを取って保存しましょう！

アカウントの作成が終わったらChatWork（チャットワーク）にログインします。実際に画面を触りながら内容を見ていきましょう！

ChatWork（チャットワーク）の基本的な機能と使い方

ChatWork（チャットワーク）の基本機能を理解することで、効率的なコミュニケーションが可能になります。

プロフィールの編集

プロフィールを編集するには画面右上の「プロフィール」→「プロフィールを編集」から編集が出来ます。
名前の編集やアイコン画像、背景画像、その他入れたい情報を入力し、プロフィールに表示することが出来ます。

ChatWork（チャットワーク）IDの確認

自分のChatWork（チャットワーク）IDを確認するには画面右上の「プロフィール」→「Chatwork ID：〇〇」から確認出来ます。

ビジネスシーンでは自分のChatWork（チャットワーク）IDを求められることが多いので、メモしておきましょう！

コンタクトの申請・承認

コンタクト申請

他のユーザーをコンタクトに追加するには、画面左上の「＋」→「コンタクトを追加」→「利用中の知り合いを探す」→検索ボックスから相手のChatWork（チャットワーク）IDを検索し、コンタクト申請を送ります。
承認されると、メッセージのやり取りが可能になります。

コンタクト申請の承認

他のユーザーからのコンタクト申請の承認は、画面右上の「友達アイコン」→「未承認」→「承認する」でメッセージのやり取りが可能になります。

メッセージの送信

・「TO」から誰宛にメンションするか？を選択します。（メンションすることで通知がいきます）
→個人チャット間ではメンションはいりません。
・「ここにメッセージ内容を入力」のメッセージ編集欄からテキスト内容を入力し、送信します。

メッセージの編集・削除

自分が送信したメッセージは、送信したメッセージにカーソルをあわせると編集や削除が可能です。

※送信後に相手が既にメッセージを読んでいる場合もあるため、送信前に文章のチェックはしましょう。

メッセージの返信

任意のメッセージに返信したい場合は、そのメッセージにカーソルを合わせると「返信」が出るので、押します。
そうするとテキスト編集欄に返信のタグが生成されるので、その後に返信したいメッセージの内容を入れて送信します。

リアクション

メッセージに対するリアクション機能を使うと、絵文字で感情を表現できます。

特にメッセージをする必要はないけれど「読んでいますよ」という意志表示が必要な時などは活用しましょう！

引用

引用したいメッセージにカーソルをあわせて「引用」を押すとテキスト編集欄にタグが追加されます。

他の人のメッセージも引用が出来るため、会話の流れで引用したいメッセージがあるときは活用しましょう！

電話（画面共有）

ビデオ通話や画面共有機能を使えば、遠隔地にいるメンバーとも顔を見ながらのコミュニケーションが可能です。
使い方は以下のようにとても簡単です。

テキスト編集上のビデオアイコンを押す

電話したい相手を選択し、
「ビデオ通話」か「音声通話」を選択

画面共有は画面右下の「画面共有を開始」で出来ます。

画面共有は一人しか出来ないため、画面共有する際は相手に一声かけましょう！

画像やファイルの添付

ファイルや画像などをメッセージに添付できます。プロジェクトの資料共有に便利です。

複数の画像はフォルダにまとめるなどしてzipファイルで送りましょう！

検索機能

画面右上の検索アイコンをクリックします。

チャット内の検索欄で調べたいキーワードを入れると該当のメッセージなどが見れます。

過去のメッセージやファイルを簡単に見つけることが出来るので活用しましょう！

タスクの追加

画面右の「タスク」からタスクを編集し、期限や担当者を設定して「タスクを追加」を押します。

ミーティングなどの日程を忘れないよう活用しましょう！

グループチャットの作成

グループチャットの作成は、画面左上の「＋」→「グループチャットを新規作成」を押します。

・チャット名
・チャットに追加するメンバー
・概要
などを編集して、「作成する」を押します。

特定のプロジェクトなどでグループを作成し、業務を効果的にしましょう！

ChatWork（チャットワーク）の装飾の仕方

ChatWork（チャットワーク）でメッセージをより見やすく、効果的に伝えるための装飾方法です。

囲み枠・見出し

・視覚的に見やすくしたい範囲を[info]タグで囲みます。
・タイトルにしたいテキストを[title]タグで囲みます。
※[title]タグは単独では使えないため、[info]タグとセットで入力してください。

[info]
[title]見出し[/title]
テキストテキストテキストテキスト
テキストテキストテキストテキスト
[/info]

下線

下線を引きたい箇所に[hr]タグを挿入します。

テキストテキスト
[hr]
テキストテキスト

コード

プログラムコードなど特定の書式を保ちたい場合、[code]タグが役立ちます。
コードを囲みたい箇所に[code]タグを挿入します。

[code]
.test {
display: none;
}
[/code]

絵文字

メッセージに絵文字を加えることで、親しみやすさや感情を表現できます。

ChatWork（チャットワーク）の小技

ChatWork（チャットワーク）をさらに便利に使うための小技です。

チャットグループの固定（ピン留め）

画面左の固定したいチャットにカーソルをあわせるとピンマークが出てくるので押します。

やりとりするチャットが増えるとチャットが埋もれるため、頻繁に使用するチャットグループなどは上部に固定し、アクセスを容易にしましょう！

概要の編集

画面右上の「概要」から編集をします。

チャットグループの概要を編集し、目的やルールを明確にします。

概要には何度も見返すテキストや頻繁にアクセスするURLなどを記載しておくと便利です！

メッセージのリンク

リンクを作成したいメッセージにカーソルをあわせ、「リンク」を押すとそのメッセージへのリンクがテキスト編集の箇所に生成されます。

「引用」の文章が長すぎる、直接メッセージの箇所に飛ばしたい場合などは便利です！

ブックマーク

ブックマークしたいメッセージにカーソルをあわせ、「ブックマーク」を押すとそのメッセージのブックマークが出来ます。

画面左上のブックマークアイコンを押すと、ブックマークしたメッセージが確認出来ます。

重要なメッセージなどはブックマークをして後で見つけられるようにしましょう！

マイチャットの活用

マイチャットは自分にしかメッセージがいかないため、個人的なメモを取ることができます。

・メモ
・他チャットに送信する前の文章を確認
・概要をカスタマイズして効率化
などで使えるため、さらにChatwork（チャットワーク）を使いこなせるでしょう！

アプリ版の活用

アプリはChatWork（チャットワーク）公式サイトからダウンロード出来ます。一番下までスクロールしていくと画像のような箇所にたどり着くので、PC版とスマホ版をダウンロードします。

PC版、スマホ版のアプリも使い方は変わりません！
PCとモニターを使用して普段作業している方は片方の画面でChatwork（チャットワーク）を開けるのでPC版アプリもダウンロードすると効率化が出来るかと思います。

スマホ版アプリは外出時などにメーッセージのやりとりがスマホでも出来るため、ダウンロードすることをオススメします！

まとめ

Chatwork（チャットワーク）は、その多機能性と直感的な操作性で、ビジネスシーンを効率的にサポートします。
初心者の方でも、ここまでの使い方を実践出来れば業務でも問題なくコミュニケーションが出来るようになるでしょう。
基本的な使い方から応用テクニックまで、このツールを最大限に活用して生産性を高めていきましょう！

投稿 初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 は なまはげブログ に最初に表示されました。

フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。
請求書作成のオンラインサイトは「MISOCA」、「freee請求書」、「Money Forwardクラウド請求書」などが多くのフリーランスに使われていますが、
・料金は無料か？
・操作性（使い方）は簡単か？
・継続的に使用したいか？
のような問題点が選択基準にあり、実際にすべての使い方の詳細まで調べるのは中々の手間です。

この記事では上記をすべて解決してくれる「MISOCA」について詳しく解説していきます。
基本機能は無料で利用でき、使い方も簡単でフリーランス初心者でも5分で作成が可能です！
その後の請求書の管理・編集もとても簡単なため、とりあえず請求書を無料でさくっと作成したい方にオススメです！

MISOCAとは？

MISOCAは、日本発のクラウド請求書サービスです。フリーランスや中小企業を主なターゲットとし、請求書の作成や発行、送付、さらには支払い管理までをサポートしてくれるオンラインサイトです。また、請求書のテンプレートが豊富に用意されており、書式に悩むことなく必要な情報を入力するだけであっという間に請求書が完成します。

無料プランでも2023年4月1日から、月間請求書作成可能数が「10通」になったためお金の心配もありません。

MISOCAの使い方

アカウント作成

まずはMISOCAのアカウントを作成して一緒に操作していきましょう！

1. MISOCAの公式サイトにアクセスし、「ログイン」をクリックします。

2.「弥生IDでログイン」をクリックします。

3.「弥生ID新規登録」をクリックします。

4. 必要情報を入力して、MISOCAのログインに必要な弥生IDを作成します。

5. 弥生IDを作成したら、MISOCAにログインします。

請求書の新規作成・テンプレートを選択

1. ダッシュボードから「請求書を新しく作る」を選択します。

2. 用意されているテンプレートの中から好みのスタイルを選びます。

「テンプレート」→「テンプレートを変更」を選択

お好みのテンプレートを選択

基本情報の入力

「基本情報」に戻り、記載したい以下の情報を入力していきます。

• 自社名（名前）
• 取引先（送り先）
• 請求日、お支払い期限
• 請求書番号(請求日を入力したら自動で入力されます)
• 件名
• 郵便番号、住所
• TEL、FAX、メールアドレス
• 登録番号（インボイス用）

請求情報の入力

基本情報の入力が終わったら、以下の請求情報の入力をしていきます。

• 請求の内訳と金額(税区分は請求先の規定に合わせて下さい)
• お振込先の情報

確認と送付

1. 入力した情報が正しいかを確認し、問題なければ「保存する」を押します。
2. 保存が出来たら「発行」を押して、以下の送付・ダウンロードの方法などを選択します。

・郵送手続き
・メール送信
・PDFダウンロード
・印刷
・共有リンク

これで請求書の作成は完了です!
使い方も簡単であっという間に請求書が出来ましたね。

完成した請求書イメージ

ここまでの使い方を順番に進めていけば上記のような請求書が完成です!
インボイスの登録番号は設定するとメールアドレスの下に表示されます。

2回目以降の作成

フリーランスといっても取引先によっては、毎月請求書を作成する場合もあるかと思います。
「MISOCA」は2回目以降の請求書の編集もとても簡単です。

1. 編集したい請求先の会社を選択

2. 「編集」を選択して

・請求日
・請求書番号
・請求の内訳と金額
などを変更したい項目に変更

3. 変更が完了したら「保存する」を押して完了です。
4. 保存が出来たら「発行」を押して、送付・ダウンロードの方法などを選択します。

2回目以降の請求書の作成もあっという間に出来ます!
無料プランは月間請求書作成可能数が「10通」ですが、上限数を超えても1通70円で作成が可能です。
詳しい内容はMISOCAの公式サイトからご確認下さい。

「MISOCA」の公式サイトを見てみる

MISOCAの料金プラン

料金は以下のとおりです。各プランの機能内容などはMISOCAの公式サイトにてご確認下さい。

個人のフリーランスは100通も作成することは考えられないため、「無料プラン」 or 「有料プラン(プラン15)」のどちらかになります。
・有料プラン(プラン15)は年額8,000円+税なので「約733円/月」となります。
・無料プランは毎月、10通以上の作成(無料)+10通(1通ごとに70円)の計20通以内であれば「約700円/月」となります。
毎月21通以上、請求書の作成が必要であれば「約770円/月」になるため有料プランの方がお得になります。

まとめ

MISOCAは、フリーランス初心者の方にとっても簡単に使い始められる便利な請求書作成サービスです。
たったの5分で請求書の作成が出来て、請求書の作成が毎月10通以内であれば無料で使い続けることが出来ます。
無料で使える基本機能だけでも充分ですが、より多くの機能を求める場合には有料プランにアップグレードすることも可能です。この記事を参考にMISOCAの使い方を覚え、スムーズな請求書発行を実現しましょう!

投稿 請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 は なまはげブログ に最初に表示されました。

Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。
Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができますが、意外と変更方法が分かりません。

この記事では、Wixでサイトを作成する最初の段階で設定しておきたいフォントとカラーを一括で設定する方法をご紹介します！

カラーの設定

1. Wixエディターを開き、「サイトデザイン」をクリックします。
2. 「カラーテーマ」を選択し、「サイトカラーを編集」をクリックします。
3. 「カラーを追加」を選択し、ブランドに合わせたカラーを選択またはカスタムカラーを追加します。
4. 設定したカラーは、「テーマカラー」として保存され、サイト全体で使用できるようになります。

実際にテキストのカラーを変更してみると、「テーマカラー」に登録したカラーが反映出来ているのが確認できます。
※Wixのアップデートによって画面の見え方などは少し違います。

Wixでは、サイト全体にわたって使用するカラーを事前に定義しておくことができます。これにより、各ページやセクションでカラーを一括で設定し、ブランドのカラーパレットに忠実なデザインを維持できます。
メインカラー、サブカラー、ボタンカラーなどよく使うカラーはこちらに設定しましょう。

フォントの設定

テキストテーマの編集

1. 「サイトデザイン」に戻り、「テキストテーマ」を選択します。
2. 「見出しh1」〜「段落3」までをクリックして編集します。
3. 「フォント」「サイズ」「カラー」といった項目ごとに設定ができます。
4. 設定したフォントは、テキストを追加する際に自動的に適用されますが、必要に応じて個別に変更することも可能です。

実演

実際に「見出し h2」に以下を登録してみます。
・フォントは「Noto Sans JP」で設定
・フォントサイズは30pxの太字
・カラーは水色

Wixエディターに戻り、サイトに「見出し h2」を追加してみます。
先ほど「見出し h2」に設定した内容が反映されているのが分かるかと思います。
この作業を「見出しh1」〜「段落3」まで繰り返して作業が完了です！

カラーと同様に、Wixではフォントも一括で設定することが可能です。統一されたフォントはサイトの読みやすさを向上させ、プロフェッショナルな印象を与えます。
セクションの見出し（h2）、セクションのサブ見出し（h3）、テキストなどはこちらに設定して使い回せるようにしておきましょう。

サイトの背景カラーの設定

1. 「サイトデザイン」に戻り、「ページ背景」を選択します。
2. 「カラー」を選択し、希望の背景カラーを選択します。
3. また、「マイカラー」から事前に設定したカラーを選択することもできます。
4. 背景カラーはページごとに異なるカラーを設定することも可能ですが、ブランドの一貫性を保つためには、全ページで同じカラーを使用することをお勧めします。

Wixでは、サイトの背景カラーも簡単に設定できます。背景カラーはサイトの雰囲気を大きく左右するため、選択には慎重を期す必要があります。

まとめ

今回はWixでサイトのカラーとフォントを一括で設定する方法を解説しました。
フォントとカラーを一括で設定することで、サイト全体に統一感を持たせることができます。これにより、訪問者にとって覚えやすく、信頼感のあるサイトを作成することが可能になります。効率的にサイトのデザインを整えて良いサイトを作成しましょう！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】 は なまはげブログ に最初に表示されました。

WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。

Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、Wixでもスマホ時のレイアウトを調整する必要があります。

タブレット・スマホで見た時もサイトの見た目が良くなるよう、スマホ時のレイアウト調整のポイントをこの記事で解説していきます！

モバイル最適化

早速スマホ時のレイアウトを調整していきましょう！

まずはじめに「モバイル最適化」を行いましょう。
編集画面上にある「設定」→「モバイル最適化」を選択し、「モバイル最適化を有効にする」にチェックをいれます。

有効化することである程度、自動でスマホのレイアウトの見た目を調整してくれます。

モバイルツールの設定

続いてモバイルツールの設定をします。
編集画面左のツールバーに「モバイルツール」があるので選択。

モバイルツールでは下記の設定と編集ができます。

• モバイルアクションバー
• 「トップ」へ戻るボタン
• ウェルカム画面
• スタイルカラーを見る

スマホ時のレイアウトではよく使うパーツなのでサイト内に設定したい場合は編集をします。
編集方法は以下の記事で詳しく解説していますのでどうぞ。
→参考 : Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】

非表示になっているパーツを表示

モバイル最適化などを行うと、PC時で表示されていたパーツが自動で非表示になる場合があります。
編集画面左のツールバーに「モバイル上で非表示」があるので表示したいパーツがある場合は選択し表示します。

※稀にPC時でグループ化したパーツがスマホのサイト内と「モバイル上で非表示」のツール内のどこにもない場合があります。
→その場合はPCでグループ化したパーツのグループ化を解除することにより表示されます。

スマホのレイアウト崩れを調整

モバイル最適化をしただけではレイアウトは崩れたままなので、崩れている箇所を編集していきます。
ヘッダー　→　ファーストビュー　→　各パーツ　→　フッター　と上から順に編集します。

ツールバーの表示

編集画面右上の「ツール」→「ツールバー」にチェックを入れるとツールバーが表示されます。

個人的にスマホの編集ではツールバーから各パーツのサイズを変更することが多いため、ツールバーをすぐ横に置いておくのがオススメです。

ヘッダーの調整

主にヘッダーでは下記を調整します。

• 会社のロゴのサイズ
• ヘッダーの高さ
• ハンバーガーメニュー
• ハンバーガーメニューの中身

※ハンバーガーメニューはPC時に「模型メニュー」をヘッダーに入れていれば自動で表示されます。ただし、PCでヘッダー・フッターを非表示にしていると表示されません。

ファーストビューの調整

ファーストビューの高さなどを調整します。

スマホで見る場合は250px〜400pxあたりがちょうど良く見えます。
実際の見栄えをは実機（お手持ちのスマホ）で確認をしましょう。
→スマホで自サイトのURLからサイトを開いてレイアウトの見た目を確認

ファーストビューに画像ではなく動画を設定している場合

スマホ時ではデフォルトで動画が画像に変更されているため、スマホ時も動画を再生したい場合は
ファーストビュー選択　→　編集項目の「背景」　→　「スマホで動画を再生」にチェック

各パーツの調整

各パーツでは主に下記を調整します。

• インナー幅
• 文字サイズ
• ボタンサイズ
• 余白
• 画像や動画のサイズ
• 横並びのパーツの調整
• スマホ時、いらないパーツを非表示

順番に解説していきます。

インナー幅

各セクションをこのインナー幅に収め、揃えることでサイトの見栄えが綺麗に見えます。
PC時にはインナー幅が自動で設定されており、画像のような点線がインナー幅になります。

スマホ時にはインナー幅がないためご自身でインナー幅を仮で設定し、各パーツの横幅を揃えます。
Wixのスマホの編集画面が最大幅320pxなので、各パーツを280pxで揃えると綺麗に見えます。

文字サイズ

画像の＋とーのボタンで文字サイズを調整します。

改行したい場合やテキスト内の文字を編集したい場合はスマホの編集では出来ません。
そのため、以下の方法から編集をします。
・新しくテキストを追加し、既存のテキストは非表示にする
・PCのテキストを変更する

※新しくテキストを追加した場合は文字サイズ・行間・フォントの種類がデフォルトになるため、PC時に設定したものに変更する必要があります。（フォントサイズは13px以下は設定できません）

ボタンサイズ

ボタンのサイズを調整します。

• ボタンの高さや横幅
• ボタンの文字サイズ
• ボタンのアイコンサイズ
• ホバー時の各サイズ

余白

セクションなど、各パーツの上下の余白をドラッグして調整します。

画像や動画のサイズ

• 画面いっぱいに見せたい場合は横幅320px
• それ以外は基本、横幅280pxにすると良い

横並びのパーツの調整

横並びのパーツの場合は基本、スマホ時は1列で縦並びにすると綺麗に見えます。

PC時は3列で横並び（3カラム）

スマホ時は1列で縦並び（1カラム）

PC時は3列だったパーツをスマホ時は1列にするだけなので簡単ですね！

スマホ時、いらないパーツを非表示

スマホのレイアウトを編集していると、スマホの時は表示させたくないパーツも出てくるかと思います。
その場合は表示させたくないパーツを選択し、非表示アイコンを選択すると非表示にできます。

これで各パーツのおおまかな調整が完了です！

タブレットのレイアウトを綺麗にする

Wixでは、PCとスマホのレイアウト編集しか出来ないため、タブレットの見た目をよくしたい場合はPC時のインナー幅に収める必要があります。

PC時、インナー幅に収めることで検証ツールで確認したときにタブレットの時も画面からはみ出さずに綺麗に表示できます。

検証ツールでの確認方法（タブレットの見た目を確認する方法）

①自サイトのURLからサイトを開き、以下を実行
Mac　→　「Command」 ＋ 「Option」 ＋ 「I (アイ)キー」で検証ツールを開く
Windows　→　「Ctrl」 ＋ 「Shift」 ＋ 「I (アイ)キー」または「【F12】キー」で検証ツールを開く

②デバイスのマークを選択

③確認したいデバイスのサイズを選択し、リロードして確認

これでタブレットの見た目も綺麗に編集できます！

スマホレイアウト参考

PCとスマホでどのようにレイアウトが変わったかが分かるように自作した参考サイトをポートフォリオに載せております。
検証ツールでデバイスを変えながら確認してみて下さい。

参考 : ポートフォリオページ

まとめ

今回はWixでスマホレイアウトの編集の仕方を解説しました。
レスポンシブ対応までがWebサイト作成のマストな工程ですので、スマホレイアウトまで完結しましょう。
PCでのレイアウトが作れたらスマホでのレイアウト調整は簡単にできるので、この記事を活用してスマホ・タブレットでのサイトの見た目も綺麗に表示してみて下さい！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 は なまはげブログ に最初に表示されました。

スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。

しかし、簡単とはいってもスライドショーの追加の仕方や編集方法が分からなければ作成は困難でしょう。

そこで今回はWixでスライドショーの作り方を解説していきます！

完成イメージ

スライドショーは自動で、または矢印ボタンなどをクリックすることで画像・動画が切り替わったりするパーツです。
Webサイトではよく見るやつですね。さっそく作り方を見ていきましょう！

スライドショーの追加

まずは元となるスライドショーのパーツを追加します。
サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　インタラクティブ　→　ボックススライドショー　→　「特集記事（フード）」のパーツを選択。

スライドショーの編集

いらない項目を削除

追加すると画像のようなパーツがサイト編集画面にでます。

「人気のレシピ」のテキストと「詳しく読む」のボタンはいらないので削除します。

続いて背景の画像もなくします。
スライドショーのパーツをクリックし、　スライド背景を変更　→　単色　から背景色を白にします。
これで背景が白になり、画像が消えました。（スライド背景の透過を0%にするとセクション背景になじみます）

スライド画像の追加

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　画像　からスライドショーに設定したい画像を新しく追加します。

追加した画像をパーツの中央に配置します。

矢印ボタンとスライドボタンの編集

続いて矢印ボタンとスライドボタンの編集をしていきます。

色の変更

スライドショーのパーツをクリックし、　デザインを変更　→　不透明度・色　から矢印ボタンとスライドボタンの色を変更します。

サイズ・位置の変更

スライドショーのパーツをクリックし、「レイアウト」から矢印ボタンとスライドボタンのサイズ、位置を調整します。

これで1枚目のスライドが完成です！

スライドの枚数を追加

デフォルトではスライドが3枚の設定なのでスライドを追加したい場合は
スライドショーのパーツをクリックし、　スライドを管理　→　「スライドを複製」または「スライドを追加」からスライドを追加できます。

2枚目以降のスライド編集

2枚目以降のスライドは動画のように「スライド1/3」の横にある矢印をクリックすると2枚目→3枚目と切り替わります。

あとは1枚目の編集と同様にスライドの枚数分を編集します。
これで完成イメージのようなスライドが完成です！

応用パターン

最後に完成イメージで作ったスライドショーを応用したパターンをご紹介します。

動画の入れ込み

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　埋め込みコード　→　シングル動画プレイヤー　→入れ込みたい動画のパーツを選択。

完成イメージでは画像で作成しましたが、動画のスライドショーもできます！
各スライドに動画やYouTube入れ込むことで動画のように動きます。

アニメーション

スライドショーの画像パーツをクリックし、　アニメーション　→　お好みのアニメーションを選択。

動画のようにアニメーションを追加することでスライドショーに立体的な動きが生まれます！

ここまでご紹介した応用パターンも使うと、スライドショーの作成パターンが更に広がるのでぜひ色々と試してみてください！

まとめ

今回はWixでスライドショーの作り方を解説しました。
ノーコードなので簡単にスライドショーが作成できましたね！
ここまで解説したスライドショーの追加の仕方や編集方法、応用パターンを活用して、ぜひたくさんのスライドショーを作成してみてください。

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】 は なまはげブログ に最初に表示されました。

企業のロゴや画像、文字などが画面の左右からゆっくりと絶えず流れているパーツを作りたい。
意外と使えるパーツなので、Wixを使っている方にぜひ届けたい。そんな思いでこの記事を書きました。

今回はWixで画像の無限ループを作る方法を解説します！

完成イメージ

画像の無限ループがよく分からないと思いますので、まずは完成イメージを動画で見てみましょう！
画面横幅いっぱいに画像が並び、右から左にたえず流れています。Webサイトでもたまに見るパーツですね。

実際のサイトへの応用例
→参考 : 架空HP制作会社LP（トップページのCONCEPT箇所）

また、このようなテキストの画像を使うことで文字が流れるように見せることもできます。

作り方レシピ

ではさっそく作り方を解説していきます。パーツの追加から見ていきましょう。

パーツの追加

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　ギャラリー　→　プロギャラリー　→　ショーケース　を選択。

するとショーケースのパーツが追加されます。

画像の追加・変更

追加したショーケースのパーツをクリックし、「メディアを管理」を選択。
そうすると、このような画面になります。

画像を追加したい場合は「新しく追加」から、変更したい場合は変更したい画像を選択し「画像を変更」からアップロードし、編集します。

パーツの編集

ここからショーケースのパーツの編集をしていきます。

横幅の調整

ショーケースのパーツをクリックし、　ストレッチ　→　全幅に引き伸ばす　のチェックを入れる。
すると画面横幅いっぱいにパーツが広がります。

高さの調整

画像のようにパーツの高さをドラッグして調整します。

無限ループスライド設定

ショーケースのパーツクリックし、　設定　→　レイアウト　をクリック。

• 画像をループ表示にチェックをいれます。
• 自動でスライドにチェックをいれます。
• 連続にチェックをいれます。
• ホバーで一時停止のチェックを外します。
• 速度や間隔の数値を調整します。

以上を設定すると簡単に画像の無限ループが作成できます！

オプション設定

上記の動画を見ると画像をホバーしたときに背景色とハートのアイコンがつき、クリックしたときに画像のポップアップが表示されてしまうのでクリックしても何も起こらない仕様に変更します。

ホバー時の背景色をなくす

ショーケースのパーツをクリックし、　設定　→　デザイン　→　オーバーレイ・アイコン　をクリック。
オーバーレイ色の数値を「0%」に変更します。

ホバー時のハートアイコンをなくす

ショーケースのパーツをクリックし、　設定　→　ハートアイコン　のチェックを外す。

クリック時のポップアップ表示をなくす

ショーケースのパーツをクリックし、　設定　→　クリック時のアクション　を見る。
選択項目がデフォルトで「拡大表示で開く」になっているので「なし」に変更。

上記の各オプション設定をすることで完成イメージのような画像の無限ループを作ることができるので
ぜひ試してみてください！

まとめ

今回はWixで画像の無限ループを作る方法を解説しました。
意外と使えるパーツなので、デザインのパターンとして覚えておくと良いと思います。
ここまで解説したWixで画像の無限ループを作る方法を使い、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix 画像の無限ループを作る方法！【左右からゆっくり流れてくるパーツを作成】 は なまはげブログ に最初に表示されました。

Google Mapはどのサイトでも会社説明やアクセスページなどで基本的によく見るパーツですよね。
Wixでも埋め込むことができますが、サイト編集の項目が多すぎて初見だとおそらく見つけるのは難しいです。

そこで今回はWixでGoogle Mapを埋め込む方法を解説します！

Google Mapの追加

まずはサイトにGoogle Mapの追加をしていきます。

サイト編集　→　画面左にあるツールバー　→　「＋」の追加ボタン　→　フォーム　→　地図　の中からお好みのデザインを選択。
※個人的には普段から見慣れているGoogle Mapのデザインに近い「クラシック(高速道路)」・「クラシック(地形)」がおすすめです！

これでサイトにGoogle Mapの追加が完了です！

Google Mapの編集

デフォルトでは住所がWixの本社になっているので、変更する必要があります。

Google Mapのピン位置を変更

Google Mapのパーツをクリックし、「地図を管理」を選択。

編集項目がでるので「住所」の項目をGoogle Mapに表示したい住所に変更し、「タイトル」も変更します。

上記を変更するとGoogle Mapの表示が変わったことが確認できます。

Google Mapの幅を変更

Google Mapをサイトの横幅いっぱいに見せたい場合もあるかと思います。
設定方法はごく簡単で、Google Mapのパーツをクリックし、「ストレッチ」を選択。
「全幅に引き延ばす」にチェックを入れる。

そうすると画面の横幅いっぱいにGoogle Mapの地図が広がります。
あとはお好みでパーツをドラッグし、高さを調整してください。

いらない表示項目の削除

デフォルトでGoogle Mapに表示されている各項目を少し解説します。
こちらを参考にいらない項目を削除してください。削除の設定は後ほど解説しています。

地図/衛星写真

地図の表示の仕方を変更できます。

ズームイン/ズームアウト

地図の拡大、縮小を操作できます。

ストリートビュー

地図のストリートビューを表示できます。

ルート案内リンクを表示

目的地までの案内が表示されます。

マップのドラッグ

地図を画面いっぱいに表示します。

各項目の挙動は以上になります。

ここまで解説した各項目の編集は「設定」→「Google マップ設定」からチェックを外すことで非表示に変更できるのでお好みで設定してみてください。

まとめ

今回はWixでGoogle Mapを埋め込む方法を解説しました。
ここまで記事を読むことでGoogle Mapの追加から編集、細かな設定までを覚えることができたと思いますので、ぜひサイトに埋め込みをしてみて下さい！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 WixでGoogle Mapを埋め込む方法！【たったの3分でWebサイトでよく見る地図を作成】 は なまはげブログ に最初に表示されました。