ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、2,3パターン作ってから全く作ってないのですが、CSSのみで出来るとなればいろんなパターンを作ってみたくなりますね！
今回は以下のサイトを元に自分で少し試してみました。 
15パターンのローディングアニメーションがあり、ダウンロード無料です。 
<a href="http://www.css-spinners.com/" class="link" target="_blank">css-spinners</a>
私が作ったのは以下からご覧下さい。 
<a href="/demo/abe/58/" class="demo" target="_blank">DEMO</a>
CSSのkeyframesやCSS3の装飾を使ってやってます。
参考サイトを見ると、複雑なやつはソースが凄いことになっています。。。
IE10以上の対応にはなりますが、基本はIE10,11が多いと思いますし、 
IE9の方でもローディング自体あってもなくてもコンテンツ自体には問題はないので 
ローディンはグ画像ではなく、CSSで作るもので充分な気がしますね！！

CSSのみで実装されてるローディングアニメーション

<div class="booklink-box" style="text-align: left; padding-bottom: 20px; font-size: small; /zoom: 1; overflow: hidden;">
<div class="booklink-image" style="float: left; margin: 0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4767818958/sackoh71-22/" target="_blank"><img decoding="async" style="border: none;" src="http://ecx.images-amazon.com/images/I/51U%2Bx-NUCxL._SL160_.jpg" alt="" /></a></div>
<div class="booklink-info" style="line-height: 120%; /zoom: 1; overflow: hidden;">
<div class="booklink-name" style="margin-bottom: 10px; line-height: 120%;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4767818958/sackoh71-22/" target="_blank">世界の今がひとめでわかる図鑑 (エクスナレッジムック)</a>
<div class="booklink-powered-date" style="font-size: 8pt; margin-top: 5px; font-family: verdana; line-height: 120%;">posted with <a href="http://yomereba.com" target="_blank" rel="nofollow">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom: 5px;">tripadvisor エクスナレッジ 2014-12-18</div>
<div class="booklink-link" style="margin-top: 5px;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4767818958/sackoh71-22/" target="_blank" rel="nofollow" name="booklink">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left;"></div>
</div>
本屋でばったり出くわして興味深々。
図鑑というよりかはいわゆるインフォグラフィックです。 
緩めの本もたまにはいいです。
ただ、網羅的というよりかは、世界の唐辛子辛さ比較といった緩すぎるものから数字で見る世界遺産というような固めのものが自然、食、文化、旅というカテゴリーでまとめられています。
ビッグマックインデックスといわれる世界のビッグマック一個あたりの価格で物価が分かるという有名な指数のようなものが知っておくとよい雑学　たくさん紹介されています。
<a href="http://ecodb.net/ranking/bigmac_index.html">http://ecodb.net/ranking/bigmac_index.html</a>
余談ですが、2015年は円安の流れで日本は物価が意外と安いです。
tripadviserのウェブに掲載されているコンテンツを再編集しているようで、中には2011年に掲載されているものもあるので、必ずしも情報が最新ではないという点に注意が必要です。
<a href="http://tg.tripadvisor.jp/">http://tg.tripadvisor.jp/</a>
<h2>面白かったもの5個抜粋</h2>
<ul>
<li><a href="http://tg.tripadvisor.jp/TaxiFare/" target="_blank">1000円でどこまで行ける？世界の主要タクシー</a></li>
<li><a href="http://tg.tripadvisor.jp/BeerDrinking/" target="_blank">世界のビール消費量TOP20</a></li>
<li><a href="http://tg.tripadvisor.jp/WineDrinking/" target="_blank">世界のワイン消費量TOP20</a></li>
<li><a href="http://tg.tripadvisor.jp/foreigner/" target="_blank">外国人居住率の高い都市</a></li>
<li><a href="http://tg.tripadvisor.jp/Nuclear/" target="_blank">原子力発電依存度の高い国TOP20</a></li>
</ul>

世界の今がひとめでわかる図鑑

SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」

ECに適した動画の利用方法を色々と考えてみました。
動画を観ながら良いと思ったらすぐに購入できるようなスタイルを作ってみました。
<a class="demo" href="/demo/makabe/06/06demo.html">demo</a>
currentTime（動画の現在尺）によってカートやお気に入りに入る商品を振り分けているだけなのです。
1本の動画で複数の商品を説明する場合なんかは、このようなスタイルもありかなと思います。

EC向け動画：動画を見ながら直接カートに商品を入れる

「あうんの呼吸でコミュニケーション」というキャッチコピーで、キャプチャを撮り、それにメモを加えて遅れるというサービスが最近出来たそうです。
前にも海外のサービスでこういうのがあった気がしたのですが、 
少し使いづらかったのかあまり記憶に残ってないです。。。
コチラのほうが断然使い勝手は良さそうだなという感じです。
webサイトの制作で修正が発生すると、それを伝えるのが結構大変なこともあります。 
社内のみならいいのですが、お客さんや別事務所にいるスタッフにいる時なんかは、 
デザインの修正を電話やメールで伝えたりしますが、 
どうしても「どこの部分？」「どんな風に？」というやりとりをしながら確認していくことになり、 
双方が大変になります。 
たまにお客さんでwebサイトをプリントアウトして、それに書き込んでそれをデータをして送ってくれ、 
それはほぼ齟齬がなく修正できるのですが、かなり労力がかかってしまいます。
このサービスは「伝える側」と「受け取る側」が共にわかりやすい指示を簡単に作成できるかと思います。
簡単にこのサービスの特徴を説明すると、 
・無料、会員登録の必要もなし 
・URL、画像、クリップボードから修正ファイルを登録できる 
・URLの場合、BASIC認証もいける 
・トリミング機能あり 
・短縮URL発行、パスワードもかけられる
といった感じでしょうか。
では使い方を見て行きましょう！
&nbsp;
<h2>AUNの使い方</h2>
TOPページにURLを記入する欄がありますが、 
そこでURLを入れてボタンを押すだけで、キャプチャを撮りメモを記入する画面に移ります。 
ちなみにBASIC認証がかかっているページでもOKです。
URLがない場合は、「画像ファイル」「クリップボード」を使うこともできます。 
<a href="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7533" src="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg" alt="2ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg 1024w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-300x162.jpg 300w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-228x123.jpg 228w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
画像をアップすると、トリミングをすることもできます。
メモを記入する画面は以下の通り、 
<a href="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7534" src="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg" alt="3ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg 1024w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-300x162.jpg 300w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-228x123.jpg 228w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
修正箇所を囲むとメモ書く吹き出しが出てきて、「メモを追加」を押すと、右側の「メモリスト」に追加されキャプチャには番号付きの赤線囲み線ができるので、どこが修正箇所なのかわかりやすくなっています。
完成し「保存する」を押すと、
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-7535" src="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg" alt="4ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="336" srcset="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg 1024w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-300x160.jpg 300w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-228x122.jpg 228w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4.jpg 1247w" sizes="(max-width: 630px) 100vw, 630px" />
&nbsp;
タイトル、パスワードを設定することができます。
そして保存をすると、共有URLが発行されますので、それを送れば相手側が見れるようになります！ 
保存期間は7日間で、経過すると削除されるようです。
これはいいサービスですね！ 
「伝える側」にとって非常にいいツールになると思います！
&nbsp;
<a class="link" href="http://aun.tools/" target="_blank">ビジュアルコミュニケーションツール &#8211; AUN[あうん]</a>
&nbsp;
最近web制作会社にとって便利なツールがどんどん出てきていて、 
効率的に進められるようになって気がします。

デザインや文字の修正依頼で活躍しそうなサービス「AUN」

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」をレスポンシブ対応しました

趣味シリーズということで、古いパソコンを取り出して、 
Linuxをインストールするということをやってみました。
自作パソコンへのWindowsのインストールはいくつも作ってきました。
昨今のサーバーサイドのOSの主流はLinuxであるにもかかわらず、 
クライアントサイドでのシェアはとても低いものですが、当たり前ですが、設計は同じで、 
デスクトップ環境というGUIがついているかどうか？という差があるだけだったりするので、 
とても勉強になります。
ということでVaio TypePという(<a href="http://www.sony.jp/vaio/products/P/" target="_blank">http://www.sony.jp/vaio/products/P/</a>)
今のネットブックの走りのような機種が眠っておりましたので、 
試してみました。 
このTypePがAtomというCPUでとにかく非力なので、軽量OSを中心に探しておりました。
<h3 id="linux-">Linux軽量ディストリビューション</h2>
<h4 id="lubuntu">Lubuntu</h3>
<a href="/uploads-archive/2015/06/Lubuntu_14.04_LTS_English.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7511" src="/uploads-archive/2015/06/Lubuntu_14.04_LTS_English-300x188.jpg" alt="Lubuntu_14.04_LTS_English" width="300" height="188" srcset="/uploads-archive/2015/06/Lubuntu_14.04_LTS_English-300x188.jpg 300w, /uploads-archive/2015/06/Lubuntu_14.04_LTS_English-1024x640.jpg 1024w, /uploads-archive/2015/06/Lubuntu_14.04_LTS_English-228x143.jpg 228w, /uploads-archive/2015/06/Lubuntu_14.04_LTS_English.jpg 1440w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://blog.oboro-sam.com/2013/12/31/post-3519/" target="_blank">http://blog.oboro-sam.com/2013/12/31/post-3519/</a>
まず参考にさせて頂いたのがこちらのブログです。 
Linuxの中でも軽量化を目的としたディストリビューションということでLubuntuの導入記事です。
USBメモリーにインストールデータを書き込むソフトなどこの後でも使わせて頂くことになるのですが、 
最新バージョンLubuntu 15.04 をインストールしたところ問題が発生します。
下記、参考元の画像のように、フォントが表示されません。 
対処法を調べていたら
<a href="/uploads-archive/2015/06/image.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7512" src="/uploads-archive/2015/06/image-300x225.jpg" alt="image" width="300" height="225" srcset="/uploads-archive/2015/06/image-300x225.jpg 300w, /uploads-archive/2015/06/image-228x171.jpg 228w, /uploads-archive/2015/06/image.jpg 670w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://installlinux.jimdo.com/linux/lubuntu/" target="_blank">http://installlinux.jimdo.com/linux/lubuntu/</a>
あらら、日本語フォントが入っていないんですね。 
別に日本語の設定がないとは、最悪我慢できるのですが、フォントが入っていないので、 
表示すらできません。
というよりインストール前に、日本語を組み込んでいかないといけないということで、 
ほぼ再インストールの必要がでたためtype pで他の実績がない、組み合わせに挑戦すべく、 
他の軽量Linuxを試してみました。
PuppyLinux
xubuntu
などいくつも出てくるのですが、どうもUIが古臭いというのがありまして、 
Linux　Beanと最後まで迷ったのですが、いろいろ調べているうちにピンときたのがありました。
<a href="http://no-windows.blog.jp/archives/7712595.html" target="_blank">http://no-windows.blog.jp/archives/7712595.html</a> 
<a href="http://d.hatena.ne.jp/palm84/20130720/1374260743" target="_blank">http://d.hatena.ne.jp/palm84/20130720/1374260743</a>
<h4 id="elementaryos">elementaryOS</h3>
それがこちらです。
<a href="/uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7513" src="/uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35-300x188.jpg" alt="Screenshot_from_2013-08-11_15_57_35" width="300" height="188" srcset="/uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35-300x188.jpg 300w, /uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35-1024x640.jpg 1024w, /uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35-228x143.jpg 228w, /uploads-archive/2015/06/Screenshot_from_2013-08-11_15_57_35.jpg 1280w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://elementary.io/" target="_blank">http://elementary.io/</a>
ドックの感じがMacっぽくなっていて、軽量OSの中ではUIもこだわっているとうたわれています。 
普段macを使っているのもあり、どうせならということでこちらを選択しました。
というか、puppy linux公式サイトの前時代感…
導入自体は先ほどご紹介させて頂いた記事を参照下さい。 
elementaryOSの設定も同じツールに入っていたので、そのまま利用させていただきました。
<h3 id="-">まとめ</h2>
ビューティフルです。 
WindowsでもMacでもない選択肢の一つとしてLinux。 
ありだと思います。 
特に多くのディストリビューションの元となっているUbuntu。 
圧倒的にLinuxの敷居を下げてくれるものとしてその恩恵が分かりました。 
実は、この記事を書いている途中でdebianベースと呼ばれる他のディストリビューションも試してみたのですが、インストールの手間に途中でサクッと挫折しました。
そして、同時に、WindowsやMacの製品の出来も痛感することが出来ました。 
ゴミ箱にいれればアンイストール出来るとか挿すだけでドライバーが認識されるとかやっていることがすごいですよね。
<h4 id="-">参考記事</h3>
<a href="http://frozenstream.blog6.fc2.com/blog-entry-3184.html">http://frozenstream.blog6.fc2.com/blog-entry-3184.html</a>
<a href="http://netbuffalo.doorblog.jp/archives/5007385.html">http://netbuffalo.doorblog.jp/archives/5007385.html</a>

Linux軽量ディストリビューション「elementaryOS」をインストールしてみた。

5月29日(年々早くなってる?)に経済産業省がEC市場調査結果を発表したのでまとめ。
2014年 電子商取引に関する市場調査の結果
http://www.meti.go.jp/press/2015/05/20150529001/20150529001.html
&nbsp;
ちなみにこれは昨年のまとめ。
<a href="/officer/2013%E5%B9%B4-%E9%9B%BB%E5%AD%90%E5%95%86%E5%8F%96%E5%BC%95%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E5%B8%82%E5%A0%B4%E8%AA%BF%E6%9F%BB%E3%81%AE%E7%B5%90%E6%9E%9C.html" target="_blank">/officer/2013%E5%B9%B4-%E9%9B%BB%E5%AD%90%E5%95%86%E5%8F%96%E5%BC%95%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E5%B8%82%E5%A0%B4%E8%AA%BF%E6%9F%BB%E3%81%AE%E7%B5%90%E6%9E%9C.html</a>
&nbsp;
<h2>国内EC</h2>
・2014年のBtoC市場規模は12.8兆円(前年比 114.6%)
・EC化率は4.37%(前年比 +0.52)
・物販での業種別市場規模は
1位：衣類・服装雑貨等 1兆2822億円 (前年比 110.2%%)
2位：生活家電、AV 機器、PC・周辺機器等 1兆2706億円 (前年比 106.9%)
3位：食品、飲料、酒類 1兆1915億円 (前年比 120.4%)
となっており、伸び率は生活家電、AV 機器、PC・周辺機器等が最も高かった。
&nbsp;
<h2>越境EC</h2>
・日本人が米国及び中国からECで購入した額は2,086億円(前年比 108.9%)
・米国人が日本及び中国からECで購入した額は8,134億円(前年比 113.0%)
・中国人が日本及び米国からECで購入した額は1兆2,354億円(前年比 153.0%)
&nbsp;
以下は2013年度の調査において、2020年の上記値の予想
・2020年は、日本人が米国及び中国からECで購入するであろう額は427億円
・2020年は、米国人が日本及び中国からECで購入するであろう額は1,732億円
・2020年は、中国人が日本及び米国からECで購入するであろう額は21,022億円
&nbsp;
以下は2014年調査においての2018年の上記値の予想
・2018年、日本人が米国及び中国からECで購入するであろう額は2,923億円
・2018年、米国人が日本及び中国からECで購入するであろう額は1兆3,038億円
・2018年、中国人が日本及び米国からECで購入するであろう額は2兆8,406億円
&nbsp;
その他統計で気になったのは、スマホ経由での購入が激増していること。 
以下は各媒体でのスマホ経由の売上
・ヤフー：35.4% 
・楽天：43% 
・スタートトゥデイ：57.9% 
・千趣会：31.8% 
・ニッセン：43%
全体としては国内市場規模の伸びが昨年より微減だったことと 
衣類・服装雑貨等、食品、飲料、酒類など生活必需品が伸びていることが気になった。 
若い世代など既にECを利用している層は安定して購入しており、そこに今まで利用していなかった層が加わってきている印象を受けた

2014年 電子商取引に関する市場調査の結果

フォーム・選択要素で使えそうなjQuery「Selectivity」

みなさん「Did You Know?」という動画を知っていますか？
<iframe loading="lazy" width="500" height="375" src="https://www.youtube.com/embed/cL9Wu2kWwSY?feature=oembed" frameborder="0" allowfullscreen></iframe>
2008年に公開されたものですが、当時はようやく日本でもFacebookが流行り始めた という時期だったと思います。 友人のフィードからこの動画の存在を知り、見た時に衝撃が走ったのを今でもはっきりと覚えています。 今よりも、もっともっと無知で、世界が加速度的に変化していくということをみんなが言っているからそうなんだろうなくらい思っていたところに、具体的な数字が次々で突きつけられることで、はっきりくっきりと理解しました。
この動画今では、1500万回再生されているんですね。
<h2>Did you know?日本語訳バージョン</h2>
<iframe loading="lazy" width="500" height="375" src="https://www.youtube.com/embed/kj9pR_b3u4E?feature=oembed" frameborder="0" allowfullscreen></iframe>
日本語訳バージョンも上がっています。 私も一度これを見て理解を深めました。
<h2>Did you know?2014年バージョン</h2>
そして、オフィシャルではないと思われるのですが、2014年バージョンというのが上がっているのをたまたま見つけ、当時を鮮明に思い出すと共に、楽しく閲覧しました。
2008年から2014年の6年の変化だけでも特徴的なのが、
myspaceがfacebookにかわり、
google検索が毎月310億から毎日59億へ増え、
brackberryがiphoneに差し替えられ、
5000万へのリーチ記録がangrybirdの35日に塗り替えられ、
本当に指数関数的な伸びを見せています。
百聞は一見にしかず、是非ご覧あれ。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/PcZg51Il9no?feature=oembed" frameborder="0" allowfullscreen></iframe>

衝撃を受けた動画「Did You Know? Shift Happens」

jQueryでフリックを実装する場合に縦スクロールできなくなる問題を解決する方法

EC向け動画：クリックで色が変わる動画

グラフィックスの要素をPNGやJPGなどより軽量サイズで作成でき、
色を変えたり、ある程度自在に扱うことができるSVGですが、
１つ問題点があります。
それは、アニメーションの実装です。
&nbsp;
SVGではSVGの規格としてアニメーションが存在しますが、
こちらはIEでは最新バージョンの11で対応がされていないなど、対応ブラウザが限られており、
実際に公開するサイトとしては現時点では利用ができません。
&nbsp;
また、JavaScriptで実装しようとすると、とてもブラウザに負荷をかけてしまい、
動きももっさりとしたものになってしまいます。
&nbsp;
これらの問題を解決するのが、CSS3のアニメーションです。
CSS3のアニメーションもIE10以上という制約はあるものの、
最新のブラウザは網羅しているので、実用としての可能性はより高いものとなります。
&nbsp;
SVGとCSS3アニメーションの効果的な使い方を検討してみましたが、
複数のグラフィックを別々に動かす場合、
１つのSVGの要素の中でそれぞれの要素をアニメーションさせるよりも、
<a class="demo" href="/demo/ninomiya/73/" target="_blank">DEMO</a>
↑こちらのDEMOのように、HTMLの各要素の中に部品としてSVGを読み込んで、
SVGを読み込んでいるそれぞれのHTMLの要素に対して、CSS3でアニメーションさせるのが、
いいのではないかと思います。
&nbsp;
もちろん、IE9はまだそれなりにシェアがありますので、IE9用にjQueryの振り分けはまだ必要かもしれません。

SVGのアニメーションはCSS3で実装するのがよさそう

先日、とある採用セミナーに参加してまいりました。
というのも、今まで体系だって採用を進めてきたことがなかったなと反省し、採用に対してもっともっとコミット出来るよう、時間を費やしていきたいと思います。
セミナーの内容自体は、外部講師による採用市場の概況から主催者様の提供するツールの説明という内容だったのですが、その中で一つ紹介されたものが初めての内容だったので紹介です。
<h3 id="-">能力構造の氷山モデル</h2>
<a href="/uploads-archive/2015/05/04bdcbd25a8f2897aa330b61f66ff834.png"><img decoding="async" loading="lazy" class="aligncenter wp-image-7473 size-full" src="/uploads-archive/2015/05/04bdcbd25a8f2897aa330b61f66ff834.png" alt="能力氷山モデル" width="600" height="400" srcset="/uploads-archive/2015/05/04bdcbd25a8f2897aa330b61f66ff834.png 600w, /uploads-archive/2015/05/04bdcbd25a8f2897aa330b61f66ff834-300x200.png 300w, /uploads-archive/2015/05/04bdcbd25a8f2897aa330b61f66ff834-228x152.png 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
出典：<a href="http://www.recruit-ms.co.jp/issue/feature/kaihatsu/200707/04.html">http://www.recruit-ms.co.jp/issue/feature/kaihatsu/200707/04.html</a>
それがこちらの能力構造の氷山モデルです。 
育成ということで解説されているのですが、もっと広い概念で考えることが出来るのかなと思います。
<h4 id="-">第一階層</h3>
<h6 id="1-">1.性格・脂質</h6>
<h4 id="-">第二階層</h3>
<h6 id="2-">2.知識</h6>
専門知識　一般強要
<h6 id="3-">3.スキル</h6>
テクニカル・ヒューマン・コンセプチュアルスキル
<h6 id="4-">4.態度</h6>
意欲、心構え、価値案
<h5 id="-">第三階層</h4>
<h6 id="5-">5.行動</h6>
言葉と動き　コンピテンシー
となります。 
ここから行動が知識、スキル、態度の重ね合わせの上であるという概念。 
性格・資質は育成が困難なものとして扱われているということがはっきりと認識できたことで、 
とても有益でした。
逆に捉えると、性格・資質に関することは、無駄であるし、行動をし成果を出す上で何が足りないかということを認識し、注力することが本人でも出来ます。

能力構造の氷山モデル

クロネコヤマトの送り状発行ソフトにはインストール型のB2とクラウド型のB2webがあります。
両方使ってみて違いをまとめてみました。
<table style="height: 232px;" width="571">
<tbody>
<tr>
<td style="text-align: center;"></td>
<td style="text-align: center;">B2インストール型</td>
<td style="text-align: center;">B2webクラウド型</td>
</tr>
<tr>
<td style="text-align: center;">導入までに必要な作業</td>
<td style="text-align: center;">・ヤマトの専用ページから申込み・担当店舗から承認</td>
<td style="text-align: center;">・ヤマトビジネスメンバーズに登録</td>
</tr>
<tr>
<td style="text-align: center;">メリット</td>
<td style="text-align: center;">・ネット環境が不安定でも作業ができる・1年間発送先のデータ残しておける
・ソフトの反応が早い
・発送先データの編集画面が使いやすい</td>
<td style="text-align: center;">・複数の端末で発送データの共有ができる</td>
</tr>
<tr>
<td style="text-align: center;">デメリット</td>
<td style="text-align: center;">・複数の端末で発送データの共有ができない</td>
<td style="text-align: center;">・発行した送り先のデータは最長で3か月間までしか残らない・一度に取り込める送り先データは100件まで
・ネット環境が不安定だと作業が遅い、または途中で取り込んだ消える
・発送先データの編集画面が使いにくい</td>
</tr>
<tr>
<td style="text-align: center;">サポート体制</td>
<td style="text-align: center;">専用のフリーダイヤルあり</td>
<td style="text-align: center;">専用のフリーダイヤルあり</td>
</tr>
</tbody>
</table>
両方のツールを使ってみて結局のところ作業の速さと使いやすさを求めるとインストール型の方が良いと感じました。
クラウド型はデータを編集する際や送り状をプリントアウトする際に処理に時間がかかってしまい、若干イラッとする事が多々あります。
さらにネットが不安定だったりすると編集していたデータが消えてしまったりなんて悲劇も起きてしまうので、複数のPCで発送データを共有する必要が無い限りインストール型をおすすめします。
&nbsp;

クロネコヤマトの送り状発行B2とB2webはどちらがいいのか？

デザインを制作していると、フリー素材を使うことがよくあります。 
ブログで紹介していたり、専用のサイトがあったりと様々で、それを見つける度に、ブックマークをしているのですが、そういったサイトを一つに集約しているサイトがありましたので紹介します。
ちなみに写真のフリー素材を漁っていると、その辺の広告なんかでよくフリー素材が使われています。
<h2>Makerbook</h2>
海外のサイトになります。
以下のカテゴリでわかれています。
・Photography(写真) 
・Mockups(モックアップ) 
・Graphics(アイコン、ベクター素材等) 
・Textures(パターンやテクスチャ) 
・Fonts(フォント) 
・Colours(スウォッチ) 
・Video(動画) 
・Audio(音楽)
中には元々日頃お世話になっているサイトもありましたので、 
このサイトを起点にすると探しやすいかもと思いました。
<a href="http://makerbook.net/" target="_blank" class="link">Makerbook &#8211; The best free resources for creatives.</a>
皆さんもぜひ使ってみてください！

デザイナー向けフリー＆有料素材まとめサイト「Makerbook」

前回に引き続きクロネコヤマトB2webの操作方法についてです。
前回の記事で送り状を印刷するところまでをご説明しましたが、今回は送り状の番号をB2webから出力する方法です。
&nbsp;
まず前回同様にヤマトビジネスメンバーズにログインします。
<a href="/uploads-archive/2015/05/nekopos1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7349" src="/uploads-archive/2015/05/nekopos1.gif" alt="nekopos1" width="647" height="239" /></a>
&nbsp;
一度ログインしていても一定時間が過ぎると勝手にログアウトしてしまいます、結構すぐにタイムアウトしてしまうのでちょっと面倒です。。。
さらに送り状発行システムB2webを開きます。
<a href="/uploads-archive/2015/05/nekopos2.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7351" src="/uploads-archive/2015/05/nekopos2.gif" alt="nekopos2" width="647" height="367" /></a>
ここまでは送り状の発行と変わりません。
<h2>B2web 出荷データ検索から発行済みのデータを出力する</h2>
送り状発行システムB2webの「状況確認」にある「出荷データ検索」をクリックします。
<a href="/uploads-archive/2015/05/b2web1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7438" src="/uploads-archive/2015/05/b2web1.gif" alt="b2web1" width="646" height="262" /></a>
&nbsp;
するとこちらの画面に移行します。
<a href="/uploads-archive/2015/05/b2web2.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7439" src="/uploads-archive/2015/05/b2web2.gif" alt="b2web2" width="651" height="467" /></a>
&nbsp;
発送予定日や伝票番号などでその日に発送した送り状のデータを表示させます。
「送り状未発行」については実際に発送していないので外しておいた方が良いと思います。
<a href="/uploads-archive/2015/05/b2web3.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7440" src="/uploads-archive/2015/05/b2web3.gif" alt="b2web3" width="651" height="464" /></a>
&nbsp;
条件を設定して発送済みの情報を表示させたら、必要なデータにチェックを入れて外部出力をクリックします。
<a href="/uploads-archive/2015/05/b2web4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7441" src="/uploads-archive/2015/05/b2web4.gif" alt="b2web4" width="648" height="364" /></a>
上の様なポップアップが出てくるので必要な形式にチェックを入れて保存して下さい。
&nbsp;
かなりシンプルですが難点があります、一度に外部出力できるデータは100件までとなっているので、100件を超える場合は出力するファイルをいくつかに分けて複数出力する必要があります。
ちなみに注文情報を「外部データの取込み」から取り込む際も一度に取り込めるのは100件までとなっています。
発送個数が多い店舗には向いていないかもしれません。
&nbsp;
<h2>B2web 出力したCSVの項目（フィールド）</h2>
<a href="/uploads-archive/2015/05/b2web5.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7442" src="/uploads-archive/2015/05/b2web5.gif" alt="b2web5" width="411" height="131" /></a>
&nbsp;
B2webから送り状番号を含むCSVデータを出力すると、送り状番号は上のように4列目になります。
B2webでは項目名や項目の並び順を変更できないので、モールによっては他のツールが必要となる場合もあります。
<h2>CSVの項目（フィールド）の順番を入れ替えるのに便利なツール</h2>
<a href="http://nuria.jp/products">Magic Converter マジックコンバーター</a>
<a href="http://nuria.jp/products"><img decoding="async" loading="lazy" class="alignnone wp-image-7443" src="/uploads-archive/2015/05/magic-conberter.gif" alt="magic-conberter" width="650" height="467" /></a>
CSVの項目を並べ替えたり、データを結合させたり、表記を変えたりと、かなり重宝するツールです。このツールがあれば大抵のことはできます。
さすがに有料ですが3900円で、一度購入すればずっと使用できます。ダウンロード版のみの販売で、30日のテスト使用期間が設けられているので一度試してみるのをおすすめします。
&nbsp;
<a href="http://www.ec-tencho.jp/">まとまるＥＣ店長</a>
<a href="http://www.ec-tencho.jp/"><img decoding="async" loading="lazy" class="alignnone wp-image-7444" src="/uploads-archive/2015/05/ECtencho.gif" alt="ECtencho" width="653" height="432" /></a>
いくつもモールを運営されている場合は「まとまるＥＣ店長」をおすすめします。
マジックコンバーターはファイルごとに並べ替えを行う必要がありますが、まとまるEC店長ならCSVの受け側を設定できるのでかなり便利です。
そもそもこのツールは複数モールでの運営を一括で行うためのツールなので受注から発送までをその名の通りまとめる事ができます。
一括管理ツールはいくつも出ていますが、EC店長の強みはまず安いという事です。月額9800円（税別）で他の一括管理ツールに比べるとかなり安く済みます。約1年ほど使用していますが、安かろう悪かろうという事は感じた事はありません。
何よりこのツールのスゴイ所はサポート体制がしっかりしている点です。フリーダイヤルの電話でのサポート窓口があるので、分からない場合はすぐに聞けますし対応もかなり親切です。
さらに良い所は常にツールが進化しているところです。モール側の変更にもすぐ対応してくれますし、どんどん使いやすいツールになっていっていると思います。
私がサポート窓口に要望させて頂いた内容もいくつか反映して頂きました。管理できるモールの数も多いのでオススメです。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/06/17

2015/06/17

2015/06/17

2015/06/10

2015/06/10

2015/06/10

2015/06/09

2015/06/04

2015/06/04

2015/06/04

2015/06/04

2015/06/03

2015/05/29

2015/05/29

2015/05/28

2015/05/28

2015/05/20

2015/05/20