<p>3Dプリンタの実用化が本格化しているとの情報が多く入るようになったので<br />
現時点での市場の動向についてまとめてみた。</p>
<p>■市場規模<br />
2013年は23億ドル、2019年には65億ドルと予想されている。</p>
<p>■ツール<br />
様々なモデリングソフトが存在するが、<br />
現在は3D CADが一般化している模様。<br />
世界での利用者は500万人程度。<br />
2D CAD利用者約1400万人のうち年間約100万人が3D CADに移行している。</p>
<p>■メーカー<br />
本場アメリカでは<br />
3D Systems Corporation<br />
Stratasys<br />
の2社が大手。</p>
<p>日本でも<br />
ホットプロシード<br />
キーエンス<br />
ローランド ディー. ジー.<br />
などの企業が有名。</p>
<p>■使用出来る素材<br />
・樹脂<br />
・セラミック<br />
・金属<br />
印刷用素材としては、家庭用ではフィラメントが一般的で<br />
カラーも多く出回っている。</p>
<p>■まとめ<br />
直近では医療や工業製品で使われ始めており、<br />
例えば医療では自分の骨格にぴったりのインプラントを作ったり<br />
最近ではES細胞をプリントして臓器を作る研究も進んでいる。<br />
<a href="http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/" target="_blank">http://wired.jp/2013/02/17/bodies-will-print-in-the-laboratory/</a></p>
<p>また、GE社は3Dプリンタによってジェットエンジンの部品を生産しており、<br />
ボーイング社の小型機への供給が決まっている。</p>
<p>プロトタイプの印刷という利用方法としては既に浸透しつつあり、<br />
MS社のsurfaceは開発に300個以上の試作を用意しており<br />
その多くは3Dプリンタによって作られたという。</p>
<p>今後は上記のような利用方法から発展していく傍ら<br />
中小規模での利用も増え、そうなるとモデリングを得意とする会社や<br />
デザイナーを抱える会社がモデリング技術を備えることにより<br />
メーカーとの連携が増え、結果として3D制作関連の企業も増加すると思う。</p>
<p>また、個人レベルでの製造業が可能となり、<br />
例えばiPhoneケースやメガネなどの個人メーカーが増えるかもしれない。</p>


3Dプリンタの現状

jQueryでTouch the Numbersを作ってみた

<p>ミャンマーのIT企業は他の国と比べて、アウトソーシングの仕事を受けられない理由はインターネットシステムに信頼されていない事と見られています。インターネットの欠陥のため、仕事が遅延した場合は海外の会社へ補償金を払わなければならないこと、そのためにアウトソーシング事業の大きな仕事をできずに、小さな仕事だけを行っています。</p>
<p>その件に関して、2012年９月にネイピードで行われた通信情報技術の発展についてのセミナーで通信郵政省の大臣が、インターネットシステムが海外から信頼されるようにする事と、通信郵政省がインターネットについて責任を持っていく事を発言しました。</p>
<p>計画として、ミャンマーで開催する2013年ASEAN競技大会(SEA GAME)に間に合うようにインターネットの通信速度を10GBにまで引き上げる準備をしているようです。<br />
現在、ミャンマー国内で使用しているインターネットの速度は3GBであり、10GBまで引き上げる計画であります。</p>
<p>以前は、その計画の為に日本から支援をいただいているようでしたが、結局、韓国の政府の機関に取られたみたいです。</p>
<p>携帯に関してもいろいろ変化があります。</p>
<p>３年前(2010)、来日したときは携帯番号一個を買うのに200万チャット(約20万円)かかりました。だいたい、３０人に一人だけが持っているようなとても貴重な物でした。月給２0万チャット(約2万円)の家族は携帯を買う事は夢のようでした。約20万円の携帯もただ通話だけで来て、インターネットは使えませんでした。</p>
<p>先月、一時帰国したときはどこ行ってもみんな携帯をいじっている様子を見かけました。２年前一回一時帰国しましたが、来日する前の状況とは変わりませんでした。今回、帰ったときに大きな変わったことを言うとしたら、携帯とインターネットの事でしょう。</p>
<p>去年は200万チャット(約20万円)の携帯と50万チャット(約5万円)まで下げましたが、今年から２0万チャット(2万円)まで下げました。政府は5年計画で国内の電話普及率を57%に引き上げるという計画を立てました。これを実現する為には、3万チャット(約3千円)まで下げていくと発表しました。<br />
携帯にインターネットを設置すると設置料は１万チャット(約千円)、利用料金は１分4チャット(約0.4円)、1時間240チャット(約24円)です。<br />
通話料は１分25チャット(約2.5円)です。</p>


ミャンマーのインターネット回線と携帯

<p>私のタイムライン界隈で先週「SOCIAL MEDIA WEEK」がかなり賑わっていたので、参加してきました。</p>
<blockquote><p><strong>■Social Media Week について</strong></p>
<p>2009年2月、アメリカのニューヨークからスタートしたソーシャルメディアに関するマーケット創造のためのイベントです。毎年2月と9月に5日間開催し、これまで計7回開催しています。2012年9月のSocial Media Weekでは世界13都市で開催、約980イベントを実施し、計約3万人にのぼる参加者を集めました。</p></blockquote>
<p>とあります。</p>
<p>公式サイトは</p>
<p><a href="http://socialmediaweek.org/tokyo/" target="_blank">http://socialmediaweek.org/tokyo/</a></p>
<p>になりますが、Wordpressで作られているようですが、正直みづらいですね。</p>
<p>基本的には言語を変更する形式で各国にローカライズしているわけではないので、致し方ない部分かもしれませんが、私自身が今後、グローバルなサイトを構築する上で、課題を感じました。</p>
<p>公式ガイドブックによると、SOCIAL MEDIA WEEKは４年目のイベントとなりますが、東京での開催はCCIさんが主催で今年が２回目になるとのことです。</p>
<p>そのような中で、SOCIAL MEDIA WEEKが提唱する時代を拓くキーワード15が的を得ていたので、ご紹介します。</p>
<h2>時代を拓くキーワード15</h3>
<ol>
<li><span style="line-height: 13px;">キュレーション</span></li>
<li>ビッグデータ</li>
<li>クラウドファンディング</li>
<li>オープン・イノベーション</li>
<li>ソーシャルグッド</li>
<li>インターネット選挙活動</li>
<li>無料通話アプリ</li>
<li>オンライン・コミュニティマネジメント</li>
<li>インバウンド・マーケティング</li>
<li>O2O</li>
<li>ソーシャルTV</li>
<li>Nptech（NPO分野でのテクノロジー活用）</li>
<li>Edtech（教育分野でのテクノロジー活用）</li>
<li>ソーシャルリクルーティング</li>
<li>ソーシャルメディア・リテラシー教育・研修</li>
</ol>
<h2>まとめ</h3>
<p>実際、会場に行ってみると、複数会場で同時開催されているせいか、USTREAMで中継をされているせいか、思ったよりも混雑はなく私が行った講談社の会場では100名くらいでいたくらいでした。</p>
<p>時代を拓くキーワードに関しては、今までも見てきたワードですね。事業戦略として、このどこかに当てはまるもの、その中でも長く成長が続くと思われるものを見極めていきたいと思います。</p>


SOCIAL MEDIA WEEK 東京に参加して

<p>こういう<a href="http://techwave.jp/archives/51779365.html" target="_blank">記事</a>に釣られて、「なに？javascriptだけで決済を完了できるのか」と驚いて、「jquery-payment」というプラグインを少し見てみました。</p>
<p><a class="demo" href="/demo/jeff/jquery_payment/example/" target="_blank">デモ</a></p>
<p>デモのソースを見てわかると思いますが、このプラグインがカード番号と有効期間をチェックするバリデーションです。。。</p>
<p>騙させたかと思って、上の記事も載せてた<a href="https://kairosfundraiser.com/" target="_blank">URL</a>に検証しに行きました。</p>
<p>驚くことに、このプラグインを使って、決済をjavascriptで完結できているみたいです！<br />
その証拠は二つ。<br />
 １、</p>

		<div id="crayon-64953fd585137186942531" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="https://js.stripe.com/v1/"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd585137186942531-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd585137186942531-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"https://js.stripe.com/v1/"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのjavascriptをincludeしている！<br />
２、</p>
<p></p>

		<div id="crayon-64953fd58513b610010630" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript"&gt;
	Stripe.setPublishableKey('pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs');
&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58513b610010630-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58513b610010630-2">2</div><div class="crayon-num" data-line="crayon-64953fd58513b610010630-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58513b610010630-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58513b610010630-2"><span class="crayon-h">	</span><span class="crayon-i">Stripe</span><span class="crayon-sy">.</span><span class="crayon-e">setPublishableKey</span><span class="crayon-sy">(</span><span class="crayon-s">'pk_live_C2Ckr9nZbkcBra5ZWlV8wQLs'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd58513b610010630-3"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>stripeのキーを設定している！</p>
<p>具体的にはもっと仕様を詳しく見ないとわからないですが、<br />
javasciprtだけで決済ができるのは、なかなか興味深いですね。</p>
<p>さくらの共有サーバでcgiのpermissionが755でなくては動かないことを知らなくてイライラしてたjeffより。</p>

javascriptだけで決済完了できそうなプラグイン

CSS3のtransformを使ったアニメーション(基本編)

<p>ホームページ作成で大切なものはシステム構成デザイン等いろいろありますが、絶対に必須といえるものは</p>
<p>会社（もしくはブランド）の&#8221;ロゴマーク”です。</p>
<p>その&#8221;ロゴマーク&#8221;に関する本を一つ紹介したいと思います。</p>
<p>&nbsp;</p>
<p><strong><a title="日本のロゴマーク" href="http://www.amazon.co.jp/日本のロゴ―企業・美術館・博物館・老舗…シンボルマークとしての由来と変遷-成美堂出版編集部/dp/4415302645" target="_blank">日本のロゴマーク</a></strong></p>
<p>この本は&#8221;ロゴマーク&#8221;という言葉が和製英語という説明から始まり、どういった形で&#8221;ロゴマーク&#8221;を</p>
<p>作成・変遷を重ねてきたのかというの解説書になります。</p>
<p>何気なく見かけている&#8221;ロゴマーク&#8221;ですが、日本の場合元々は家紋から海外の場合は紋章からの</p>
<p>由来が少なくないとのこと。</p>
<p>また時代背景や親しみやすさ、会社イメージを凝縮したデザイン等、用途にあわせてさまざまな</p>
<p>&#8220;ロゴマーク&#8221;が作成されていることにも驚きます。</p>
<p>懐かしいロゴマークが見つかったり、今でも企業の顔として健在だったり、</p>
<p>不変なものから多様に変化するデザインが詰まっています。</p>
<p>&nbsp;</p>
<p>ホームページやシステム等は時代にあわせて変化することも多いですが、</p>
<p>ずっと親しまれる商品をご提供していけるように見習っていきたいです。</p>


ロゴマークとは

<p>普段はGoogleのChart APIを使っていて、グラフ描画ライブラリーとか特に必要ないと感じでました。<br />
外部ネットに繋ぎたくない場合に、重宝になるライブラリー【flot】を簡単に紹介します。</p>
<p>まずは<a href="/demo/jeff/flot/examples/pie.html" target="_blank">デモ</a>を見てください。</p>
<p></p>

		<div id="crayon-64953fd584cb7978172024" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
    $.plot($("#default"), data, 
	{
		series: {
			pie: { 
				show: true
			}
		}
	});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-2">2</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-4">4</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-6">6</div><div class="crayon-num" data-line="crayon-64953fd584cb7978172024-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584cb7978172024-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584cb7978172024-1"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">$</span><span class="crayon-sy">.</span><span class="crayon-e">plot</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#default"</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">data</span><span class="crayon-sy">,</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-2"><span class="crayon-h">	</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-3"><span class="crayon-h">		</span><span class="crayon-i">series</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-4"><span class="crayon-h">			</span><span class="crayon-i">pie</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-5"><span class="crayon-h">				</span><span class="crayon-i">show</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-6"><span class="crayon-h">			</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-64953fd584cb7978172024-7"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584cb7978172024-8"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>実は、pie図以外でも、いろいろな種類のグラフでも描画できます。<br />
その辺はまた詳しく見てないから、今回は控えておきます。</p>
<p>また、グラフの描画はhtml5のcanvasを使っていますが、IE8でもうまく描画できていることを検証済みです。</p>

【jQuery】グラフ描画ライブラリーflot

<p>前回に引き続きのテーマですが、<br />
今回は方法がちょっと違います。</p>
<p>前回は、背景画像をスライドさせる形でしたが、<br />
今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。</p>
<p>それでは、DEMOをご覧下さい。</p>
<p><a href="/demo/abe/24/" target="_blank" class="demo">DEMO</a></p>
<p>margin-leftを使用し、ulをずらしています。<br />
見えなくなった先頭の要素を一番後ろに入れて、、<br />
というの繰り返して無限ループになるようになってます。</p>
<p>以下、javascritになります。</p>
<p></p>

		<div id="crayon-64953fd584ad2384515221" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	setInterval("photoslide()", 50);	
});

var current = 0;
function photoslide(){
	current -= 1;
	//先頭の写真が見えなくなった時の処理
	if(current == -400){
		var copy = $(".slide ul li:first").clone();
		$(".slide ul li:first").remove();
		$(".slide ul").append(copy);
		current = 0;
		
	};
	
	$('.slide ul').css("margin-left", current+"px");	
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-8">8</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-10">10</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-12">12</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-14">14</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-16">16</div><div class="crayon-num" data-line="crayon-64953fd584ad2384515221-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad2384515221-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584ad2384515221-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-2"><span class="crayon-h">	</span><span class="crayon-r">setInterval</span><span class="crayon-sy">(</span><span class="crayon-s">"photoslide()"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">50</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd584ad2384515221-5"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-6"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">photoslide</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-7"><span class="crayon-h">	</span><span class="crayon-i">current</span><span class="crayon-h"> </span>-=<span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-8"><span class="crayon-h">	</span><span class="crayon-c">//先頭の写真が見えなくなった時の処理</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-9"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">current</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span>-<span class="crayon-cn">400</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-10"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">copy</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-11"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul li:first"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">remove</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-12"><span class="crayon-h">		</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".slide ul"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-i">copy</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-13"><span class="crayon-h">		</span><span class="crayon-i">current</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-14"><span class="crayon-h">		</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-15"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-16"><span class="crayon-h">	</span></div><div class="crayon-line" id="crayon-64953fd584ad2384515221-17"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.slide ul'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-s">"margin-left"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">current</span>+<span class="crayon-s">"px"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad2384515221-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>HTML</p>
<p></p>

		<div id="crayon-64953fd584ad6195428807" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="slide"&gt;
            	&lt;ul&gt;
                	&lt;li&gt;&lt;img src="images/sample1.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample2.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample3.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample4.jpg"&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-2">2</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-4">4</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-6">6</div><div class="crayon-num" data-line="crayon-64953fd584ad6195428807-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584ad6195428807-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584ad6195428807-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"slide"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;ul&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample1.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample2.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample3.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;li&gt;</span><span class="crayon-r ">&lt;img </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"images/sample4.jpg"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/li&gt;</span></div><div class="crayon-line" id="crayon-64953fd584ad6195428807-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/ul&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584ad6195428807-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>しかし、これは汎用性があるとはいえません。。。。<br />
画像のサイズは指定しなければいけないですし、<br />
画像の横幅も均一にしなければいけません。。。</p>
<p>横幅もバラバラの場合を都合上作ることができませんでした。</p>
<p>うーん、悔しい。</p>

メインビジュアルを自動でゆっくりスライドさせて流す方法②

<p>２月８日に行われた「ITと観光・サービスの融合が拓く新ビジネス創出セミナー」</p>
<p>この内容は、弊社が最も重要視しているテーマでもあるので非常に興味深く聞くことが出来ました。</p>
<h2>ITと観光・サービスの融合が拓く新ビジネス創出セミナー概要</h3>
<p>セッションの内容</p>
<ol>
<li>日本の伝統工芸品を全世界へ展開する「越境Ｅコマース」と「クラウドファンディング」</li>
<li>Webサイトの高品質・高速・多言語翻訳エンジンによる外国人観光客向けサービス</li>
<li>デジタルサイネージと&#8221;LANシート&#8221;による観光情報配信システム</li>
<li>屋内GPS&#8221;IMES&#8221;を用いた屋内外シームレス観光ナビゲーションシステムの実現</li>
<li>ドットコード&#8221;Grid Onput&#8221;による観光ガイドブックとデジタルコンテンツの融合</li>
<li>興味と行動を繫げる次世代デジタルメディア「tab」と街の魅力発信</li>
<li>先端IT技術を活用したまちづくりプロジェクト東京ユビキタス計画</li>
</ol>
<p>となっておりました。観光というとインバウンドグローバルという位置づけですが、弊社が提供する<strong>越境ECシステム</strong>はアウトバウンドグローバルに類します。この２つは、日本の国力を高める、外需、外貨を稼ぐという意味では密接に関わっており、アウトバウンドに発信した情報によって、国内への呼び込みが出来たり、インバウンドで呼び込んだ後に、<strong>越境ECの</strong>ような仕組みが発展していると、物理的な距離を超えて、販売をすることが出来ます。</p>
<p>特にセッション1,2については、アウトバウンドグローバルにフォーカスし、またWebという舞台で展開している「越境Eコマースサイト」と「翻訳サービス」でしたので、非常にシナジーを感じました。今後、必ず接点が生まれるだろうなと思い、注意深く拝聴しました。</p>
<p>セミナー後の交流タイムでは、上述お二人のスピーカーの方に気になる質問をしてみました。</p>
<p>※核心にせまる部分は伏せます。</p>
<p>・顧客、提供先はどこが多いか？</p>
<p>越境EC→ヨーロッパの富裕層、翻訳サービス→中国語圏、英語圏の観光客を呼び込みたい日本企業</p>
<p>・ローカライズはどこまでやっていくか？</p>
<p>越境EC→機械翻訳に任せているが、今後、ローカライズの優先順位を合わせてマーケティング中。</p>
<p>・正直、ビジネスとしての温度感はどうか？</p>
<p>越境EC→まだまだ、これからという感じ。送料が高いというコメントや、返品・交換対応が難しいなど課題を解決していく必要がある。</p>
<h2>まとめ</h3>
<p>「観光立国」を産業政策の柱の一つとして国が掲げてはおりますが、このような事業をもっともっと積極的に民間が行ない、それに対して、行政がサポートをしていくという段取りが発展することを祈っています。</p>
<p>&nbsp;</p>


ITと観光・サービスの融合が拓く新ビジネス創出セミナーに参加して

<p>最近ではfacebookやtwitterなどSNSは日常的なツールとなっています。</p>
<p>そんな中でちょっと気になったツールを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>Miiverse</h2>
<p>任天堂から発表されたWillUに付随したソーシャル機能で、</p>
<p>大きな特徴はWillUを購入した人がメインという点です。</p>
<p>※今後はスマートフォンアプリもリリース予定とのこと。</p>
<p>コミュニティにコメントする機能、共感ボタンや手書きの絵・文字の投稿、</p>
<p>実際にプレイしている中でも書き込み可能という多機能ぶり。</p>
<p>また「わらわら広場」というメインページでは、コミュニティ全体のコメントが</p>
<p>ふきだしでランダムに表示され、実際に目の前でおしゃべりしているという視覚的効果もあります。</p>
<p>&nbsp;</p>
<p>今までのソーシャルのように世界へ向けて発信と気負わず、より限定的なコミュニティに向けて</p>
<p>といった点で口コミサイトの書き込みやレビューの機能に近いですね。</p>
<p>お互いが同じ商品を購入した、または気に入った者同士の連帯感から盛り上がりが得られるのでしょう。</p>
<p>今後はより限定したコミュニティの中で手軽に楽しくできる情報交換ツールとして、</p>
<p>このような形に広がる可能性もありそうです。</p>


SNSサービスの方向性

設定ファイルとしてのyamlファイル

テキストファイルで作る オートコンプリート jQueryプラグイン

メインビジュアルを自動でゆっくりスライドさせて流す方法①

<p>最近よく見かけるようになってきた、フラットなデザインのサイト。<br />
こちらのブログ(→<a href="http://w3q.jp/t/3526" target="_blank">http://w3q.jp/t/3526</a>)でフラットなデザインのWebサイトについてまとめられていたので、<br />
こちらで紹介されているサイトが、どうしてかっこよく見えるのか、まとめてみました</p>
<p><a href="http://w3q.jp/t/3526" target="_blank"><img decoding="async" loading="lazy" alt="フラットなデザインのWebサイトまとめ17個" src="/uploads-archive/2013/02/tn_blogimg.jpg" width="328" height="170" /></a></p>
<p>&nbsp;</p>
<h2> &#8211; 形 &#8211;</h3>
<p>&nbsp;</p>
<p>四角、正円といったシンプルな形をベースに構成しています。</p>
<p>四角については、Web上のコンテンツが仕様上四角なので、<br />
各要素の外枠になるボックスが四角なのはWebサイトでは一般的なことですが、、<br />
フラットなデザインのサイトでは、枠だけでなく、ロゴやアイコンやイラストなども<br />
四角がベースになっていて、統一感が出されています。<br />
角も丸めたり、削ったりせずに、そのままです。</p>
<p>逆に丸い要素は、正円がベースになっていて、安定感と統一感を支えています</p>
<p><img decoding="async" loading="lazy" alt="四角" src="/uploads-archive/2013/02/tn_eximg00.jpg" width="328" height="226" /></p>
<p><img decoding="async" loading="lazy" alt="丸" src="/uploads-archive/2013/02/tn_eximg00_2.jpg" width="328" height="226" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; 色 &#8211;</h3>
<p>グラデーションでの色の変化がないため、<br />
使った色がそのまま飛び込んできて印象にのこります。<br />
サイトのイメージが色として記憶に残る感じです。<br />
単色のサイトも多い印象です。<br />
２色以上の場合でも、トーンを変えて他の場所に使うということはなく、<br />
全くそのままの色が、全体の要素に使われています。</p>
<p>こちらのサイト(→<a href="http://www.diesel.com/" target="_blank">http://www.diesel.com/</a>)では多色を使っているように見えましたが、<br />
それぞれのコンテンツに合わせて、コンテンツのイメージカラーが統一されています。<br />
スクロールで表示されているコンテンツに合わせて、上下のナビゲーションの色が変化していて、おもしろいです。</p>
<p><img decoding="async" loading="lazy" alt="DEISEL ピンク" src="/uploads-archive/2013/02/tn_eximg01.jpg" width="328" height="226" /></p>
<p><img decoding="async" loading="lazy" alt="DIESEL 緑" src="/uploads-archive/2013/02/tn_eximg02.jpg" width="328" height="226" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; レイアウト・文字 &#8211;</h3>
<p>文字はフラットさを引き立てるように、<br />
大きな余白が用いられたレイアウトが目立ちます。</p>
<p>フラットなデザインでは装飾が少ない分、文字の大きさや太さにメリハリをつけて、<br />
変化やリズム感が出されています。<br />
文字の大きさの差は、２倍以上あることが多いようです。</p>
<p>画像を使わずに、テキストとして配置されていますが、<br />
フォントの種類を細かに変化させていることがわかります。<br />
日本のサイトの場合だと、使えるフォントが限られてくるので、<br />
この辺がネックになりそうです。<br />
必要と想定される代理のフォントを絞込み、具体的に設置するのがポイントになりそうです。</p>
<p><img decoding="async" loading="lazy" alt="文字のメリハリ" src="/uploads-archive/2013/02/tn_eximg03.jpg" width="314" height="253" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>&#8211; アイコン &#8211;</h3>
<p>白抜きや単色のアイコンが圧倒的に多いです。<br />
大きくデフォルメされた、シンプルな形のアイコンが使われることが多いようです。<br />
ファビコンについても、とてもシンプルなものが多いです。</p>
<p><img decoding="async" loading="lazy" alt="白抜きアイコン" src="/uploads-archive/2013/02/tn_eximg04.jpg" width="176" height="50" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>～ まとめ ～</h4>
<ul>
<li>色はイメージカラーに統一。トーンを変化させたバリエーションの色は使わない。</li>
<li>四角・正円で要素の形を統一。それ以外の形も、シンプルな線で。</li>
<li>余白を多くとって色を強調。</li>
<li>文字は大きさのちがいを２倍ほどつけてメリハリを。</li>
<li>細かくフォントを設定して、フォントでもメリハリを。</li>
<li>アイコンは単色。シンプルに。</li>
</ul>
<p>&nbsp;</p>
<p>まとめてみると、デザインで重要なポイントが凝集されている印象です。<br />
フラットなデザインの製作は、デザインの基本を学ぶいい機会になりそうです。</p>
<p>&nbsp;</p>


フラット（べた塗り）なデザインのサイトを調べてみる

データを削除する

<p>最近何かと話題のクラウドソーシング。ようやく市場が立ち上がって来た感がありますが、実際に、調べてみると総額で億を超えるの仕事の流通が図られているようです。</p>
<p>それぞれのサイトのターゲット、集まっている方々などが違うので、公表されている限りでまとめてみました。</p>
<p>プラットフォームの大きさを表す流通総額。大きければ大きい程、仕事がたくさんある状態です。さらに、開始年月から活性状況を逆算することが出来ます。</p>
<p>依頼する側も、仕事を受ける側も、求めるもの、提供出来るものがマッチすれば幸いです。</p>
<p>どれも2013年2月6日時点で知り得た情報です。</p>
<p>&nbsp;</p>
<h2>総合</h3>
<h4><a href="http://www.lancers.jp/" target="_blank">Lancers</a></h6>
<p style="text-align: center;"><strong><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_42" rel="attachment wp-att-1419"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_42" src="/uploads-archive/2013/02/c2bc53e292ee181b421f7c58eb7412a8-300x141.jpg" width="300" height="141" /></a></strong><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_43" rel="attachment wp-att-1418"><br />
</a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>制作・開発全般70カテゴリー</td>
</tr>
<tr>
<td>受託側</td>
<td>フリーランス全般</td>
</tr>
<tr>
<td>流通総額</td>
<td>46億円</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2008年</td>
</tr>
<tr>
<td>コメント</td>
<td>業界では老舗です。</td>
</tr>
</tbody>
</table>
<h4><a href="http://crowdworks.jp/" target="_blank">Crowdworks</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_58" rel="attachment wp-att-1431"><img decoding="async" loading="lazy" class="size-medium wp-image-1431 aligncenter" alt="スクリーンショット_2013_02_06_14_58" src="/uploads-archive/2013/02/9b7ee8e17e2c29829dc99999a42d07c1-300x113.jpg" width="300" height="113" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>制作・開発</td>
</tr>
<tr>
<td>受託側</td>
<td>デザイナー、エンジニア</td>
</tr>
<tr>
<td>流通総額</td>
<td>6億円</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2011年</td>
</tr>
<tr>
<td>コメント</td>
<td>メディアでの露出も多く勢いを感じます。</td>
</tr>
</tbody>
</table>
<h4><a href="http://jobhub.jp/" target="_blank">Job-Hub</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_43" rel="attachment wp-att-1418"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_43" src="/uploads-archive/2013/02/4cfcb06788579bbdebaef2397e7bb5a9-300x136.jpg" width="300" height="136" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>制作・開発</td>
</tr>
<tr>
<td>受託側</td>
<td>フリーランス全般</td>
</tr>
<tr>
<td>流通総額</td>
<td>不明</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2012年8月</td>
</tr>
<tr>
<td>コメント</td>
<td>人材派遣大手のパソナが手がけるプラットフォーム</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>デザイナー</h3>
<h4><a href="http://www.designclue.co/" target="_blank">designclue</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_44-2" rel="attachment wp-att-1422"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_44 2" src="/uploads-archive/2013/02/220cd93a14e7ceb57567d134394042db-300x100.jpg" width="300" height="100" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>デザイン</td>
</tr>
<tr>
<td>受託側</td>
<td>海外デザイナー</td>
</tr>
<tr>
<td>流通総額</td>
<td>不明</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2012年</td>
</tr>
<tr>
<td>コメント</td>
<td>海外（特にインドネシア）のデザイナーが多い。社長は私と同い年（85年生まれ）です。</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>ライター</h3>
<h4><a href="http://crowd.biz-samurai.com/corporate/">Shinobiライティング</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_40-4" rel="attachment wp-att-1421"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_40-4" src="/uploads-archive/2013/02/1662cb5ddcd8571a8fb8bba466481651-300x118.jpg" width="300" height="118" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>ライティング業務</td>
</tr>
<tr>
<td>受託側</td>
<td>ライター</td>
</tr>
<tr>
<td>流通総額</td>
<td>約40,000件</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>不明</td>
</tr>
<tr>
<td>コメント</td>
<td>1万人以上のライターが登録済み</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>マイクロタスク</h3>
<h4><a href="http://crowdsourcing.yahoo.co.jp/">Yahoo!クラウドソーシング</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_41" rel="attachment wp-att-1420"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_41" src="/uploads-archive/2013/02/80ba703de7822a113268a46c7c5b34a7-300x151.jpg" width="300" height="151" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>記事作成、写真撮影、データ入力など</td>
</tr>
<tr>
<td>受託側</td>
<td>一般yahooユーザー</td>
</tr>
<tr>
<td>流通総額</td>
<td>不明</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2012年</td>
</tr>
<tr>
<td>コメント</td>
<td>yahooポイントがもらえる特殊な形式をとっています。</td>
</tr>
</tbody>
</table>
<h4><a href="http://www.realworld.jp/crowd/" target="_blank">Crowd</a></h6>
<p style="text-align: center;"><a href="/officer/%e3%82%af%e3%83%a9%e3%82%a6%e3%83%89%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%b3%e3%82%b0%e3%82%92%e3%81%be%e3%81%a8%e3%82%81%e3%81%a6%e3%81%bf%e3%81%9f.html/attachment/%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2013_02_06_14_44" rel="attachment wp-att-1417"><img decoding="async" loading="lazy" class="aligncenter" alt="スクリーンショット_2013_02_06_14_44" src="/uploads-archive/2013/02/394b085fc683617a2744890cb13e7050-300x135.jpg" width="300" height="135" /></a></p>
<table>
<thead>
<tr>
<th>内容</th>
<th>概要</th>
</tr>
</thead>
<tbody>
<tr>
<td>依頼主</td>
<td>記事作成、写真撮影、データ入力など</td>
</tr>
<tr>
<td>受託側</td>
<td>主婦、学生、就職活動中の方</td>
</tr>
<tr>
<td>流通総額</td>
<td>55億円</td>
</tr>
<tr>
<td><tt>開始</tt></td>
<td>2008年</td>
</tr>
<tr>
<td>コメント</td>
<td>お小遣い稼ぎをうたっています。</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>番外：海外編</h3>
<p><a href="https://www.elance.com/" target="_blank">eLance</a></p>
<p><a href="https://www.odesk.com/" target="_blank">oDesk </a></p>
<p><a href="http://www.zhubajie.com/" target="_blank">猪八戒　zhubajie</a></p>
<h2>まとめ</h3>
<p>基本なんでも自分達でやるというスタンスではありますが、弊社のようなベンチャー企業では、専任の人間を抱えているわけではないので、案件ベースで適宜利用することを視野に入れるべきだと思います。例えば、Webサイトの制作を依頼される中で、商品（サイト）のライティングを合わせて依頼されるケースもありますが、そのような場合に、スポットでプロのライターにお願いするような想定が出来ます。</p>


クラウドソーシングをまとめてみた

<p>セクションごとにメニューがついてくるjQueryプラグインjquery-stick-em。</p>
<p><a href="http://viget.com/inspire/jquery-stick-em" target="_blank">http://viget.com/inspire/jquery-stick-em</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/29/">デモ</a></p>
<p>&nbsp;</p>
<p>設置は非常に簡単。</p>

		<div id="crayon-64953fd58405d342668721" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;div class="container"&gt;
    &lt;div class="stickem-container"&gt;
        &lt;div class="content"&gt;
        &lt;/div&gt;
        &lt;div class="stickem"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd58405d342668721-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-2">2</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-4">4</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-6">6</div><div class="crayon-num" data-line="crayon-64953fd58405d342668721-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd58405d342668721-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd58405d342668721-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-2"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"stickem-container"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-3"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"content"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"stickem"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd58405d342668721-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd58405d342668721-8"><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>という構造を作り、</p>

		<div id="crayon-64953fd584062102177744" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(document).ready(function() {
	$('.container').stickem();
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd584062102177744-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd584062102177744-2">2</div><div class="crayon-num" data-line="crayon-64953fd584062102177744-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd584062102177744-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd584062102177744-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.container'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">stickem</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd584062102177744-3"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>を呼ぶだけ。</p>
<p>.stickem-container</p>
<p>.content</p>
<p>.stickem</p>
<p>は固定なので注意。</p>
<p>FAQページなどで使えそう。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2013/02/21

2013/02/21

2013/02/20

2013/02/20

2013/02/20

2013/02/14

2013/02/14

2013/02/14

2013/02/14

2013/02/13

2013/02/07

2013/02/07

2013/02/07

2013/02/07

2013/02/07

2013/02/07

2013/02/06

2013/01/31