以前に紹介した、phone cleanというiphoneのクリーニングソフトを紹介(参考：<a href="/officer/ios%E3%81%AE%E3%81%8A%E6%8E%83%E9%99%A4%E3%82%BD%E3%83%95%E3%83%88%E3%80%8Cphoneclean%E3%80%8D.html" target="_blank">iOSのお掃除ソフト「PhoneClean」</a>)しましたが、 
同社がmac向けのクリーニングソフトをリリースしておりましたのでご紹介です。
<a href="http://www.imobie.com/macclean/">http://www.imobie.com/macclean/</a>
<h2>クリーニング項目</h2>
<a href="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-7678" src="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg" alt="MacClean_と_MacClean_Features_–_Clean_All_Safe-to-Remove_Junk_Files_out_of_Your_Mac_in_A_Smart_and_Worry-Free_Way" width="300" height="197" srcset="/uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-300x197.jpg 300w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911-228x150.jpg 228w, /uploads-archive/2015/07/aa57744637ec15a1146a8e9a64af0911.jpg 837w" sizes="(max-width: 300px) 100vw, 300px" /></a>
下記のような項目でクリーニングしてくれます。
<ol>
<li>インターネットジャンク（safari　chrome　firefox）
<ol>
<li>キャッシュ</li>
<li>履歴</li>
<li>クッキー</li>
<li>ダウンロード履歴</li>
<li>セッション</li>
</ol>
</li>
<li>ユーザージャンク
<ol>
<li>ユーザーキャッシュ</li>
<li>ユーザーログ</li>
</ol>
</li>
<li>システムジャンク
<ol>
<li>システムキャッシュ</li>
<li>システムログ</li>
</ol>
</li>
<li>アプリジャンク</li>
</ol>
<h2>クリーニング結果</h2>
定期的にクリーニングソフトはかけているのですが、2.78GBが不要ファイルであると検出されました。 
MacAppstoreにあるDr.Cleanerというソフトも中々オススメですが、こちらは1GB程度の削除となっていたので、 
徹底的にクリーニングしてくれることが分かります。
おかげ、Googleのログイン情報周りのCookieも綺麗さっぱり、要再ログインという感じです。
まだバージョン1.06（2015年7月現在）と若いソフトウェアなので、今後の更なる進化に期待です。
ご利用は自己責任でお願いします。

Macの新しいクリーニングソフト「mac clean」が強力に掃除してくれる

ジュエリーに限らず、物撮りをする際に被写体を立てたり、角度を固定して撮影したいという場合があると思います。
そんな時はどうしているのかというと、実は単純で固定する為の便利アイテムがあるのです。
それがこちら
<a href="/uploads-archive/2015/07/IMG_20150706_200430.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7663" src="/uploads-archive/2015/07/IMG_20150706_200430.jpg" alt="IMG_20150706_200430" width="700" height="525" srcset="/uploads-archive/2015/07/IMG_20150706_200430.jpg 3264w, /uploads-archive/2015/07/IMG_20150706_200430-300x225.jpg 300w, /uploads-archive/2015/07/IMG_20150706_200430-1024x768.jpg 1024w, /uploads-archive/2015/07/IMG_20150706_200430-228x171.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
イエローワックスという商品名で売っている代物です。ミツロウのような感じで着脱可能で、指輪などを固定できます。
同じメーカーからホワイトワックスという商品もありますが、イエローワックスの方がある程度重さに耐えることができます。ホワイトワックスについては柔らかいので扱い易いですが、重い物が難しくなります。
使用する時は、ほんの少しだけとって指でこねて扱い易い形に整えます。
<a href="/uploads-archive/2015/07/IMG_20150706_200455.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7664" src="/uploads-archive/2015/07/IMG_20150706_200455.jpg" alt="IMG_20150706_200455" width="700" height="525" srcset="/uploads-archive/2015/07/IMG_20150706_200455.jpg 3264w, /uploads-archive/2015/07/IMG_20150706_200455-300x225.jpg 300w, /uploads-archive/2015/07/IMG_20150706_200455-1024x768.jpg 1024w, /uploads-archive/2015/07/IMG_20150706_200455-228x171.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
大きさは見切れない程度で整えてください。
見きれないようにつければOKです、これはちょっと見きれていますが（笑）
<a href="/uploads-archive/2015/07/IMG_20150707_113634.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7674" src="/uploads-archive/2015/07/IMG_20150707_113634.gif" alt="IMG_20150707_113634" width="700" height="483" /></a>
<a href="/uploads-archive/2015/07/IMG_20150707_11370.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7672" src="/uploads-archive/2015/07/IMG_20150707_11370.jpg" alt="IMG_20150707_11370" width="700" height="479" srcset="/uploads-archive/2015/07/IMG_20150707_11370.jpg 700w, /uploads-archive/2015/07/IMG_20150707_11370-300x205.jpg 300w, /uploads-archive/2015/07/IMG_20150707_11370-228x156.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
ある程度の重さに耐えてくれますので、斜めにしたりする事もできます。
粘着力が強いので結構ベトついてしまいますが、撮影のあとはアルコールなどで拭き取れば大丈夫です。

商品の物撮り ジュエリーを立てて撮る方法

日本語ドメインのSSL証明書インストール方法

今回も書籍の紹介で、「アイデアのつくり方」という本です。 
これを読めばどんどんアイデアが出てくるようになる！っていう感じよりは、 
アイデアとはなにか？アイデアが生まれる道筋を丁寧に説明してくれています。
企画のアイデアや、デザインのアイデアを思いつかない、もっといいアイデアを思いつくようになりたいと思う方はぜひ読んでみるといいかと思います。
簡単に紹介させて頂きます。
<h2>アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない</h2>
アイデアとは既存のあるものとあるものが組み合わさってできるものっていうのはよく言われていますよね。 
「0からなにかを作りたい」って言ってる人がいますが、なかなか0からってのはなくて、 
アイデアは既存の要素の組合せっていうことを本書は言ってます。
そしてアイデアが生まれる道筋は、 
本書とは違う言葉ですか私的にまとめると、
・材料収集 
↓ 
・情報の整理 
↓ 
・あれこれ思索する(組合せ、集中して考えに考えを重ねる) 
↓ 
・一旦放置、違うことを考える(しかし頭の片隅においておく) 
↓ 
・ふとした瞬間にアイデアが誕生
みたいな感じです。
いわゆるアイデアを思いつきやすいフレームワークを提供してくれるのではなく、 
アイデアが思いつく原則原理を流れに沿って説明してくれています。
もっと簡単にいうと、 
新しい製品を開発しようとしていて、それについてあれこれ考え、いろいろ試すがいいアイデアがでてこない。 
そして一旦離れて、違うことを見ていた・していた時に、ふとその製品のアイデアが生まれるくるみたいな感じです。 
前にテレビで全くこの流れと同じようにして生まれた製品があったのですが、忘れてしまいました・・・
この思いつくことを、「セレンディピティ」ともいうようです。（ちょっと違うかもしれませんが）
なにか考え事をしていて、思いつかなくて、 
一旦トイレへ行ったりとかお風呂入ったりとかタバコ吸いに行ったりとかすると思いついたみたいなことありませんか？？
それに近いものがあると思います。
ぜひ商品や企画を考える方は一度読むことをお薦めします！
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&#038;o=9&#038;p=8&#038;l=as1&#038;asins=4484881047&#038;ref=qf_sp_asin_til&#038;fc1=000000&#038;IS2=1&#038;lt1=_blank&#038;m=amazon&#038;lc1=0000FF&#038;bc1=000000&#038;bg1=FFFFFF&#038;f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

「アイデアのつくり方」昔から変わらず愛される書籍

弊社は3年ほど前から越境ECを掲げてECサイトのシステム「LaunchCart」を提供しておりますが、日本全体としてようやくCoolJapan、東京オリンピックといったところで、外国人をお客様として如何に外貨を稼ぐか？日本の良いもの、良い文化を売ることが出来るか？というところに議論が集まるようになってきたように感じます。
といったようなところで、肌感覚としては持っていたのですが、定量的にはどうなのか？というところを時系列で調べようと思っていたところ、良いツールを見つけました。さすがGoogleです。埋め込みのスクリプトまで提供してくれているので、こうやってブログに埋め込むことも出来ます。
気になっていたワードを3つほど調べてみました。
<a href="https://www.google.com/trends/" target="_blank">https://www.google.com/trends/</a>
※検索のボリュームが少ないものは0と出るようです。
<h2>越境EC</h2>
<script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E8%B6%8A%E5%A2%83EC&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script>気になっていた越境ECは2015年からようやく検索が増えてきているようです。
<h2>インバウンド</h2>
<script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E3%82%A4%E3%83%B3%E3%83%90%E3%82%A6%E3%83%B3%E3%83%89&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script> 
こちらはインバウンドマーケティングやインバウンド観光というところ調べたかったのですが、他の意味を表す名詞も入ってきているようです。
<h2>爆買い</h2>
<script src="//www.google.com/trends/embed.js?hl=ja&amp;q=%E7%88%86%E8%B2%B7%E3%81%84&amp;geo=JP&amp;date=today+12-m&amp;cmpt=q&amp;tz=Etc/GMT-9&amp;tz=Etc/GMT-9&amp;content=1&amp;cid=TIMESERIES_GRAPH_0&amp;export=5&amp;w=680&amp;h=400" type="text/javascript"></script> 
最後に爆買いという単語、中国の旧正月「春節」に合わせて、訪日中国人観光客が各地で日本製品を大量に買っていく様子を爆買いとこぞってメディアが報じておりましたが、いつから爆買いなんていう言葉が出来たんだろうと思っていたんですが、やはり、今年の春節に合わせた2月からだと言うことが分かりました。 
そこからは、定着がしたようで平均的に推移しております。

越境ECの検索トレンド定点観測

<h2>共通のWEB発注システムCLIOS</h2>
コンタクト製品を扱うメーカーや代理店に商品を発注をする際に使われているツールにCLIOS（クリオス）という物があります。日本コンタクトレンズ協会が運営しているツールでContact Lens Information &amp; Order Systemの略との事です
これはWebで発注ができるもので、各メーカーや代理店が共同で利用しています。おそらくほとんどのメーカー・代理店が利用しています。
<a href="/uploads-archive/2015/06/063011.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7622" src="/uploads-archive/2015/06/063011.gif" alt="06301" width="284" height="172" /></a>
販売店がCLIOSを通して複数のメーカー・代理店に発注をかけられます。
その他にコンタクトを患者（コンタクト利用者）に直送したり、トライアルの注文なんかもできます。商品のロット情報を確認したりリアル店舗しか使わないかもしれませんが製品のバーコード情報を取り出せます。
使用するためにはＩＤとパスワードが必要です。CLIOS事務局に直接連絡して使用の申請を行うか、メーカー側からCLIOSを使えるように申請してもらえば使用可能です。
発注できるメーカーは以下の通り、もちろんメーカーとの契約がある場合です。
<table>
<tbody>
<tr>
<td style="width: 350px">アイミー（株）</td>
<td style="width: 350px">日本アルコン（株）</td>
</tr>
<tr>
<td style="width: 350px">（株）シード</td>
<td style="width: 350px">パナメディカル（株）</td>
</tr>
<tr>
<td style="width: 350px">クーパービジョン・ジャパン（株）</td>
<td style="width: 350px">ポシュロム・ジャパン（株）</td>
</tr>
<tr>
<td style="width: 350px">ジョンソン・エンド・ジョンソン（株）</td>
<td style="width: 350px">（株）メニコン</td>
</tr>
<tr>
<td style="width: 350px">（株）レインボーオプチカル研究所</td>
<td style="width: 350px">HOYA（株）</td>
</tr>
<tr>
<td style="width: 350px">東レ（株）</td>
<td style="width: 350px">（株）オフテクス</td>
</tr>
<tr>
<td style="width: 350px">（株）アイレ</td>
<td style="width: 350px">（株）シンシア</td>
</tr>
<tr>
<td style="width: 350px">（株）ユニオンメディカル</td>
<td style="width: 350px"></td>
</tr>
</tbody>
</table>
この他のメーカー・代理店にも発注は可能のようです。
ログインするとこのような発注画面になります。左目・右目ごとに入力するので慣れないとちょっと違和感を感じるかもしれません。
<a href="/uploads-archive/2015/06/06302.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7628" src="/uploads-archive/2015/06/06302.gif" alt="06302" width="700" height="435" /></a>
&nbsp;
&nbsp;
&nbsp;
&nbsp;

コンタクト製品をWEB発注できる共通ネットワークCLIOS

インラインSVGを使った、テキストを変えられるアイコン

2015年上半期も本日が最終日
2015年のWebデザインを振り返った記事があったのでまとめ
&nbsp;
<h2>1. はじめに</h2>
1-1. ファーストビューよりスクロールを重視するデザインに
1-2. シンプルなレイアウト構成
&nbsp;
ユーザーがスクロールに慣れたなめ「サイトが表示されたらとりあえず下にスクロール」という動きが普通になっているという
なのであまりファーストビューにこだわらなくなってきてるとのこと
&nbsp;
<h2>2. 今流行りのweb デザイントレンド13選</h2>
2-1 背景にビデオ動画活用
端末のスペックやネット環境が良くなっていけばそれにともなってコンテンツもリッチになっていく
動画が一般化し始めるのがまさに今のようだ
将来はゴリゴリの3Dが軽快に描画できるスペックのPCが安価になったりするのだろう
&nbsp;
<a href="http://my.austria.info/" target="_blank">http://my.austria.info/</a>
<a href="http://www.kalexiko.com/" target="_blank"> http://www.kalexiko.com/</a>
&nbsp;
2-2 カード・レイアウト（タイル・レイアウト）
この言葉を知らなかったが、要はFacebookのタイムラインのように1記事をブロックで囲っている感じのレイアウトとのこと
わかりやすくレスポンシブにもし易いのが良いらしい
&nbsp;
<a href="http://www.google.com/landing/now/" target="_blank">http://www.google.com/landing/now/</a>
※私の環境ではカード・レイアウトが再現できず
&nbsp;
2-3 シングルページ
今後は後述のゴーストボタンやマイクロインタラクションと組み合わせて進化するらしい
<a href="http://www.kirinichiban.com/" target="_blank"> http://www.kirinichiban.com/</a>
&nbsp;
2-4 パララックス・エフェクト
今後もこのトレンドは続き、更に進化するらしい
<a href="http://www.lexusls.asia/" target="_blank"> http://www.lexusls.asia/</a>
&nbsp;
2-5 アニメ化されたストーリー性
以下の参考サイトはSVGとjsでできているとのこと
<a href="https://www.boldking.com/" target="_blank"> https://www.boldking.com/</a>
&nbsp;
2-6 フラットデザイン
当面はこのトレンドが続くらしい
<a href="http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html" target="_blank"> http://www.huffingtonpost.com/2012/02/19/logos-past-future-corporate_n_1285622.html</a>
<a href="http://purgotea.com/" target="_blank"> http://purgotea.com/</a>
&nbsp;
2-7 マテリアル・デザインの増加
今後の動向が気になるマテリアルデザイン
以下のサイトでが勉強になるらしい
<a href="http://material.cmiscm.com/" target="_blank"> http://material.cmiscm.com/</a>
&nbsp;
2-8 インタラクティブ・デザイン
サンプルがすごすぎて圧巻だが、もっと小さい範囲でもアイデア次第ではおもしろいものができそう
<a href="https://insideabbeyroad.withgoogle.com/en" target="_blank"> https://insideabbeyroad.withgoogle.com/en</a>
<a href="http://www.blitzagency.com/" target="_blank"> http://www.blitzagency.com/</a>
&nbsp;
2-9 マイクロ・インタラクション
要はいいねボタンなどのことらしい
簡単なAjaxでのお問い合わせフォームなどもこれに当たる模様
<a href="http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk" target="_blank"> http://www.buzzfeed.com/zachkornfeld/try-guys-robot-babies#.kjJkrp6RPk</a>
&nbsp;
2-10 トレンドのメニューバー
もう飽きた気もするが引き続きトレンドなようだ
<a href="http://bitcoinfoundation.org/" target="_blank"> http://bitcoinfoundation.org/</a>
&nbsp;
2-11 ゴーストボタン
この言葉は知らなかったが、要は背景が透けているボタンのことらしい
<a href="http://www.iuvo.si/" target="_blank"> http://www.iuvo.si/</a>
&nbsp;
2-12 アニメーション効果
おそらく作成ツールの充実や作成者の技術向上により今後は当たり前になっていきそう
<a href="http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/" target="_blank"> http://ja.wix.com/blog/2014/05/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%8A%B9%E6%9E%9C%E3%81%AE%E9%AD%85%E5%8A%9B%E3%82%92%E5%BE%B9%E5%BA%95%E7%B4%B9%E4%BB%8B/</a>
&nbsp;
2-13 モバイル・ファースト
スマホ割合が年々増えている中で当然の対応
<a href="http://www.channelnewsasia.com/" target="_blank"> http://www.channelnewsasia.com/</a>

【Webデザイン】2015年 上半期のトレンド

web上で動画を利用する際に色んな理由でGIFアニメーションに変換したいという場合があると思います。
最近メールに動画を埋め込む事でコンバージョン率が高くなったという事例をよく見ますが、動画ファイルを直接埋め込むと容量が大きすぎるために開けなかったり送れなかったりしてしまいます。そこでGIFアニメーションを使うことがよくあるみたいです。
そこで動画ファイルを簡単にGIFアニメーションに返還する方法を調べてみました。
<h2>mp4ファイルをphotoshop ccを使って簡単にGIFアニメーションに返還する</h2>
私も実際やってみたのですが、かなり簡単なので使える方法だと思います。しかし、動画ファイルがmp4である必要がみたいなので、そこだけご注意下さい。（h.264のmp4ファイル以外は試していません）
<h3>動画を読み込む</h3>
まずタイムラインを表示させます。
<a href="/uploads-archive/2015/06/img1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7603" src="/uploads-archive/2015/06/img1.jpg" alt="img1" width="700" height="394" srcset="/uploads-archive/2015/06/img1.jpg 720w, /uploads-archive/2015/06/img1-300x169.jpg 300w, /uploads-archive/2015/06/img1-228x128.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
タイムラインにあるフィルムのようなアイコンをクリックしてメディア追加から読み込む動画ファイルを開きます。
<a href="/uploads-archive/2015/06/img2.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7604" src="/uploads-archive/2015/06/img2.jpg" alt="img2" width="660" height="327" srcset="/uploads-archive/2015/06/img2.jpg 678w, /uploads-archive/2015/06/img2-300x149.jpg 300w, /uploads-archive/2015/06/img2-228x113.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" /></a>
読み込みが完了するとpremiereに近い編集画面になります。動画の切り貼りやトリミングなどかなりpremiereに近い感覚で編集が可能です。
<a href="/uploads-archive/2015/06/img3.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7605" src="/uploads-archive/2015/06/img3.jpg" alt="img3" width="668" height="375" srcset="/uploads-archive/2015/06/img3.jpg 720w, /uploads-archive/2015/06/img3-300x168.jpg 300w, /uploads-archive/2015/06/img3-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a>
ビデオグループの上にレイヤーを作ればタイムにあわせてテロップを出すこともできます。
<a href="/uploads-archive/2015/06/img4.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7606" src="/uploads-archive/2015/06/img4.jpg" alt="img4" width="668" height="375" srcset="/uploads-archive/2015/06/img4.jpg 720w, /uploads-archive/2015/06/img4-300x168.jpg 300w, /uploads-archive/2015/06/img4-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a>
さらにpremiereのビデオトランジションのような感覚でフェードをかけたりもできます。
<a href="/uploads-archive/2015/06/img5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7607" src="/uploads-archive/2015/06/img5.jpg" alt="img5" width="594" height="420" srcset="/uploads-archive/2015/06/img5.jpg 594w, /uploads-archive/2015/06/img5-300x212.jpg 300w, /uploads-archive/2015/06/img5-228x161.jpg 228w" sizes="(max-width: 594px) 100vw, 594px" /></a>
出力する時は「web用に保存」でGIFの形式で保存すれば完了です。
&nbsp;
<h2>ファイルを軽くするためにフレームレートを変更する</h2>
注意点としてはファイルの容量が重たくならないように気を付ける必要があります。せっかくGIFアニメーションにしても結局重たいファイルになってしまっては意味がないので、フレームレートを下げる事で容量を小さくします。
一般的には30fpsや24fpsなどが多いかと思うのですが、10fpsくらいまで下げて動画ファイルを書き出したほうがいいと思います。
やはり、どうしてもカクカクしてしまうのですが、これは仕方がないかと・・・
フレームレートの違いを比べてみて下さい。
10.00fps　480×270 ファイル容量　3.3MB
<a href="/uploads-archive/2015/06/sample10fps1.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7610" src="/uploads-archive/2015/06/sample10fps1.gif" alt="sample10fps" width="480" height="270" /></a>
29.97fps　480×270 ファイル容量　7.5MB
<a href="/uploads-archive/2015/06/sample30fps.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7611" src="/uploads-archive/2015/06/sample30fps.gif" alt="sample30fps" width="480" height="270" /></a>

動画を簡単にGIFアニメーションに変換する方法

medium_nino-eye.jpg

small_nino-eye.jpg

thumbnail_nino-eye.jpg

nino-eye.jpg

インラインSVGの中の要素にリンクをつける方法

こんなタイトルですが、書籍の紹介になります。。。
そもそも悩み事と考え事の違いみたいなところはよく語られたりしてますよね。
<h2>悩み事と考え事の違いって？</h2>
【悩み事】 
1.利益を生まないもの 
2.自分でコントロールできない問題（外部要因、環境や人間関係） 
3.ネガティブな気持ちになったり、過去の出来事を思って後悔したりする
【考え事】 
1.利益を生むもの 
2.自分でコントロールできる問題（内部要因） 
3.ポジティブな気持ちで、なにか目標を達成しようと、未来について思うこと
例えばこんな感じですが(もっといろいろとあると思います・・・)
要は、 
【悩み事】は非生産的で、【考え事】は生産的であると言えます。 
なので、 
同じ時間を使うなら「悩む」のではなく「考えましょう」ということですね。
とは言え、人生に悩みを尽きないですよね。。 
まぁよく私も悩みます。 
でもその悩みって実は時間が経っちゃうと忘れるどころか思い出せないことがほとんどです。
一年前の悩みなんて覚えてないですよね？！悩んでいたかどうかもよくわからないはずです。
つまり、悩みなんて結局覚えてないんだから、悩みに時間を浪費するなんてもったいない、 
もっと気楽にいこうっていう気持ちで日々過ごせたらいいなと思ってます。
<h2>１日１０分であらゆる問題がスッキリする「ひとり会議」の教科書のご紹介</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=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=4861139465" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
こちらは悩み事や考え事の解決のステップを4つにしており、
１．悩み事や考え事を書き出す 
 ２．それぞれ「どうなるのが理想か」を考える 
 ３．その理想をどうやったらできるかを考える 
 ４．それぞれの答えを計画、実行する
といった感じです。 
ちなみに上記記載の4つのステップ本に書いてあることとは違いますが、 
私はこう理解しているという考えになりますので、詳しくは本をご覧ください。
この本を読んで、ぜひ「悩む」のではなく、「考える」ようにしましょう！ 
と自分にも再度言い聞かせつつのご紹介でした！

悩み事・考え事を1人で解決するための方法

不動産の掲載サイトを作成したいという要望を頂いた中で、IT業界の人間が提案資料作成中に調べていたところをまとめました。 
2015年6月23日現在、ウェブ上で確認出来る情報ですので、今後変更になることもあると思いますのでご了承下さいませ。
また、金額については導入の最低料金で、各サービスともポータル連動数や、掲載件数、ページビュー数等で様々な条件がありますので、こちらも目安程度でお考え下さい。
<table>
<thead>
<tr>
<th>会社名</th>
<th>株式会社レンターズ</th>
<th>株式会社いい生活</th>
<th>クーバル株式会社</th>
<th>株式会社アクア</th>
<th>株式会社いえらぶGROUP</th>
<th>株式会社グッドライフ</th>
<th>株式会社ReP</th>
<th>イタンジ株式会社</th>
</tr>
</thead>
<tbody>
<tr>
<th>サービス名</th>
<td>レンターズネット</td>
<td>ESいい物件One</td>
<td>CooRE（クール）</td>
<td>RIMS</td>
<td>いえらぶCLOUD</td>
<td>楽賃システム</td>
<td>不動産コンバートR</td>
<td>ヘヤジンコネクト</td>
</tr>
<tr>
<th>URL</th>
<td>http://www.ra1.co.jp/</td>
<td>http://www.es-service.net/about/convert.html</td>
<td>http://www.coore.jp/</td>
<td>http://www.rims-info.com/portal.html</td>
<td>http://www.estate-search.jp/</td>
<td>http://rakuchin-system.net/function/convert.html</td>
<td>http://fcr.rep-inc.jp/</td>
<td>https://c.heyazine.com/</td>
</tr>
<tr>
<th>連動数</th>
<td>20</td>
<td>18</td>
<td>8</td>
<td>40</td>
<td>12</td>
<td>4</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<th>ホームページ制作機能</th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
</tr>
<tr>
<th>スマホ対応</th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>ソーシャル対応</th>
<td></td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>SEO</th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>LPO</th>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>クラウド</th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>反響管理</th>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>テンプレート</th>
<td></td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td>◯</td>
<td></td>
<td></td>
</tr>
<tr>
<th>アクセス解析</th>
<td></td>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>契約書作成</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td>◯</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>初期費用</th>
<td>見積り</td>
<td>¥200,000</td>
<td>見積り</td>
<td>¥300,000</td>
<td>見積り</td>
<td>¥30,000</td>
<td>¥0</td>
<td>¥0</td>
</tr>
<tr>
<th>月額費用</th>
<td>見積り</td>
<td>¥20,000</td>
<td>¥50,000</td>
<td>¥50,000</td>
<td>見積り</td>
<td>¥10,000</td>
<td>¥10,000</td>
<td>¥0</td>
</tr>
<tr>
<th>条件</th>
<td></td>
<td>〜500件、5000PV</td>
<td>反響に応じた課金</td>
<td>〜499件</td>
<td></td>
<td>〜1000件、ポータル追加毎に課金</td>
<td></td>
<td>リニューアル中</td>
</tr>
</tbody>
</table>

不動産ポータル連動・コンバート・一括入稿サービス比較

こっちの方が良い?【jquery.jpostal.js】をつかってみた

ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、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制作会社にとって便利なツールがどんどん出てきていて、 
効率的に進められるようになって気がします。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2015/07/08

2015/07/07

2015/07/04

2015/07/01

2015/07/01

2015/06/30

2015/06/30

2015/06/30

2015/06/27

2015/06/26

2015/06/25

2015/06/24

2015/06/17

2015/06/17

2015/06/17

2015/06/17

2015/06/10

2015/06/10