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年ほど使用していますが、安かろう悪かろうという事は感じた事はありません。
何よりこのツールのスゴイ所はサポート体制がしっかりしている点です。フリーダイヤルの電話でのサポート窓口があるので、分からない場合はすぐに聞けますし対応もかなり親切です。
さらに良い所は常にツールが進化しているところです。モール側の変更にもすぐ対応してくれますし、どんどん使いやすいツールになっていっていると思います。
私がサポート窓口に要望させて頂いた内容もいくつか反映して頂きました。管理できるモールの数も多いのでオススメです。

ネコポスの送り状番号を出力して注文情報に反映させる方法

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」

jQueryでページ上に表示されるローディングのバーを作ってみる

small_chatwork.jpg

thumbnail_chatwork.jpg

chatwork.jpg

【chatwork】使えそうなタグ10個

すいません。
私も撤退していたと思ってた一人です。
<a href="http://japan.cnet.com/interview/35064618/" target="_blank">http://japan.cnet.com/interview/35064618/</a>
2002年に日本市場撤退と書いてあり、既に12年以上、干支が一周するくらいと考えると、ウェブの業界で考えると非常に長いですね。 
しかしながら、世界では最大のeコマースのプラットフォームになっていて、現状を理解する意味でもこちらの記事は参考になります。 
記事にも書いてありますが、複数のチャネルの中の一つとしてイーベイは外せないと思います。
<h3 id="-">記事抜粋</h2>
<ul>
<li>もともとオンラインオークションサイト</li>
<li>現在は常時8億品以上、8割以上が固定価格でマーケットプレイスとして進化</li>
<li>世界約190の国と地域で展開中</li>
<li>取引額は約833億ドル（約9兆8000億円。1ドル＝118円の計算）</li>
<li>全体の約20％の売上が越境EC(日本に限らず他国間の取引全てを指すと思われる)</li>
</ul>
<h3 id="-">コーポレートサイトも内容充実</h2>
合わせてみたイーベイ・ジャパンのコーポレートサイトもすごい充実していて驚きました。
<a href="http://www.ebay.co.jp/" target="_blank">http://www.ebay.co.jp/</a>
<h4 id="-">成功事例</h3>
このカテゴリーは必読です。 
なかなか越境ECでの成功事例を聞くことはできないのですが、5つ取り上げてくれています。
<ul>
<li><a href="http://www.ebay.co.jp/business/success-story/success-story05/" target="_blank">中古携帯端末の株式会社ウルス</a></li>
<li><a href="http://www.ebay.co.jp/business/success-story/success-story04/" target="_blank">ゲーム関連商品の株式会社山徳</a></li>
<li><a href="http://www.ebay.co.jp/business/success-story/success-story03/" target="_blank">バイクパーツの有限会社MiyabeePlus</a></li>
<li><a href="http://www.ebay.co.jp/business/success-story/success-story02/" target="_blank">キャラクター、ホビーの大網株式会社</a></li>
<li><a href="http://www.ebay.co.jp/business/success-story/success-story01/" target="_blank">中古ブランド品の株式会社デファクトスタンダード</a></li>
</ul>
紹介されている5つのうち、なんと4つが中古品を扱う会社であることが驚きでここから考えられることがたくさんあります。
前回紹介したaliexpressもそうですが、まずは使ってみます。

撤退していないイーベイ日本で越境EC

この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、 
今は、Photoshop CCを使用しております。 
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a> 
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)
Dreamweaverは数年前に辞め、 
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、 
Photoshopをやめたら、脱Adobeになってしまうかもしれません。
とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、 
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。
よく目にする3つをご紹介します。
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。 
$99ですが、trialも出来るので試してみて良かったら購入できますね！
cssへワンクリックで書き出せるとか、 
起動が早いとかあるみたいで、
以下でしっかりまとめられてるのでご覧ください！ 
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a>
私もTrialをダウンロードしましたが、今だ試せずにいます。
<a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a>
<h3>Pixelmator</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
こちらもmac向けですが、価格は3600円と安め。 
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。 
最近iPhone用のアプリも発売されたようです。
<a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a>
<a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a>
<h3>GIMP</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。 
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。 
初心者で試しに・・・という人にこちらはオススメです！！
<a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a> 
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a>

Photoshop以外の画像編集ツールでついにAdobe脱却！？

海外通販Aliexplessのススメ
普段から越境ECネタを書いておりますが、実際海外通販ってどうなのよ？ってことで実際に個人でやってみました。 
いわゆる海外から発送される商品の個人輸入ですね。 
実際にやってみたら、ハマってしまって、かなり使っています。
<h3 id="alibaba-aliexpless">Alibabaが運営する海外通販Aliexpless</h2>
今回、紹介するのは、Aliexpless。何度も取り上げているAlibabaが運営している海外通販向けのサイトです。 
taobao（CtoC）やTmall（BtoC）が中国国内の人向けに販売しているサイトに対して、Aliexplessは海外人向けに販売することを前提にしております。 
日本でいうと国内向けの楽天市場に対して、海外向けに楽天グローバルマーケット（<a href="http://global.rakuten.com/）を用意しているといったところでしょうか。" target="_blank">http://global.rakuten.com/</a>）を用意しているといったところでしょうか。
<a href="/uploads-archive/2015/05/AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7374" src="/uploads-archive/2015/05/AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_-300x234.png" alt="AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_" width="300" height="234" srcset="/uploads-archive/2015/05/AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_-300x234.png 300w, /uploads-archive/2015/05/AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_-228x178.png 228w, /uploads-archive/2015/05/AliExpress_com_-_Online_Shopping_for_Electronics__Fashion__Home___Garden__Toys___Sports__Automobiles_from_China_.png 498w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://www.aliexpress.com/" target="_blank">http://www.aliexpress.com/</a>
言語は、原則英語ですが、Google翻訳でサイトを表示する
<a href="/uploads-archive/2015/05/dbc34f397fc3abe8db652625814539d7.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7375" src="/uploads-archive/2015/05/dbc34f397fc3abe8db652625814539d7-300x65.jpg" alt="Alibaba_グループ___AliExpress_comの_携帯電話_からの_Original_Asus_Zenfone_5_A500KL_4G_TD__FDD-LTE_mobile_phones_Andoid_4_4_Quad_Core_2GB_8GB_5__Corning_Gorilla_Glass_8MP_G_中の_元の携帯電話のためのasusインテルatomzenfone5z2580ゴリラ2g_16g4_3コーニングアンドロイド二重simカードgps無線lanスマー" width="300" height="65" srcset="/uploads-archive/2015/05/dbc34f397fc3abe8db652625814539d7-300x65.jpg 300w, /uploads-archive/2015/05/dbc34f397fc3abe8db652625814539d7-228x50.jpg 228w, /uploads-archive/2015/05/dbc34f397fc3abe8db652625814539d7.jpg 656w" sizes="(max-width: 300px) 100vw, 300px" /></a>
何故か見た目がすごい変わる 
<a href="http://ja.aliexpress.com/" target="_blank">http://ja.aliexpress.com/</a> 
日本語版があります。
「カテゴリー」を「彼ごり」と記載されているのを気付くのに数分要し、気付いた瞬間吹きました。
<h3 id="aliexpless-">Aliexplessのメリット・デメリット</h2>
<h4 id="-">メリット</h3>
何がすごいってこの円安の時代でもめちゃ安いんです。
<h4 id="-">デメリット</h3>
<ul>
<li>基本英語ベース（店舗からのメールなど）</li>
<li>偽物が混じるリスク</li>
<li>到着までに物理的に時間がかかる</li>
<li>製品保証が期待出来ない 
等々、様々なハードルがあるんですが、とにかく安い。</li>
</ul>
<h3 id="aliexpless-">Aliexplessの商品</h2>
楽天と同じように、アパレルから化粧品まで様々なラインナップがあるのですが、 
どのような商品が狙い目かと言いますと、 
グローバルに規格展開している商品で消耗品ならありでしょう。
例えば…スマートフォンケースなど
<iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=sackoh71-22&amp;o=9&amp;p=8&amp;l=as4&amp;m=amazon&amp;f=ifr&amp;ref=ss_til&amp;asins=B00LL72R0M" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
結構似た感じのケース 
amazonでは1500円ですが、
<a href="http://www.aliexpress.com/item/Durable-Ultra-Thin-Slim-Hybird-PC-TPU-Case-For-Apple-iphone-6-4-7-inch-Vintage/32249598692.html" target="_blank">http://www.aliexpress.com/item/Durable-Ultra-Thin-Slim-Hybird-PC-TPU-Case-For-Apple-iphone-6-4-7-inch-Vintage/32249598692.html</a>
aliexpressでは、2$です。 
1$＝120円でも240円。 
しかも送料無料。 
どういうことなんですかね。
当然、amazonで売られているものは、国内正規品を謳っており、不良品や故障があった時も保証内容というのが設定されているはずですので、単純比較は出来ませんが。
このような商品がゴロゴロあります。
100均でケース買う感覚で消耗品として購入してみるのは有りだと思います。
あくまで自己責任で。

海外通販Aliexplessのススメ

今年の春からクロネコヤマトで「ネコポス」と「宅配便コンパクト」という新しいサービスがはじまりました。運営しているＥＣサイトでは今まで他の配送業者を利用して商品を発送していましたが、最近「ネコポス」の利用を開始したので送り状の作り方をまとめてみました。
これから説明する送り状の作成方法は「ヤマトビジネスメンバーズ」に登録が必要になります。ヤマトビジネスメンバーズは法人が対象のサービスです詳しくはこちらで確認してください。<a href="https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html">https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html</a>
ネコポスの送り状作成にはインストール型の「<a href="http://www.kuronekoyamato.co.jp/newb2/newb2.html">送り状発行ソフトＢ２</a>」とクラウド型の「Ｂ２web」があります、今回はＢ２webの方で送り状を作成します。
<h3>ヤマトビジネスメンバーズにログインする</h3>
まずはヤマトビジネスメンバーズにログインします。お客様コードとパスワードは契約完了後に担当の営業所からもらえます。
<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="625" height="231" /></a>
ログインが完了すると次のような画面になります。
<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="624" height="353" /></a>
送り状発行システムＢ２webのを開いてください。カーソルを上にのせるとポップアップが出るので利用するを選択して下さい。すると下のような画面になります。
この画面で送り状を作成したり、送り状番号のデータを出力したりします。
<a href="/uploads-archive/2015/05/nekopos3.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7352" src="/uploads-archive/2015/05/nekopos3.gif" alt="nekopos3" width="623" height="370" /></a>
&nbsp;
<h3>B2webに届け先のデータを取り込む</h3>
つづいて届け先の名前、住所、電話番号などのデータをB2webに取り込みます。（※送り状を一枚ずつ作成する場合は「個別発行」から操作して下さい。）
「外部データ取込み」をクリックします、すると取り込むデータの紐付けを行う画面が出てきます。
<a href="/uploads-archive/2015/05/nekopos4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7354" src="/uploads-archive/2015/05/nekopos4.gif" alt="nekopos4" width="624" height="480" /></a>
&nbsp;
取り込むデータが既にB2用に整えられていない場合は、まず取込パターンで「新規レイアウト」を選択し項目の紐付けを行います。
データ形式は取り込むデータの形式を確認してください。yahooや楽天などモールの場合はほとんどがCSV形式になっていると思います。
データの紐付けは以下の項目が必須になっています。
・出荷予定日
・送り状種別
・お届け先電話番号
・お届け先名
・お届け先郵便番号
・お届け先住所
・ご請求先顧客コード※
・運賃管理番号※
ここで「ご請求先顧客コード」と「運賃管理番号」はB2web上で必須と表示されていませんが必ず入力が必要になります。この２つは紐付けではなく固定値を入力した方が良さそうです。
「ご請求先顧客コード」はログインした際のお客様コードと同じ文字列が入り、「運賃管理番号」は通常「01」となりますが念のため担当の営業所に確認してください。
そして「送り状種別」ですが配送方法によって番号が決められています。ネコポスの場合は「７」になります。これも固定値で入力するか、もしくはCSVを出力する側で調整して下さい。
ちなみに「レイアウト項目」の「記事」にモールの注文番号を紐付けておくと、複数のモールを運営している場合送り状を見ただけでモールが判断できるので便利です。
<a href="/uploads-archive/2015/05/nekopos5.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7357" src="/uploads-archive/2015/05/nekopos5.gif" alt="nekopos5" width="625" height="337" /></a>
&nbsp;
それぞれのレイアウト項目をクリックすると取り込むデータの方式や最大文字数などの説明が表示されます。紐付けを行う際に参考にしてください。
紐付けが完了したら取込開始のボタンが浮き上がってくるのでクリックします。
<a href="/uploads-archive/2015/05/nekopos6.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7359" src="/uploads-archive/2015/05/nekopos6.gif" alt="nekopos6" width="625" height="494" /></a>
&nbsp;
修正が必要な送り先データに関しては通し番号のセルが赤くなるので、「編集」から必要な部分を修正して下さい。
修正が全て完了したら、印刷する全てのデータで「選択」にチェックが入っている事を確認して送り状発行のボタンをクリックします。
<h3>送り状を印刷する</h3>
続いて下の様な画面がでてきます。
ラベルシールの枚数を表示させてたい場合は「プレビュー画面を表示」にチェックを入れておいて下さい。
<a href="/uploads-archive/2015/05/nekopos7.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7360" src="/uploads-archive/2015/05/nekopos7.gif" alt="nekopos7" width="622" height="413" /></a>
プリンターにラベルシールをセットしたら「発行開始」をクリックして下さい。
<a href="/uploads-archive/2015/05/nekopos9.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7387" src="/uploads-archive/2015/05/nekopos9.gif" alt="nekopos9" width="583" height="347" /></a>
&nbsp;
すると上のようなポップアップが出てきます。１/１となっている箇所にラベルシールの印刷枚数が表示されます。
これで送り状の作成は完了です。

ネコポスの送り状をB2webで作成する方法

【jQuery】CSS3のTransform3DでGPUによる滑らかなアニメーションを実装しよう【CSS3】

私自身、エンジニアってわけではないのですが、プログラムに片足突っ込んでいるようなものなので、よくわからないことがあり、ググってみたりすると、最近エンジニアに特化している質問サイト等に出くわすことが多くなりました。
以前は誰か個人のブログが多いのですが、最近徐々にこのようなサイトが台頭しているよう感じます。
それでは早速ご紹介します！
<h2>teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</h2>
<a href="https://teratail.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7311" src="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg" alt="teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム" width="620" height="380" srcset="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg 1024w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-300x184.jpg 300w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-228x140.jpg 228w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
2014年7月に誕生したレバレジーズさんが運営しているサイトです。 
デザインがスッキリしていて見やすいです。
&nbsp;
<a class="link" href="https://teratail.com/" target="_blank">teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</a>
&nbsp;
<h2>スタック・オーバーフロー</h2>
<a href="http://ja.stackoverflow.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7314" src="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg" alt="スタック・オーバーフロー" width="620" height="380" srcset="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg 1024w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-300x184.jpg 300w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-228x140.jpg 228w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはよくググると、海外版のサイトがひっかかっていたのですが、その日本語版が2014年12月頃にベータ版として登場したようです。 
こちらもシンプルなデザインで見やすいですね！
&nbsp;
<a class="link" href="http://ja.stackoverflow.com/" target="_blank">スタック・オーバーフロー</a>
&nbsp;
<h2>Qiita &#8211; プログラマの技術情報共有サービス</h2>
<a href="https://qiita.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7310" src="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg" alt="Qiita - プログラマの技術情報共有サービス" width="620" height="380" srcset="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg 1024w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-300x184.jpg 300w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-228x140.jpg 228w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはどちらかと言うと、技術情報共有に重きを置いていて、その中でフィードバックもらうことが出来るようになっています。 
緑が印象的で記憶に残りやすいサイトですね。
&nbsp;
<a class="link" href="https://qiita.com/" target="_blank">Qiita &#8211; プログラマの技術情報共有サービス</a>
&nbsp;
<h2>CodePen</h2>
<a href="http://codepen.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7307" src="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg" alt="CodePen - Front End Developer Playground &amp; Code Editor in the Browser" width="620" height="380" srcset="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg 1024w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-300x184.jpg 300w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-228x140.jpg 228w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらは質問＆回答ではなく、技術共有のサイトです。 
プログラミングよりはフロントエンドよりの技術が多いかと思います。 
実行の結果とソースが一画面に表示されとても見やすいです！
例えば以下のようなものになります。 
<a href="http://codepen.io/egrucza/pen/bNjQLY" target="_blank">&#8220;Stupid&#8221; Case Study Hover</a>
&nbsp;
<a class="link" href="http://codepen.io/" target="_blank">CodePen</a>
&nbsp;
<h2>Forkwell &#8211; エンジニアのためのポートフォリオサービス</h2>
<a href="https://forkwell.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7308" src="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg" alt="Forkwell - エンジニアのためのポートフォリオサービス" width="620" height="380" srcset="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg 1024w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-300x184.jpg 300w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-228x140.jpg 228w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
ポートフォリオサービスとありますが、技術共有サイトです。 
エンジニアだけでなく、webクリエイター全般に対応しております。 
求人サイトと直結しているようなので、転職を目指す人にはいいかもしれません。
&nbsp;
<a class="link" href="https://forkwell.com/" target="_blank">Forkwell</a>
&nbsp;
<h2>WordPress フォーラム</h2>
<a href="https://ja.forums.wordpress.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7313" src="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg" alt="WordPress › フォーラム" width="620" height="380" srcset="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg 1024w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-300x184.jpg 300w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-228x140.jpg 228w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはご存知の通り、wordpress専用のサイトです。 
wordpress関連のことを調べるとよくたどり着きます。
&nbsp;
<a class="link" href="https://ja.forums.wordpress.org/" target="_blank">WordPress フォーラム</a>
&nbsp;
<h2>jsdo.it</h2>
<a href="http://jsdo.it/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7309" src="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg" alt="jsdo.it - Share JavaScript, HTML5 and CSS" width="620" height="380" srcset="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg 1024w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-300x184.jpg 300w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-228x140.jpg 228w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはカヤックさんが運営しているサイトで、 
JavaScript,HTML5,CSSに特化しているようなので、エンジニアというよりフロントエンドよりですね。
&nbsp;
<a class="link" href="http://jsdo.it/" target="_blank">jsdo.it</a>
&nbsp;
<h2>W3Q &#8211; Web制作のお悩みを解決するQ&amp;Aとまとめサービス</h2>
<a href="http://w3q.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7312" src="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg" alt="W3Q - Web制作のお悩みを解決するQ&amp;Aとまとめサービス" width="620" height="380" srcset="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg 1024w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-300x184.jpg 300w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-228x140.jpg 228w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはweb制作、web業界に関する質問をなんでもっていうサイトなのですが、 
今まで紹介してきたサイトと比べると、匿名のため品のない回答も多く見受けられます・・・
&nbsp;
<a class="link" href="http://w3q.jp/" target="_blank">W3Q</a>
&nbsp;
&nbsp;
私自身エンジニア歴は長くはないので、 
調べたらなんとかなるという状況にいましたが、当初からすると贅沢な状況になっているのかもしれません。
私にとってありがたいサービスが生まれて来ているので、こうゆうサイトで知識を蓄えつつ、 
回答する側に行きたいなぁと思います。

webエンジニアが技術共有＆質問できるサイト7つ

マテリアルデザイン(material design)は昨年2014年7月にGoogleから提唱された、
WEB端末向けの新たなデザイン体系です。
&nbsp;
Google関係のアプリをはじめ、少しずつ見かける機会は増えているものの、
具体的にどんなものなのか知らずにいました。
私は単純にフラットデザインのひとつの形に過ぎないと想像していましたが、
実際には別物だということを知り、
今後のためにもちゃんと調べようと思ったので、
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Googleが公開しているマテリアルデザインのガイドライン</a>を調べて、
内容をまとめてみました。
&nbsp;
公式のガイドライン
<a class="link" href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material design &#8211; Google design guidelines</a>
&nbsp;
<h2>マテリアルデザインの基本</h2>
<h3>マテリアルデザインに用いられる単位(dp)について</h3>
ガイドラインでは、度々dpという単位が使われています。
この単位は解像度が160dpiの場合の1pxを基本としています。
解像度が240dipなら1dpは1.5px、320dpiなら1dpは2pxになります。
(ちなみにiPhone4-6の解像度は326dpiです。ノートパソコンは100〜150dpiくらい)
&nbsp;
まず、マテリアルデザインの核となる部分
<h3>３次元空間(3D)を意識する</h3>
<a class="link" href="http://www.google.com/design/spec/what-is-material/environment.html" target="_blank">参考: Environment &#8211; What is material? &#8211; Google design guidelines</a>
縦方向と横方向の平面上にレイアウトすることを意識したフラットデザインと違い、
マテリアルデザインは、縦方向と横方向に加えて、画面の奥行きを意識したデザインになっています。
<a href="/uploads-archive/2015/04/axis.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7299 size-full" src="/uploads-archive/2015/04/axis.png" alt="axis" width="656" height="480" srcset="/uploads-archive/2015/04/axis.png 656w, /uploads-archive/2015/04/axis-300x220.png 300w, /uploads-archive/2015/04/axis-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
マテリアルデザインの一つの大きな特徴であるシャドウ(shadow)は、
この奥行きを視覚的に知らせることを目的としています。
そのため、このシャドウはそれまでにもあった装飾としてのシャドウとは違い、
その要素の奥行の状態に合わせて変化させる必要があります。
また、そのシャドウの位置・方向や濃さを決めるために、光源(light)を意識することも必要になります。
&nbsp;
重要な要素についてはその奥行が決められていて、
デバイスによっても、その奥行が変化します。
<a href="/uploads-archive/2015/04/3d_space1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7302 size-full" src="/uploads-archive/2015/04/3d_space1.jpg" alt="3d_space" width="656" height="480" srcset="/uploads-archive/2015/04/3d_space1.jpg 656w, /uploads-archive/2015/04/3d_space1-300x220.jpg 300w, /uploads-archive/2015/04/3d_space1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a class="link" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation-android-" target="_blank">参考: Objects in 3D space &#8211; What is material? &#8211; Google design guidelines</a>
&nbsp;
<h3>各要素の基本的な素材は紙のようなものをイメージする</h3>
<a class="link" href="http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material" target="_blank">Material properties &#8211; What is material? &#8211; Google design guidelines</a>
マテリアルデザイン上では、各要素を薄い紙として扱います。
ただ、実際の紙と違って、その紙は様々に変形することが許容されています。
とはいえ、別の奥行きにあった要素が貫通してしまうような変形や、
折りたたむ、<ruby>捲<rp>(</rp><rt>めく</rt><rp>(</rp></ruby>るといった変形は許されていません。
形が変わる（円から四角形になるなど）、伸び縮みする、融合・分離する、回転するなどが許容されている変形です。
&nbsp;
<h3>アニメーションの基本</h3>
マテリアルデザインの重要な特徴として、アニメーションを多く利用するというものがあります。
そのアニメーションにももちろんルールがあります。
通常のアニメーションのイージングは基本的にはAsymmetric(非対称：開始と終了の動きが時間的に対象になっていない)なイージングがより自然な動きということで、推奨されています。
<a href="/uploads-archive/2015/04/responsive-reaction1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7328 size-full" src="/uploads-archive/2015/04/responsive-reaction1.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction1.png 656w, /uploads-archive/2015/04/responsive-reaction1-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction1-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
ただ、もともと画面上になかった要素が入ってきたり、出て行ったりする場合は、
入ってくるときは徐々に減速、出て行く時は徐々に加速させるようなイージングが推奨されています。
ただ最終的には、製作者により、より自然な動きになるように調整することが求められています。
&nbsp;
<h3>Responsive interaction</h3>
ユーザーがタッチしたことを明確に知らせ、操作感の改善を目指したものです。
マテリアルデザインのアニメーションの中で最も特徴的といえる効果です。
日本では波紋エフェクトとも呼ばれています。
タッチした場所を中心に、波紋のようなアニメーションを表示することで、
タッチした場所を知らせ、触ったという視覚効果を明確に表現しています。
<a href="/uploads-archive/2015/04/surface-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7305 size-full" src="/uploads-archive/2015/04/surface-reaction.png" alt="surface-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/surface-reaction.png 656w, /uploads-archive/2015/04/surface-reaction-300x220.png 300w, /uploads-archive/2015/04/surface-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
タッチした場所を起点に、要素が飛び出してきたり、収納されたりするような視覚効果もそのひとつです。
&nbsp;
<h3>視覚的な連続性のあるアニメーション</h3>
マテリアルデザインの中で、私が最も共感するアニメーションルールですが、
タッチした要素と遷移先の要素を視覚的に同一視できるような効果をつけるというものです。
例えば記事の一欄があった場合、
一覧から記事を選ぶと、タッチした要素が画面いっぱいに広がるようにして、
記事の詳細のページヘ遷移するというアニメーションをつけます。
一覧に戻るときにも、記事が一覧に戻っていくようなアニメーションをつけます。
そうすることで、情報の連続性を視覚的にユーザーに知らせることができ、
ユーザーも現在の場所を見失うことなく、ページを遷移することが可能になります。
<a href="/uploads-archive/2015/04/responsive-reaction.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7315 size-full" src="/uploads-archive/2015/04/responsive-reaction.png" alt="responsive-reaction" width="656" height="480" srcset="/uploads-archive/2015/04/responsive-reaction.png 656w, /uploads-archive/2015/04/responsive-reaction-300x220.png 300w, /uploads-archive/2015/04/responsive-reaction-228x167.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
その他、公式のガイドラインには、色やアイコンの作り方など、細かなルールが決められていて、
マテリアルデザインという枠を超えてデザインの勉強になると思います。
動画を使ってわかりやすく説明がされているので、ページ量は多いですが、とても読み進めやすいです。
興味のある方は是非、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">公式のガイドライン</a>をご覧になってください。

マテリアルデザイン(material design)の基本の基本についてまとめてみました

中国のことを情報収集していると知り合い伝いなどで、どんどん教えてもらえます。 そんな中で、メディアなどではない、中国ビジネスを行う企業のブログを紹介します。
<h3 id="-">クーパル株式会社のブログ</h2>
<a href="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7294" src="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-300x245.jpg" alt="Blog___クーパル株式会社" width="300" height="245" srcset="/uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-300x245.jpg 300w, /uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228-228x186.jpg 228w, /uploads-archive/2015/04/b4c9dbaee074c59bfa4144a72d8c2228.jpg 948w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://coopal.jp/blog/" target="_blank">http://coopal.jp/blog/</a>
中国にて現地法人の社長を行っていた社長が率いるクーパル社のブログです。
非常に分かりやすく特に3分でわかるシリーズの記事は必見です。
今後の更新に期待です！
<h3 id="-ec-">株式会社 宥尚社の中国EC最新情報（ブログ）</h2>
<a href="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7295" src="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-300x208.jpg" alt="株式会社_宥尚___上海宥尚実業有限公司" width="300" height="208" srcset="/uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-300x208.jpg 300w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-1024x711.jpg 1024w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd-228x158.jpg 228w, /uploads-archive/2015/04/a9220ad16738250e80853418dc424ccd.jpg 1107w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://www.ecdio.com/blog/" target="_blank">http://www.ecdio.com/blog/</a>
中国のECに絞って非常に深く考察されているのでとても参考になります。 具体的な障害となることや保税区や課税など、国内ビジネスでは分からないことが書かれております。
<h3 id="-">株式会社スワンブリッジパートナーズ社のブログ</h2>
<a href="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7296" src="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-300x225.jpg" alt="Swanbridgepartners___中国の出合い系アプリ最高峰はアレ_2014小米アップストアレポートからトレンドを読む" width="300" height="225" srcset="/uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-300x225.jpg 300w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-1024x769.jpg 1024w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb-228x171.jpg 228w, /uploads-archive/2015/04/b05783f5d1b320a1130e4445088761fb.jpg 1148w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<a href="http://swanbridgepartners.com/?p=2054" target="_blank">http://swanbridgepartners.com/?p=2054</a>
いつも注目しているxiaomiが発表した内容の翻訳記事を見れば、 トレンドを掴むことが出来ます。
<a href="http://swanbridgepartners.com/?p=1988" target="_blank">http://swanbridgepartners.com/?p=1988</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/06/04

2015/06/03

2015/05/29

2015/05/29

2015/05/28

2015/05/28

2015/05/20

2015/05/20

2015/05/20

2015/05/19

2015/05/19

2015/05/13

2015/05/13

2015/05/13

2015/05/12

2015/04/22

2015/04/22

2015/04/22