<!DOCTYPE html>
<html dir="ltr" lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://cmp.datasign.co/v2/c9667ef0be/cmp.js" async></script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T93L73K');</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" type="text/css" media="all" href="https://teamslash.jp/wp-content/themes/mrp04/style.css">
<link rel="stylesheet" type="text/css" media="all" href="https://teamslash.jp/wp-content/themes/mrp04-child/css/custom.css">
<link rel="stylesheet" type="text/css" media="all" href="https://teamslash.jp/wp-content/themes/mrp04/css/animate.css">
<link rel="pingback" href="https://teamslash.jp/xmlrpc.php">
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/html5.js"></script>
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/css3-mediaqueries.js"></script>
<![endif]-->
<title>【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。 | SLASH</title>

		<!-- All in One SEO 5.0.1 - aioseo.com -->
	<meta name="description" content="経験が無いままWeb制作関係の職場に営業職として配属された…。 非デザイナーだけど、どこまでWeb制作の知識を" />
	<meta name="robots" content="max-image-preview:large" />
	<meta name="author" content="te-ad0307"/>
	<link rel="canonical" href="https://teamslash.jp/article/column/webcomponent01/" />
	<meta name="generator" content="All in One SEO (AIOSEO) 5.0.1" />
		<meta property="og:locale" content="ja_JP" />
		<meta property="og:site_name" content="SLASH" />
		<meta property="og:type" content="article" />
		<meta property="og:title" content="【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。 | SLASH" />
		<meta property="og:description" content="経験が無いままWeb制作関係の職場に営業職として配属された…。 非デザイナーだけど、どこまでWeb制作の知識を" />
		<meta property="og:url" content="https://teamslash.jp/article/column/webcomponent01/" />
		<meta property="og:image" content="https://teamslash.jp/wp-content/uploads/ogp.png" />
		<meta property="og:image:secure_url" content="https://teamslash.jp/wp-content/uploads/ogp.png" />
		<meta property="og:image:width" content="1200" />
		<meta property="og:image:height" content="630" />
		<meta property="article:published_time" content="2022-05-31T01:36:33+00:00" />
		<meta property="article:modified_time" content="2022-06-03T09:50:07+00:00" />
		<meta name="twitter:card" content="summary" />
		<meta name="twitter:title" content="【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。 | SLASH" />
		<meta name="twitter:description" content="経験が無いままWeb制作関係の職場に営業職として配属された…。 非デザイナーだけど、どこまでWeb制作の知識を" />
		<meta name="twitter:image" content="https://teamslash.jp/wp-content/uploads/ogp.png" />
		<script type="application/ld+json" class="aioseo-schema">
			{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#article","name":"\u3010Web\u30b5\u30a4\u30c8\u306b\u5fc5\u8981\u306a\u30d1\u30fc\u30c4 #1\u3011Web\u30b5\u30a4\u30c8\u3092\u5f62\u6210\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u306a\u5404\u30d1\u30fc\u30c4\u3092\u7d30\u304b\u304f\u7406\u89e3\u3057\u3088\u3046\u3002 | SLASH","headline":"\u3010Web\u30b5\u30a4\u30c8\u306b\u5fc5\u8981\u306a\u30d1\u30fc\u30c4 #1\u3011Web\u30b5\u30a4\u30c8\u3092\u5f62\u6210\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u306a\u5404\u30d1\u30fc\u30c4\u3092\u7d30\u304b\u304f\u7406\u89e3\u3057\u3088\u3046\u3002","author":{"@id":"https:\/\/teamslash.jp\/author\/te-ad0307\/#author"},"publisher":{"@id":"https:\/\/teamslash.jp\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/teamslash.jp\/wp-content\/uploads\/webcomp01.jpg","width":980,"height":540},"datePublished":"2022-05-31T10:36:33+09:00","dateModified":"2022-06-03T18:50:07+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#webpage"},"isPartOf":{"@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#webpage"},"articleSection":"COLUMN, \u30b3\u30fc\u30dd\u30ec\u30fc\u30c8\u30b5\u30a4\u30c8\u5236\u4f5c, \u30b5\u30fc\u30d3\u30b9\u30b5\u30a4\u30c8\u5236\u4f5c, \u30d6\u30e9\u30f3\u30c9\u30b5\u30a4\u30c8\u5236\u4f5c, \u30ea\u30af\u30eb\u30fc\u30c8\u30b5\u30a4\u30c8\u5236\u4f5c, Web\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0, UI\/UX, \u30c7\u30b6\u30a4\u30f3"},{"@type":"BreadcrumbList","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/teamslash.jp#listItem","position":1,"name":"Home","item":"https:\/\/teamslash.jp","nextItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/#listItem","name":"ARTICLE"}},{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/#listItem","position":2,"name":"ARTICLE","item":"https:\/\/teamslash.jp\/article\/","nextItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/column\/#listItem","name":"COLUMN"},"previousItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/column\/#listItem","position":3,"name":"COLUMN","item":"https:\/\/teamslash.jp\/article\/column\/","nextItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#listItem","name":"\u3010Web\u30b5\u30a4\u30c8\u306b\u5fc5\u8981\u306a\u30d1\u30fc\u30c4 #1\u3011Web\u30b5\u30a4\u30c8\u3092\u5f62\u6210\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u306a\u5404\u30d1\u30fc\u30c4\u3092\u7d30\u304b\u304f\u7406\u89e3\u3057\u3088\u3046\u3002"},"previousItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/#listItem","name":"ARTICLE"}},{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#listItem","position":4,"name":"\u3010Web\u30b5\u30a4\u30c8\u306b\u5fc5\u8981\u306a\u30d1\u30fc\u30c4 #1\u3011Web\u30b5\u30a4\u30c8\u3092\u5f62\u6210\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u306a\u5404\u30d1\u30fc\u30c4\u3092\u7d30\u304b\u304f\u7406\u89e3\u3057\u3088\u3046\u3002","previousItem":{"@type":"ListItem","@id":"https:\/\/teamslash.jp\/article\/column\/#listItem","name":"COLUMN"}}]},{"@type":"Organization","@id":"https:\/\/teamslash.jp\/#organization","name":"SLASH","url":"https:\/\/teamslash.jp\/"},{"@type":"Person","@id":"https:\/\/teamslash.jp\/author\/te-ad0307\/#author","url":"https:\/\/teamslash.jp\/author\/te-ad0307\/","name":"te-ad0307","image":{"@type":"ImageObject","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/0b8d18b1e24c37c30bafcd70e37e11d541fa05461e6d1ef3174a75de2fe975ce?s=96&d=mm&r=g","width":96,"height":96,"caption":"te-ad0307"}},{"@type":"WebPage","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#webpage","url":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/","name":"\u3010Web\u30b5\u30a4\u30c8\u306b\u5fc5\u8981\u306a\u30d1\u30fc\u30c4 #1\u3011Web\u30b5\u30a4\u30c8\u3092\u5f62\u6210\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u306a\u5404\u30d1\u30fc\u30c4\u3092\u7d30\u304b\u304f\u7406\u89e3\u3057\u3088\u3046\u3002 | SLASH","description":"\u7d4c\u9a13\u304c\u7121\u3044\u307e\u307eWeb\u5236\u4f5c\u95a2\u4fc2\u306e\u8077\u5834\u306b\u55b6\u696d\u8077\u3068\u3057\u3066\u914d\u5c5e\u3055\u308c\u305f\u2026\u3002 \u975e\u30c7\u30b6\u30a4\u30ca\u30fc\u3060\u3051\u3069\u3001\u3069\u3053\u307e\u3067Web\u5236\u4f5c\u306e\u77e5\u8b58\u3092","inLanguage":"ja","isPartOf":{"@id":"https:\/\/teamslash.jp\/#website"},"breadcrumb":{"@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#breadcrumblist"},"author":{"@id":"https:\/\/teamslash.jp\/author\/te-ad0307\/#author"},"creator":{"@id":"https:\/\/teamslash.jp\/author\/te-ad0307\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/teamslash.jp\/wp-content\/uploads\/webcomp01.jpg","@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#mainImage","width":980,"height":540},"primaryImageOfPage":{"@id":"https:\/\/teamslash.jp\/article\/column\/webcomponent01\/#mainImage"},"datePublished":"2022-05-31T10:36:33+09:00","dateModified":"2022-06-03T18:50:07+09:00"},{"@type":"WebSite","@id":"https:\/\/teamslash.jp\/#website","url":"https:\/\/teamslash.jp\/","name":"SLASH","inLanguage":"ja","publisher":{"@id":"https:\/\/teamslash.jp\/#organization"}}]}
		</script>
		<!-- All in One SEO -->

<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://teamslash.jp/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fteamslash.jp%2Farticle%2Fcolumn%2Fwebcomponent01%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://teamslash.jp/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fteamslash.jp%2Farticle%2Fcolumn%2Fwebcomponent01%2F&#038;format=xml" />
<style id="wp-img-auto-sizes-contain-inline-css">
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id="wp-emoji-styles-inline-css">

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id="classic-theme-styles-inline-css">
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
</style>
<style id="wp-block-styles-placeholder-inline-css">
:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer." }
/*# sourceURL=wp-block-styles-placeholder-inline-css */
</style>
<style id="wp-global-styles-placeholder-inline-css">
:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the global-styles printed at wp_footer." }
/*# sourceURL=wp-global-styles-placeholder-inline-css */
</style>
<link rel='stylesheet' id='contact-form-7-css' href='https://teamslash.jp/wp-content/plugins/contact-form-7/includes/css/styles.css' media='all' />
<link rel='stylesheet' id='scroll-top-css-css' href='https://teamslash.jp/wp-content/plugins/scroll-top/assets/css/scroll-top.css' media='all' />
<link rel='stylesheet' id='wp-pagenavi-css' href='https://teamslash.jp/wp-content/plugins/wp-pagenavi/css/wp-pagenavi.css' media='all' />
<link rel='stylesheet' id='wc-shortcodes-style-css' href='https://teamslash.jp/wp-content/plugins/wc-shortcodes/public/assets/css/style.css' media='all' />
<link rel='stylesheet' id='morph-child-style-css' href='https://teamslash.jp/wp-content/themes/mrp04-child/style.css?u=1788751373' media='all' />
<link rel='stylesheet' id='higuchi-css-css' href='https://teamslash.jp/wp-content/themes/mrp04-child/higuchi.css?u=1788751373' media='all' />
<link rel='stylesheet' id='ono-css-css' href='https://teamslash.jp/wp-content/themes/mrp04-child/ono.css?u=1788751373' media='all' />
<link rel='stylesheet' id='iikawa-css-css' href='https://teamslash.jp/wp-content/themes/mrp04-child/iikawa.css?u=1788751373' media='all' />
<link rel='stylesheet' id='saitou-css-css' href='https://teamslash.jp/wp-content/themes/mrp04-child/saitou.css?u=1788751373' media='all' />
<link rel='stylesheet' id='iajcf-frontend-css' href='https://teamslash.jp/wp-content/plugins/morph-extension-system/extensions/image-auth-japanese-version-for-contactform7/css/frontend.css' media='all' />
<link rel='stylesheet' id='fancybox-css' href='https://teamslash.jp/wp-content/plugins/easy-fancybox/fancybox/1.5.4/jquery.fancybox.min.css' media='screen' />
<style id="fancybox-inline-css">
#fancybox-outer{background:#ffffff}#fancybox-content{background:#ffffff;border-color:#ffffff;color:#000000;}#fancybox-title,#fancybox-title-float-main{color:#fff}
/*# sourceURL=fancybox-inline-css */
</style>
<link rel='stylesheet' id='wordpresscanvas-font-awesome-css' href='https://teamslash.jp/wp-content/plugins/wc-shortcodes/public/assets/css/font-awesome.min.css' media='all' />
<!--n2css--><!--n2js--><script id="jquery-core-js" src="https://teamslash.jp/wp-includes/js/jquery/jquery.min.js"></script>
<script id="jquery-migrate-js" src="https://teamslash.jp/wp-includes/js/jquery/jquery-migrate.min.js"></script>
<script id="three-js-js" src="https://teamslash.jp/wp-content/themes/mrp04-child/js/three.r119.min.js?u=1788751373"></script>
<script id="vantafog-js-js" src="https://teamslash.jp/wp-content/themes/mrp04-child/js/vanta.fog.min.js?u=1788751373"></script>
<link rel="https://api.w.org/" href="https://teamslash.jp/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://teamslash.jp/wp-json/wp/v2/posts/209" /><!-- Scroll To Top -->
<style id="scrolltop-custom-style">
		#scrollUp {border-radius:0;opacity:0.7;bottom:20px;right:20px;background:#000000;;}
		#scrollUp:hover{opacity:1;}
        .top-icon{stroke:#ffffff;}
        @media (max-width: 567px) { #scrollUp { display: none !important; } };
		
		</style>
<!-- End Scroll Top - https://wordpress.org/plugins/scroll-top/ -->
<link rel="icon" href="https://teamslash.jp/wp-content/uploads/cropped-ico-32x32.png" sizes="32x32" />
<link rel="icon" href="https://teamslash.jp/wp-content/uploads/cropped-ico-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://teamslash.jp/wp-content/uploads/cropped-ico-180x180.png" />
<meta name="msapplication-TileImage" content="https://teamslash.jp/wp-content/uploads/cropped-ico-270x270.png" />
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/jquery-1.9.0.min.js"></script><script src="https://teamslash.jp/wp-content/themes/mrp04/js/nav-accord.js"></script>
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/smoothscroll.js"></script>
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/wow.min.js"></script>
<script src="https://teamslash.jp/wp-content/themes/mrp04-child/js/effect.js"></script>
<script src="https://teamslash.jp/wp-content/themes/mrp04/js/css_browser_selector.js"></script>
<script src="https://kit.fontawesome.com/20f59cada1.js" crossorigin="anonymous"></script>
</head>
<body class="wp-singular post-template-default single single-post postid-209 single-format-standard wp-theme-mrp04 wp-child-theme-mrp04-child metaslider-plugin wc-shortcodes-font-awesome-enabled browser_unknown cat-column">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T93L73K"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="frogs"></div>
<script>
	VANTA.FOG({
	  el: "#frogs",
	  mouseControls: true,
	  touchControls: true,
	  gyroControls: false,
	  minHeight: 1800.00,
	  minWidth: 1800.00,
	  highlightColor: 0xf7ffd2,
	  midtoneColor: 0xff99f9,
	  lowlightColor: 0x8afaf3,
	  baseColor: 0xffffff,
	  blurFactor: 0.65,
	  speed: 4.00,
	  zoom: 0.80
	});
</script>
<div id="all">
<div class="overlay" id="ps-overlay"></div>
<header id="header" role="banner">
    <div class="inner site-header">
        <div id="header-layout">
            <div class="headlogo">	<a href="https://teamslash.jp" title="SLASH" rel="home">
		<img src="https://teamslash.jp/wp-content/uploads/logo_header.png" alt="SLASH">
	</a>
 
</div>
            <nav id="gNav">
                <ul class="gNav-list">
                    <li class="gNav-item"><a href="/who-we-are/">WHO WE ARE</a></li>
                    <li class="gNav-item"><a href="/service/">SERVICE</a></li>
                    <li class="gNav-item"><a href="/works/">WORKS</a></li>
                    <li class="gNav-item"><a href="/article/">ARTICLE</a></li>
                    <li class="gNav-item"><a href="/support/">SUPPORT</a></li>
                    <li class="gNav-item"><a href="https://www.vision-net.co.jp/recruit/mid/detail_001236.html"  target="_blank">RECRUIT</a></li>
                    <li class="gNav-item"><a href="/contact/">CONTACT</a></li>
                </ul>
            </nav>
            <!-- hbNav -->
            <nav id="hbNav">
                <div id="menu-trigger" class="menu-trigger"> <span></span> <span></span> </div>
                <div class="inner">
                    <div class="panel nav-effect" id="right-panel">
                        <div class="hbmenu_inner">
                            <div class="hbmenuWrap wrap01">
                                <div class="hbMenuttl"><a href="/service/">SERVICE</a></div>
                                <div class="hbMenuBox">
                                    <dl>
                                        <dt><a href="/service/creative/">CREATIVE</a></dt>
                                        <dd><a href="/service/creative/web-production/">Webサイト制作</a></dd>
                                        <dd><a href="/service/creative/#graphic">グラフィック制作</a></dd>
                                        <dd><a href="/service/creative/#video">動画制作</a></dd>
                                        <dd><a href="/service/creative/#web-system">Webシステム開発</a></dd>
                                        <dd><a href="/service/creative/#writing">ページライティング</a></dd>
                                    </dl>
                                    <dl>
                                        <dt>CONSULTING</dt>
                                        <dd>coming soon</dd>
                                        <!--<dd><a href="#">Webサイト運用</a></dd>
                                        <dd><a href="#">ブランディング戦略</a></dd>
                                        <dd><a href="#">DXコンサルティング</a></dd>
                                        <dd><a href="#">SEO・MEO</a></dd>
                                        <dd><a href="#">セミナー</a></dd>-->
                                    </dl>
                                    <dl>
                                        <dt>OPERATION</dt>
                                        <dd>coming soon</dd>
                                        <!--<dd><a href="#">サーバー保守・管理</a></dd>
                                        <dd><a href="#">アクセス解析・効果測定</a></dd>
                                        <dd><a href="#">各種Web広告出稿</a></dd>
                                        <dd><a href="#">Webサイト更新</a></dd>-->
                                    </dl>
                                </div>
                            </div>
                            <div class="hbmenuWrap wrap02">
                                <dl>
                                    <dt><a href="/who-we-are/">WHO WE ARE</a></dt>
                                    <dd><a href="/who-we-are/feature/">私たちの特徴</a></dd>
                                    <dd><a href="/who-we-are/mission-vision/">ミッションとビジョン</a></dd>
                                    <dd><a href="/who-we-are/value-our-cred/">価値観と行動指針</a></dd>
                                </dl>
                                <dl>
                                    <dt><a href="/works/">WORKS</a></dt>
                                    <dd><a href="/creativeworks/">クリエイティブ事例</a></dd>
                                    <!--<dd><a href="/solutionworks/">ソリューション事例</a></dd>-->
                                </dl>
                                <dl>
                                    <dt><a href="/article/">ARTICLE</a></dt>
                                    <dd><a href="/article/news/">お知らせ</a></dd>
                                    <dd><a href="/article/blog/">ブログ</a></dd>
                                    <dd><a href="/article/column/">コラム</a></dd>
                                </dl>
                                <dl>
                                    <dt><a href="/support/">SUPPORT</a></dt>
                                    <dd><a href="https://customer.hp-morph.com/faq/" target="_blank" rel="nofollow noopener">FAQ</a></dd>
                                    <dd><a href="https://customer.hp-morph.com/homepage/" target="_blank" rel="nofollow noopener">各種マニュアル</a></dd>
                                    <dd><a href="https://customer.hp-morph.com/" target="_blank" rel="nofollow noopener">カスタマーサポート</a></dd>
                                </dl>
                                <dl>
                                    <dt><a href="https://www.vision-net.co.jp/recruit" target="_blank">RECRUIT</a></dt>
                                    <dd><a href="https://www.vision-net.co.jp/recruit/mid/detail_001236.html"  target="_blank">募集要項</a></dd>
                                </dl>
                                <dl>
                                    <dt><a href="/company/">COMPANY</a></dt>
                                    <dd><a href="https://www.vision-net.co.jp/company/com_data.html" target="_blank" rel="nofollow noopener">会社概要</a></dd>
                                    <dd><a href="https://www.vision-net.co.jp/company/com_list.html" target="_blank" rel="nofollow noopener">アクセス</a></dd>
                                    <dd><a href="/contact/contact-us/">お問い合わせ</a></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- end/nav --> 
        </div>
    </div>
</header>
<div id="wrapper" class="article_wraps lowEntrys">
<div class="lowcat_mttls">
    <p class="ttls"><span>ARTICLE</span>Knowledge by t/SLASH</p>
    <!-- breadcrumb -->
        	<div id="breadcrumb" class="clearfix">
		<ul>
			<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="https://teamslash.jp/">SLASH</a></li>
			<li>&gt;</li>
			 <li>【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。</li>
					</ul>
	</div>


        <!-- end/breadcrumb --> 
</div>
<div id="content" >
<!--single-->
																														<section class="article_lowlists">
        <article id="post-209" class="content">
        <header class="single_heads">
            <h1 class="title first"><span>
                【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。                </span></h1>
            <div class="item_meta">
                                <p class="item_cats"> <span class="cat"><a href="https://teamslash.jp/article/column/" class="decoline">COLUMN</a></span> </p>
                <p class="item_times">
                    2022/05/31                </p>
            </div>
            <div class="item_botmeta">
                <p class="item_tags">
                                        <span><a href="https://teamslash.jp/article_tag/uiux/" class="decoline">UI/UX</a></span>
                                        <span><a href="https://teamslash.jp/article_tag/design/" class="decoline">デザイン</a></span>
                                    </p>
            </div>
        </header>
        <div class="post">
            <img fetchpriority="high" decoding="async" src="https://teamslash.jp/wp-content/uploads/webcomp01.jpg" alt="" width="980" height="540" class="alignnone size-full wp-image-650" srcset="https://teamslash.jp/wp-content/uploads/webcomp01.jpg 980w, https://teamslash.jp/wp-content/uploads/webcomp01-640x353.jpg 640w" sizes="(max-width: 980px) 100vw, 980px" />
<p>経験が無いままWeb制作関係の職場に営業職として配属された…。<br />
非デザイナーだけど、どこまでWeb制作の知識を学ぶべきなんだろう…。<br />
独学で学ぶにも何から手をつければ良いのか…。<br />
<br />
何も分からないままWeb業界に新しく飛び込んできたそこのあなた！<br />
先輩や同僚に質問しようにも、何を聞けば良いのか分からない…。ノルマを課されたけど、お客さんと話が続かない…。<br />
<br />
そんな迷える皆さんのお役に立ちたい！<br />
<br />
という事で、Webサイト制作をするうえで「ここは絶対に抑えるべき！」な各サイトパーツの名称と役割を、シリーズを通して細かく解説していきます。<br>何はともあれ、まずはWebサイトがどのような仕組みで作られているかを理解しましょう。</p>
<h2>そもそもWebサイトとは？ホームページとの違いって何？</h2>
<p>例えば「コーポレートサイト（企業の紹介を目的としたWebサイト）」の場合だと、「トップページ」の他に「事業案内」や「プライバシーポリシー」などのページで構成されています。<br />それぞれのページを「Webページ」と呼び、<b>Webページの集合体を「Webサイト」</b>と呼びます。<br />
<br />
同じような意味で「ホームページ」と呼ぶ場合があります。「<b>Webサイト</b>」と「<b>ホームページ</b>」の違いは何でしょう？<br />
<br />
ホームページの本来の意味は以下の通り。<br />
・<b>Webサイトで最初に表示されるページのこと。</b><br />
※ホームページの他に「トップページ」「フロントページ」「メインページ」とも呼ばれたりします。<br />
<br />
本来は「Webサイト」と「ホームページ」の意味は違いますが、国内では一般的にどちらも同じ意味で使われることが多いようです。</p>
<h2>Webサイトは様々なパーツの組み合わせで形成されている</h2>
<p>皆さんが普段何気に閲覧されているWebサイト、改めて中身を見てみると様々なパーツの組み合わせで形成されていることが分かります。<br />
それぞれのパーツは適当に配置されている訳ではなく、パーツごとに明確な役割があり、サイトの目的に合わせて、デザイナーが専門的な知識を基に緻密なレイアウトを組んでいます。<br />
<br />
専門的なレイアウト方法までは分からなくとも「<b>各パーツの役割</b>」は非デザイナーであれ必ず理解しておいた方が良いです。<br />
なぜなら、関係者が理解していないと下記のような課題が生じやすくなるからです。<br />
<br />
『話の組み立てが曖昧になり、論理的な提案が出来ない』<br />
『適切なインプットが出来ず、お客様との話がまとまらない』<br />
『お客様に何か質問されても、具体的な回答が出来ない』<br />
<br />
当たり前ですが、クライアントワークにおいて<b>提案する側に理解が無いと、お客様に相手にしてもらえません。</b><br />
「論理的な説明が出来ず、ただ自分の感想を伝えてるだけ」「ホームページ無いと困りますよと、モノだけを売り込もうとしている」<br />
どうですか？身に覚えありませんか？<br />
かくいう私も当時、理解の重要性になかなか気づけず、苦しい思いを何度もしました。<br />
<br />
プロとしてお客様と向き合えるビジネスパーソンを目指すためにも、まずは必要最低限の知識を身につけましょう。</p>
<h2>まずはWebサイトの各パーツの役割を覚えよう</h2>
<p>Webサイトのパーツといっても、細かく分解すると膨大な数があります。<br />
ここではまず、大体どんなWebサイトにも必要になる「基本的なパーツ」を中心とした基本編として、次項から解説していきます。</p>
<h3>サイトパーツ基本編の項目</h3>
<ul>
	<li>・<a href="/article/column/webcomp-logo/">ロゴ</a></li>
	<li>・<a href="/article/column/webcomp-copy/">コピー(キャッチコピー＆見出し)</a></li>
	<li>・<a href="/article/column/webcomp-color/">サイトカラー</a></li>
	<li>・<a href="/article/column/webcomp-cta/">CTA(コールトゥアクション)</a></li>
<li>・【番外編】ドメインサーバー(準備中)</li>
</ul>
<p>パーツの名称は勿論、パーツの役割をしっかり理解して、日々のクライアントワークに活かしてもらえると嬉しいです。</p>		</div>
				<section class="relatedlists listarticle singles">
					            <h3 class="bold">関連した記事を見る</h3>
            <ul>
				                <li>
                    <figure class="zoomIn"><a href="https://teamslash.jp/article/column/webcomp-logo/"><span class="mask"><img width="768" height="432" src="https://teamslash.jp/wp-content/uploads/webcomp_logo-768x432.jpg" class="attachment-related_thumbnail size-related_thumbnail wp-post-image" alt="" decoding="async" srcset="https://teamslash.jp/wp-content/uploads/webcomp_logo-768x432.jpg 768w, https://teamslash.jp/wp-content/uploads/webcomp_logo-640x360.jpg 640w" sizes="(max-width: 768px) 100vw, 768px" /></span></a></figure>
                    <h4 class="bold"><a href="https://teamslash.jp/article/column/webcomp-logo/" class="decoline">【Webサイトに必要なパーツ #2】ロゴの重要性。ロゴは企業/サービスの在り方そのもの。</a></h4>
                    <div class="item_meta">
						                        <p class="item_cats"><a href="https://teamslash.jp/article/column/" class="decoline">COLUMN</a></p>
						                        <p class="item_times">2022/06/01</p>
                    </div>
                </li>
				                <li>
                    <figure class="zoomIn"><a href="https://teamslash.jp/article/column/websiteproduction-costrate/"><span class="mask"><img width="1060" height="580" src="https://teamslash.jp/wp-content/uploads/20230518_thumbnail01_v2.png" class="attachment-related_thumbnail size-related_thumbnail wp-post-image" alt="" decoding="async" /></span></a></figure>
                    <h4 class="bold"><a href="https://teamslash.jp/article/column/websiteproduction-costrate/" class="decoline">ホームページの作成はどこに依頼する？主な依頼先と費用の相場について</a></h4>
                    <div class="item_meta">
						                        <p class="item_cats"><a href="https://teamslash.jp/article/column/" class="decoline">COLUMN</a></p>
						                        <p class="item_times">2023/04/27</p>
                    </div>
                </li>
				                <li>
                    <figure class="zoomIn"><a href="https://teamslash.jp/article/column/websiteproduction-soleproprietorship/"><span class="mask"><img width="1060" height="580" src="https://teamslash.jp/wp-content/uploads/20230518_thumbnail04_v2.png" class="attachment-related_thumbnail size-related_thumbnail wp-post-image" alt="" decoding="async" loading="lazy" /></span></a></figure>
                    <h4 class="bold"><a href="https://teamslash.jp/article/column/websiteproduction-soleproprietorship/" class="decoline">ホームページ作成は個人事業主こそするべき？メリットや作成方法を解説</a></h4>
                    <div class="item_meta">
						                        <p class="item_cats"><a href="https://teamslash.jp/article/column/" class="decoline">COLUMN</a></p>
						                        <p class="item_times">2023/05/18</p>
                    </div>
                </li>
							</ul>
        </section>
						
		        <section class="relatedlists listworks singles">
			<h3 class="bold">関連した実績を見る</h3>
			<ul>
												                <li>
                    <figure class="zoomIn"><a href="https://teamslash.jp/creativeworks/aflonet/"><span class="mask"><img src="<error>
    <code>internal_server_error</code>
    <title><![CDATA[WordPress &amp;rsaquo; エラー]]></title>
    <message><![CDATA[&lt;p&gt;このサイトで重大なエラーが発生しました。&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://ja.wordpress.org/support/article/faq-troubleshooting/&quot;&gt;WordPress のトラブルシューティングについてはこちらをご覧ください。&lt;/a&gt;&lt;/p&gt;]]></message>
    <data>
        <status>500</status>
    </data>
</error>
