jQeuryで横にはみ出させた要素をフリックでスライドさせる

以前、Project Cometについてブログを書きましたが、 
<a class="link" href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84/">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a> 
とうとう、3月14日に「Adobe Experience Design CC」と名前を変え、登場しました。
<a class="link" href="http://www.adobe.com/products/experience-design.html" target="_blank">Adobe Experience Design CC</a>
<h2>Adobe Experience Design CC</h2>
以前お伝えした通り、こちらはモックアップ制作のためのツールになり、 
UX設計のためのツールとのことです。 
今はPreviewってことなのか、Adobeのアカウントがあれば無料で使えます。
実際に使ってみましょう！
<img decoding="async" loading="lazy" class="alignnone wp-image-9904" src="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png" alt="スクリーンショット 2016-03-15 14.32.04" width="463" height="269" srcset="/uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86.png 801w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-300x175.png 300w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-768x447.png 768w, /uploads-archive/2016/03/05436cf30b0ae6abc0d60f24de4fff86-228x133.png 228w" sizes="(max-width: 463px) 100vw, 463px" />
スマホ、タブレット、webのサイズで作ることができます。
元々のサンプルや、iOSやGoogle Materialのkitがあるので、そちらを用いるのいいかもしれません。
とりあえず,iPhoneを選んで作成してみます。
<img decoding="async" src="/uploads-archive/2016/03/7VVRdbaNEe.gif" alt="7VVRdbaNEe" width="640" class="alignnone size-large wp-image-9905" />
<h2>Design</h2>
まずはDesign画面。 
スッキリしたインターフェイスで、ちょっとsketchっぽい感じもします。 
直線、図形、ペンツール、テキストが使え、画像はドラッグ＆ドロップで使えます。
図形やテキストに関しては、色、透明度、ボーダー、シャドウを適用することができます。 
Photoshopのように多くのスタイルは用意されていないようです。
ただ、モックアップはもちろん、最近のアプリのデザインのためにはそこまでスタイルは必要ないかもしれないので充分かもしれません。
Adobeということで、aiとpsdとの連携は抜群なので、このツールで作れない部分は、aiやpsdで作ると良いと思います。
同じようなパターンが続く場合は以下のようにサクッと作ることができます。
<img decoding="async" src="/uploads-archive/2016/03/01Hl7bnhpo.gif" alt="01Hl7bnhpo" width="640" class="alignnone size-large wp-image-9908" />
これはスゴいですね！！
<h2>Prototype</h2>
次にPrototype画面。 
これもスゴいですね。
Prototype設定画面に行って、選択して遷移させたい箇所につなげるだけでOKです。 
遷移のアニメーションも5つ(スライドレフト・ライト・アップ・ダウン、ディゾルブ)用意されています。
<img decoding="async" src="/demo/abe/gif/20160315.gif" alt="01Hl7bnhpo" width="640" />
実際画面がどの用意に遷移していくのか、リンク先はどこなのかこれを作って共有すれば基本理解出来ますね！
<h2>終わりに</h2>
いや〜、遂に登場しましたが、今後毎月新しい機能を追加していくとのことですが、 
どのようになっていくのでしょうか？ 
現状webサイトのデザインをするという視点からは見るとPhotoshopの方がいいかなという感じです。 
それはなぜかというと、
<h3>個人的に気になる点</h3>
・レイヤー機能がない 
・スライス機能がない 
・スタイルが少ない
まぁこのツールはそもそも「UXデザイナーのため」と謳っているので、上記の機能は必要ないのかもしれません。
しかし、今後の機能次第では、web・アプリの制作の定番ツールになりそうな気もします。
今後に期待です！！

遂に来た！Adobe Experience Design CCがいい！

知り合いにimport.ioというスクレイピングツールといことを教えていただきました。
<a href="https://www.import.io/" target="_blank" class="link">Import.io | Web Data Platform &amp; Free Web Scraping Tool</a>
スクレイピングという言葉自体を知りませんでした。
<blockquote>
ウェブスクレイピング（Web scraping）とは、ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと。ウェブ・クローラー(Web crawler) あるいはウェブ・スパイダー(Web spider)とも呼ばれる。 通常このようなソフトウェアプログラムは低レベルのHTTP（Hypertext Transfer Protocol）を実装することで、もしくはInternet ExplorerまたはMozilla FirefoxなどのWebブラウザを埋め込むことによって、人間によるWWWのブラウジングをシミュレートする。 
<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0">ウェブスクレイピング &#8211; Wikipedia</a>より
</blockquote>
要は、サイトのデータを一括で情報を取得できるということでしょうか。 
例えばECサイトの商品の一覧ページの情報を取得したりとか&#8230;
<h3>コンペナビで試してみた</h3>
とりあえず、弊社の<a href="http://compe.sterfield.jp/" target="_blank">コンペナビ</a>で試してみました。
<img decoding="async" src="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg" alt="import.io Magic Web Data Platform &amp; Free Web Scraping Tool2" width="500" class="alignnone size-large wp-image-9882" srcset="/uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-1024x598.jpg 1024w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-300x175.jpg 300w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-768x448.jpg 768w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2-228x133.jpg 228w, /uploads-archive/2016/03/import.io-Magic-Web-Data-Platform-Free-Web-Scraping-Tool2.jpg 1141w" sizes="(max-width: 1024px) 100vw, 1024px" /> 
(一部ぼかしてます)
いい感じで取得出来ている感じです。 
CSVで保存したり、APIにしたりすることが出来るようです！
webサイトのリニューアルで「現行サイトのデータを持って来といて」なんて言われることがあるんですが、そういう時使えそうな感じがします。

webサイトから素早く、綺麗に情報を抽出するツール「import.io」

中国本土でサイトを公開するのに許認可が必要なことをご存知だろうか?
正確には、中国本土にサーバーを設置、公開されるサイトに必要なライセンスで、増値電信業務経営許可証、通称ICP(Internet Contents Provider)ライセンスと呼ばれている。
これは情報統制のために2005年から行われている制度で、全てのサイトが対象となる。
他国にサーバーを設置したり、サーバーを独自に立てたりなどいくつか抜け道はあるそうだが、
基本的には義務であることと、百度SEOで評価が下がる?という都市伝説もあるらしく、許認可を受けることがスタンダードとなっている。
&nbsp;
<h2>ICPライセンスには経営性と非経営性がある</h2>
経営性 = 営利目的、非経営性 = 非営利目的の2種類がある。
営利目的の方が取得が難しく、手続きがやや複雑、非営利性は中国国内のサーバー会社などに依頼すれば比較的簡単に習得が可能だ。
ここで気になるのは、ECサイトはどちらにあたるのか?という点だ。
実際に、非経営性ライセンスでECサイトを運営している例は少なくないらしい。
ただ、これはかなりグレーであるため、サイトが大きくなってきたら経営性ライセンスに切り替えた方が懸命なようだ。
既に現地法人を設立済みで、且つ輸入の許認可を得ていれば取得しなくても良い場合もあるとのこと。
いずれにせよ、担当者やタイミングによってルールが変わってしまうおそれがあるため、常に最新の情報を入手することが重要だ。
&nbsp;
<h2>中国向けの独自ECサイトを始めるにはどうしたら良いか?</h2>
これはあくまで個人的な意見だが、
<ol>
<li>日本国内で中国向けのサイトを構築する</li>
<li>売れてきたらICPライセンスを取得しておく</li>
<li>問題が起きたら中国国内サーバーに移動する</li>
</ol>
というのが手堅いやり方だと思う。
3の最大の問題はブロックされるということだが
独自サイトでブロックされたという話は自分は聞いたことがない。
とはいえ十分にあり得そうな話なので、売上比率が大きくなれば備えたほうが良さそうだ。
&nbsp;
日本国内での中国向けECサイトは今後急速に増えていくことが予想されるが、
まだまだ知られていないことが多いので、常に最新の情報を知っておくことが重要だ

【ICPライセンス】中国でのサイト公開に必要な許認可

デザインをする上で、遠近法が助けになることは少なくありません。 
遠近法といえば、一点透視図法や二点透視図法で有名な幾何学遠近法が真っ先に思い浮かぶ方は多いと思いますが、 
遠近法は他にもいろいろ存在します。
いろいろな遠近法について、<a href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">説明くださっているサイト</a>がありましたので、 
そちらを参考に、遠近法を試してみました。
&nbsp;
<h2>重畳遠近法</h2>
<a href="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" rel="attachment wp-att-9845"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9845" src="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg" alt="重畳遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773.jpg 656w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-300x220.jpg 300w, /uploads-archive/2016/03/d548bb9e050520e0a0808c6b22859773-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
最もシンプルな遠近法です。 
２つ以上のものが重なっているとき、前よりも後ろの物のほうが遠くに見えるという遠近法です。
<h2>上下遠近法</h2>
<a href="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" rel="attachment wp-att-9847"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9847" src="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg" alt="上下遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2.jpg 656w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-300x220.jpg 300w, /uploads-archive/2016/03/5c5472227ef85d54bb7f42aed50523e2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
水平線に向かって、上にあるものほど遠くに見えるという遠近法です。
<h2>大小遠近法</h2>
<a href="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" rel="attachment wp-att-9849"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9849" src="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg" alt="大小遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993.jpg 656w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-300x220.jpg 300w, /uploads-archive/2016/03/4455c8c2061f88082884efe5b4ddd993-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
大きなものほど近く、小さなものほど遠くに見えるという遠近法です。
<h2>空気遠近法</h2>
<a href="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" rel="attachment wp-att-9844"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9844" src="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg" alt="空気遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2.jpg 656w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-300x220.jpg 300w, /uploads-archive/2016/03/57ff4cc0370ffed9deaf284cc22ba0f2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
遠くのものは大気の影響で霞んでいくことから、 
彩度、コントラストが弱いものほど遠くに見えるという遠近法です。
<h2>色彩遠近法</h2>
<a href="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" rel="attachment wp-att-9848"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9848" src="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg" alt="色彩遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42.jpg 656w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-300x220.jpg 300w, /uploads-archive/2016/03/891ac6b6a9d43baad2361e08c6541c42-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
色彩が寒色系に近づくほど遠く、暖色系に近づくほど近くに見えるという遠近法です。
<h2>消失遠近法</h2>
<a href="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" rel="attachment wp-att-9846"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9846" src="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg" alt="消失遠近法" width="656" height="480" srcset="/uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1.jpg 656w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-300x220.jpg 300w, /uploads-archive/2016/03/db2bbcef7b5fbd7a6d2940b36cc645d1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
焦点に由来する遠近法で、 
焦点がぼやけたところほど遠くに見えるという遠近法です。
<h2>幾何学遠近法(透視図法)</h2>
<a href="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" rel="attachment wp-att-9843"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9843" src="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg" alt="幾何学遠近法(透視図法)" width="656" height="480" srcset="/uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548.jpg 656w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-300x220.jpg 300w, /uploads-archive/2016/03/f8c7578620dd360fa20c8aa3e3868548-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" rel="attachment wp-att-9864"><img decoding="async" class="alignnone wp-image-9890 size-full" src="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg" alt="" width="100%" srcset="/uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1.jpg 656w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-300x220.jpg 300w, /uploads-archive/2016/03/9cae0087df9d97d3d1bcf40d1a1b9b23-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
一番有名な遠近法ですが、一番難易度の高い遠近法です。 
消失点に近いものほど小さく、遠く見えるというもので、 
一点透視図法、二点透視図法、三点透視図法などがあります。
&nbsp;
思っていた以上に多くの遠近法があることを知ることができました。 
必要に応じて使い分けたり、デザインのヒントにしていきたいです。
<h2>参考サイト</h2>
<a class="link" href="http://blog.livedoor.jp/kokinora/archives/1008065272.html" target="_blank">遠近法について知っておこう ー概要ー : ノラの絵画の時間</a>

small_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

thumbnail_db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

db2bbcef7b5fbd7a6d2940b36cc645d1.jpg

いろんな遠近法

デザインでイラストを入れたり、絵を描いたりするとき、 
質感を出来るだけ短時間で出すことが求められる機会は多いと思います。
この質感を出す上で、一つのポイントとなることがあるのが、 
目が見ている色と、脳が見ている色にはズレが出てくることがあることを意識することです。
今回はその中でも影と色の関係についての、基本的な部分についてご紹介いたします。
&nbsp;
<a href="/uploads-archive/2016/03/shadow-color_2.jpg" rel="attachment wp-att-9782"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9782" src="/uploads-archive/2016/03/shadow-color_2.jpg" alt="shadow-color_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color_2.jpg 656w, /uploads-archive/2016/03/shadow-color_2-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color_2-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
↑こちらのいらすとの、下にある白黒のチェックですが、 
円柱の影になっている箇所は、実際には↓のように、影になっていない黒の部分よりも暗い色なのですが、 
白として認識できると思います。
<a href="/uploads-archive/2016/03/shadow-color.jpg" rel="attachment wp-att-9783"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9783" src="/uploads-archive/2016/03/shadow-color.jpg" alt="shadow-color" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color.jpg 656w, /uploads-archive/2016/03/shadow-color-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
実際は暗い色なのですが、 
影と色の関係から、脳が再処理を行ってくれるため、 
影になった部分も白としてみることができます。
&nbsp;
もうひとつですが、
<a href="/uploads-archive/2016/03/shadow-color02.jpg" rel="attachment wp-att-9785"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9785" src="/uploads-archive/2016/03/shadow-color02.jpg" alt="shadow-color02" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02.jpg 656w, /uploads-archive/2016/03/shadow-color02-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
こちらのような立方体があった場合、 
一つ一つの面が一色で構成されていると見ることができます。
しかし、実際には下のイラストのように床からの反射光で、側面はグラデーションになっています。
<a href="/uploads-archive/2016/03/shadow-color02_2-1.jpg" rel="attachment wp-att-9802"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-9802" src="/uploads-archive/2016/03/shadow-color02_2-1.jpg" alt="shadow-color02_2" width="656" height="480" srcset="/uploads-archive/2016/03/shadow-color02_2-1.jpg 656w, /uploads-archive/2016/03/shadow-color02_2-1-300x220.jpg 300w, /uploads-archive/2016/03/shadow-color02_2-1-228x167.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
しかし、脳はこの反射光を省いた状態を計算して、 
一面が一色になっていると認識します。
日常で生活する場合、 
この脳の働きが、色や影の実際の状態を知る手助けになりますが、
デザインをしたり絵を描いたりする場合は、 
脳が省いた情報を再現することが、質感を高める場合が多くなります。
こちらのことを意識することで、 
作品の作り込みやアイディアを増やすヒントにしていきたいです。
&nbsp;
<h2>参考文献</h2>
<a class="link" href="http://www.amazon.co.jp/dp/4862461530" target="_blank">カラー&amp;ライト ~リアリズムのための色彩と光の描き方 2012/1/30 ジェームス・ガーニー(James Gurney) (著)</a>

目が見る色と頭が見る色

UIという文字を頻繁に見かけるようになり、ワイヤーフレームやモックアップを制作するツールが多く生まれてきています。
以前、下記記事にてツールを紹介しましたが（すごい簡単にですが） 
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a> 
(cometはまだ動きがないようですね・・・)
こういったツールではなく、素材として制作を提供してくれるサイト、ブログがあります。 
しかもフリーで！！ 
その中でいいと思った3つをご紹介します。
<h3>ChatアプリのUIテンプレート</h3>
<img decoding="async" src="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg" alt="Free Chat UI kit for Photoshop and Sketch InVision" width="640" class="alignnone size-large wp-image-9747" srcset="/uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-1024x678.jpg 1024w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-300x199.jpg 300w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-768x508.jpg 768w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision-228x151.jpg 228w, /uploads-archive/2016/03/Free-Chat-UI-kit-for-Photoshop-and-Sketch-InVision.jpg 1109w" sizes="(max-width: 1024px) 100vw, 1024px" />
Chatアプリの制作に役にたちそうなkitです。そのままでもいい感じなのですが、これを元に制作していくと良さそうです。
photoshopかsketchか選択してダウンロードできます。
<img decoding="async" src="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png" alt="スクリーンショット 2016-03-01 12.33.46" width="640" class="alignnone size-large wp-image-9748" srcset="/uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-1024x712.png 1024w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-300x209.png 300w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-768x534.png 768w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82-228x159.png 228w, /uploads-archive/2016/03/80abf49c6a319ccb35ab363891aa3a82.png 1088w" sizes="(max-width: 1024px) 100vw, 1024px" />
デザインに使わなくて、どういったページが必要かを把握するだけでも十分良さそうです！ 
こんなのがフリーだなんてどうかしてますね、すごいな・・・invision。
<a href="http://www.invisionapp.com/chat" target="_blank" class="link">Free Chat UI kit for Photoshop and Sketch | InVision</a>
<h3>ワイヤーフレーム、フローチャートを作れるKIT</h3>
<img decoding="async" src="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg" alt="UI Tiles- Website Flowcharts" width="640" class="alignnone size-large wp-image-9749" srcset="/uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-1024x687.jpg 1024w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-300x201.jpg 300w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-768x515.jpg 768w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts-228x153.jpg 228w, /uploads-archive/2016/03/UI-Tiles-Website-Flowcharts.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" />
これはデザイナーはもちろん、ディレクターにも良いと思います！ 
こちらも凄まじい種類のページテンプレートが用意してあり、PNG,AI,PSD,SKETCH形式のものがダウンロードできます。
<img decoding="async" src="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png" alt="スクリーンショット 2016-03-01 12.49.02" width="400" class="alignnone size-full wp-image-9751" srcset="/uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155.png 639w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-260x300.png 260w, /uploads-archive/2016/03/d97ebfd485b8c3bda0baa1ed5554a155-228x263.png 228w" sizes="(max-width: 639px) 100vw, 639px" />
<a href="https://pixelbuddha.net/ui-tiles/" target="_blank" class="link">UI Tiles: Website Flowcharts</a>
<h3>高品質なECサイトのUIテンプレート</h3>
<img decoding="async" src="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg" alt="Portland UI Kit Free Sample Craftwork – Thoroughly Handpicked UI Freebies" width="640" class="alignnone size-large wp-image-9750" srcset="/uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-1024x687.jpg 1024w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-300x201.jpg 300w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-768x515.jpg 768w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f-228x153.jpg 228w, /uploads-archive/2016/03/1d2fa757bcc200b451812fdca26cec1f.jpg 1094w" sizes="(max-width: 1024px) 100vw, 1024px" />
こちらは無料ではTOPページのみになりますが参考になります。
<a href="http://getcraftwork.com/portland-ui-kit/" target="_blank" class="link">Portland UI Kit Free Sample | Craftwork – Thoroughly Handpicked UI Freebies</a>
というかここのサイトがすごい。。。
<a href="http://getcraftwork.com/ui-kits/" target="_blank" class="link">UI Kits | Craftwork – Thoroughly Handpicked UI Freebies</a>
こういうの活かしながらより良いサイト制作に勤しみたいと思います。

UIデザイン制作にすごい役立ちそうなフリー素材３つ

【Canvas】円でぼかしのような視覚効果

Chromeの拡張機能の紹介です。
Chromeのデフォルトのダッシュボードを海外のweb,デザイン系のブログ・ギャラリーサイトのフィードを表示しちゃう機能です。
<a class="link" href="https://chrome.google.com/webstore/detail/panda-4-news-inspiration/haafibkemckmbknhfkiiniobjpgkebko" target="_blank">Panda</a>
通常のダッシュボードは、 
<img decoding="async" loading="lazy" class="alignnone wp-image-9688" src="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png" alt="スクリーンショット 2016-02-23 16.10.54" width="630" height="390" srcset="/uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-1024x634.png 1024w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-300x186.png 300w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-768x476.png 768w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b-228x141.png 228w, /uploads-archive/2016/02/8577436a48f14c420b9a3da582c5564b.png 1027w" sizes="(max-width: 630px) 100vw, 630px" /> 
こんな感じのgoogleのページだと思うのですが、
この拡張機能をインストールして有効化させたら、 
以下のようなページがデフォルトとして表示されるようになります。
<img decoding="async" loading="lazy" class="alignnone wp-image-9693" src="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png" alt="スクリーンショット 2016-02-23 16.17.37" width="630" height="427" srcset="/uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-1024x694.png 1024w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-300x203.png 300w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-768x520.png 768w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017-228x154.png 228w, /uploads-archive/2016/02/bc44e706a8f3c8aa1db629f29a6bc017.png 1104w" sizes="(max-width: 630px) 100vw, 630px" />
初期はこんな感じで、左側がニュースのリスト、右側がギャラリーというレイアウトなのですが、 
以下のように変更もできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-9694" src="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png" alt="スクリーンショット 2016-02-23 16.19.12" width="630" height="425" srcset="/uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-1024x690.png 1024w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-300x202.png 300w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-768x518.png 768w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d-228x154.png 228w, /uploads-archive/2016/02/62bd4844f73fdc67d06992a73be3086d.png 1104w" sizes="(max-width: 630px) 100vw, 630px" />
有名なサイトばかり揃っており、自分で選択もできるので非常に良いです。
忙しいとサイトを見に行くことを忘れてしまうこともあると思いますが、 
これがあれば自然に目に入ってくる可能性が高いのでおすすめです!!
これの日本verが欲しいな・・・

デザイナー必須!?のChromeのエクステンション「Panda」

最近は、どうしたらこのページが人に興味を持たれるようになるんだろう　とか… 
どこに何を配置したら正しいのか　やら… 
そもそも求められている商品はこれじゃないんじゃ！？　など…
そんな事を考えていた時に、ふと販売接客業に勤めていた時の事を思い出しました。 
お客様が入ってきて目当てのコーナーへたどり着いた時、最初に必ず見るゾーンがありまして、そこを私は「ゴールデンゾーン」と言っていました。 
ゴールデンゾーンは、手の触れやすい場所で一般的に床上60cm～160cmの範囲とされております。そこにどんな商品を配置するかでお店の売上、利益、イメージが異なってくるのですが…
そんなゴールデンゾーンのようにWEBやレイアウトにもゴールデンゾーンがあるのでは？と思い、調べてみたら出てきました。
<h2>レイアウトで有名な3つの配置</h2>
3つもありました。
<h3>グーテンベルク・ダイヤグラム</h3>
すごい、魔法の呪文みたいな言葉ですね。 
グーテンベルク・ダイヤグラムとは、均等に配置された同質の情報を見る際の一般的な視線のパターンを表した図式です。
人間の目は左上から右下方向へ、チラチラしながら遷移します。 
このような視線の流れのパターンは、エディトリアルデザイン（新聞・雑誌・書籍などの出版物のデザイン）などでは当たり前に使われている技法や考え方だそうです。テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置するように心がける、といったものです。
このレイアウトはドキュメントを読む際の視線の動きなので、媒体によって効果的な導線が異なります。
<h3>Z型パターン</h3>
グーテンベルク・ダイヤグラムと少し似ておりますが、紙媒体でよく使われるパターン。 
「左上⇒右上⇒左下⇒右下」とZの形にユーザーの視線が移動するため、この導線上に重要なエレメントを配置しましょう。
紙媒体でとは言いましたが、以下のように意外とWEBでも使われていると思うのですがどうでしょう？
<a href="/uploads-archive/2016/02/free_03.jpg" rel="attachment wp-att-9660"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_03.jpg" alt="free_03" width="383" height="102" class="alignnone size-full wp-image-9660" srcset="/uploads-archive/2016/02/free_03.jpg 383w, /uploads-archive/2016/02/free_03-300x80.jpg 300w, /uploads-archive/2016/02/free_03-228x61.jpg 228w" sizes="(max-width: 383px) 100vw, 383px" /></a>
<a href="/uploads-archive/2016/02/free_01.jpg" rel="attachment wp-att-9661"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_01.jpg" alt="free_01" width="124" height="347" class="alignnone size-full wp-image-9661" srcset="/uploads-archive/2016/02/free_01.jpg 124w, /uploads-archive/2016/02/free_01-107x300.jpg 107w" sizes="(max-width: 124px) 100vw, 124px" /></a>
縦や横だけを読むよりも
<a href="/uploads-archive/2016/02/free_02.jpg" rel="attachment wp-att-9662"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/free_02.jpg" alt="free_02" width="160" height="158" class="alignnone size-full wp-image-9662" /></a>
左上⇒右上へ、自然と、左下⇒右下　の文字の配置が私は見やすいと思います。 
ちょっと解釈が違うかもしれませんが、目線の動きという点では……ダメですかね(-ω-；)
<h3>F型パターン</h3>
こちらはWEBにおける視線移動の研究で発見された比較的新しいパターン 
ECサイトやブログなんかで使用する代表的なパターンらしく、テンプレートなどもこの目線を利用した配置が多いと思います。
<a href="/uploads-archive/2016/02/mesen-e1456135958802.jpg" rel="attachment wp-att-9663"><img decoding="async" loading="lazy" src="/uploads-archive/2016/02/mesen-e1456135958802.jpg" alt="mesen" width="500" height="417" class="alignnone size-full wp-image-9663" /></a>
①　⇒　②　⇒　①・③　⇒　④　⇒　①・③・⑤　⇒　⑥
大まかな視線の動きはこういった感じですね。 
ここから私が感じた事は、どのパターンでも多くの人は左上～真ん中を見るという事。
弊社のECサイトにもファーストビューで一番人が興味引くものを置いておくべきなんだと思い、スマホの普及でPCから見る人が少なくなりましたが、今回はPCもすぐに配置を変えてみました（もちろんスマホ側もやりましたよ！）
結果としては、2週間ほどで全体で購買率が4.28％UPしました～ (*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ
ですが、やっぱりスマホからのアクセスや売上の方が多いところを見ると、世間のPC離れが良くわかりますね…。これからIT業界がどのように変化していくのか、流行りを見ながら新しいマーケティングにはしっかり目を通していこうと思います！

効果的なコンテンツの配置と視線誘導に適しているレイアウトとは？

フリーランスになりたい！
というわけではないですが、このサイトに掲載されているツールはフリーランスに限らず、 
普通に便利なツールが載っています。
カラー関連、アイコン関連、フォント関連、写真関連、等々多くのサイトが一覧にまとめられています。
写真関連のサイトが多いですね〜
<a href="https://www.hellobonsai.com/best-freelance-tools" class="link" target="_blank">Best Tools for Freelance Designers and Developers | Bonsai</a>
以前、デザイナー向けツールのサイトの紹介もしていました。
<a href="/designer/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e5%90%91%e3%81%91%e3%83%95%e3%83%aa%e3%83%bc%ef%bc%86%e6%9c%89%e6%96%99%e7%b4%a0%e6%9d%90%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88%e3%80%8cma.html" target="_blank" class="link">デザイナー向けフリー＆有料素材まとめサイト「Makerbook」 | スターフィールド株式会社</a>

フリーランスのデザイナー＆プログラマーにとって便利なツールのご紹介

photoshop ccやsketchでも使えるというプラグインです。
UI designを助けてくれるという触れ込みです。
<a href="http://labs.invisionapp.com/craft" class="link" target="_blank">Craft by InVision LABS</a>
以下の流れは基本「Photoshop」での話になりますのでご了承下さい。
<h2>Craftのインストール</h2>
まずは公式HPへリンクし、インストーラーをダウンロードします。 
windows/macは自動で判断しますので迷うことはありません。
インストーラーをダウンロードしたら起動します。 
そして、「sketch」か「photoshop」のどちらをインストールするか選択します。
これでインストール完了です。 
（photoshopを再起動させれば、エクステンションに追加されています。）
こちらのプラグインには、 
「Duplicate」「Type」「Photos」 
と大きく3つの機能があります。
簡単にはなりますがちょっとずつ説明していきます。
<h3>Duplicate</h3>
要素やシェイプを複製できるもので、ギャラリー等の制作に最適かもしれません。
<a href="/uploads-archive/2016/02/6ap6Jo4mVg.gif" target="_blank"><img decoding="async" src="/uploads-archive/2016/02/6ap6Jo4mVg.gif" alt="6ap6Jo4mVg" width="640" class="alignnone size-large wp-image-9541" /></a>
まず一つ元となるものを作り、それを選択し、 
縦、横にいくつ、 
どのくらいのマージンで、 
複製をするのかを決める感じです。
<h3>Type</h3>
こちらはあらゆるダミーテキストを一瞬で挿入できます。 
名前、見出し、文章、住所、日付、メールアドレス等など&#8230;
こちらも元のテキスト（なんでもOK）を用意し、それを選択しておきます。 
パネルを開き、変更したいものをクリックするだけで変更されます。
<a href="/uploads-archive/2016/02/93JN3Zl7lD.gif" rel="attachment wp-att-9544"><img decoding="async" src="/uploads-archive/2016/02/93JN3Zl7lD.gif" alt="93JN3Zl7lD" width="640" class="alignnone size-large wp-image-9544" /></a>
同じボタンを押してもランダムなので違う内容になります。
惜しいのは英語しかないという点ですね。日本語版があればすごくいいのに。。。
<h3>Photos</h3>
こちらは写真を挿入する機能になります。
ただ写真を貼り付けるだけなのかなと思っていましたが、作ったシェイプに合わせて写真を当て込んでくれるものでした。
<a href="/uploads-archive/2016/02/sisGyFJoe1.gif" rel="attachment wp-att-9545"><img decoding="async" src="/uploads-archive/2016/02/sisGyFJoe1.gif" alt="sisGyFJoe1" width="640" class="alignnone size-large wp-image-9545" /></a>
<a href="https://unsplash.com/" target="_blank">Unsplash</a>というサイトから持ってこれますが、パソコンのフォルダやdropboxも指定できます。
どの場合も写真を選べるわけではなく、ランダムで入れてくれます。 
(自身のPCの場合、どこかのフォルダを選ぶと、そのフォルダ内にある写真をランダムで挿入します)
ですので、ダミー写真を用意するのに便利かと思います。
<h2>終わりに</h2>
管理画面、モックアップの作成にかなり使えるプラグインだと思いました。 
特に、SNS系、メディア系なんかのサイトに威力を発揮できるかもしれません。
僕は第一校のデザインは、全部同じ写真で出しちゃったりするので、ぜひ使用してみたいと思います。
おまけですが、こちら載せておきます。 
<a href="http://photoshopvip.net/ultimate-ps-tip" target="_blank">意外と知らない、Photoshop CCの隠し小技テクニック20個まとめました。 &#8211; PhotoshopVIP</a>

Photoshopが便利になるプラグイン「craft」

Excelで見かけるはじめの列を固定させたTableをjQueryで実現してみる

いつでたのかは定かではありませんが、前々からgoogleフォームなるものの存在は知っていても利用することはありませんでした。
弊社で写真全員でブログを書いており、月毎で社員の投票により「ブログ賞」というものを決めています。
しかし、しばらくこの投票が行われない時期がありました。
それはなぜか考えた所、「投票が面倒くさい」からだろうと思い、なんかいいのないかなと思い利用したのがGoogleフォームでした。
実際に作成してみたところ簡単にできました。 
今月から使い初めたので集計がどうなるのかはわかりませんが、きっと便利そうな予感がします。（スプレッドシートに書き出されるのかな？？）
<h2>Googleフォームの概要</h2>
使い方は、まずはgoogleアカウントが必要ですね。 
そしてドライブから「新規」というボタンを押すと、「Googleフォーム」っていうのがあるのでそれをクリックです。
かなり雑な説明ですみません。この辺は大丈夫だと思うのだいぶ省略させていただきました。
<a href="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png" rel="attachment wp-att-9439"><img decoding="async" loading="lazy" class="alignnone wp-image-9439" src="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png" alt="スクリーンショット 2016-02-02 17.55.10" width="640" height="351" srcset="/uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-1024x561.png 1024w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-300x164.png 300w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-768x421.png 768w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9-228x125.png 228w, /uploads-archive/2016/02/f1a83f888b4d994083a9558746934bb9.png 1104w" sizes="(max-width: 640px) 100vw, 640px" /></a>
そして、フォームのページに遷移後、右下の＋マークを押すと新規で作成できます。
<img decoding="async" loading="lazy" class="alignnone wp-image-9437" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949" width="640" height="395" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-1024x632.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-300x185.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-768x474.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949-228x141.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402459949.png 1155w" sizes="(max-width: 640px) 100vw, 640px" />
色は好きな色が選べます。
&nbsp;
質問の項目としては、 
記述式、ラジオボタン、チェックボックス、プルダウン、均等目盛、選択式、日付、時刻といった要素があります。
<img decoding="async" loading="lazy" class="alignnone wp-image-9443" src="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png" alt="screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765" width="640" height="474" srcset="/uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-1024x758.png 1024w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-300x222.png 300w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-768x568.png 768w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765-228x169.png 228w, /uploads-archive/2016/02/screencapture-docs-google-com-a-sterfield-co-jp-forms-d-1-Xg_ZgRSn1ImbeLQ43YSK2M1gBDHmrCCKk9zTh3NVAc-edit-1454402497765.png 1150w" sizes="(max-width: 640px) 100vw, 640px" />
あとは、テキストはもちろん、画像や動画なんかも挿入できたりします！
回答できるユーザーも選択でき、 
全ユーザーであったり、googleアカウントを要ログインであったり、一回のみの回答という設定もできます！
共同で編集することもできます。
こんなに簡単に作れていろいろ設定も出来るとは思ってはいなかったでびっくりでした！！
社内向けアンケートであったり、イベントでのアンケートにぴったりですね！

Googleフォームって実は簡単でとても便利だった！

女性だったら年代関係なくいつまでもお洒落でいたいですよね。 
出来ている出来ていないは関係なく私もそうです。
<h2>最新流行アイテムを見つけられるスマホアプリ</h2>
世の中便利になりましたね。 
少し前までは、雑誌で流行りの服装や化粧品を探していたのに今ではスマホアプリで情報アプリがあるので、通勤時の電車内で最新流行アイテムを知ることが出来てしまいます。 
そんな情報アプリの中でもいま話題のアプリを厳選してみました！
<h3>見やすさダントツ一位「MERY」</h3>
『女の子のまいにちをかわいく』がキャッチコピーの<a href="http://mery.jp/">MERY</a>です。
<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-33-e1453797941995.png" rel="attachment wp-att-9372"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-33-169x300.png" alt="Screenshot_2016-01-26-17-26-33" width="169" height="300" class="alignnone size-medium wp-image-9372" /></a>　<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-25-45-e1453797953987.png" rel="attachment wp-att-9370"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-25-45-169x300.png" alt="Screenshot_2016-01-26-17-25-45" width="169" height="300" class="alignnone size-medium wp-image-9370" /></a>
PCよりもスマホアプリの方が見やすいデザインとなってますね。 
すごく愛用させてもらっています。 
ただ、上がってくる記事自体はランダムなのかviewの数なのか分かりませんが、ランキング上位は見た事ある記事ばかりってこともあります（見すぎなだけかもしれないけど）。 
MERYでは直接お買い物が出来たり、無料会員になると自分でまとめが投稿出来たりと見るだけではない楽しさもあります。
<h3>ちょっぴり大人の女性向け 「<a href="http://trilltrill.jp/">TRILL</a>」</h3>
TRILLと書いて「とりる」と読みます。
こちらはかなり大人っぽいデザイン、PCサイトのデザインも落ち着いています。 
スマホアプリの動きは、MERYにかなり近くなかなか見やすい。
<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-22-e1453798019920.png" rel="attachment wp-att-9378"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-22-169x300.png" alt="Screenshot_2016-01-26-17-27-22" width="169" height="300" class="alignnone size-medium wp-image-9378" /></a>
まとまっている記事は、どちらかというと20代後半から30代の女性向けメイン。 
こちらは直接ライターさんを雇って記事を書いてもらっているそうなので、自由に投稿などはできません。 
気になる方は運営オフィシャルをお調べ下さいね　⇒<a href="http://trill-corp.jp/">こちら</a>から
<h3>Instagramの女性版 「girls pic」</h3>
ガールズピックはInstagramのように写真で流行を配信する新しいタイプの情報アプリです。 
ネイル、ヘアー、メイク、ファッションなど女性が気になる情報を皆でシェアし合う感じ。
<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-45-e1453797982760.png" rel="attachment wp-att-9374"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-45-169x300.png" alt="Screenshot_2016-01-26-17-26-45" width="169" height="300" class="alignnone size-medium wp-image-9374" /></a>　<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-53-e1453797996983.png" rel="attachment wp-att-9375"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-53-169x300.png" alt="Screenshot_2016-01-26-17-26-53" width="169" height="300" class="alignnone size-medium wp-image-9375" /></a>
実際に店舗の方が宣伝として使用している場合もありますので、気になるお店があったらすぐに連絡出来ちゃいます。便利。
<h3>テレビCMで宣伝中！「<a href="https://antenna.jp/">antenna</a>」</h3>
「パクチーは？」
「パクチーはいや」
「じゃあ、・・・とんかつ」
「とんかつ！いいねー」
で、最近テレビCM中のantennaは、気になっていたけど使ったことがありません。 
このブログのためにダウンロードをしてみました。
<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-12-e1453798002867.png" rel="attachment wp-att-9376"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-12-169x300.png" alt="Screenshot_2016-01-26-17-27-12" width="169" height="300" class="alignnone size-medium wp-image-9376" /></a>　<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-16-e1453798009114.png" rel="attachment wp-att-9377"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-27-16-169x300.png" alt="Screenshot_2016-01-26-17-27-16" width="169" height="300" class="alignnone size-medium wp-image-9377" /></a>
ちょっと見辛い。というかどこ見たらいいかわからん。 
もっとシンプルで且つ自分が欲しい情報だけが貰えるものかと思ってましたが、そううまくはいきませんね。 
今後に期待してアプリはダウンロードしたままにしておきます。
<h3>動画でトレンド情報を配信出来るアプリ「C CHANNEL」</h3>
PCサイトがシンプルで見やすい<a href="https://www.cchan.tv/">C CHANNEL</a> 
スマホアプリもPCと変わらずかなりシンプル。
<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-39-e1453797973925.png" rel="attachment wp-att-9373"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-26-39-169x300.png" alt="Screenshot_2016-01-26-17-26-39" width="169" height="300" class="alignnone size-medium wp-image-9373" /></a>　<a href="/uploads-archive/2016/01/Screenshot_2016-01-26-17-25-57-e1453797964518.png" rel="attachment wp-att-9371"><img decoding="async" loading="lazy" src="/uploads-archive/2016/01/Screenshot_2016-01-26-17-25-57-169x300.png" alt="Screenshot_2016-01-26-17-25-57" width="169" height="300" class="alignnone size-medium wp-image-9371" /></a>
個人で投稿出来るのかと思いきや、出来なそう。 
投稿している皆さんモデルさんやライターさんとして投稿されているみたいですね。 
動画でメイク方法とか見れるので、これも重宝出来そう。
<h2>まとめ</h2>
いつまでもかわいくいたい、綺麗でいたい、おしゃれでいたい。 
そういう方達には見やすくて分かりやすくて可愛いものじゃないと目がいかないって事を気づかされました。意識して見たことはありませんでしたが、今後の自分が作るものに良い刺激があるといいな。

いま話題の女の子に人気な情報アプリを厳選してみた

以前、記事でwebサイトのモックアップを作れるサービスを紹介しましたが、 
<a href="/designer/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%bb%e3%82%a2%e3%83%97%e3%83%aa%e3%81%ae%e3%83%a2%e3%83%83%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e3%83%84.html" target="_blank">webサイト・アプリのモックアップ、デザインのツールはAdobeに期待！！ | スターフィールド株式会社</a>
また新しいものを発見しました。 
その名も「Bootstrap Studio」です。 
<a class="link" href="https://bootstrapstudio.io/" target="_blank">Bootstrap Studio</a>
こちらあの「Bootstrap」を元に作られており、bootstrapを使用したサイトのデザインが直感的にできます。
もはやphotoshopやsketchのようなデザインツールです。
有料のツールではありますが、手早くデザインを作れそうな感じがします。
こちらはアプリですが、Demoはブラウザ上で試すことが出来ます（google Chromeのみ）
<h2>おまけ</h2>
bootstrapではないCSSのフレームワークになります。 
<a href="http://foundation.zurb.com/sites.html">Foundation for Sites | Foundation for Sites</a>
こちらのサイトではhtmlテンプレートが用意されており、 
自由にダウンロードできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-9315" src="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg" alt="Foundation HTML Templates" width="640" height="414" srcset="/uploads-archive/2016/01/Foundation-HTML-Templates-1024x663.jpg 1024w, /uploads-archive/2016/01/Foundation-HTML-Templates-300x194.jpg 300w, /uploads-archive/2016/01/Foundation-HTML-Templates-768x497.jpg 768w, /uploads-archive/2016/01/Foundation-HTML-Templates-228x148.jpg 228w, /uploads-archive/2016/01/Foundation-HTML-Templates.jpg 1112w" sizes="(max-width: 640px) 100vw, 640px" />
<a href="http://foundation.zurb.com/templates.html">Foundation | HTML Templates</a>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2016/03/16

2016/03/16

2016/03/09

2016/03/09

2016/03/09

2016/03/02

2016/03/01

2016/02/24

2016/02/24

2016/02/24

2016/02/17

2016/02/09

2016/02/03

2016/02/03

2016/01/27

2016/01/26

2016/01/26

2016/01/20