<?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>デザイン | SLASH</title>
	<atom:link href="https://teamslash.jp/article_tag/design/feed/" rel="self" type="application/rss+xml" />
	<link>https://teamslash.jp</link>
	<description></description>
	<lastBuildDate>Fri, 03 Jun 2022 09:50:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>

<image>
	<url>https://teamslash.jp/wp-content/uploads/cropped-ico-32x32.png</url>
	<title>デザイン | SLASH</title>
	<link>https://teamslash.jp</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Webサイトに必要なパーツ #2】ロゴの重要性。ロゴは企業/サービスの在り方そのもの。</title>
		<link>https://teamslash.jp/article/column/webcomp-logo/</link>
		
		<dc:creator><![CDATA[te-ad0307]]></dc:creator>
		<pubDate>Wed, 01 Jun 2022 08:42:03 +0000</pubDate>
				<category><![CDATA[COLUMN]]></category>
		<guid isPermaLink="false">https://teamslash.jp/?p=651</guid>

					<description><![CDATA[<p>ロゴといえば皆さん初めに何のロゴをイメージされますか？ アップルのリンゴマーク？ツイッターの青い鳥？グーグルの4色マーク？ 大半の方が、大企業のロゴや自分が好きなブランドのロゴをイメージされるかと思います。 ロゴを見れば ...</p>
The post <a href="https://teamslash.jp/article/column/webcomp-logo/">【Webサイトに必要なパーツ #2】ロゴの重要性。ロゴは企業/サービスの在り方そのもの。</a> first appeared on <a href="https://teamslash.jp">SLASH</a>.]]></description>
										<content:encoded><![CDATA[<img fetchpriority="high" decoding="async" src="https://teamslash.jp/wp-content/uploads/webcomp_logo.jpg" alt="" width="980" height="540" class="alignnone size-full wp-image-660" srcset="https://teamslash.jp/wp-content/uploads/webcomp_logo.jpg 980w, https://teamslash.jp/wp-content/uploads/webcomp_logo-640x353.jpg 640w" sizes="(max-width: 980px) 100vw, 980px" />
<p>ロゴといえば皆さん初めに何のロゴをイメージされますか？<br>
アップルのリンゴマーク？ツイッターの青い鳥？グーグルの4色マーク？<br>
大半の方が、大企業のロゴや自分が好きなブランドのロゴをイメージされるかと思います。<br>
<br>
ロゴを見れば、その会社の名前が分かるように、ロゴは企業ブランディングにおいてとても重要な役割を果たします。<br>
Webサイトにおいても、ロゴがあることによって、このサイトが何のサイトなのかをユーザーに認識してもらいやすくなります。<br>
ロゴが無いサイトは、店舗に看板が無いのと同じで、ユーザーに混乱を与え、すぐに離脱されるサイトになってしまいます。<br>
<br>
さらに言うと、ロゴは入れとけば何でも良いというものではありません。<br>
ロゴひとつでWebサイトの印象は大きく変わります。<br>
<br>
この記事では、ロゴの役割をはじめ、Webサイトに適したロゴとは何か？をご紹介いたします。</p>
<h2>ロゴは会社のイメージを伝えるもの</h2>
<p>サイトリニューアルの際に、何も考えずに今まで使っていたロゴをそのまま流用する。といったケースをよく見かけます。<br>
もちろん目的次第ではロゴをそのまま流用するのは間違いではありません。<br>
しかし、企業リブランディングを目的とした場合に、コンセプトと大きくかけ離れた古いままのロゴが使われていると、大きな違和感が生まれます。<br>
その違和感はそのまま企業の印象に繋がり、結果としてリニューアルは失敗に繋がりやすくなります。<br>
<br>
新規でWebサイトを作る場合にも「別にロゴなんて何でも良いよ、最近は無料で作れるんでしょ？」と言ってロゴを後回しにされる方がいます。<br>しかしそれは、「自分の会社のコンセプトなんか何でも良い、価値はゼロだ。」と言ってるのと同じです。<br>
<br>
少しトゲのある表現をしてしまいましたが、ロゴへの想いは、そのままユーザーへの印象として伝わります。<br>
ボロボロの看板や、イメージとかけ離れている看板の店で、何かモノを買ったりサービスを受けたいと思いますか？恐らく思わないでしょう。<br>
<br>
Webサイトにおけるロゴの役割も同じで、ロゴに込められた想いを基に、デザイナーはサイトコンセプトのアウトプットを始めます。<br>
ロゴへの想いやクオリティが高いほど、サイト自体の印象もグッと良くなります。</p>
<h2>ロゴの種類について</h2>
<p>ここまで、ロゴの役割や重要性について説いてきましたが、ここからはロゴの種類を具体的に掘り下げていきます。<br>
ロゴには以下の３つの種類が存在します。</p>
<br>
<ul>
<li>・ロゴタイプ</li>
<li>・シンボルマーク</li>
<li>・ロゴマーク</li>
</ul>
<h3>ロゴタイプ</h3>
<img decoding="async" src="https://teamslash.jp/wp-content/uploads/logotype.jpg" alt="" width="600" height="200" class="alignnone size-full wp-image-851" />
<p>文字だけで構成されたロゴを通称「ロゴタイプ」と呼びます。<br>
英字だけでシンプルに構成される場合が多く、企業名・ブランド名を国の言語問わず認知してもらいやすいです。<br>
有名な企業としては、「SONY」や「NTT docomo」などがロゴタイプになります。</p><br>
<h4>■メリット</h4>
<p>社名や商品名を覚えてもらいやすい</p>
<h4>■デメリット</h4>
<p>記憶に残りにくい</p>
<br>
<h3>シンボルマーク</h3>
<img decoding="async" src="https://teamslash.jp/wp-content/uploads/symbolmark.jpg" alt="" width="600" height="200" class="alignnone size-full wp-image-852" />
<p>シンボル（象徴）で構成されたロゴを通称「シンボルマーク」と呼びます。<br>
シンボルマークはロゴタイプよりもインパクトが強く、製品全体のデザインにも組み込みやすいです。<br>
アップルの「リンゴマーク」やヤマト運輸の「クロネコ」などが、典型的なシンボルマークの例です。</p><br>
<h4>■メリット</h4>
<p>記憶に残りやすい</p>
<h4>■デメリット</h4>
<p>社名や商品名など覚えてもらいにくい</p>
<br>
<h3>ロゴマーク</h3>
<img loading="lazy" decoding="async" src="https://teamslash.jp/wp-content/uploads/logomark.jpg" alt="" width="600" height="200" class="alignnone size-full wp-image-853" />
<p>ロゴタイプとシンボルマークの両方で構成されたロゴを通称「ロゴマーク」と呼びます。<br>
企業名をアピールしつつ、企業の理念もデザインに組み込めるハイブリッド型です。<br>
ロゴマークを使用している有名企業には、「ベネッセコーポレーション」「森永」「花王」などがあります。</p><br>
<h4>■メリット</h4>
<p>・社名や商品名を覚えてもらえる<br>
・記憶に残りやすい</p>
<h4>■デメリット</h4>
<p>商標登録が複雑になる</p>
<h2>Webサイトに適したロゴとは？</h2>
<p>結論から言うと、横長のロゴマーク（シンボル+ロゴ）がWebサイトには適していると言えます。<br><br>
理由として、一般的にロゴはサイト上部のヘッダーと呼ばれるエリアで使われることが多く、パソコンでもスマホでもヘッダーは基本的に横長なので、ロゴも横長タイプの方がエリアを有効活用できるからです。</p>
<br>
<img loading="lazy" decoding="async" src="https://teamslash.jp/wp-content/uploads/headerlogoimg.jpg" alt="" width="722" height="238" class="alignnone size-full wp-image-1292" srcset="https://teamslash.jp/wp-content/uploads/headerlogoimg.jpg 722w, https://teamslash.jp/wp-content/uploads/headerlogoimg-640x211.jpg 640w" sizes="auto, (max-width: 722px) 100vw, 722px" />
<p>とはいえ構成によって縦長や他の形状の方が適している場合もあるので、横長以外は適していないとは一概には言えません。<br><br>
その他、複雑なものよりなるべくシンプルなもの、モノクロでも判別できるものの方が使いやすく、対応力は増します。</p>
<br>
<p>一番大事なことは、会社やサービスのコンセプトがしっかり反映されているロゴである。ということ。<br>
ロゴで企業の印象は大きく変わります。丁寧に作られたロゴがあるだけで、その企業への興味は数倍増します。ロゴには人の心を動かせる可能性が十分にあります。</p>
<br>
<p>私自身も、魅力的なロゴが一つでも多く作れるよう、日々スキルアップに励みたいと思います。</p>
<div class="blogbtn"><a href="/contact/contact-us/">ロゴ制作のご依頼・ご相談はこちらから</a></div>The post <a href="https://teamslash.jp/article/column/webcomp-logo/">【Webサイトに必要なパーツ #2】ロゴの重要性。ロゴは企業/サービスの在り方そのもの。</a> first appeared on <a href="https://teamslash.jp">SLASH</a>.]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。</title>
		<link>https://teamslash.jp/article/column/webcomponent01/</link>
		
		<dc:creator><![CDATA[te-ad0307]]></dc:creator>
		<pubDate>Tue, 31 May 2022 01:36:33 +0000</pubDate>
				<category><![CDATA[COLUMN]]></category>
		<guid isPermaLink="false">https://teamslash.jp/?p=209</guid>

					<description><![CDATA[<p>経験が無いままWeb制作関係の職場に営業職として配属された…。 非デザイナーだけど、どこまでWeb制作の知識を学ぶべきなんだろう…。 独学で学ぶにも何から手をつければ良いのか…。 何も分からないままWeb業界に新しく飛び ...</p>
The post <a href="https://teamslash.jp/article/column/webcomponent01/">【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。</a> first appeared on <a href="https://teamslash.jp">SLASH</a>.]]></description>
										<content:encoded><![CDATA[<img loading="lazy" 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="auto, (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>The post <a href="https://teamslash.jp/article/column/webcomponent01/">【Webサイトに必要なパーツ #1】Webサイトを形成する上で必要な各パーツを細かく理解しよう。</a> first appeared on <a href="https://teamslash.jp">SLASH</a>.]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
