<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>サイト作成 アーカイブ - なまはげブログ</title>
	<atom:link href="https://namahagedesu.com/tag/%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90/feed/" rel="self" type="application/rss+xml" />
	<link>https://namahagedesu.com/tag/サイト作成/</link>
	<description>生まれは秋田のWeb制作フリーランス。 主に当ブログではWixのサイト制作を分かりやすく発信しています。</description>
	<lastBuildDate>Sun, 24 Mar 2024 23:44:39 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Wixでサイト作成を実演！【実際に編集している様子を動画で解説】</title>
		<link>https://namahagedesu.com/wix-explanation-video/</link>
		
		<dc:creator><![CDATA[namahage]]></dc:creator>
		<pubDate>Sun, 24 Mar 2024 08:24:42 +0000</pubDate>
				<category><![CDATA[Wix]]></category>
		<category><![CDATA[サイト作成]]></category>
		<category><![CDATA[スマホレイアウト]]></category>
		<category><![CDATA[動画]]></category>
		<guid isPermaLink="false">https://namahagedesu.com/?p=1766</guid>

					<description><![CDATA[<p><img src="https://namahagedesu.com/wp-content/uploads/2024/03/wix-explanation-video.jpg" class="webfeedsFeaturedVisual" /></p>
<p>ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが [&#8230;]</p>
<p>投稿 <a href="https://namahagedesu.com/wix-explanation-video/">Wixでサイト作成を実演！【実際に編集している様子を動画で解説】</a> は <a href="https://namahagedesu.com">なまはげブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[<p><img src="https://namahagedesu.com/wp-content/uploads/2024/03/wix-explanation-video.jpg" class="webfeedsFeaturedVisual" /></p>
<p class="is-style-big_icon_hatena">ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。<br>私も初めてWixでサイトを作成してみたときは、<strong>まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが作成出来るか</strong>にめちゃくちゃ苦戦しました。<br><br>この記事ではSTEP1〜STEP3の順に解説し、1つのホームページを完成するまでの実際の作業の様子を動画で解説していきます。<br>・STEP1→Wix質問から作成<br>・STEP2→Wixテンプレートから作成<br>・STEP3→白紙テンプレートから作成<br><br>すべての動画を視聴した頃には、簡単なホームページは1から作成出来るイメージが掴めるでしょう！</p>



<h2 class="wp-block-heading">STEP1　Wix質問から作成</h2>



<p class="is-style-icon_announce">動画は1.5倍〜1.75倍の再生速度がオススメです。<br>※1からオリジナルでサイトを作成したい方はSTEP3から視聴をして下さい。</p>



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



<p class="is-style-balloon_box2"><span class="swl-inline-color has-black-color">動画を視聴してみる</span>　<span class="swl-inline-color has-swl-pale-03-color"><span class="swl-fz u-fz-s">※クリックで開けます</span></span></p>



<div class="swell-block-accordion is-style-default">
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP1</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP1" width="500" height="281" src="https://www.youtube.com/embed/I4UjN4eZYRM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【Wix質問からサイトを作成】 <br>※動画の音声が小さめなので、PCの音量は大きくしていただければと思います。<br>【Wixアカウント作成】<br><a href="https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUFFLUhqbkNQbXlaYVFScHFHNzVBbk5pVGw4OGViRERod3xBQ3Jtc0tuLUNKMkd0Y1U1cGdZcWhyRDV5ajNkUklxR0ZTQlExTm1rcVhkWm9JVlc1SFhkTjg0TzNJUTVGZGo4dVBJXzhjNXI4cDlrblZDSHluVHJjQTFhX1Y4TWlFZ1hGMDhaLTJ4YWFFTkg4MkdDOTNsUXB5RQ&amp;q=https%3A%2F%2Fsupport.wix.com%2Fja%2Farticle%2Fwix-%25E3%2581%25AB%25E7%2584%25A1%25E6%2596%2599%25E3%2581%25A7%25E6%2596%25B0%25E8%25A6%258F%25E7%2599%25BB%25E9%258C%25B2%25E3%2581%2599%25E3%2582%258B&amp;v=I4UjN4eZYRM" target="_blank" rel="noreferrer noopener">https://support.wix.com/ja/article/wi&#8230;</a><br>【動画の解説】<br>※「STEP1」・「STEP2」の動画は簡易的な解説の動画になります。 技術的な解説動画は「STEP3」からの動画になるため飛ばしていただいても構いません。<br>■STEP1→Wix質問からサイトを作成<br>■STEP2→Wixテンプレートからサイトを作成<br>■STEP3 白紙テンプレート（1から作成）</p>
</div></div>
</div>



<h2 class="wp-block-heading">STEP2　Wixテンプレートから作成</h2>



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



<p class="is-style-balloon_box2"><span class="swl-inline-color has-swl-deep-03-color"><span class="swl-inline-color has-swl-pale-03-color"><span class="swl-inline-color has-black-color">動画を視聴してみる</span>　<span class="swl-inline-color has-swl-pale-03-color"><span class="swl-fz u-fz-s">※クリックで開けます</span></span></span></span></p>



<div class="swell-block-accordion is-style-default">
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP2-1</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP2-1" width="500" height="281" src="https://www.youtube.com/embed/X2xHcg6KBKE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



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



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP2-2</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP2-2" width="500" height="281" src="https://www.youtube.com/embed/PfFdAlsQtnI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【Wixテンプレートからサイトを作成②】<br>※STEP2-1の動画の最後にリンク先が上手く設定できていませんが、Wix編集画面を閉じてキャッシュを削除したら正常にリンク先が機能しました。<br>STEP2-2の冒頭では上記の作業をした後に動画が始まっています。<br><br>■役立つ記事<br>・Wix アンカーリンクの設定方法を解説！<br>・Wix スマホレイアウトの編集の仕方を解説！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/anchor-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-anchor-link/">Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】</a>
						<span class="p-blogCard__excerpt">アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない&#8230;そもそもアンカーリンクが分からない&#8230;こんな悩みを解決すべくこの記事は存在していま&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2023/02/mobile-edit-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-mobile-edit/">Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】</a>
						<span class="p-blogCard__excerpt">WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>
</div>



<h2 class="wp-block-heading" id="step3">STEP3　白紙テンプレートから作成</h2>



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



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


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2024/03/ポートフォリオ-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/portfolio/">ポートフォリオ</a>
						<span class="p-blogCard__excerpt">このページではWixで自作したサイトを掲載しています。ご覧いただけたら嬉しいです。 架空レストランHP 架空ホームページ制作会社LP 架空インテリア小規模ECサイト</span>					</div>
				</div>
			</div>
		</div>


<h3 class="wp-block-heading">TOPページ作成</h3>



<p class="is-style-balloon_box2"><span class="swl-inline-color has-black-color">動画を視聴してみる</span>　<span class="swl-inline-color has-swl-pale-03-color"><span class="swl-fz u-fz-s">※クリックで開けます</span></span></p>



<div class="swell-block-accordion is-style-default">
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-1</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-1" width="500" height="281" src="https://www.youtube.com/embed/9s7mW8PkuqE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【作成サイトの仕様確認】<br>※「STEP3」からは実際にご自身でも手を動かしながら動画のようにサイトを作成してみてください。 1つ1つの動画は短いので、1週間以内を目安に完成を目指しましょう！<br>【参考サイト】<br><a href="https://sgru1995.wixsite.com/my-site" target="_blank" rel="noreferrer noopener">架空レストランHP</a></p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-2</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-2" width="500" height="281" src="https://www.youtube.com/embed/GHKtRaVSv9g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



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


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2023/11/wix-batch-setting-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-batch-setting/">Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】</a>
						<span class="p-blogCard__excerpt">Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができ&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-3</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-3" width="500" height="281" src="https://www.youtube.com/embed/9C0KE6w00jA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【ヘッダー・フッターの作成】<br>■役立つ記事<br>WixでGoogle Mapを埋め込む方法！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/google-map-2-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-google-map/">WixでGoogle Mapを埋め込む方法！【たったの3分でWebサイトでよく見る地図を作成】</a>
						<span class="p-blogCard__excerpt">Google Mapはどのサイトでも会社説明やアクセスページなどで基本的によく見るパーツですよね。Wixでも埋め込むことができますが、サイト編集の項目が多すぎて初見だとお&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-4</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-4" width="500" height="281" src="https://www.youtube.com/embed/kHn-zH9fbXE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【ファーストビューの作成】<br>■役立つ記事<br>Wix スライドショーの作り方！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/sulide-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-slide/">Wix スライドショーの作り方！【初心者でもたった5分で作成可能です】</a>
						<span class="p-blogCard__excerpt">スライドショーは一般的にHTMLやCSS、JavaScriptの言語を使うので、作成するのに難易度はやや高めですがWixはノーコードなので5分程度で簡単に作れてしまいます。しかし&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-5</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-5" width="500" height="281" src="https://www.youtube.com/embed/6phOcGWnSQQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【コンセプト・スタッフ紹介のセクション作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-6</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-6" width="500" height="281" src="https://www.youtube.com/embed/fUYb8RXLEmA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【メニューのセクション作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-7</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-7" width="500" height="281" src="https://www.youtube.com/embed/SxYMDfCfFio?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【当店の特徴のセクション作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-8</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-8" width="500" height="281" src="https://www.youtube.com/embed/i2RN1cRlFqw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【ギャラリーのセクション作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-9</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-9" width="500" height="281" src="https://www.youtube.com/embed/NVqBN5q8osg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【よくある質問のセクション作成】<br>■役立つ記事<br>Wix よくある質問の作り方！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/font-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-font-addition/">wix フォントの追加の仕方！【既存のフォントにはないフォントをたった5分で追加する方法】</a>
						<span class="p-blogCard__excerpt">Wixでは多くのフォントが最初から使えるので特には困らないんですが、デザインにこだわると指定のフォントを使いたい場合もでてきます。しかし、使いたいフォントの追加&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-10</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-10" width="500" height="281" src="https://www.youtube.com/embed/Mbro2JxAXl8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【パララックス・求人・お問い合わせのセクション作成】<br>■役立つ記事<br>Wix セクション背景の使える機能まとめ！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/section-1-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-section/">Wix セクション背景の使える機能まとめ！【パララックスなどを用いてサイトをオシャレにする】</a>
						<span class="p-blogCard__excerpt">パーツの背景に画像や動画などを設定したいが、その方法が分からない。そんな方にセクションの追加の仕方や背景の変更の仕方を詳しく解説しています。また、サイトのオ&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-11</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-11" width="500" height="281" src="https://www.youtube.com/embed/-Q1tvdIVh94?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【リンク先の設定】<br>■役立つ記事<br>Wix リンク機能の使い方まとめ！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/link-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-link/">Wix リンク機能の使い方まとめ！【ページ・アンカー・メール・電話番号など正しくリンクを設定する】</a>
						<span class="p-blogCard__excerpt">Wixではリンク機能がいくつかあり、最初はどのリンクを使っていいかよく分かりません。「文書ファイルってなに？」「ライトボックスってなに？」と思ったのは私だけでは&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>
</div>



<h3 class="wp-block-heading">下層ページ作成</h3>



<p class="is-style-balloon_box2"><span class="swl-inline-color has-swl-deep-03-color"><span class="swl-inline-color has-black-color">動画を視聴してみる</span>　<span class="swl-inline-color has-swl-pale-03-color"><span class="swl-fz u-fz-s">※クリックで開けます</span></span></span></p>



<div class="swell-block-accordion">
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-12</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-12" width="500" height="281" src="https://www.youtube.com/embed/HrFzYXc3qyU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【下層ページの共通パーツの作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-13</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-13" width="500" height="281" src="https://www.youtube.com/embed/zfXMjTbLmdE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【メニューページのアンカーリンクとパーツ作成】<br>■役立つ記事<br>Wix アンカーリンクの設定方法を解説！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/anchor-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-anchor-link/">Wix アンカーリンクの設定方法を解説！【初心者でも3分で設定が完了】</a>
						<span class="p-blogCard__excerpt">アンカーリンクはよく使うけどWixではどのように設定すればいいのか分からない&#8230;そもそもアンカーリンクが分からない&#8230;こんな悩みを解決すべくこの記事は存在していま&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-14</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-14" width="500" height="281" src="https://www.youtube.com/embed/2M0wIgxaYYU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【スタッフ紹介ページ・求人ページの作成】</p>
</div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-15</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-15" width="500" height="281" src="https://www.youtube.com/embed/TBb3cVtCSUQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【求人フォームの作成】<br>■役立つ記事<br>Wix お問い合わせフォームの作り方！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/12/contact-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-contact-form/">Wix お問い合わせフォームの作り方！【たったの3ステップで初心者でも簡単にお問い合わせフォームが作成&#8230;</a>
						<span class="p-blogCard__excerpt">お問い合わせフォームはWebサイトではもはや必須のパーツですよね。Wixではテンプレートでいくつかのフォームが用意されていますが、そのままのデザインだと何か物足り&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>



<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-16</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-16" width="500" height="281" src="https://www.youtube.com/embed/2AqL3PDOOq0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【お問い合わせフォームの作成】</p>
</div></div>
</div>



<h3 class="wp-block-heading">スマホ版作成</h3>



<p class="is-style-balloon_box2"><span class="swl-inline-color has-swl-deep-03-color"><span class="swl-inline-color has-black-color">動画を視聴してみる</span>　<span class="swl-inline-color has-swl-pale-03-color"><span class="swl-fz u-fz-s">※クリックで開けます</span></span></span></p>



<div class="swell-block-accordion">
<div class="swell-block-accordion__item" aria-expanded="false"><div class="swell-block-accordion__title" data-onclick="toggleAccordion"><span class="swell-block-accordion__label"><strong>STEP3-17</strong></span><span class="swell-block-accordion__icon c-switchIconBtn" aria-hidden="true" data-opened="false"><i class="__icon--closed icon-arrow_drop_down"></i><i class="__icon--opened icon-arrow_drop_up"></i></span></div><div class="swell-block-accordion__body" aria-hidden="true">
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="STEP3-17" width="500" height="281" src="https://www.youtube.com/embed/ZfoMu1DUU64?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p class="is-style-big_icon_memo">【スマホ時のレイアウト調整】<br>※この動画ではTOPページのみの解説しかしていないので、下層ページに関してはご自身で参考サイトを真似しながら調整してみてください。<br>■役立つ記事<br>・Wix スマホレイアウトの編集の仕方を解説！<br>・Wix モバイルツールの使い方！<br><br>【STEP3を完了した方へ】<br>ここまでお疲れ様でした！動画の最後が途切れていますが以下のような内容になります。 STEP3のサイトをすべて作成し終えた方はもう簡単なサイトは自力で作れる地盤が出来ています。あとは色々なサイトを作ってみて知見と経験をためていきましょう！</p>


<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2023/02/mobile-edit-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-mobile-edit/">Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】</a>
						<span class="p-blogCard__excerpt">WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、W&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink" data-style="card">			<div class="p-blogCard -internal" data-type="type1" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://namahagedesu.com/wp-content/uploads/2022/11/mobile-1-300x169.png" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://namahagedesu.com/wix-mobile-tools/">Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】</a>
						<span class="p-blogCard__excerpt">Wixのスマホ時に必須と言ってもいいモバイルツールの設定。モバイルツールの設定の存在を知らないとスマホ時のデザインに大きな損失がでることでしょう。今回はモバイル&#8230;</span>					</div>
				</div>
			</div>
		</div></div></div>
</div>



<h2 class="wp-block-heading">まとめ</h2>



<p class="is-style-bg_stripe">ここまでの動画の内容を見ることで、実際に作業している様子からWixで1からホームページを作成出来るイメージが掴めたと思います。<br>この記事を参考にオリジナルのホームページをぜひWixで作成してみてください！</p>
<p>投稿 <a href="https://namahagedesu.com/wix-explanation-video/">Wixでサイト作成を実演！【実際に編集している様子を動画で解説】</a> は <a href="https://namahagedesu.com">なまはげブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
