<?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>フォトギャラリー アーカイブ - Taniweb制作</title>
	<atom:link href="https://www.taniweb.jp/tag/%E3%83%95%E3%82%A9%E3%83%88%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.taniweb.jp/tag/フォトギャラリー/</link>
	<description>グラフィック&#38;WEBデザイン&#38;女性向けクリエイティブ制作</description>
	<lastBuildDate>Mon, 30 Mar 2026 12:16:01 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.taniweb.jp/wp/wp-content/uploads/2016/07/cropped-ribbon-55x55.png</url>
	<title>フォトギャラリー アーカイブ - Taniweb制作</title>
	<link>https://www.taniweb.jp/tag/フォトギャラリー/</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://websubhub.com/hub"/>
<atom:link rel="self" href="https://www.taniweb.jp/tag/%E3%83%95%E3%82%A9%E3%83%88%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC/feed/"/>
	<item>
		<title>WEBサイトを構成するパーツを見てみよう</title>
		<link>https://www.taniweb.jp/blog/6886/</link>
		
		<dc:creator><![CDATA[Takako Taniguchi]]></dc:creator>
		<pubDate>Mon, 23 May 2016 08:20:10 +0000</pubDate>
				<category><![CDATA[WEBサイト運営のはじめの一歩]]></category>
		<category><![CDATA[記事一覧]]></category>
		<category><![CDATA[header]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[UXUI]]></category>
		<category><![CDATA[WEBサイトの構成]]></category>
		<category><![CDATA[WEBデザイン]]></category>
		<category><![CDATA[カルーセル]]></category>
		<category><![CDATA[ナビゲーション]]></category>
		<category><![CDATA[パーツ]]></category>
		<category><![CDATA[フォトギャラリー]]></category>
		<category><![CDATA[ヘッダー]]></category>
		<category><![CDATA[レイアウト]]></category>
		<guid isPermaLink="false">http://www.taniweb.jp/?p=6886</guid>

					<description><![CDATA[<p><img width="1080" height="1080" src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06.jpg 1080w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-300x300.jpg 300w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-1024x1024.jpg 1024w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-55x55.jpg 55w" sizes="(max-width: 1080px) 100vw, 1080px" /></p>
<p><!-- wp:paragraph --></p>
<p>WEBサイトを構成する様々な要素の名前と役割を確認しておきましょう。チームで作業する時の共通認識として基本的な呼び名を覚えておくとスムーズです。<br />UIデザインでは<strong>「そのパーツがユーザーとどう繋がっているか」</strong>という視点が重要になります。また、WEBのUI全体に云える事ですが、AIがテキストを生成できるからこそ、デザイナーがコントロールする「ボタンの文言（マイクロコピー）」の重要性が増しています。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">レイアウト</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14433,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img01-17.png" alt="" class="wp-image-14433"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>縦の列の事を「カラム」と呼びます。<br />WordPressを運用している方は、お馴染みだと思います。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14427,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img02-6.png" alt="" class="wp-image-14427"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>横の行の事を「ロウ」と呼びます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14428,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img03-3.png" alt="" class="wp-image-14428"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>マス目状に並んでいるものを「グリッド」とよび、グリッドがコンテンツの長さに応じて可変されているものを「ボード」と呼びます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">ナビゲーション</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14435,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img04-2.png" alt="" class="wp-image-14435"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>WEBサイト全体のメニューを設置することを、ナビゲーションと呼びます。サイトの一番上部を「header・ヘッダ」最下部を「footer・フッタ」と呼びます。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ヘッダにあるものを「ヘッダナビ」または「グローバルナビ」</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>フッタにあるナビを「フッターナビ」と呼んだりもします。</p>
<p><strong>「パーソナライズ」によるパーツの動的変化</strong><br />AIはユーザーの行動に合わせて、表示するパーツをリアルタイムで切り替えることができます。全員に同じパーツを見せるのではなく、AIが「今、このユーザーにはこのボタンが必要だ」と判断して出し分けるため、ユーザーが「さっきあったボタンが消えた！」と混乱しないよう、<strong>一貫性と予測可能性</strong>をどう保つかというUIデザインの難しさがあります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">ページとブログの違い</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14437,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img05.png" alt="" class="wp-image-14437"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>標準的な仕様では、ブログ記事は時系列で管理することができるように、タイムスタンプ情報を保有しています。対して、通常のページは記事を書いた日時で検索しないため、時系列に並べることができません。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">カレンダー</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14444,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img08.png" alt="" class="wp-image-14444"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>営業カレンダーやイベントカレンダーです。GoogleカレンダーをHTMLに埋め込んで活用することもあります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">GALLERY・VIDEO</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14440,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img06-2.png" alt="" class="wp-image-14440"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p>PHOTOGALLERYや動画の埋め込み。動画はストリーミングサーバーを準備することもあれば、YouTubeにアップしたものを埋め込む場合もあります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">FORM</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14492,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img11-1.png" alt="" class="wp-image-14492"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>お問い合わせや各種フォーム</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>メールアドレスで手軽にお問い合わせができるシステム。ユーザーとの接触機会損失を防ぐ。お問い合わせや資料請求は最も重要なコンバージョン（CV）</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">SERACH</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14446,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img10.png" alt="" class="wp-image-14446"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>検索窓・検索結果のページ</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>検索窓および検索結果ページは、ユーザーが知りたい内容を単語で検索する為のシステムです。Webサイトの利便性を上げ、サイト内回遊率やコンバージョン率の向上に繋がります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">SERACH</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14449,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img09-1.png" alt="" class="wp-image-14449"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>コメント投稿、表示欄</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>コメント欄はユーザー生成コンテンツ（UGC）の創出に繋がります。 ユーザーがコメントを投稿することで、ページ内容が充実し、検索エンジンからの評価向上やファン化の促進が期待できます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">カート・決済機能</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14452,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img07-3.png" alt="" class="wp-image-14452"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>ショッピングカートと決済機能</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>現在ではクレジットカード・デビットカードで約7割、ID決済や電子マネーなど、多様なニーズに対応してカゴ落ち（途中離脱）を防ぐために、決済システムの導入が必須です。</p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ユーザーの為に信頼性と安全性: セキュリティ機能を担保したシステムを導入し、店舗側にとっても決済と受注の連動処理の効率化を図ります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">商品カテゴリー・商品一覧・商品ページ</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14456,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img13.png" alt="" class="wp-image-14456"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>商品カテゴリー・商品検索・商品一覧・商品詳細ページ</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>単に商品を見せるだけでなく、関連商品のレコメンドで回遊性を高めたり、購入へ繋げる分かりやすい導線が大事です。（転換率・CVR向上）</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></p>
<p><!-- wp:spacer {"height":"80px"} --></p>
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">CHAT</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14459,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img15.png" alt="" class="wp-image-14459"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>チャット形式の会話</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>チャットボットデザインとも呼びます。対話形式である事をわかりやすく表現できます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">CAROUSEL</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14489,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img14-1.png" alt="" class="wp-image-14489"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>スライドショー・CAROUSEL</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>狭いスペースに複数の画像を表示できたり、動的コンテンツでインパクトを与えたりできます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">PRICE</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14461,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img17.png" alt="" class="wp-image-14461"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>価格表</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>価格表の定番デザインはテーブル型とカード型とあり、カード型はおすすめの料金が一番目立つようになっていたりしま。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">FAQ</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14460,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img16.png" alt="" class="wp-image-14460"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>よくあるご質問</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ユーザーにとっては質問に答えてくれ、会社側にとってはお問い合わせ対応のコスト削減になります。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">SITEMAP</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14462,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img18.png" alt="" class="wp-image-14462"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>サイトマップ</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ページの構成をマインドマップのように図式化したもの。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">MUSIC</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14463,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img19.png" alt="" class="wp-image-14463"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>ストリーミング・配信</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ダウンロードが完了していなくても再生できるように、動画や音声をデータとして分割送信するシステム。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">LIST</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14464,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img20.png" alt="" class="wp-image-14464"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>リスト形式</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>関連項目を構造化したり可読性を高めるために使います。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">TAB</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14465,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img21.png" alt="" class="wp-image-14465"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>タブ式（タブUI）</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>限られたスペースで多数の情報を掲載し、タブボタンで表示を切り替えることが出来、効率的。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">POP UP</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14466,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img22.png" alt="" class="wp-image-14466"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>ポップアップ表示</strong></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p>ユーザーの注意を惹きつけて、バナーをクリックさせたりコンバージョン（反応）させることが目的で設置されます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">404</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14467,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img23.png" alt="" class="wp-image-14467"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>404エラー（Not Found）</strong></p>
<p>存在しないページへアクセスした際に表示されるHTTPステータスコード。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} --></p>
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab">
<div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i></p>
<h4 class="vk_borderBox_title">UPLOAD</h4>
</div>
<div class="vk_borderBox_body"><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:image {"id":14468,"sizeSlug":"full","linkDestination":"none"} --></p>
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img24.png" alt="" class="wp-image-14468"/></figure>
<p><!-- /wp:image --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:paragraph --></p>
<p><strong>ファイルアップロード機能</strong><br />htmlファイルのアップロード機能にJavaScriptのFileAPIでプレビューができます。</p>
<p><!-- /wp:paragraph --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"33px"} --></p>
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></div>
</div>
<p><!-- /wp:vk-blocks/border-box --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"80px"} --></p>
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:spacer --></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:block {"ref":14817} /--></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p><!-- wp:spacer {"height":"34px"} --></p>
<div style="height:34px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:heading {"className":"is-style-vk-heading-solid_black"} --></p>
<h2 class="wp-block-heading is-style-vk-heading-solid_black">関連記事もお読みください</h2>
<p><!-- /wp:heading --></p>
<p><!-- wp:embed {"url":"https://www.taniweb.jp/design-planning/","type":"wp-embed","providerNameSlug":"taniweb"} --></p>
<figure class="wp-block-embed is-type-wp-embed is-provider-taniweb wp-block-embed-taniweb">
<div class="wp-block-embed__wrapper">
https://www.taniweb.jp/design-planning/
</div>
</figure>
<p><!-- /wp:embed --></p>
<p><!-- wp:paragraph --></p>
<p><!-- /wp:paragraph --></p>
<p><!-- wp:spacer {"height":"113px"} --></p>
<div style="height:113px" aria-hidden="true" class="wp-block-spacer"></div>
<p><!-- /wp:spacer --></p>
<p><!-- wp:columns --></p>
<div class="wp-block-columns"><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:embed {"url":"https://www.amazon.co.jp/%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E9%9B%86-ingectar-ebook/dp/B0855H8MP6?_encoding=UTF8\u0026qid=1692195273\u0026sr=1-20\u0026linkCode=ll1\u0026tag=taniweb-22\u0026linkId=24bc96d567e28db4abdb6ac44339566a\u0026language=ja_JP\u0026ref_=as_li_ss_tl","type":"rich","providerNameSlug":"amazon"} --></p>
<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon">
<div class="wp-block-embed__wrapper">
https://www.amazon.co.jp/%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E9%9B%86-ingectar-ebook/dp/B0855H8MP6?_encoding=UTF8&amp;qid=1692195273&amp;sr=1-20&amp;linkCode=ll1&amp;tag=taniweb-22&amp;linkId=24bc96d567e28db4abdb6ac44339566a&amp;language=ja_JP&amp;ref_=as_li_ss_tl
</div>
</figure>
<p><!-- /wp:embed --></div>
<p><!-- /wp:column --></p>
<p><!-- wp:column --></p>
<div class="wp-block-column"><!-- wp:embed {"url":"https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC-%E9%BB%92-%E5%8D%93%E9%99%BD-ebook/dp/B0BYYW1F3C?_encoding=UTF8\u0026qid=1692195429\u0026sr=1-33\u0026linkCode=ll1\u0026tag=taniweb-22\u0026linkId=129907b18c537d882db79e18876eb750\u0026language=ja_JP\u0026ref_=as_li_ss_tl","type":"rich","providerNameSlug":"amazon"} --></p>
<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon">
<div class="wp-block-embed__wrapper">
https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC-%E9%BB%92-%E5%8D%93%E9%99%BD-ebook/dp/B0BYYW1F3C?_encoding=UTF8&amp;qid=1692195429&amp;sr=1-33&amp;linkCode=ll1&amp;tag=taniweb-22&amp;linkId=129907b18c537d882db79e18876eb750&amp;language=ja_JP&amp;ref_=as_li_ss_tl
</div>
</figure>
<p><!-- /wp:embed --></div>
<p><!-- /wp:column --></div>
<p><!-- /wp:columns --></p>
<p>投稿<a href="https://www.taniweb.jp/blog/6886/">WEBサイトを構成するパーツを見てみよう</a>は<a href="https://www.taniweb.jp">Taniweb制作</a>の最初に登場しました。</p>
]]></description>
										<content:encoded><![CDATA[<p><img width="1080" height="1080" src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06.jpg 1080w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-300x300.jpg 300w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-1024x1024.jpg 1024w, https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-55x55.jpg 55w" sizes="auto, (max-width: 1080px) 100vw, 1080px" /></p><!-- wp:paragraph -->
<p>WEBサイトを構成する様々な要素の名前と役割を確認しておきましょう。チームで作業する時の共通認識として基本的な呼び名を覚えておくとスムーズです。<br>UIデザインでは<strong>「そのパーツがユーザーとどう繋がっているか」</strong>という視点が重要になります。また、WEBのUI全体に云える事ですが、AIがテキストを生成できるからこそ、デザイナーがコントロールする「ボタンの文言（マイクロコピー）」の重要性が増しています。</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">レイアウト</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14433,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img01-17.png" alt="" class="wp-image-14433"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>縦の列の事を「カラム」と呼びます。<br>WordPressを運用している方は、お馴染みだと思います。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14427,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img02-6.png" alt="" class="wp-image-14427"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>横の行の事を「ロウ」と呼びます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14428,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img03-3.png" alt="" class="wp-image-14428"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>マス目状に並んでいるものを「グリッド」とよび、グリッドがコンテンツの長さに応じて可変されているものを「ボード」と呼びます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">ナビゲーション</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14435,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img04-2.png" alt="" class="wp-image-14435"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>WEBサイト全体のメニューを設置することを、ナビゲーションと呼びます。サイトの一番上部を「header・ヘッダ」最下部を「footer・フッタ」と呼びます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ヘッダにあるものを「ヘッダナビ」または「グローバルナビ」</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>フッタにあるナビを「フッターナビ」と呼んだりもします。<br><br><strong>「パーソナライズ」によるパーツの動的変化</strong><br>AIはユーザーの行動に合わせて、表示するパーツをリアルタイムで切り替えることができます。全員に同じパーツを見せるのではなく、AIが「今、このユーザーにはこのボタンが必要だ」と判断して出し分けるため、ユーザーが「さっきあったボタンが消えた！」と混乱しないよう、<strong>一貫性と予測可能性</strong>をどう保つかというUIデザインの難しさがあります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">ページとブログの違い</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14437,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img05.png" alt="" class="wp-image-14437"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>標準的な仕様では、ブログ記事は時系列で管理することができるように、タイムスタンプ情報を保有しています。対して、通常のページは記事を書いた日時で検索しないため、時系列に並べることができません。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">カレンダー</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14444,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img08.png" alt="" class="wp-image-14444"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>営業カレンダーやイベントカレンダーです。GoogleカレンダーをHTMLに埋め込んで活用することもあります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">GALLERY・VIDEO</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14440,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img06-2.png" alt="" class="wp-image-14440"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>PHOTOGALLERYや動画の埋め込み。動画はストリーミングサーバーを準備することもあれば、YouTubeにアップしたものを埋め込む場合もあります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">FORM</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14492,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img11-1.png" alt="" class="wp-image-14492"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>お問い合わせや各種フォーム</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>メールアドレスで手軽にお問い合わせができるシステム。ユーザーとの接触機会損失を防ぐ。お問い合わせや資料請求は最も重要なコンバージョン（CV）</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">SERACH</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14446,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img10.png" alt="" class="wp-image-14446"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>検索窓・検索結果のページ</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>検索窓および検索結果ページは、ユーザーが知りたい内容を単語で検索する為のシステムです。Webサイトの利便性を上げ、サイト内回遊率やコンバージョン率の向上に繋がります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">SERACH</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14449,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img09-1.png" alt="" class="wp-image-14449"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>コメント投稿、表示欄</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コメント欄はユーザー生成コンテンツ（UGC）の創出に繋がります。 ユーザーがコメントを投稿することで、ページ内容が充実し、検索エンジンからの評価向上やファン化の促進が期待できます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">カート・決済機能</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14452,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img07-3.png" alt="" class="wp-image-14452"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>ショッピングカートと決済機能</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>現在ではクレジットカード・デビットカードで約7割、ID決済や電子マネーなど、多様なニーズに対応してカゴ落ち（途中離脱）を防ぐために、決済システムの導入が必須です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーの為に信頼性と安全性: セキュリティ機能を担保したシステムを導入し、店舗側にとっても決済と受注の連動処理の効率化を図ります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">商品カテゴリー・商品一覧・商品ページ</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14456,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img13.png" alt="" class="wp-image-14456"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>商品カテゴリー・商品検索・商品一覧・商品詳細ページ</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>単に商品を見せるだけでなく、関連商品のレコメンドで回遊性を高めたり、購入へ繋げる分かりやすい導線が大事です。（転換率・CVR向上）</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box -->

<!-- wp:spacer {"height":"80px"} -->
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">CHAT</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14459,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img15.png" alt="" class="wp-image-14459"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>チャット形式の会話</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>チャットボットデザインとも呼びます。対話形式である事をわかりやすく表現できます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">CAROUSEL</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14489,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img14-1.png" alt="" class="wp-image-14489"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>スライドショー・CAROUSEL</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>狭いスペースに複数の画像を表示できたり、動的コンテンツでインパクトを与えたりできます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">PRICE</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14461,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img17.png" alt="" class="wp-image-14461"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>価格表</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>価格表の定番デザインはテーブル型とカード型とあり、カード型はおすすめの料金が一番目立つようになっていたりしま。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">FAQ</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14460,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img16.png" alt="" class="wp-image-14460"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>よくあるご質問</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーにとっては質問に答えてくれ、会社側にとってはお問い合わせ対応のコスト削減になります。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">SITEMAP</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14462,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img18.png" alt="" class="wp-image-14462"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>サイトマップ</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ページの構成をマインドマップのように図式化したもの。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">MUSIC</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14463,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img19.png" alt="" class="wp-image-14463"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>ストリーミング・配信</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ダウンロードが完了していなくても再生できるように、動画や音声をデータとして分割送信するシステム。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">LIST</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14464,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img20.png" alt="" class="wp-image-14464"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>リスト形式</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>関連項目を構造化したり可読性を高めるために使います。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">TAB</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14465,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img21.png" alt="" class="wp-image-14465"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>タブ式（タブUI）</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>限られたスペースで多数の情報を掲載し、タブボタンで表示を切り替えることが出来、効率的。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">POP UP</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14466,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img22.png" alt="" class="wp-image-14466"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>ポップアップ表示</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーの注意を惹きつけて、バナーをクリックさせたりコンバージョン（反応）させることが目的で設置されます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">404</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14467,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img23.png" alt="" class="wp-image-14467"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>404エラー（Not Found）</strong><br><br>存在しないページへアクセスした際に表示されるHTTPステータスコード。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:vk-blocks/border-box {"includeInToc":true,"borderColor":"black"} -->
<div class="wp-block-vk-blocks-border-box vk_borderBox vk_borderBox-background-transparent has-text-color has-black-color is-style-vk_borderBox-style-solid-kado-tit-tab"><div class="vk_borderBox_title_container has-background has-black-background-color"><i class=""></i><h4 class="vk_borderBox_title">UPLOAD</h4></div><div class="vk_borderBox_body"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":14468,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.taniweb.jp/wp/wp-content/uploads/2023/08/img24.png" alt="" class="wp-image-14468"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>ファイルアップロード機能</strong><br>htmlファイルのアップロード機能にJavaScriptのFileAPIでプレビューができます。</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"33px"} -->
<div style="height:33px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:vk-blocks/border-box --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"80px"} -->
<div style="height:80px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:block {"ref":14817} /-->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"34px"} -->
<div style="height:34px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"className":"is-style-vk-heading-solid_black"} -->
<h2 class="wp-block-heading is-style-vk-heading-solid_black">関連記事もお読みください</h2>
<!-- /wp:heading -->

<!-- wp:embed {"url":"https://www.taniweb.jp/design-planning/","type":"wp-embed","providerNameSlug":"taniweb"} -->
<figure class="wp-block-embed is-type-wp-embed is-provider-taniweb wp-block-embed-taniweb"><div class="wp-block-embed__wrapper">
https://www.taniweb.jp/design-planning/
</div></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"113px"} -->
<div style="height:113px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"url":"https://www.amazon.co.jp/%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E9%9B%86-ingectar-ebook/dp/B0855H8MP6?_encoding=UTF8\u0026qid=1692195273\u0026sr=1-20\u0026linkCode=ll1\u0026tag=taniweb-22\u0026linkId=24bc96d567e28db4abdb6ac44339566a\u0026language=ja_JP\u0026ref_=as_li_ss_tl","type":"rich","providerNameSlug":"amazon"} -->
<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon"><div class="wp-block-embed__wrapper">
https://www.amazon.co.jp/%E3%81%A3%E3%81%BD%E3%81%8F%E3%81%AA%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E8%AA%B0%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%A3%E3%81%93%E3%81%84%E3%81%84%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E9%9B%86-ingectar-ebook/dp/B0855H8MP6?_encoding=UTF8&amp;qid=1692195273&amp;sr=1-20&amp;linkCode=ll1&amp;tag=taniweb-22&amp;linkId=24bc96d567e28db4abdb6ac44339566a&amp;language=ja_JP&amp;ref_=as_li_ss_tl
</div></figure>
<!-- /wp:embed --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"url":"https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC-%E9%BB%92-%E5%8D%93%E9%99%BD-ebook/dp/B0BYYW1F3C?_encoding=UTF8\u0026qid=1692195429\u0026sr=1-33\u0026linkCode=ll1\u0026tag=taniweb-22\u0026linkId=129907b18c537d882db79e18876eb750\u0026language=ja_JP\u0026ref_=as_li_ss_tl","type":"rich","providerNameSlug":"amazon"} -->
<figure class="wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon"><div class="wp-block-embed__wrapper">
https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC-%E9%BB%92-%E5%8D%93%E9%99%BD-ebook/dp/B0BYYW1F3C?_encoding=UTF8&amp;qid=1692195429&amp;sr=1-33&amp;linkCode=ll1&amp;tag=taniweb-22&amp;linkId=129907b18c537d882db79e18876eb750&amp;language=ja_JP&amp;ref_=as_li_ss_tl
</div></figure>
<!-- /wp:embed --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --><p>投稿<a href="https://www.taniweb.jp/blog/6886/">WEBサイトを構成するパーツを見てみよう</a>は<a href="https://www.taniweb.jp">Taniweb制作</a>の最初に登場しました。</p>
]]></content:encoded>
					
		
		
				    <image><url>https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-1024x1024.jpg</url></image>
    <thumb><url>https://www.taniweb.jp/wp/wp-content/uploads/2023/08/insta202308_web06-55x55.jpg</url></thumb>
	</item>
	</channel>
</rss>
