<?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>WEBデザイン &#8211; IN THE LIVE！</title>
	<atom:link href="https://syu3.com/category/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>https://syu3.com</link>
	<description>ライブ感あふれる自由な人生を楽しもう♪～ノマドロッカーSYU1のブログ～</description>
	<lastBuildDate>Thu, 21 Sep 2017 05:52:06 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.7.11</generator>
<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"/>	<item>
		<title>大川竜弥(ぱくたそ)のビジネス戦略に学ぶ！フリー素材モデルの年収も</title>
		<link>https://syu3.com/webdesign/okawa-tatsuya/</link>
					<comments>https://syu3.com/webdesign/okawa-tatsuya/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Thu, 21 Sep 2017 05:52:06 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=2894</guid>

					<description><![CDATA[大川竜弥（おおかわ たつや）さんという男性モデルをあなたはご存知でしょうか？ 名前は聞いたことがなくても写真を見れば「この人か！」と思わず声に出してしまいそうなのがこの方の特徴です。 ※この記事の最初の画像も大川さん &#038; [&#8230;]]]></description>
										<content:encoded><![CDATA[<p style="margin-top: 2em"><font color="#ff0000"><b>大川竜弥（おおかわ たつや）</b></font>さんという男性モデルをあなたはご存知でしょうか？</p>
<p style="margin-top: 2em">名前は聞いたことがなくても写真を見れば「この人か！」と思わず声に出してしまいそうなのがこの方の特徴です。</p>
<p style="margin-top: 2em">※この記事の最初の画像も大川さん</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">それもそのはず、一般的なモデルというよりは少し特殊な<font style="background-color: #ffff00">「フリー素材モデル」</font>として活動されている方なんですね。</p>
<p style="margin-top: 2em"><font color="#ff0000">「ぱくたそ」</font>という無料で使える画像サイトのモデルをされていて、私のサイトでも画像をよく使用させていただいているのでおわかりになった方も多いかもしれません。</p>
<p style="margin-top: 2em">大川さんがそもそもフリー素材モデルを始めたきっかけが非常にビジネス戦略として面白いなと思ったので今回はそうした部分についてお伝えしていきたいと思います。</p>
<p style="margin-top: 2em">また、気になるフリー素材モデルの年収といったことにも迫ってみましょう。</p>
<p></p>
<p><span id="more-2894"></span> </p>
<h3>大川竜弥(ぱくたそ)のビジネス戦略に学ぶ！</h3>
<p> </p>
<p style="margin-top: 2em">まずは大川竜弥さんのプロフィールをWikipedia風に。</p>
<p><b>誕生日：1982年2月26日</b> </p>
<p><b>出身：神奈川県横浜市</b></p>
<p><b>身長：173cm</b></p>
<p><b>血液型：O型</b></p>
<p></p>
<p>大川さんはフリー素材モデルの他にも司会業や俳優、執筆活動などマルチタレントのような活動をされているそうで大川さんの画像で有名なものと言えば林修先生の「いつやるの？今でしょ！」のパロディ画像ですね。</p>
<p><img loading="lazy" src="http://syu3.com/wp-content/uploads/2017/09/cb58b045ee5d7276db0a6f433d2b6f69.jpg" alt="大川竜弥(ぱくたそ) フリー素材モデル" width="541" height="384" class="alignnone size-full wp-image-2896" srcset="https://syu3.com/wp-content/uploads/2017/09/cb58b045ee5d7276db0a6f433d2b6f69.jpg 541w, https://syu3.com/wp-content/uploads/2017/09/cb58b045ee5d7276db0a6f433d2b6f69-300x213.jpg 300w" sizes="(max-width: 541px) 100vw, 541px" /><br /><font color="#ff0000">この画像を見た方も多いはず</font></p>
<p>最初この人いったい何の人なんだろう？と思ったのが正直な感想ですが、大川さんがそもそもフリー素材モデルを始めたきっかけは意外な所にあったようです。</p>
<p>&nbsp;</p>
<p>大川さんはこの仕事を始める前にユニクロの店員やサラリーマン、ライブハウスの店長などをしていたそうで、その関係からプロレスラー、ザ・グレート・サスケさんのマネージャーや、実業家家入一真さんのアシスタントなどを務めた経歴もあります。</p>
<p>&nbsp;</p>
<p>しかし、ある時交通事故にあいしばらく動けなくなったとのことで、その際何か休んでいる間にできる仕事がないか考えていたところ<br /><b>「インターネットの世界は細分化されているから、誰もが知っているような有名人にならなくても、ひとつの世界で有名人になれば、なんとか生活できるだけのお金は稼げるかもしれない」</b></p>
<p>と思い、ぱくたそのモデル募集を見つけこれなら自分にもできるかもと思ったそうです。</p>
<p>&nbsp;</p>
<p>大川さん自身も語っておられるのですが、フリー素材モデルというのは一般的なモデルのように外見がすごくいいとか特別な才能といった要素がなくてもなれる仕事で色々なところで自分の顔を覚えてもらえさえすればその分野の第一人者となれる所に可能性を感じたとのこと。</p>
<p>ビジネスでも<b>「オンリーワン戦略」</b>といったことがよく言われますが、何かの分野で突出した存在となれば結果はどんどんついてきますから、この大川さんの視点というのは実にビジネス的にも当てはまるところであると思います。</p>
<p>&nbsp;</p>
<p>ライバルが多い所で戦うと負ける確率が高くなるけれど、需要があってなおかつライバルが少なそうな所で戦えば勝てる可能性があるというのはリアルのビジネスでもそうですが、まさにサイトアフィリなどでも言えることですよね。</p>
<p>たとえば、アドセンスアフィリエイトなんかだと、初めの頃はサイトのパワーが弱いのでキーワードが有名だったり大きすぎるものだと既にライバルが多くて上位表示できないわけですが、<br />無名の人だったり新発売の商品だったりするとまだそのキーワードについての記事が少ない可能性が高いので上位表示の確率も上がるというわけです。</p>
<p>&nbsp;</p>
<p>大川さんがインターネットの世界が細分化されているという点に目をつけたのも、ますますネット社会になっていくこれからの時代における仕事というのをしっかりと見すえているように思えます。</p>
<p>ネットの分野というのは芸能人などのように有名でなくてもブロガーやYouTuberと呼ばれる人たちに代表されるように、個人が自由に発信して大きな影響を与えることも充分可能になっていますからね。</p>
<p> </p>
<p>&nbsp;</p>
<h3>大川竜弥(ぱくたそ)のフリー素材モデルの年収も</h3>
<p> </p>
<p>さて、そんなぱくさそモデル大川竜弥さんのフリー素材モデルとしての年収も気になりますね。</p>
<p>一体いくらぐらいなのかというと、撮影によって金額は様々なようですがどうやら基本はそれほど高くはないようです。  </p>
<p>&nbsp; </p>
<p>高額になる場合は企業がPR活動としてフリー素材モデルを起用するコラボ企画の撮影があり、これに参加すると出演料が発生するとのこと。  </p>
<p>大川さんの場合既に<b>「日本一インターネットで顔写真が使われている男」</b>と呼ばれるぐらいなので、かなり稼いでいる可能性もありますが。</p>
<p>いずれにせよ、様々な活動をしながらもフリー素材モデルの仕事は生涯を終えるまで続けていきたいと語っておられるので、私もサイトの記事などこれからも色々な場面でお世話になると思います。</p>
<blockquote class="twitter-tweet" data-lang="ja">
<p lang="ja" dir="ltr">大川バナー広告コレクションをまとめてみました。300&#215;250「レクタングル（中）」バージョンと336&#215;280「レクタングル（大）」バージョンです。 <a href="http://t.co/z2QlMCJYdV">pic.twitter.com/z2QlMCJYdV</a></p>
<p>&mdash; 大川竜弥（フリー素材） (@ryumagazine) <a href="https://twitter.com/ryumagazine/status/628849346214146048">2015年8月5日</a></p></blockquote>
<p> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p><font color="#333333">大川さんのさらにユニークな表情や仕草が見れるのも楽しみですね。</font></span></p>
<p> </p>
<p>ということで、今回は大川竜弥さんのフリー素材モデルという活動を通してのビジネス戦略といった点についてご紹介しました。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/okawa-tatsuya/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>著作権違反を防ぐための画像の使い方や注意点！役立つサイトも紹介</title>
		<link>https://syu3.com/webdesign/tyosakuken-gazou/</link>
					<comments>https://syu3.com/webdesign/tyosakuken-gazou/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Mon, 24 Jul 2017 08:36:47 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=2584</guid>

					<description><![CDATA[サイトアフィリをおこなっていると画像を使う機会も多くなってきますよね。 ただ、どんな画像でも使っていいというわけではなく著作権についても充分注意する必要があります。 &#160; 知らず知らずのうちに著作権に違反していた [&#8230;]]]></description>
										<content:encoded><![CDATA[<p style="margin-top: 2em">サイトアフィリをおこなっていると画像を使う機会も多くなってきますよね。</p>
<p>ただ、どんな画像でも使っていいというわけではなく著作権についても充分注意する必要があります。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">知らず知らずのうちに著作権に違反していたといったことがないようにどのような画像を使えばいいのか使い方や注意点について知っておきましょう。</p>
<p style="margin-top: 2em">また、私が実際に愛用している無料で使えるお役立ちサイトも紹介していきます。</p>
<p></p>
<p> </p>
<h3>著作権違反を防ぐための画像の使い方や注意点！<br /></h3>
<p style="margin-top: 2em">まずは著作権違反を防ぐための画像の使い方から学んでいきましょう。</p>
<p style="margin-top: 2em">現在ネット上には検索するとたくさんの画像が出てきますが、個人や企業のサイトで使用されている画像、アマチュアやプロ関係なくカメラマンが撮影した画像など本当に様々です。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">このようにどんな画像でもインターネット上にアップされている状態になっているため全てに使用禁止の規制をかけるのは実質不可能な状態でそれゆえグレーな部分でもあります。</p>
<p style="margin-top: 2em">ただ、ここで注意が必要なのは大元のサイトに「無断で使用した場合は請求する」といったようなことが書かれている場合があるのでそれを知らずに使ってしまうと著作権違反として削除依頼や請求が来る場合があります。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">芸能人の画像などの場合は事務所から、風景や物などは個人がカメラマンとして撮影したものである場合が多いので弁護士を通じて請求が来たりします。</p>
<p style="margin-top: 2em">特に最近は個人で撮影した人が請求できるということを知って弁護士などを通じて通知してくるケースが多いようです。</p>
<p style="margin-top: 2em">風景や物などの画像を使う際は注意が必要と言えるかもしれません。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">なので、もし画像検索で出てきた画像を使う際は以下の点に注意してから使うようにします。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em"><b>・人物、風景や物など全てにおいて特定されたもの以外は基本的にフリー画像サイトのものを使う</b></p>
<p style="margin-top: 2em">芸能人やキャラクター、商品、建物などそのものが特定される対象はやはりそれ自体の画像を使った方がイメージがわきやすいですが、全般的に何かをイメージさせるために使うのであればフリー画像サイトにいくらでも画像は載っています。</p>
<p style="margin-top: 2em">たとえば夜景のイメージを表すために画像を使いたいのであれば検索サイトの画像検索機能から探すのではなく、<font style="background-color: #ffff00">あらかじめフリー画像サイトで</font>「夜景」と検索して出てきたものを使えばいいわけですね。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em"><b>・キャラクターなど特定のものであっても、著作権に厳しいと知られているものは最初から使わない</b></p>
<p style="margin-top: 2em">ディズニーなど著作権に厳しいと広く知られている所の画像をあえて使うのは自分から違反の可能性を増やすようなものなのであらかじめ使わないと決めておくのが正解です。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em"><b>・画像はそのままではなくRaptureなどで画像をキャプチャしたものを使う</b></p>
<p style="margin-top: 2em">これは著作権というより、そのまま保存した他サイトの画像を使うと「同一ファイル」と見なされ大元のサイトと自分のサイトで同じ内容の部分ができてしまうためです。</p>
<p style="margin-top: 2em">Googleからコピーコンテンツと見なされる可能性が高くなるので、Raptureなど<font style="background-color: #ffff00">キャプチャソフトを使って別の画像として作る</font>必要があります。</p>
<p><b><span style="color:red;">Raptureの使い方はこちら！</span></b><br /><b>↓↓↓↓↓↓↓↓</b><br /><a href="http://syu3.com/tool/rapture/" target="_blank" rel="noopener">Raptureで画像を切り取り！Windows＆Macの画面キャプチャとダウンロード方法</a></p>
<p style="margin-top: 4em"><b>・芸能人の画像などは所属事務所のマークやURLなどが記載されている部分は範囲に含めないようにする</b></p>
<p style="margin-top: 2em">画像の中にあらかじめ著作権違反を防ぐために記載されている場合もあるので最初から使用しないようにしましょう。</p>
<p style="margin-top: 2em">もし<font style="background-color: #ffff00">キャプチャする場合にはその部分を含めないようにする</font>ことで予防します。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em"><b>・ワードプレスのプラグイン「Contact Form 7」を必ず導入しておく</b></p>
<p style="margin-top: 2em">プラグインを一通り入れる際にお問合わせフォームを生成する<font color="#ff0000">「Contact Form 7（コンタクトフォーム7）」</font>を導入していると思いますがもし設定していない場合は問合せ窓口として必ず設定しておきましょう。</p>
<p style="margin-top: 2em">そうすると、何かサイトを通じて問合せがあった場合設定したメールボックスにメールが届くようになります。</p>
<p>日頃のメールのチェックも忘れずにしておきましょう。</p>
<p><b><span style="color:red;">Contact Form 7の使い方をチェック！</span></b><br /><b>↓↓↓↓↓↓↓↓</b><br /><a href="http://syu3.com/wordpress/contactform7/" target="_blank" rel="noopener">Contact Form 7でお問合わせフォームを設置！ なぜ対応窓口が必須なのかも</a></p>
<p style="margin-top: 4em">以上が画像を使う際の主な注意点となります。</p>
<p>もし削除依頼や請求が来た場合は落ち着いて真摯に対応するようにしましょう。</p>
<p style="margin-top:4.0em;">
<h3>著作権違反を防ぐための画像に役立つサイトを紹介</h3>
<p> </p>
<p>では、著作権違反を防ぐための画像を選ぶ際に役立つサイトをご紹介していきます。</p>
<p>ここで紹介するのはフリー素材と呼ばれる画像のサイトでダウンロードは全て無料でおこなえます。</p>
<p>&nbsp;</p>
<p>ただし、それぞれのサイトによって規約があるので<font style="background-color: #ffff00">必ず確認してから</font>使うようにしましょう。</p>
<p>&nbsp;</p>
<p><b>●pixabay</b></p>
<p>立体感と高級感のある画像が多くフリー画像サイトとは思えないほどクオリティが高くなっています。</p>
<p>綺麗さを全面に打ち出すならこのサイトがぴったりです。</p>
<p><a title="https://pixabay.com/" href="https://pixabay.com/">https://pixabay.com/</a></p>
<p>&nbsp;</p>
<p><b>●ぱくたそ</b></p>
<p>よくあるシチュエーションやちょっとコミカルな感じを出したい時に使うと便利な画像が多く揃っています。</p>
<p>モデルの仕草や表情が豊かなので人物を使った画像を取り入れたい時はおすすめです。</p>
<p><a title="https://www.pakutaso.com/" href="https://www.pakutaso.com/">https://www.pakutaso.com/</a></p>
<p>&nbsp;</p>
<p><b>●足成</b></p>
<p>全国のアマチュアカメラマンが撮影した写真が、素材として無料提供されており無料ながらクオリティは高いです。</p>
<p>風景や物はもちろん「ぱくたそ」と同じように人物によるシチュエーション画像などもあるので幅広く使えます。</p>
<p><a title="http://www.ashinari.com/" href="http://www.ashinari.com/">http://www.ashinari.com/</a></p>
<p>&nbsp;</p>
<p><b>●ICOOON MONO</b></p>
<p>モノトーンのアイコン素材を扱った素材配布サイトです。</p>
<p>マークがシンプルでわかりやすく表現されているので、記事の中でアイコンを効果的に使いたい時などは大変おすすめです。</p>
<p><a title="http://icooon-mono.com/" href="http://icooon-mono.com/">http://icooon-mono.com/</a></p>
<p>&nbsp;</p>
<p> </p>
<p style="margin-top: 2em">以上、私が主に使っているフリー素材のサイトについてご紹介しました。</p>
<p style="margin-top: 2em">他にも探せば色々なサイトがあるのであなた自身の気に入ったものを使ってみてくださいね。</p>
<p style="margin-top: 2em">
<p>&nbsp;</p>
<p> </p>
<p>最初に説明した著作権の扱いに注意しながらキャプチャ画像を使ったり、紹介したフリー素材のサイトを使うことによって安全にサイト運営をおこなっていきましょう。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/tyosakuken-gazou/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>テンプレート（テーマ）で見た目を変えよう！選ぶ際の基準は何？</title>
		<link>https://syu3.com/webdesign/template/</link>
					<comments>https://syu3.com/webdesign/template/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Thu, 22 Dec 2016 03:37:38 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=1102</guid>

					<description><![CDATA[ワードプレスはテンプレートというものによって外観が大きく変わります。 そして、様々なテンプレートが利用できるのが人気の理由の一つでもあります。 たくさんの種類のテンプレートがありまるで衣装を選ぶような感じで着せ替えできる [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>ワードプレスは<b><span style="color:red;">テンプレート</span></b>というものによって外観が大きく変わります。</p>
<p>そして、様々なテンプレートが利用できるのが人気の理由の一つでもあります。</p>
<p>たくさんの種類のテンプレートがありまるで衣装を選ぶような感じで着せ替えできるため、何を基準に選んだらいいのかと迷ってしまいそうですね。</p>
<p style="margin-top:4.0em;">
<p>そこで、今回は数あるテンプレートの中からどのような基準でを選べばいいのか、テンプレート変更の手順などについて解説していきます。</p>
<p>あなたのお気に入りのテンプレートをぜひ見つけてみましょう。</p>
<p style="margin-top:4.0em;">
【今回の動画はこちら！】<br />
↓<br />
<iframe loading="lazy" width="620" height="315" src="https://www.youtube.com/embed/sj8uMFgV2zc" frameborder="0" allowfullscreen></iframe></p>
<p style="margin-top:4.0em;">
<h3>WP（ワードプレス）のテンプレートとは？<br />
</h3>
<p>テンプレートとはすでにデザインされたワードプレスの外観のことでサイト自体の大まかなデザインの構造となるものです。</p>
<p>着せ替えのように変えられるためあなたが表現したい世界観に合わせて自由に選ぶことができます。</p>
<p style="margin-top:4.0em;">
<p>日本ではテンプレートの呼び名が一般的ですが、<b>「テーマ」</b>とも呼ばれていますね。</p>
<p>無料・有料とも本当に色々な種類があり、無料でもデザイン性が高かったり有料で機能性を重視したものだったり目的に合わせることもできます。</p>
<p style="margin-top:4.0em;">
<h3>テンプレートの選び方<br />
</h3>
<p>テンプレートを選ぶ際には、まず<span style="background-color: #ffff00">自分の個性を反映した世界観をつくれるものかどうか</span>という点が重要になります。</p>
<p>シンプルな感じを出していきたいのに派手な感じだったり、逆に豪華な感じを出したいのにシンプル過ぎるとうまく世界観を出すことができません。</p>
<p style="margin-top:4.0em;">
<p>また、サイドバーの大きさ・配置など<span style="background-color: #ffff00">機能性が望むものに合っているか</span>ということもポイントです。</p>
<p style="margin-top:4.0em;">
<p>ワードプレスを使っていくにあたって初心者の場合は<span style="background-color: #ffff00">ユーザーの多さ</span>といったことも選択の基準になりますね。</p>
<p>意外とこの点は重要で、デザインが良くても使っている人が少ないと、何か困った時に人に聞いたりネットで参照できる情報が少なかったりするので、ユーザーの多さというのは信頼性の高さということもあります。</p>
<p>使い方の情報が調べやすいかなども考えに入れておきましょう。</p>
<p style="margin-top:4.0em;">
<p>さらにテンプレートにはSEO対策の役割もあり、テンプレートの<span style="background-color: #ffff00">プログラムがGoogleに対してアピールできているか</span>ということも基準にするといいですね。</p>
<p>いくら外観の素晴らしいサイトを作っても、検索の上位に表示されないと見てもらえる機会は少なくなるので、目的が何かということを忘れずによく考えて選んでいきましょう。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/template/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>HTMLとCSSを初心者向けに解説！基本的な意味や機能は？</title>
		<link>https://syu3.com/webdesign/html-css/</link>
					<comments>https://syu3.com/webdesign/html-css/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Wed, 21 Dec 2016 01:54:02 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=1026</guid>

					<description><![CDATA[HTMLやCSSと聞くといかにもプログラミングの専門的な感じがしてとっつきにくいイメージを持たれている方も多いかもしれませんね。 私も最初はプログラミング用語を聞くと何だかそれだけで拒否反応を起こしてしまいそうになったの [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><b><span style="color:red;">HTML</span></b>や<b><span style="color:red;">CSS</span></b>と聞くといかにもプログラミングの専門的な感じがしてとっつきにくいイメージを持たれている方も多いかもしれませんね。</p>
<p>私も最初はプログラミング用語を聞くと何だかそれだけで拒否反応を起こしてしまいそうになったのですが、必要最低限の知識があれば全く問題ありません。</p>
<p style="margin-top:4.0em;">
<p>ということで、今回はHTMLとCSSについて初心者向けの基本的な内容を解説していきます。</p>
<p>サイトのカスタマイズをするのに必要な知識となるので覚えていきましょう。</p>
<p style="margin-top:4.0em;">
<p style="margin-top:4.0em;">
【今回の動画はこちら！】<br />
↓<br />
<iframe loading="lazy" width="620" height="315" src="https://www.youtube.com/embed/0-vsfaBV9qw" frameborder="0" allowfullscreen></iframe></p>
<p style="margin-top:4.0em;">
<h3>HTMLとCSSって？</h3>
<p>HTMLとCSSとはWEBページを構成する要素のことで、この二つの組み合わせによってWEBページが表示されます。</p>
<p>また、サイトをカスタマイズする際に必要となるものですが、あなたがあくまでネットビジネスで稼ぐというのが目的でデザイナーというわけでなければ最低限の知識で大丈夫です。</p>
<p style="margin-top:4.0em;">
<h3>HTMLとは？</h3>
<p>HTMLとは<b><span style="color:red;">HyperText Markup Language（ハイーパーテキストマークアップランゲージ）</span></b>の略でテキストを構成する要素のことを指します。</p>
<p>テキストを構成する要素とは暗号のような文字列でWEBページの表面上では見えないものになっています。</p>
<p>検索エンジンがブラウザにどのような情報を表示させるかをコードで表示するような仕組みですね。</p>
<p style="margin-top:4.0em;">
<p>そのため、使用するブラウザが変わっても同じように表示させることができるというわけです。</p>
<p>HTMLの基本的な機能としては以下ようなものがあります。</p>
<p><b>・文字の大きさや太さを変える</p>
<p>・文字の色を変える</p>
<p>・箇条書きにする</b></p>
<p style="margin-top:4.0em;">
<p>ただ、最近はサイトのデザインをCSSでおこなうようになってきているのでCSSについても合わせて理解しておきましょう。</p>
<p style="margin-top:4.0em;">
<h3>CSSとは？</h3>
<p>CSSとは<b><span style="color:red;">Cascading Style Sheets（カスケイディングスタイルシート）</span></b>の略でHTMLと一緒に使います。</p>
<p>HTMLで構成された要素をどう装飾するか決めるというのが役割です。</p>
<p style="margin-top:4.0em;">
<h4>CSSでデザインを変える理由</h4>
<p>さて、なぜCSSでデザインを変えるのかということについてですが、<br />
HTMLというのは、どのように表示させるかという情報コードを検索エンジンに伝えています。</p>
<p style="margin-top:4.0em;">
<p>しかし、コードが複雑だと検索エンジンから嫌われやすくブラウザに表示しにくくなったり、デザイン変更するとブラウザの影響を受けデザインが崩れる恐れがあるからなんですね。</p>
<p>たとえば、GoogleChromeではちゃんと表示されているのに、インターネットエクスプローラーでは表示が崩れるといったようなケースです。</p>
<p style="margin-top:4.0em;">
それに対し、<span style="background-color: #ffff00">CSSはデザインが変更されても文章構造は変わらない</span>のでCSSを使うというわけです。</p>
<p style="margin-top:4.0em;">
<h4>HTMLとCSSの使い分け</h4>
<p>ということで、HTMLとCSSをうまく使い分ける必要があります。</p>
<p>HTMLでは、見出し（ｈ1～6タグ）や強調（strong）など要素の意味を伝え、CSSではサイトのレイアウト（サイドバーの幅の調整や文字色の変更など）で使うといった具合ですね。</p>
<p style="margin-top:4.0em;">
<p>今回お話しした基本的な部分をぜひおさえて活用していきましょう。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ユーザビリティって何？訪問者目線でサイトをデザインしよう</title>
		<link>https://syu3.com/webdesign/usability/</link>
					<comments>https://syu3.com/webdesign/usability/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Mon, 19 Dec 2016 05:32:47 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=993</guid>

					<description><![CDATA[ユーザビリティという言葉がよく聞かれるようになってきましたが、ユーザビリティとはそもそもどういったものなのでしょうか？ 今回はそんなユーザビリティをサイト構築にどのように生かしていけばいいのか？ということを中心にお話しし [&#8230;]]]></description>
										<content:encoded><![CDATA[<p style="margin-top:2.0em;"><b><span style="color:red;">ユーザビリティ</span></b>という言葉がよく聞かれるようになってきましたが、ユーザビリティとはそもそもどういったものなのでしょうか？</p>
<p style="margin-top:4.0em;">
<p>今回はそんなユーザビリティをサイト構築にどのように生かしていけばいいのか？ということを中心にお話ししていきたいと思います。</p>
<p style="margin-top:4.0em;">
<p>【今回の動画はこちら！】<br />
↓<br />
<iframe loading="lazy" width="620" height="315" src="https://www.youtube.com/embed/0LkrfC6o_fQ" frameborder="0" allowfullscreen></iframe></p>
<p style="margin-top:4.0em;">
<h3>ユーザビリティとは？</h3>
<p>ユーザビリティとはずばり<span style="background-color: #ffff00">「使いやすさ」</span>を意味する言葉です。</p>
<p>そして、WEBユーザビリティといった言葉もよく聞きますが、これは「WEBサイト＋ユーザビリティ」ということで、WEBサイトの使いやすさを表しています。</p>
<p style="margin-top:4.0em;">
<p>ユーザビリティというとサイトのデザインなど見た目を美しくすればそれでよいと思われがちなのですが、実際は見た目の美しさだけではなく、「どのように使ったらいいのか？」といったことに関し<span style="background-color: #ffff00">直感的に使いやすいかどうか</span>ということが重要です。</p>
<p>さらに、ユーザビリティのポイントとしては、文字が画像の中にまぎれないようにしたり、改行や色付けの工夫をするなど文字の読みやすさが挙げられます。</p>
<p style="margin-top:4.0em;">
また、<span style="background-color: #ffff00">トップページから2リンク（クリック）</span>で見たい部分を表示させるように内部リンクを効率的に使ったり、アフォーダンス（それを見てどう使えばいいか）の考えをもとにサイトを訪れた人が使いやすいようリンクの色やボタンを工夫することも大事です。</p>
<p>たとえば、登録するためのボタンを立体的にしたり矢印のマークを使ってどこを押せば登録できるのかわかりやすくするといったようなことですね。</p>
<p style="margin-top:4.0em;">
<p>そして、以上の点をおさえたうえで、ターゲットに合ったデザインを目指しデザインに個性を持たせましょう。</p>
<p>サイトのデザインにおいて、他のサイトと似通ったものだったり、テンプレートが最初のまま何も手を加えていなかったりすると没個性的になってしまいますからね。</p>
<p style="margin-top:4.0em;">
<h3>ユーザビリティを意識しよう</h3>
<p>ユーザビリティを意識するにはまず、ライティングと同様にユーザーのことを第一に考えるという視点が大切です。</p>
<p>自分だけが見て楽しむ目的のサイトならそうした視点は必用ないかもしれませんが、あくまでも多くの人に見てもらいアクセスを集めたり集客につなげるという目的ならユーザーのことを考えなければいけません。</p>
<p style="margin-top:4.0em;">
<p>そして、こちらも<span style="background-color: #ffff00">間違えない・効率的・簡単</span>といった大前提を押さえたうえで個性を発揮するということが重要です。</p>
<p>チャンネル登録してほしい、ここをクリックしてほしいなど様々な目的があると思いますが、使いやすさを大前提にしてあなたが望む方向へ誘導していきましょう。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/usability/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WEBデザインの重要性！基本ポイントをおさえて反応率アップ</title>
		<link>https://syu3.com/webdesign/webd/</link>
					<comments>https://syu3.com/webdesign/webd/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Sun, 19 Jun 2016 00:30:41 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=344</guid>

					<description><![CDATA[WEBデザインということで、自分は専門ではないしネットビジネスに関係あるの？と思われている方も多いかもしれませんね。 しかし、このWEBデザインというのはサイトを訪れた時にそのまま読まれるか、それともすぐに離脱されるかを [&#8230;]]]></description>
										<content:encoded><![CDATA[<p style="margin-top:2.0em;">
<p>WEBデザインということで、自分は専門ではないしネットビジネスに関係あるの？と思われている方も多いかもしれませんね。</p>
<p>しかし、このWEBデザインというのはサイトを訪れた時に<span style="background-color: #ffff00">そのまま読まれるか、それともすぐに離脱されるかをわける重要な部分</span>でもあります。</p>
<p style="margin-top:4.0em;">
<p>私もデザインについては決して専門家ではありません。</p>
<p>ただ、デザインに関する最低限の知識や見せ方というのは学んでおく必要があります。</p>
<p style="margin-top:4.0em;">
<p>ということで、今回はデザインの重要性について理解していきましょう。</p>
<p style="margin-top:4.0em;">
<p>【今回の動画はこちら！】<br />
↓<br />
<iframe loading="lazy" width="620" height="315" src="https://www.youtube.com/embed/zfZZeJ5_yjE" frameborder="0" allowfullscreen></iframe></p>
<p>&nbsp;</p>
<h3>WEBデザインで魅せるサイトに！基本をおさえよう</h3>
<p>WEBデザインに限らず人はまず見た目の第一印象で判断するというのはよく聞くことですよね。</p>
<p>皮ジャンを着ていたら何となくワイルドな感じがしますし、テーラードジャケットを着ていたら何となく紳士的な感じがしたりと見る人は意識せずともそう判断してしまうことがあります。</p>
<p style="margin-top:4.0em;">
<p><font color="#ff0000">ノンバ―バールコミュニケーション（言語を通さないコミュニケーション）</font>と言ったりしますが、<br />視覚を通して判断する印象というのは他の聴覚や嗅覚といった感覚よりも大きな割合を占めます。</p>
<p style="margin-top:4.0em;">
<p>そして、こうした感覚というのはサイトを訪れた人の感覚にも当てはまります。</p>
<p>たとえば、もしあなたのサイトがいきなり真っ赤な画面だったりしたらインパクトがあり過ぎて中にはすぐに引き返す人もいるかもしれません。</p>
<p>※デザイン的にあえてそのような色を使うこともあります </p>
<p style="margin-top:4.0em;">
<p>また、色使いが多過ぎてチカチカしていたり、コンテンツが整理されていなくて何がどこにあるのかわからないといったサイトも見る人にとって親切とは言えませんよね。</p>
<p style="margin-top:4.0em;">
<p>なので、あなたのサイトも他の人が見ることを考えれば、<span style="background-color: #ffff00">自分のサイトの見た目の印象を意識</span>することが大切です。</p>
<p style="margin-top:4.0em;">
<p>デザインについて専門学校で習うような高度な技術を勉強する必用はありませんし、それをやっているとあまりにも時間がかかり過ぎるというもの。</p>
<p>あくまでもデザインの基本の部分を押さえて見た目の印象を変え、「魅せる」サイトを心がけましょう。</p>
<p style="margin-top:4.0em;">
<h3>どうしても難しい場合は外注化も</h3>
<p>また、手の込んだデザインなどで自分の技術では作成するのが難しいような場合は<font style="background-color: #ffff00">外注を使う</font>のもありです。</p>
<p>私もそうした専門的な部分については外注の方に依頼するようにしています。</p>
<p><span style="color:red;"><b>外注化の方法や考え方はこちら！</b></span><br />⇒<a href="http://syu3.com/adsense/gaityu/" target="_blank" rel="noopener">外注化のタイミングや募集方法は？導入すべき理由と育て方</a></p>
<p style="margin-top:4.0em;">
<p>ただ、その際もどういったデザインにしたいのかということを<font style="background-color: #ffff00">自分の頭の中で描き伝えられる</font>ようにしておきましょう。</p>
<p>人の頭の中をのぞくことはできないので、できあがりのイメージを簡単な絵に書いたり文章でわかりやすく表現することが大切です。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/webd/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WEBデザインの全体像を解説！ファンを呼ぶためのサイト作りや外注化も</title>
		<link>https://syu3.com/webdesign/zentaizou/</link>
					<comments>https://syu3.com/webdesign/zentaizou/#respond</comments>
		
		<dc:creator><![CDATA[syu]]></dc:creator>
		<pubDate>Wed, 08 Jun 2016 13:44:36 +0000</pubDate>
				<category><![CDATA[WEBデザイン]]></category>
		<guid isPermaLink="false">http://syu3.com/?p=166</guid>

					<description><![CDATA[ネットビジネスでWEBデザイン？と思われたかもしれませんね。 実際、ネットビジネスでは稼ぐことに目がいくばかりにWEBデザインについてはあまり意識していない人が多いのも現状です。 しかし、サイトを訪れるユーザーにとってデ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p style="margin-top: 2em"><font color="#333333">ネットビジネスでWEBデザイン？と思われたかもしれませんね。</font></p>
<p style="margin-top: 2em"><font color="#333333">実際、ネットビジネスでは稼ぐことに目がいくばかりにWEBデザインについてはあまり意識していない人が多いのも現状です。</font></p>
<p style="margin-top: 4em"><font color="#333333">しかし、サイトを訪れるユーザーにとってデザインというのはあなたの<font style="background-color: #ffff00">報酬を左右する可能性</font>があることを知っておくと他のライバルに大きく差をつけることもできます。</font></p>
<p style="margin-top: 2em">今回はそんなWEBデザインの全体像について解説していきたいと思います。</p>
<p style="margin-top: 2em"><span id="more-5409"></span></p>
<p></p>
<p style="margin-top:4.0em;">
【今回の動画はこちら！】<br />↓<br />
<iframe loading="lazy" width="620" height="315" src="https://www.youtube.com/embed/qUF8ZS8o7c0" frameborder="0" allowfullscreen></iframe></p>
<p>&nbsp;</p>
<h3>WEBデザインの全体像を解説！</h3>
<p> </p>
<p style="margin-top: 2em">WEBデザインというと、何だか難しそうなイメージがあるかもしれません。</p>
<p style="margin-top: 2em">一般的にデザインというと美しい絵や形などをイメージするのではないでしょうか。</p>
<p style="margin-top: 4em">ただ、ネットビジネスでいうデザインというのは単なる美しさと違ってユーザーにサイトやメールマガジンンの登録を促したりと、<font style="background-color: #ffff00">何かアクション（反応）を起こさせるためのデザインという</font><font style=><font style="background-color: #ffff00">機</font><font style="background-color: #ffff00">能的な意味合い</font></font>になります。</p>
<p style="margin-top: 4em">美しい絵を見て「よかった」とそこで終わるのではなく、その後ユーザーが何らかの行動をとることに意味があります。</p>
<p style="margin-top: 2em">ボタンやリンクがどういった色や形になっているか、位置がどこにあるかなど<font style="background-color: #ffff00">ユーザーを動かす要素を計算</font>した上で反応を高めるためにおこなうのがWEBデザインというわけですね。</p>
<p style="margin-top: 2em">&nbsp;</p>
<p style="margin-top: 2em">あなたも思わず買いたくなるような商品のデザインや目を引くような広告を見たりすることがあると思いますが、日頃からそうした視点で商品や広告を見るのも勉強になりますね。</p>
<p style="margin-top: 2em">ネットビジネスが一般的になる中で、一般に認められるようなデザインが今後ますます重要になってきます。</p>
<p style="margin-top: 2em">あなたの家族など身近な人が見ても思わずファンになるようなサイト作りを心がけていきましょう。</p>
<p style="margin-top: 2em">&nbsp;</p>
<h3>困った時は外注化も検討しよう</h3>
<p style="margin-top: 2em">ちなみにデザインをしていく上で、自分ではどうしても作れないようなものについては<font style="background-color: #ffff00">外注して作ってもらう</font>のもありです。</p>
<p style="margin-top: 2em">WEBデザインの技術を勉強することへ脱線し過ぎて本来のネットビジネスが進まないのでは意味がありませんからね。</p>
<p style="margin-top: 4em">ただ、外注する際もどのような狙いを込めてデザインするのか、完成後のイメージというのは<font style="background-color: #ffff00">自分の頭の中で描けるようにしておきましょう。</font></p>
<p style="margin-top: 2em">他の人はあなたの頭の中を覗けるわけではありませんし、外注の方というのはあなたが描いたイメージを形にする役割なので自分の描くイメージというのを意識しておくようにすることが大切です。</p>
<p style="margin-top:4.0em;">
]]></content:encoded>
					
					<wfw:commentRss>https://syu3.com/webdesign/zentaizou/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
