<p>Markdown記法すぐ忘れちゃう自分向けにまとめ。</p>
<p>文章は少なく行きます。使いやすそうなのだけピックアップ</p>
<table>
<caption>Markdown記法早見表</caption>
<tbody>
<tr>
<th rowspan="2">要素</th>
<th>Markdown 記法</th>
<th>HTML出力</th>
</tr>
<tr>
<th colspan="2">説明</th>
</tr>
<tr>
<td rowspan="2">見出し</td>
<td> ### H3見出し</td>
<td>&lt;h3&gt;H3見出し&lt;/h3&gt;</td>
</tr>
<tr>
<td colspan="2"># はレベル数に応じる。</td>
</tr>
<tr>
<td rowspan="2">段落</td>
<td>文章文章</td>
<td>&lt;p&gt;文章&lt;/p&gt;&lt;p&gt;文章&lt;/p&gt;</td>
</tr>
<tr>
<td colspan="2">空行を挟むと上下の文章が別の段落</td>
</tr>
<tr>
<td rowspan="2">改行</td>
<td>改行する際は   半角スペース2つ以上を末尾に追加</td>
<td>改行する際は&lt;br /&gt;半角スペース2つ以上を末尾に追加</td>
</tr>
<tr>
<td colspan="2">半角スペース2つ入れて改行</td>
</tr>
<tr>
<td rowspan="2">並列リスト</td>
<td>* リスト* リストor- リスト</p>
<p>&#8211; リスト</td>
<td>&lt;ul&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;/ul&gt;</td>
</tr>
<tr>
<td colspan="2">*+ (半角スペース)もしくは-+ (半角スペース)</td>
</tr>
<tr>
<td rowspan="2">順序リスト</td>
<td>1.リスト1.リスト</p>
<p>2.リスト</td>
<td>&lt;ol&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;li&gt;リスト&lt;/li&gt;</p>
<p>&lt;/ol&gt;</td>
</tr>
<tr>
<td colspan="2">数字＋ピリオド+ (半角スペース）　数字は関係なく、順番に出力される</td>
</tr>
<tr>
<td rowspan="2">引用</td>
<td>&gt;引用</td>
<td>&lt;blockquote&gt;〇〇&lt;/blockquote&gt;</td>
</tr>
<tr>
<td colspan="2">文頭に&gt;</td>
</tr>
<tr>
<td rowspan="2">罫線</td>
<td>&#8211; &#8211; &#8211;</td>
<td>&lt;hr /&gt;</td>
</tr>
<tr>
<td colspan="2">アンダーバー+ (半角スペース）3回</td>
</tr>
<tr>
<td rowspan="2">斜体</td>
<td>*斜体*</td>
<td>&lt;i&gt;斜体&lt;/i&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">強調</td>
<td> **強調**</td>
<td>&lt;strong&gt;強調&lt;/strong&gt;</td>
</tr>
<tr>
<td colspan="2">前後に*（アスタリスク）を2つずつ</td>
</tr>
<tr>
<td rowspan="2">打ち消し線</td>
<td>~~打ち消し線~~</td>
<td>&lt;s&gt;打ち消し線&lt;/s&gt;</td>
</tr>
<tr>
<td colspan="2">前後に~（波線）を２つずつ</td>
</tr>
<tr>
<td rowspan="2">コード</td>
<td><code>コード</code></td>
<td>&lt;code&gt;コード&lt;/code&gt;</td>
</tr>
<tr>
<td colspan="2">前後に｀（バックティック）を１つずつ</td>
</tr>
<tr>
<td rowspan="2">リンク</td>
<td>[Google](http://google.com)</td>
<td>&lt;a href=&#8221;http://google.com&#8221;&gt;Google&lt;/a&gt;</td>
</tr>
<tr>
<td colspan="2">[リンク文字列](URL)</td>
</tr>
<tr>
<td rowspan="2">画像</td>
<td> ![画像名](http://xxx.com/img/logo.jpg)</td>
<td>&lt;img src=&#8221;http://xxx.com/img/logo.jpg&#8221; alt=&#8221;画像名&#8221; /&gt;</td>
</tr>
<tr>
<td colspan="2">![画像名](http://xxx.com/img/logo.jpg)</td>
</tr>
</tbody>
</table>


Markdown記法早見表

<p>中国国営企業SIPG社と、上海で高級輸入品スーパーを運営するGL-Plazaとが共同で</p>
<p>中国国内での商品販売をサポートしてくれるプラットフォーム跨境通(コアチントン)を5月1日から開始すすとの発表があった。</p>
<p>&nbsp;</p>
<h2>跨境通とは</h2>
<ol>
<li>ECと商業施設で外国製品を販売してくれる</li>
<li>商業施設は上海国際旅客フェリーターミナル内に1100平米 建設中</li>
<li>ECはそこから全土に配送</li>
<li>上海国際旅客フェリーターミナル内は保税区なので関税免除</li>
<li>日本→中国への輸送はGL-Plaza日本法人が無料で代行 → 横浜からの定期船便</li>
</ol>
<p>&nbsp;</p>
<h2>利用料金</h2>
<ol>
<li>1坪1万円程度の家賃・管理費</li>
<li>2割り程度の販売手数料</li>
</ol>
<p>&nbsp;</p>
<h2>全体像</h2>
<div id="attachment_6931" style="width: 533px" class="wp-caption aligncenter"><a href="/uploads-archive/2015/02/img.jpg"><img aria-describedby="caption-attachment-6931" decoding="async" loading="lazy" class="size-full wp-image-6931" src="/uploads-archive/2015/02/img.jpg" alt="跨境通" width="523" height="395" srcset="/uploads-archive/2015/02/img.jpg 523w, /uploads-archive/2015/02/img-300x227.jpg 300w, /uploads-archive/2015/02/img-228x172.jpg 228w" sizes="(max-width: 523px) 100vw, 523px" /></a><p id="caption-attachment-6931" class="wp-caption-text">跨境通</p></div>
<p>引用元：<a href="http://www.gl-plaza.jp/press/press20150220.pdf" target="_blank">http://www.gl-plaza.jp/press/press20150220.pdf</a></p>
<p>詳細な料金形態や取り扱い商品などはまだ明確ではないが</p>
<p>当てはまれば日本企業にとって利用価値の高いサービスとなりそう。</p>
<p>おそらく高級スーパーが販売元となるため、取扱商品に制限や審査があると思われる</p>
<p>&nbsp;</p>
<p>日本の中小企業の海外展開の1つの形としてはおもしろそうだ</p>


中国国営企業が運用する越境ECプラットフォーム「跨境通」

初心者は意外と使っていないかもしれないCSSの指定の仕方

SVG.jsでjQueryのようにSVGを軽快に扱う

<p>ＥＣサイト運営でお客様へご連絡する際、基本的にはメールでのご連絡となりますが、急ぎの場合やメールでは失礼にあたる場合などに電話をさせて頂く事が少なからずあります。</p>
<p>電話をかける件数は注文数に比例してどうしても多くなりますので、電話代を抑える方法がないか調べてみました。</p>
<p>&nbsp;</p>
<h2>一般加入電話とＩＰ電話は何が違うのか？</h2>
<p>ネットで「電話代　削減」などと検索するとすぐに「ＩＰ電話」という単語が出てきますが、そもそもＩＰ電話とは何なのか？という疑問が出てきます。</p>
<p>簡単にいうと一般加入電話はアナログ回線を使用していて、ＩＰ電話はインターネット回線を使っています。もちろんメリット、デメリットがあります。</p>
<p>&nbsp;</p>
<p>■ＩＰ電話のメリット</p>
<p>・長距離電話、国際電話の料金が安く済む</p>
<p>・基本料金が安い傾向にある</p>
<p>・同サービス（提携グループを含む）同士の通話料金が無料になる場合が多い</p>
<p>&nbsp;</p>
<p>■ＩＰ電話のデメリット</p>
<p>・ネット回線なために多少不安定な場合がある。オフィスでネットが繋がりにくくなる経験がある場合は、IP電話がつながりにくくなる事もある。</p>
<p>・警察110　消防119などに電話できない※あたまに0033をつけるとかけられる（？）</p>
<p>&nbsp;</p>
<h2>一般加入電話とＩＰ電話、どちらが安い？</h2>
<p>漠然とＩＰ電話のほうが安い気がしたのですが、調べてみると一般加入電話にもＩＰ電話並みに安いサービスがあるようです。大抵たどり着くのは次の3つになりました。</p>
<p>&nbsp;</p>
<p>■一般加入電話</p>
<p>「おとくライン」ソフトバンクテレコム（一律料金プラン）</p>
<table style="height: 184px;" width="441">
<tbody>
<tr>
<td style="width: 300px;">基本料金（月額）</td>
<td style="width: 300px;">2350円～3380円</td>
</tr>
<tr>
<td style="width: 300px;">国内通話（全国一律）</td>
<td style="width: 300px;">7.9円/3分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話（ソフトバンク）</td>
<td style="width: 300px;">15.5円/1分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話（ソフトバンク以外）</td>
<td style="width: 300px;">16.0円/1分</td>
</tr>
<tr>
<td style="width: 300px;">IP電話</td>
<td style="width: 300px;">10.0円/3分</td>
</tr>
<tr>
<td style="width: 300px;">国際電話（アメリカ）</td>
<td style="width: 300px;">26.0円/3分</td>
</tr>
</tbody>
</table>
<p>初期費用：7000円～（ソフトバンクテレコム交換機工事費＋標準工事費）</p>
<p><a href="http://tm.softbank.jp/otoku/price_b/kokunai/">http://tm.softbank.jp/otoku/price_b/kokunai/</a></p>
<p>※通常の一般加入電話だと市内、同一県内、県外で国内通話料金が違います。100キロを超えると80円/3分程度</p>
<p>&nbsp;</p>
<p>■ＩＰ電話</p>
<p>「ひかり電話オフィスＡ」ＮＴＴ</p>
<table style="height: 286px;" width="442">
<tbody>
<tr>
<td style="width: 300px;">基本料金（月額）</td>
<td style="width: 300px;">1.100円～※1チャンネルで1.100円</td>
</tr>
<tr>
<td style="width: 300px;">国内通話（全国一律）</td>
<td style="width: 300px;">8.0円/3分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話(ドコモ・Ｙモバイル）</td>
<td style="width: 300px;">16.0円/1分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話(au・ソフトバンク）</td>
<td style="width: 300px;">17.5円/1分</td>
</tr>
<tr>
<td style="width: 300px;">IP電話</td>
<td style="width: 300px;">10.4～10.8円/3分</td>
</tr>
<tr>
<td style="width: 300px;">IP電話(同サービス）</td>
<td style="width: 300px;">無料</td>
</tr>
<tr>
<td style="width: 300px;">国際電話（アメリカ）</td>
<td style="width: 300px;">9.0円/1分</td>
</tr>
</tbody>
</table>
<p>初期費用：4500円～（基本工事費）</p>
<p><a href="http://www.ntt-east.co.jp/hikari_ofa/?link_id=tpbrnav">http://www.ntt-east.co.jp/hikari_ofa/?link_id=tpbrnav</a></p>
<p>&nbsp;</p>
<p>「ＫＤＤＩ－ＩＰフォン（法人）」ＫＤＤＩ</p>
<table style="height: 286px;" width="442">
<tbody>
<tr>
<td style="width: 300px;">基本料金（月額）</td>
<td style="width: 300px;">600円～※1チャンネル600円</td>
</tr>
<tr>
<td style="width: 300px;">ビジネス通話定額（月額）</td>
<td style="width: 300px;">900円～※1チャンネル900円</td>
</tr>
<tr>
<td style="width: 300px;">国内通話（全国一律）</td>
<td style="width: 300px;">8.0円/3分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話(au）</td>
<td style="width: 300px;">15.5円/1分</td>
</tr>
<tr>
<td style="width: 300px;">携帯電話(au以外）</td>
<td style="width: 300px;">16.0円/1分</td>
</tr>
<tr>
<td style="width: 300px;">IP電話(同サービス）</td>
<td style="width: 300px;">無料</td>
</tr>
<tr>
<td style="width: 300px;">国際電話（アメリカ）</td>
<td style="width: 300px;">9.0円/1分</td>
</tr>
</tbody>
</table>
<p>初期費用：2000円（サービス基本工事費）</p>
<p><a href="http://www.kddi.com/business/voice-phone/ip-phone/ip-phone/charge/">http://www.kddi.com/business/voice-phone/ip-phone/ip-phone/charge/</a></p>
<p>&nbsp;</p>
<p>じゃあどこが安いのか？ということですが、料金表を見て頂くと発信先で料金に差が出てきます。</p>
<p>ＥＣサイトでのお客様対応では基本的に発信先が全国です、さらに大抵のお客さまが携帯電話の番号を連絡先として登録しています。</p>
<p>という事で携帯への料金が安いソフトバンクテレコムかＫＤＤＩが良さそうです。</p>
<p>&nbsp;</p>
<p>上記以外にも秒単位で通話料を課金するサービスなどもありますが、初期費用が結構かかりそうな感じです。通話回数が膨大になってきたら向いているかもしれませんが、月に数十万円ほど通話料金がかかっている場合でないとペイできなそうな気がします。</p>


電話代を削減するには？一般加入電話とＩＰ電話

<p>中国のスマートフォンメーカーが気になって仕方がない目崎です。</p>
<p>さてと、nexus5を割った所（3年ぶり2回目、前回はiphone5）でそろそろ本気でxiaomiを検討しようとしています。</p>
<p>1台持ちで仕事にも使っているのに、ケースも付けずに持ち歩いているため、落として割れる可能性が高いのでしょうが。</p>
<p>他にもSIMフリースマホを物色しています。</p>
<h3 id="toc_2">中国で流通している主要メーカーがスマートフォンが買えるECサイト</h2>
<p><a href="http://www.958shop.com/" target="_blank">http://www.958shop.com/</a></p>
<h3 id="toc_0">4年で中国1位、世界3位</h2>
<p>xiaomiのことは過去に何度か取り上げていますが、実店舗も持たずグローバルにも展開せず、まず中国で覇権をとりました。一部アジア圏やインドでの販売も開始したようですが、相変わらず絶好調のようです。</p>
<p><a href="http://www.itmedia.co.jp/mobile/articles/1305/02/news041.html" target="_blank">http://www.itmedia.co.jp/mobile/articles/1305/02/news041.html</a><br />
かなり前の記事ですが、当時で400社のメーカーが存在していたようです。<br />
2012年当時は、Samsungが22.5％のシェアでトップで、xiaomiは10位内ですが、1行で取り上げられる存在でした。そして、この論調からxiaomiが2年で首位になるとは誰が想像していたことでしょうか。<br />
<a href="http://wirelesswire.jp/compass&lt;em&gt;for&lt;/em&gt;global&lt;em&gt;communication&lt;/em&gt;industry/201408251830.html" target="_blank">http://wirelesswire.jp/compass<em>for</em>global<em>communication</em>industry/201408251830.html</a></p>
<p>2015年もxiaomiの勢いは止まらなそうです。<br />
<a href="http://www.j-cast.com/2015/01/22225957.html" target="_blank">http://www.j-cast.com/2015/01/22225957.html</a></p>
<h3 id="toc_1">中国の主要スマートフォンメーカー</h2>
<ol>
<li>Huawei</li>
<li>ZTE</li>
<li>Lenovo</li>
<li>Coolpad</li>
<li>Xiaomi</li>
<li>Oppo</li>
<li>BBK</li>
<li>Gionee</li>
<li>K-touch</li>
<li>Meizu</li>
<li>TCL</li>
<li>Hisense</li>
<li>Haier</li>
<li>Konka</li>
<li>Changhong</li>
</ol>
<p style="text-align: right;">出典：<a href="http://www.fcr.co.jp/pr/14023.htm" target="_blank">http://www.fcr.co.jp/pr/14023.htm</a></p>
<p>この中で、Huawei、ZTE、Lenovoなどは日本にも進出しているため、知っている方もいるかも知れません。<br />
Huawei、ZTEはPocketWifiをいくつも提供しています。LenovoはThinkpadなどのPCのイメージのほうが強いでしょうか。<br />
Haierは家電のsanyoを買収した企業ですね。</p>
<h3 id="toc_2">まとめ</h2>
<p>ということでまた、購入したら人柱報告します。</p>


中国のスマートフォンメーカー

<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/0tUGO9e5MFc?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><a href="http://linebp.com/press/2015/021301" target="_blank">http://linebp.com/press/2015/021301</a></p>
<p>ビジネスアカウント「LINE@」大幅リニューアルしたとのこと</p>
<h2>LINE@とは</h2>
<p>LINE上で店舗等が販促を行えるサービス</p>
<ul>
<li>2012年12月からサービス提供</li>
<li>累計アカウント開設数14万件</li>
<li>LINE@アカウントを利用しているユーザーは1,000万人以上</li>
</ul>
<h2>今回のリニューアルで変わったこと</h2>
<ul>
<li>個人事業主の登録が可能に</li>
<li>実店舗を持たないEC事業者の登録が可能に</li>
</ul>
<h2>便利な機能</h2>
<ul>
<li>複数アカウント(店舗)を管理できる</li>
<li>タイムラインへ投稿</li>
<li>1:1でのトーク</li>
<li>一括メッセージ送信</li>
<li>統計情報閲覧</li>
</ul>
<h2>利用料金</h2>
<h3>プレミアムID</h3>
<p>初年度 2,592円(税込)</p>
<p>2年目以降 1,296円(税込)</p>
<p>※通常のID(ランダム)での利用は無料</p>
<p>&nbsp;</p>
<h3>メッセージ配信数</h3>
<table>
<tbody>
<tr>
<th></th>
<th>初期費用</th>
<th>月額</th>
<th>配信数</th>
<th>重量配信料</th>
<th>リッチメッセージ</th>
<th>PRページ</th>
<th>リサーチページ</th>
</tr>
<tr>
<td>無料プラン</td>
<td>無料</td>
<td>無料</td>
<td>1,000通/月</td>
<td>不可</td>
<td>不可</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>有料プラン</td>
<td>無料</td>
<td>5,400円</td>
<td>50,000通/月</td>
<td>1.08円/通</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</tbody>
</table>
<p>詳しくはこちら</p>
<p><a href="http://linecorp.com/ja/pr/news/ja/2015/937" target="_blank"> http://linecorp.com/ja/pr/news/ja/2015/937</a></p>
<h2>ECでの利用例</h2>
<p>基本FacebookページのLINE版という感が強いが、</p>
<p>チャット専門アプリという認識が強いLINEだけあって、以下のような中国EC的な使い方も考えられるかもしれない。</p>
<p>※写真はLINE公式ニュースより引用</p>
<p><a href="/uploads-archive/2015/02/a.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6877" src="/uploads-archive/2015/02/a-169x300.jpg" alt="LINE BP" width="169" height="300" srcset="/uploads-archive/2015/02/a-169x300.jpg 169w, /uploads-archive/2015/02/a-228x405.jpg 228w, /uploads-archive/2015/02/a.jpg 333w" sizes="(max-width: 169px) 100vw, 169px" /></a></p>
<p>今まであまりなかった若い世代へのECの販促ツールとして使い方によっては有用かもしれない</p>


LINEビジネスアカウントでECサイトの登録が可能に

PHPUnitを使った単体テスト

初級者は意外と理解してない(?)CSSの優先順位について

<p>＠コスメのアイスタイルさんが 海外向け化粧品卸専門会社を設立したというので調べてみました。</p>
<p>発表されたことは3つです。</p>
<h2>3つのポイント</h2>
<ul>
<li>海外向け化粧品卸専門会社として株式会社アイスタイルトレーディングの設立</li>
<li>中国最大の化粧品ECサイト「聚美优品（JUMEI）」との販売提携</li>
<li>「天猫国際（Tmall Global）」への出店</li>
</ul>
<p>まず、1つ目は、海外向け化粧品卸専門を設立したことになります。</p>
<p>物流面から化粧品メーカーをサポートしていくとのことで、国内店舗を含めどのようにメーカーと連携し、サポートをしていくのか今後も参考にさせて頂きたいと思います。</p>
<p>2つ目の中国最大の化粧品ECサイト「聚美优品（JUMEI）」への提携は、売上が確定的になるので非常に好感があります。</p>
<p>今でも日本製の化粧品は人気があるので、公式に販売していくのはユーザーにとっても安心感があると思います。</p>
<p>3つ目は自社店舗ですね。Tmallでの成功事例を期待しております。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2015/02/v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6812" src="/uploads-archive/2015/02/v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660-300x207.jpg" alt="v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660" width="300" height="207" srcset="/uploads-archive/2015/02/v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660-300x207.jpg 300w, /uploads-archive/2015/02/v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660-228x157.jpg 228w, /uploads-archive/2015/02/v4_eir-parts_net_v4Contents_View_aspx_template_ir_material_sid_36784_code_3660.jpg 1020w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p style="text-align: right;">（引用：<a href="http://v4.eir-parts.net/v4Contents/View.aspx?template=ir_material&amp;sid=36784&amp;code=3660" target="_blank">2015年6月期　第2四半期　決算説明資料</a>）</p>
<h2>おまけ</h2>
<p>もちろん好決算による部分が大きいと思いますが、越境ECを発表した後の同社の株価の勢いが凄いです。</p>
<p><a href="/uploads-archive/2015/02/7e6d7127a05967791c8177b9eb055cf5.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6810" src="/uploads-archive/2015/02/7e6d7127a05967791c8177b9eb055cf5-300x181.jpg" alt="_株_アイスタイル【3660】：株式_株価_-_Yahoo_ファイナンス" width="300" height="181" srcset="/uploads-archive/2015/02/7e6d7127a05967791c8177b9eb055cf5-300x181.jpg 300w, /uploads-archive/2015/02/7e6d7127a05967791c8177b9eb055cf5-228x137.jpg 228w, /uploads-archive/2015/02/7e6d7127a05967791c8177b9eb055cf5.jpg 534w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>最近では、インバウンド O2Oを発表した株式会社サダマツさんの株価も跳ねております。</p>
<p><a href="http://www.sadamatsu.com/blog/img/2015/news20150128.pdf" target="_blank">http://www.sadamatsu.com/blog/img/2015/news20150128.pdf</a></p>
<p><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6809" src="/uploads-archive/2015/02/9e81709348b15107979db86766e8caf7-300x182.jpg" alt="_株_サダマツ【2736】：株式_株価_-_Yahoo_ファイナンス" width="300" height="182" srcset="/uploads-archive/2015/02/9e81709348b15107979db86766e8caf7-300x182.jpg 300w, /uploads-archive/2015/02/9e81709348b15107979db86766e8caf7-228x138.jpg 228w, /uploads-archive/2015/02/9e81709348b15107979db86766e8caf7.jpg 540w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>それだけ市場が海外向けのビジネスに対して好感されていることが分かります。</p>


アイスタイル社の越境EC展開

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

HTML5のインラインSVGとjQueryでお絵描き

<h2>ポスパケットとは？</h2>
<p>通常ＥＣサイトを運営されている方は宅配便もしくはメール便で商品を発送していると思いまが、日本郵便の「ポスパケット」をご存じでしょうか。</p>
<p>ポスパケットとは宅配便とメール便の中間的な位置づけの配送方法です。</p>
<p>&nbsp;</p>
<p>「ポスパケットのポジティブポイント」</p>
<p>・厚さ制限は3.5センチまでＯＫ、重さは1キロ以内</p>
<p>・送料は一律360円</p>
<p>・追跡サービス利用可能</p>
<p>・速達と同等のスピード</p>
<p>・封筒で送れる</p>
<p>「ポスパケットのネガティブポイント」</p>
<p>・代引き、着払いができない</p>
<p>・ポスト投函（←ポジティブポイントかも）</p>
<p>ポスパケットについてもっと詳しく知りたい方はこちらからどうぞ<a href="http://www.post.japanpost.jp/service/pospa/">http://www.post.japanpost.jp/service/pospa/</a></p>
<p>&nbsp;</p>
<p>ＥＣサイトに限らず通販の店舗運営をされている方はできるだけ送料を抑えたいと常に考えていると思いますが、商品のサイズが3.5以内ならポスパケットの利用で送料をかなり抑えれると思います。</p>
<p>コスメや食品を販売している店舗の中には、メール便の厚さ制限にひっかかるため、仕方なく宅配便を使ってるという方も少なくないと思います。</p>
<p>宅配便の送料は安くても450円前後だと思います。ポスパケットは全国一律で360円なので、発送１回あたりのコストを100円近く下げる事ができます。</p>
<p>さらに、ダンボールではなく封筒で送れるので梱包材のコストも10円程度抑えられると思います。</p>
<h2>ゆうプリＲでポスパケットの送り状を作成する方法</h2>
<h6>送り状のシートを探す</h6>
<p>ポスパケット専用のタックシールを郵便局からもらうと、はじめからお問い合わせ番号が入ってしまっています。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6834" src="/uploads-archive/2015/02/b90dcbfc99fe9f987b82100e751f9062.gif" alt="ポスパケット1" width="500" height="463" /></p>
<p>上の画像が実際のタックシールなんですが、モザイク部分にお問い合わせ番号が入ってしまっています。実はこれがかなり厄介なんです。</p>
<p>ＥＣモールの運営をされている方ならすぐに察しが付くと思いますが、送り先のデータとお問い合わせ番号が紐づけられていないので、このままだと発送メールに手打ちでお問い合わせ番号を入力するはめになります。</p>
<p>ということで通常のタックシールを使わず、市販のシールを使う必要があります。ゆうプリＲで使用できる市販のシールは以下のものになります。</p>
<p>・コクヨ2×4（KJ-8165~LBP-7165N)</p>
<p>・エーワン2×4(62020~76208),(31314)</p>
<p>・マクセル2×4(L7165-20A)</p>
<p>・ヒサゴ2×4(ELM005)</p>
<p>上に記したのはメーカーとシールの型番です。ゆうプリＲ内で設定ができるようになっているので書きましたが、これらとサイズ・寸法が一緒であれば使えると思います。</p>
<p>ちなみにタックシールの専門店があるのでこういうところで、共通のタックシールも売っています。<a href="http://item.rakuten.co.jp/ooki2/ldw8se-5/">http://item.rakuten.co.jp/ooki2/ldw8se-5/</a></p>
<p>ここではシート1枚あたり13円、1発送あたり1.7円です。探したらもっと安い所があるかもしれません。</p>
<h6> ゆうプリＲでポスパケットの送り状設定を行う</h6>
<p>ポスパケットの送り状をゆうプリＲで作成するにはまず送り状設定を行う必要があります。上に書いたシールや寸法が合っているタックシールであればどれを選んでも同じだと思うのですが、取りあえず今回っは「ポスパケット用2×4コクヨ」を選びます。</p>
<p>そして使用区分を「使用する」に変更して更新して下さい。</p>
<p>もし型番が合っているなら、その送り状名を選択した方が無難だと思います。</p>
<p><a href="/uploads-archive/2015/02/pp2.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6839" src="/uploads-archive/2015/02/pp2.gif" alt="pp2" width="586" height="413" /></a></p>
<h6></h6>
<h6>ゆうプリＲ　プリンタ設定を行う</h6>
<p>続いて「使用する」に変更したタックシールのプリンタ設定を行う必要があります。</p>
<p>プリンタ名とトレイ名を選択して更新して下さい。</p>
<p><a href="/uploads-archive/2015/02/pp3.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6840" src="/uploads-archive/2015/02/pp3.gif" alt="pp3" width="596" height="420" /></a></p>
<h6>ゆうプリＲ　フィルターを設定する</h6>
<p>ＣＳＶデータのやり取りで送り状を作成する際にはフィルターの設定が必要になります。ＥＣ店舗の運営をされている場合は発送する個数も多いでしょうからフィルターの設定が必須です。</p>
<p>フィルターの設定はＣＳＶデータに対してどんな並びでも合わせられるようになっているので汎用性が高く複雑です。なので紐づけの方法は<a href="/designer/%E3%82%86%E3%81%86%E3%83%97%E3%83%AA%EF%BD%92%E3%81%A7%E3%82%86%E3%81%86%E3%83%91%E3%82%B1%E3%83%83%E3%83%88%E7%94%A8%E3%81%AE%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90.html">過去の記事</a>を見て下さい。</p>
<p>ここではポスパケットの送り状を作成する際に必要な項目をお伝えします。</p>
<p>（必須）郵便種別　→　5※固定値</p>
<p>（必須）送り状種別　→　1600800001（エーワン）,1600800002（コクヨ）,1600800003（マクセル）,1600800004（ヒサゴ）,1600800005（エーワンの31314）※固定値</p>
<p>（必須）お届け先郵便番号</p>
<p>（必須）お届け先住所</p>
<p>（必須）お届け先名称</p>
<p>（必須）ご依頼主郵便番号</p>
<p>（必須）ご依頼主住所</p>
<p>（必須）ご依頼主名称</p>
<p>以上が必須の項目になります。必須ではありませんが「品名」も印字シールに印刷可能です。</p>
<h6>ポスパケットの送り状を印刷する</h6>
<p>ここまででポスパケットの送り状を作成するための設定は完了です。</p>
<p>あとは「配送管理」で送り状を印刷するだけです。</p>
<p>まずはファイル取り込みで先ほど設定したフィルターを選択し発送先のデータを取込ます。</p>
<p>データが取り込めたら送り状種別をポスパケット用2×4にして印刷するだけです。</p>
<p>&nbsp;</p>
<h6>もし送り状を印刷した際にエラーが出たら</h6>
<p>郵便局側があなたのゆうプリＲにポスパケット発送数を登録していない可能性があります。</p>
<p>サポートセンターに問い合わせてみて下さい。</p>
<p><a href="http://www.post.japanpost.jp/yu-packprint-r/">http://www.post.japanpost.jp/yu-packprint-r/</a></p>


送料が安いポスパケットをＥＣ運営で利用する方法

<p><a href="http://mailchimp.com/"><strong>MailChimp</strong> </a>is probably the easiest email marketing solution available. It helps you design your Newsletters format (or campaign as they call it), share them on social networks, and track your results.</p>
<p>If you are thinking to promote the contents and deals of your online store and at the same time increase brand awareness, MailChimp offers simple tools that make it easy to design email campaigns even if you have little to no understanding of html coding can easily use the system to send out professional-looking email marketing campaigns.</p>
<p>It is based on three basic tasks of email marketing:</p>
<ul>
<li>Manage subscriber lists</li>
<li>Build email campaigns</li>
<li>Review campaign reports.</li>
</ul>
<h4>FOREVER FREE PLAN:</h4>
<p>Mailchimp has a free plan, although it has limited features, for example it doesn’t allow you to make use of the analytics tools, you cannot set an auto-responder, there’s a maximum of 12,000 emails per month to less than 2,000 accounts.</p>
<p>The lowest subscription plan starts at $10 per month which lets you get a complete feel for premium templates, reports, analytics and other marketing tools.</p>
<h4>GREAT FREE LEARNING RESOURCES:</h4>
<p>Mailchimp provides you great resources to help you design better campaigns, like videos or free eBooks that provide practical advice about getting the most out of your Newsletter.</p>
<h4>EXTENSIVE ANALYTICAL TRACKING:</h4>
<p>MailChimp reports use interactive graphs, enabling you to easily view activity associated with your emails. Reports reveal open and click rates, opens by location, unsubscribes, and more. MailChimp also integrates with Google Analytics.</p>
<p><a href="/uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16.png"><img decoding="async" loading="lazy" class="alignundefined wp-image-6797 " src="/uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16-1024x680.png" alt="Screen Shot 2015-02-04 at 17.52.16" width="717" height="476" srcset="/uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16-1024x680.png 1024w, /uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16-300x199.png 300w, /uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16-228x151.png 228w, /uploads-archive/2015/02/Screen-Shot-2015-02-04-at-17.52.16.png 1652w" sizes="(max-width: 717px) 100vw, 717px" /></a></p>
<h4>USEFUL MOBILE APPLICATION:</h4>
<p>For those that are constantly on the go and want the option of getting more work done outside of the office, a solid mobile application like the one provided by MailChimp will be highly appreciated. Both for iPhone and Android.</p>
<p>As a bottom line I would say that Mailchimp is easy to set up and use. Highly recommended for small business looking to get started with a Newsletter.</p>


MailChimp, the ideal email marketing for your online store

<p>今回も趣味シリーズ。</p>
<p>airdroidというアプリのミラーリングという機能を試してみたくそれには端末のRoot化が必要であったため、</p>
<p>Nexus7（2013）をRoot化してみました。</p>
<h2>airdroid</h2>
<p><a href="/uploads-archive/2015/02/AirMirror.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6788" src="/uploads-archive/2015/02/AirMirror-194x300.jpg" alt="AirMirror" width="194" height="300" srcset="/uploads-archive/2015/02/AirMirror-194x300.jpg 194w, /uploads-archive/2015/02/AirMirror-228x351.jpg 228w, /uploads-archive/2015/02/AirMirror.jpg 472w" sizes="(max-width: 194px) 100vw, 194px" /></a></p>
<p>まず、結論のほうから先に紹介しますが、これ分かりますか？</p>
<p>PCのディスプレイ内でAndroidがミラーリングされているんです。<br />
タブレット端末をPCの外部ディスプレイ化するというサービスはあるんですが、それの逆パターンです。<br />
タブレットをPC画面から操作が出来ることになります。</p>
<p>このAirMirrorという機能を有効化するために、端末のroot化が必要になります。</p>
<p>要は、通常では変更出来ないシステム内部まで変更出来る権限を持ったユーザーになることです。</p>
<p>こうすることで何か不具合が生じても、保証範囲外になるのですが、メーカー保証も切れていることですし、サブのタブレット機なので試しにやってみました。</p>
<p>他にもAirdroidというアプリはいろんなことが出来るので面白いです。</p>
<p><a href="https://www.airdroid.com/ja/" target="_blank">https://www.airdroid.com/ja/</a></p>
<h2>Root化までの手順</h2>
<h3>ブートローダーのアンロック</h3>
<p>所要時間30分</p>
<p>この工程が一番大変でした。</p>
<p>AndroidをPCから操作出来るようにAndroidSDKを導入するという工程が初心者からすると難しく、実工程の所要時間だけを記載しましたが、</p>
<p>実際は、理解をするためにいろいろな調査をして数時間要しました。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-bootloader-unlock.html</a></p>
<h3>カスタムリカバリ TWRPの導入</h3>
<p>所要時間5分</p>
<p>前工程が出来ているようであれば、同じ要領でカスタムリカバリ TWRPをインストールするだけですので、非常に簡単に思えました。</p>
<p><a href="/uploads-archive/2015/02/IMG_20150202_202521.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6792" src="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg" alt="IMG_20150202_202521" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_202521-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_202521-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_202521-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_202521.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a>いかにもAndroidをいじりますという画像ですね。</p>
<p><a href="/uploads-archive/2015/02/IMG_20150202_203523.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6793" src="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg" alt="IMG_20150202_203523" width="171" height="300" srcset="/uploads-archive/2015/02/IMG_20150202_203523-171x300.jpg 171w, /uploads-archive/2015/02/IMG_20150202_203523-583x1024.jpg 583w, /uploads-archive/2015/02/IMG_20150202_203523-228x400.jpg 228w, /uploads-archive/2015/02/IMG_20150202_203523.jpg 1824w" sizes="(max-width: 171px) 100vw, 171px" /></a></p>
<p>&nbsp;</p>
<p>インストールが終わるとこのような画面になります。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html" target="_blank"> http://androidlover.net/tablet/nexus7-2/nexus7-2013-twrp-custom-recovery.html</a></p>
<h3>SuperSUの導入</h3>
<p>所要時間3分</p>
<p>同じように、以下のサイトを参考にさせて頂いて導入します。</p>
<p>こちらは、アプリアイコンが出現すれば完了です。</p>
<p><a href="http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html" target="_blank">http://androidlover.net/tablet/nexus7-2/nexus7-2013-lollipop-lrx21p-root.html</a></p>
<h3>Airdroidを遊ぶ</h3>
<p>最後に冒頭に掲載した画像になります。</p>
<p>root化が出来ていてればairmirrorという機能が使えるようになります。</p>
<h2>まとめ</h2>
<p>やりたいことが出来ました。</p>
<p>&nbsp;</p>
<p>ANDROIDLOVER.NET様のブログを全面的に参考にさせて頂きました。</p>
<p>ありがとうございます。</p>
<p><a href="http://androidlover.net/" target="_blank">http://androidlover.net/</a></p>


Nexus7（2013）をRoot化してAirdroidを使う

<p>レスポンシブのコーディングは通常のサイトコーディングと違った書き方をした方がいい時があります。</p>
<p>たまにレスポンシブ化されているサイトのソースを見て、「こんな風にやってるんだ〜」と思いながら、<br />
実際に似たようなレイアウトがある場合、参考にさせていただいたりしていますが、そのレスポンシブのパターン集なるサイトがありました。</p>
<h2>Responsive Web Design Patterns</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6790" src="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg" alt="Responsive Web Design Patterns  This Is Responsive" width="640" height="428" srcset="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg 1024w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-300x200.jpg 300w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-228x152.jpg 228w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive.jpg 1235w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちらのサイトは、</p>
<ul>
<li>レイアウト</li>
<li>ナビゲーション</li>
<li>イメージ(画像)</li>
<li>メディア/データ</li>
<li>フォーム</li>
<li>テキスト</li>
<li>モジュール(カルーセルやタブ等)</li>
</ul>
<p>といったレイアウトのパターンがあり、<br />
DEMOを見ることができます。</p>
<p>あとはDEMOのページをFirebugかなにかでソースを見ればその手法がわかります。</p>
<p>初心者はもちろん、経験者にもなにかしら得れるものがあるかと思います。</p>
<p><a href="http://bradfrost.github.io/this-is-responsive/patterns.html" class="link" target="_blank">Responsive Web Design Patterns | This Is Responsive</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/02/26

2015/02/26

2015/02/18

2015/02/18

2015/02/18

2015/02/17

2015/02/17

2015/02/11

2015/02/11

2015/02/11

2015/02/11

2015/02/10

2015/02/10

2015/02/05

2015/02/05

2015/02/05

2015/01/28

2015/01/28