PCでの操作というか、スクリーンショットの動画版(といってもgifアニメ)を撮れるアプリです。
<a href="http://recordit.co/" target="_blank">Recordit: Record screencasts fast &amp; free! with GIF Support!</a>
操作は凄い簡単です。サイトのTOPページを見るだけで、方法がわかります。
試しに、前回記事でも書いたphotoshopのスクリプトを実行した時の動きをやってみました。
<h2>Distribute Layer Spacing Horizontal</h3>
<a href="/designer/%e3%81%a8%e3%81%a3%e3%81%a6%e3%82%82%e4%be%bf%e5%88%a9%e3%81%aaphotshop%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b35%e9%81%b8.html">とっても便利なphotshopのプラグイン5選 | スターフィールド株式会社</a>
<img decoding="async" loading="lazy" class="alignnone wp-image-5452" alt="HvQ4nmnkkl" src="/demo/abe/sample/HvQ4nmnkkl.gif" width="648" height="400" />
いい感じに撮れてますね。
ちょっとした操作説明やマニュアル作成なんかに便利かもしれません。

PCでの操作を録画してgifにしてくれるアプリ「Recordit」

I have gathered together some interesting tools, that i found out to be really useful when it comes to get an overview of the style guide of other great websites.
<a href="http://www.wirify.com">Wirify</a>
<a href="/uploads-archive/2014/08/Wirify.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5408" alt="Wirify" src="/uploads-archive/2014/08/Wirify-300x173.png" width="400" height="273" /></a>
The first tool will help you to see the internal structure of a website, to get inspired by the layouts of other well designed sites, turning any website you like to a wireframe, with just one click.
I would recommend to wait until the whole page is completely loaded before you attempt to “wirify” it. To return to the original page simply click anywhere on the wireframe.
The best way to keep the wireframe and use it afterwards is to save the whole page as an image, using a browser add-on or extension, like the following ones:
<ul>
<li><a title="Download Google Chrome Screen Capture extension by Google" href="https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg"> Screen Capture extension</a> for Google Chrome</li>
</ul>
&nbsp;
<ul>
<li><a title="Download Screengrab Firefox Add-on by Andy M" href="https://addons.mozilla.org/en-US/firefox/addon/1146/"> Screengrab add-on</a> for Firefox.</li>
</ul>
&nbsp;
Check how Wirify works in this video:
<iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/XgzPHFRx-xM?feature=oembed" frameborder="0" allowfullscreen></iframe>
 
<a href="http://stylifyme.com/">Stylifyme</a>
<a href="/uploads-archive/2014/08/Stylifyme.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5409" alt="Stylifyme" src="/uploads-archive/2014/08/Stylifyme-300x186.png" width="400" height="286" /></a>
Stylifyme was created to help designers gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Just copy the link of any particular site you like, and simply paste it in Stylifyme site and you will get the results in a couple of seconds.
 
<a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a> 
<a href="/uploads-archive/2014/08/Color-thief.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5410" alt="Color thief" src="/uploads-archive/2014/08/Color-thief-300x221.png" width="400" height="321" /></a>
This simple tool helps you to grab the colour palette from an image.
Give it a try, scroll down the site and drag an image inside, Colour thief is going to reveal the dominant colour on top and the full colour palette.

Visual tools for web designers

In the age of information overload&#8230;<a href="https://dragdis.com">Dragdis </a>is the ultimate bookmarking tool that pulls it all together.
This extension helps you curate and organize your resources as soon as you come across them thanks to an extremely simple sidebar.
Launched early March this year, Dragdis works by installing browser extension that adds this bookmarking functionality when you need it.
It goes without saying that there are plenty of tools and utilities, which do this job, like Evernote, Pinterest, Springpad, Finland’s Kippt and Pocket. But none of them focus on easing the process, most of the bookmarking tools you need to do a lot of actions to save anything. However with Dragdis all you need to do is simply drag and drop any link, text, image or video into a folder in the Dragdis bar that appears on the right side of your browser once you start dragging. Very neat.
Once in Dragdis, everything is stored in the cloud. They currently support Chrome, Safari and Firefox. You can have access to your selected apps too, like Facebook, Twitter, Dropbox, Google Drive, Evernote and Pinterest, for example.
The Lithuanian-based startup was founded back in 2012 by first-time entrepreneurs, Domas Sabockis, Karolis Malcevičius and Eugenijus Jusas. Sabockis explains he got the idea for the service while working in an ad agency as a creative, where he was constantly losing images, videos, links he found on the internet. After trying different tools and not finding one he really liked, he decided to quit his job to build Dragdis.
Check out this Dragdis video and see it in action.
&nbsp;
<iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/HLEAA_tIpbY" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Interested users can sign up <a href="https://dragdis.com/">here</a>.
What do you think of this simple application?

Dragdis:　The ultimate Bookmarking service

css.jpg

意外に知らなかったCSSの「content」プロパティの使い方

今回ご紹介するのは、
HTML5のスライドアニメーションが作れるサイトです。
サインアップの必要なく作れますが、登録して、プランも色々あるようですが、
出来る事が増えて行く感じです。
&nbsp;
作る画面は、以下のような感じです。
<a href="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-5325" alt="HTML5 MAKER Editor html5maker.com" src="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg" width="643" height="365" srcset="/uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-1024x582.jpg 1024w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-300x170.jpg 300w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_-228x129.jpg 228w, /uploads-archive/2014/07/HTML5-MAKER-Editor-html5maker.com_.jpg 1249w" sizes="(max-width: 643px) 100vw, 643px" /></a>
直感的にできますね。
写真を追加して、アニメーションの設定を右側で好きなようにできます。
最後、右上の「PUBLISH」を押すと、html一式がダウンロードできます。
&nbsp;
こんなサービスがどんどんできてきてますね。
HTMLに詳しくない人でもwebサイトを作れてしまう環境がどんどん出来上がりつつありますね・・・
&nbsp;
&nbsp;
<a href="http://html5maker.com/" class="link">Create HTML5 Animation | Free Banner Maker </a>
&nbsp;

HTML5のスライドアニメーションを直感的に作れるサイト「HTML5 MAKER」

Bootstrapとは、以前流行った(?)twitter bootstrapのことで、 
前はそんな風に呼んでいたみたいですが、今は、「Bootstrap」という名称になっているようです。
そんなBootstrapのテーマを専門的に販売しているサイトが「BootstrapBay」です。 
管理画面用から、一般のサイトまで様々なカテゴリーがあります。 
E-Commerceのカテゴリもありますが、今現在はないようですね(2014年7月15日)。
<a href="http://bootstrapbay.com/" target="_blank">BootstrapBay &#8211; Bootstrap Themes &amp; Templates</a>
そもそも「Bootstrap」って？という人は以下のリンクをご覧下さい。
<a href="http://ascii.jp/elem/000/000/795/795948/" target="_blank">いまさら聞けない「Twitter Bootstrap」とは？ (1/2)｜Webサービス開発者のためのTwitter Bootstrap入門</a>
そしてさらに、こちらもご覧頂けると基本的な使い方はもうOKです。
<a href="http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html" target="_blank">Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) &#8211; ＠IT</a>
本家のサイトを見てみますと、確かにもう「Bootstrap」の表記になってますね。
<a href="http://getbootstrap.com/2.3.2/" target="_blank">Bootstrap</a>
今回初めて知ったのですが、bootstrapのカラーテーマの変更できるものが用意されているようです。
<a href="http://bootswatch.com/" target="_blank">Bootswatch: Free themes for Bootstrap</a>
これは最初にご紹介した物とは違い、カラーテーマのバリエーションしかないですね。
Bootstrapは、今後もいろいろと活躍しそうな感じですね〜
他にも、Bootstrapをベースにして、作成されたフレームワーク、テンプレートがありますので、 
最後にご紹介します。
<a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI &#8211; Free Bootstrap Framework and Themes</a>
<a href="http://www.flatstrap.org/" target="_blank">Flatstrap by Littlesparkvt.com</a>

Bootstrapのテーマを販売している「BootstrapBay」

googleが新たなデザインを提唱しているのが耳に入ったので、 
それを紹介します。
<a href="http://www.google.com/design/#resources" target="_blank">Google Design</a>
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material Design &#8211; Google design guidelines</a>
Material Designという名称でガイドラインが用意されているのですが、 
まぁパッと見、フラットデザインに近しい印象があります。
Material というと、「素材,材料,物質」という意味があるように、 
かなりざっくりいうと、 
1.デザイン要素は現実の物のメタファーを用い、 
2.わかりやすく意図的な色使い、グラフィック、タイポグラフィ、 
3.意味のあるアニメーションを用いましょう 
という感じかと思います。
項目は以下のようになっています。
・アニメーション 
・スタイル 
・レイアウト 
・コンポーネント 
・パターン 
・ユーザビリティ 
・リソース
かなり事細かに説明があり、 
原則から始まり、レイアウト、スタイル、コンポーネント等には、 
これはOK,これはダメといった指示まであります。 
テンプレートも用意されています。
スタイルの項目には、カラーやフォントについての記述があるのですが、 
こちらも、リソースとして、カラーパレットやフォントデータを提供してくれています。
細かいことはやはりサイトを見て感じてもらう必要があるかと思います。 
今後のデザインを作用しうるものになるかもしれないので、一読の必要性ありかもしれません。
といってもあまりにも従いすぎると、均一したデザインになってしまいますね。 
それがGoogleの狙いなのかもしれませんが。
<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" class="link">Introduction &#8211; Material Design &#8211; Google design guidelines</a>

Googleが新たに提唱しているMaterial Design

webサイトを作っていると、バナーを作成する機会というのは少なからず発生します。
私は、バナー作成が正直ちょっと苦手で、webのデザインからしかやってないせいか、グラフィックの領域のような気がしてしまい、いつも悩まされています。
そんな時は、やはり、他のバナーは一体どんな感じなのか？？
を知るのが大切だと思います。 
goole画像検索しても出てきますが、バナーを集めたサイトをご紹介させていただきます。
<h2>バナーデザイン・サンプルデータベース</h3>
<a href="http://aka-design.sub.jp/bd/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5180" alt="バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）" src="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg 1024w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-300x165.jpg 300w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-228x126.jpg 228w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://aka-design.sub.jp/bd/" target="_blank">バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）</a>
&nbsp;
<h2>バナーデザインアーカイブ</h3>
<a href="http://banner.keizine.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5181" alt="バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！" src="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg 1024w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-300x165.jpg 300w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-228x126.jpg 228w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！</a>
&nbsp;
<h2>バナーデザインギャラリー</h3>
<a href="http://www.banner-design-gallery.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5182" alt="バナーデザインギャラリー Banner Design Gallery" src="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg 1024w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-300x165.jpg 300w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-228x126.jpg 228w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://www.banner-design-gallery.com/" target="_blank">バナーデザインギャラリー | Banner Design Gallery</a>
&nbsp;
<h2>バナーデザイン専門ギャラリーサイト レトロバナー</h3>
<a href="http://retrobanner.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5183" alt="バナーデザイン専門ギャラリーサイト レトロバナー" src="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg 1024w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-300x165.jpg 300w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-228x126.jpg 228w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a> 
<a class="link" href="http://retrobanner.net/" target="_blank">バナーデザイン専門ギャラリーサイト | レトロバナー</a>
&nbsp;
他にも作るコツ等を説明してくれているブログも紹介します！
<a href="http://www.find-job.net/startup/tips-of-banner">有名企業の事例から学ぶ！高品質なバナー広告を作るための「コツ＆レイアウト」集 | Find Job ! Startup</a>
&nbsp;
<a href="http://nanapi.co.jp/blog/2013/10/02/make-banner-speedy/">新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog</a>
&nbsp;
<a href="http://liskul.com/banner_layout-1143">勝てるバナーレイアウト20選！│レイアウトに悩んだ時の虎の巻</a>
&nbsp;
&nbsp;
ささってかっこよくバナー作れるようになりたいですね・・・

バナー作成に困った時に見たいサイト7選

本日の日経朝刊に、シャープがどんな形にもできる液晶パネルを開発、との記事があった。
サンプルで載っていたのはこんな感じ。
<a href="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5108" alt="Free_Form_Display1_140617_588x" src="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg" width="588" height="441" srcset="/uploads-archive/2014/06/Free_Form_Display1_140617_588x.jpg 588w, /uploads-archive/2014/06/Free_Form_Display1_140617_588x-300x225.jpg 300w, /uploads-archive/2014/06/Free_Form_Display1_140617_588x-228x171.jpg 228w" sizes="(max-width: 588px) 100vw, 588px" /></a>
記事によると、曲線的なラインをつけたり、穴を空けたりすることも可能だという。
&nbsp;
真ん中のやつが全部モニタになっていたり
<a href="/uploads-archive/2014/06/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5126" alt="1" src="/uploads-archive/2014/06/1.png" width="656" height="328" srcset="/uploads-archive/2014/06/1.png 656w, /uploads-archive/2014/06/1-300x150.png 300w, /uploads-archive/2014/06/1-228x113.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
ハンドル内がモニタになる可能性もある。
<a href="/uploads-archive/2014/06/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-5124" alt="2" src="/uploads-archive/2014/06/2.png" width="656" height="328" srcset="/uploads-archive/2014/06/2.png 656w, /uploads-archive/2014/06/2-300x150.png 300w, /uploads-archive/2014/06/2-228x113.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
&nbsp;
あとは丸いモニタはいろんなところで出てくるかもしれない。
<a href="/uploads-archive/2014/06/3.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-5125" alt="3" src="/uploads-archive/2014/06/3-290x300.png" width="290" height="300" srcset="/uploads-archive/2014/06/3-290x300.png 290w, /uploads-archive/2014/06/3-228x235.png 228w, /uploads-archive/2014/06/3.png 519w" sizes="(max-width: 290px) 100vw, 290px" /></a>
&nbsp;
&nbsp;
おそらく、ばらばら過ぎて対応しきれないのでデザインとしては今まで通りでよいかと思われるが、
特定のシチュエーションでの閲覧が多いと予想される場合はあるかもしれないのでメモ。
&nbsp;
&nbsp;

四角形だけじゃない、これからのモニタとWebデザインの形

前回css3のアニメーションの記事を書きましたが、
<a href="/designer/css3%e3%81%aeanimation%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e4%ba%88%e6%83%b3%e4%bb%a5%e4%b8%8a%e3%81%ab%e7%b0%a1%e5%8d%98%e3%81%a0%e3%81%a3%e3%81%9f%ef%bc%81.html">css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社</a>
タイトルのようなwebサービスがあるようです。
その名も、<a href="http://bouncejs.com/" target="_blank">Bounce.js</a>
四角いボックスのアニメーションを、
様々な項目から設定でき、css3でエクスポートできます。
エクスポートのソースかなり長いですね笑
&nbsp;
アニメーションのパターンも用意されています。
<a href="http://bouncejs.com/" target="_blank" class="link">Bounce.js</a>
&nbsp;

css3アニメーションをwebブラウザ上で作成できるサービス

ECサイトなどでは、
新商品や人気の商品、優先的に売りたい商品などを知らせるための手段として、
「おすすめ」や「売れてます！」といった文句の書かれたアイキャッチアイコンが度々使われます。
何気なく目にするものですが、効果は大きく、
商品を目立たせるだけでなく、
ECサイト以外でもユーザーが迷わないようにするためにも使われる、重要な要素です。
&nbsp;
今回このアイキャッチアイコンで、よく使われるデザインをまとめてみました。
&nbsp;
<h3>シンプル系</h4>
<img decoding="async" loading="lazy" title="文字を対象に添える" alt="文字を対象に添える" src="/uploads-archive/2014/06/icon01.jpg" width="240" height="240" />
文字を対象に添える
&nbsp;
<img decoding="async" loading="lazy" title="四角で囲う" alt="四角で囲う" src="/uploads-archive/2014/06/icon02.jpg" width="240" height="240" />
四角で囲う
&nbsp;
<img decoding="async" loading="lazy" title="円で囲う" alt="円で囲う" src="/uploads-archive/2014/06/icon03.jpg" width="240" height="240" />
円で囲う
&nbsp;
<img decoding="async" loading="lazy" title="バクダンで囲う" alt="バクダンで囲う" src="/uploads-archive/2014/06/icon04.jpg" width="240" height="240" />
バクダンで囲う
&nbsp;
<img decoding="async" loading="lazy" title="吹き出しで囲う" alt="吹き出しで囲う" src="/uploads-archive/2014/06/icon05.jpg" width="240" height="240" />
吹き出しで囲う
&nbsp;
<img decoding="async" loading="lazy" title="三角で囲い、端におく" alt="三角で囲い、端におく" src="/uploads-archive/2014/06/icon06.jpg" width="240" height="240" />
三角で囲い、端におく
&nbsp;
<h3>装飾系</h4>
<img decoding="async" loading="lazy" title="帯をつける" alt="帯をつける" src="/uploads-archive/2014/06/icon07.jpg" width="240" height="240" />
帯をつける(斜め)
&nbsp;
<img decoding="async" loading="lazy" title="帯をつける(水平)" alt="帯をつける(水平)" src="/uploads-archive/2014/06/icon08.jpg" width="240" height="240" />
帯をつける(水平)
&nbsp;
<img decoding="async" loading="lazy" title="リボンをつける" alt="リボンをつける" src="/uploads-archive/2014/06/icon09.jpg" width="240" height="240" />
リボンをつける
&nbsp;
これらの場所を変えてみたり、
テクスチャ、グラデーション、シャドウなどの組み合わせを変えたりして、
よりよいものを見つけたいです。

アイキャッチアイコンのパターンをまとめてみました

ふとitunesのアプリを見ていたら、いいものを見つけました。
その名も「Stache」。
<a href="https://itunes.apple.com/jp/app/stache/id870659406?mt=12" target="_blank">Mac App Store &#8211; Stache</a>
どんなアプリかというと、
webサイトのキャプチャを撮って保存して、
一覧で見る事が出来、検索も簡単にできてしまうというものです。
自分だけのwebデザインギャラリーを作れるということですね！！
便利ですね！
webデザイナーは常日頃、いいデザインに触れて、ストックしておかないといけないですから、
うってつけですね！
&nbsp;
説明では、
視覚的なブックマーク、コンテンツの検索、フルページのアーカイブをよりスマートにブックマークすることができるとな。
アプリサイトで紹介されている特長を載せます。
•••簡単にビジュアルブックマーク••• 
あらゆるページを美しいスクリーンショットで保存し、表示することができます。そして、ページをすばやく見分け、閲覧するのを手助けします。
•••コンテンツの検索••• 
サイト名またはページタイトルを思い出せない場合でも、ページを検索することが迅速かつ容易になります。
••ページ全体のスクリーンショットとWebアーカイブ•••• 
ページコンテンツやデザインをアーカイブにブックマークするため、ページ全体のスクリーンショットとウェブアーカイブが保存されます。ページの変更やオフラインの場合でもコンテンツを保存するので、感動的なデザインを完璧に収集できます。
•••素早くプレビュー•••
ブックマークを選び、スペースキーを押すだけで、すぐにフルスクリーンショットを表示できるので、stacheを離れる事なく、ページを見ることができます。
•••ブラウザ拡張••• 
Stacheは、SafariとChromeでシングルクリックと同じくらい簡単にブックマークがすることができます。Stacheアイコンを押すかAlt + Sを押してください。他のブラウザではブックマークレットが利用可能です。
•••  iCloud••• 
すべてのブックマークがiCloudに保存され、バックアップされます。すべてのAppleデバイスでアクセス可能です。
•••iPhoneやiPadで利用可能 ••• 
iOS用Stacheを取得すれば、どこからでもあなたのブックマークのライブラリーを閲覧することができます。
••その他の機能•••• 
&#8211; インポート/エクスポートのHTMLブックマークファイル 
&#8211; エクスポートフルページのスクリーンショットやWebアーカイブ 
&#8211; タグ付け 
&#8211; URLスキームをサポート 
&#8211; URLの共有
&nbsp;
お粗末な翻訳ですいません・・・
こちらのアプリは700円です！
かなりいいアプリだと思います！
他にもこのようなアプリがありますので、ご紹介します。
&nbsp;
<a href="https://itunes.apple.com/jp/app/ember-screenshot-annotate/id402456742?mt=12" target="_blank">Mac App Store &#8211; Ember &#8211; Screenshot, Annotate and Share</a>
&nbsp;
こちらのアプリを使用していらっしゃる方のブログも紹介します。
&nbsp;
<a href="http://design.kayac.com/topics/2014/04/ember.php">１０秒以内に、ここ１年で見てきたデザインが出せますか？「Ember」活用まとめ | KAYAC DESIGNER&#8217;S BLOG &#8211; デザインやマークアップの話</a>
&nbsp;

webデザイン収集にもってこいなアプリ「Stache」

webデザイン力ってどうやったらあがるだろうかと、制作するたびに思わされますが、
そんな悩みを少し解決してくれるような記事達と出会いましたので、ご紹介させていただきます。
&nbsp;
まずは一気にご紹介させていただきます！！
&nbsp;
<a href="http://www.webcreatorbox.com/tech/improve-design-skills/">Webデザインのスキルを磨こう！Webサイト模写のススメ | Webクリエイターボックス</a>
<a href="http://liginc.co.jp/web/design/photoshop/74339">模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG</a>
<a href="http://blog.idea-clippin.com/?p=332">WEBデザインが短期間に上達した方法 | FEVDES BLOG</a>
<a href="http://blog.cntlog.net/?p=820">ぼっちでも独学でWEBデザイナーになる方法（基礎編） – Cntlog</a>
<a href="http://www.web-labo.jp/archives/1946">Webデザイン完コピのススメ！ゼロから始める初心者は、まず沢山のページを模写し真似して作るべし！ | WEB-LABO</a>
<a href="http://www.actzero.jp/developer/report-3826.html">Webデザイン力をアップさせる4つのアクション | 株式会社アクトゼロ／動画コンテンツマーケティング・ソーシャルメディアマーケティング</a>
<a href="http://nishizm.com/index.php/webdesign/webdesign-study/">独学Webデザイナーの独自なWebデザイン学習法 | ニシザワのブログ</a>
&nbsp;
<h2>webデザイン力をUPさせるために必要な事</h3>
&nbsp;
上記の記事を踏まえて、わかったことは、
・情報収集をする(webサイトをキャプチャ、ブックマークして手元に置いておく)
・サイトの模写をする
することです。
&nbsp;
情報収集をすることで、目を鍛え、最新のデザインに触れることができます。
また、収集されたものを見ると、自分の趣味趣向がわかります。
&nbsp;
そして、収集するだけでは技術は上がらないので、
そこで模写をする必要があるようです。
&nbsp;
模写はキャプチャしたサイトをphotoshopで同じように作っていくのですが、
模写のポイントとしては、以下のようなことが挙げられていました。
<blockquote>* デザインテイストを決めている要素　（写真・色・パーツの作り・フォントだったり、それらが複雑にからみ合っています） 
 * 情報の強弱・グルーピング（大きさや余白、色によって意味が違ってきます） 
 * レイアウトの幅（全体の大きさや例えば2カラムの場合の左右のカラムの大きさ。少しの幅の違いでバランスがかわります 
 * 余白間（マージン）の取り方 
 * 見出しやテキストとのジャンプ率の付け方 
 * 使用色の割合と使用数、差し色の使い方 
 * 要素同士のサイズ感のバランス 
 * 際立たせたい箇所の目立たせ方</blockquote>
これらを踏まえ、 
「良い」と思った理由を分析し、キーワード化して認識すると、 
おのずと良いデザインができるようになるのではないかということですね。
&nbsp;
そしてphotoshopの扱い方もまなぶことができます。 
グラデーション、シャイプの生成、テクスチャ等々、真似しようとすれば、 
どのように作成したらいいのかを考えるようになります。
完成したpsdはそれをもとにコーディングもやると、 
html構成、class/idのつけかた、css等を学ぶ勉強になるとなる思います。
&nbsp;
いいことだらけですね！！
これはやるしかない！！
と思いつつ僕もやってますが、なかなか取り組めてません・・・
&nbsp;
もっと取り組んで自分なりの考えができたら、またそれをまとめたいと思います。
&nbsp;
&nbsp;
&nbsp;

webデザイン力をUPさせるために必要な事を教えてくれた記事7選

最近、よく目にするようになった「Git」。
最初は無視していたのですが、わかりやすい記事・大変便利だと記事を目にする度、
ちょっとやってみようかなと思っている今日この頃。
よくよく中身を見ていると、うちのような会社は導入すべきだろっっと思わされる程良く感じます。
まだ実践していないので、実際の導入記事は書く事はできませんが、わかりやすくGitについて説明してくれる記事を後で自分も読むためにも、そして弊社でも導入のきっかけとなる期待も込めて、紹介したいと思います。
&nbsp;
<h2>もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選</h3>
<a href="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-4856" alt="もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選 Find Job ! Startup" src="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-1024x541.jpg 1024w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-300x158.jpg 300w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-228x120.jpg 228w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a>
ここのスライドを読めばもう十分かもしれない・・・というぐらいのもので、
Gitというものがなんなのかをわかりやすく説明してくれるスライドが揃っています！
&nbsp;
<a href="http://www.find-job.net/startup/7-git-slides">もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選 | Find Job ! Startup</a>
&nbsp;
<h2>Git初心者がクラスメイトに使い方を講義してみる</h3>
<a href="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-4855" alt="Git初心者がクラスメイトに使い方を講義してみる - Qiita" src="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-1024x541.jpg 1024w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-300x158.jpg 300w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-228x120.jpg 228w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a>
基本的なことから、用語解説、そしてキャプチャつきで導入までの説明をしてくれています。(windows)
&nbsp;
<a href="http://qiita.com/rytmrt/items/67fc52b8444207332ac3">Git初心者がクラスメイトに使い方を講義してみる &#8211; Qiita</a>
&nbsp;
<h2>本当は怖くない！デザイナーがGitを大好きになった♡５つの理由</h3>
<a href="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-4859" alt="本当は怖くない！デザイナーがGitを大好きになった♡５つの理由 nanapi TechBlog" src="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-1024x541.jpg 1024w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-300x158.jpg 300w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-228x120.jpg 228w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a>
nanapiさんのデザイナーさんの記事で、nanapiさんはアルバイトの方でも導入しているようで、
記事の内容としては、プログラマ向けというよりデザイナー向けに書かれた内容になっているので、
自分的にはなにが出来るのかというイメージが端的につきました。
&nbsp;
<a href="http://nanapi.co.jp/blog/2014/04/23/git-love/">本当は怖くない！デザイナーがGitを大好きになった♡５つの理由 | nanapi TechBlog</a>
&nbsp;
<h2>SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった</h3>
<a href="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-4857" alt="SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった ごりゅご.com" src="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-1024x541.jpg" width="399" height="210" srcset="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-1024x541.jpg 1024w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-300x158.jpg 300w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-228x120.jpg 228w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac.jpg 1224w" sizes="(max-width: 399px) 100vw, 399px" /></a>
Gitをつかうためのアプリとして「SourseTree」というGUIで操作できるものがあるようなので、そちらの使い方も説明してくれています。
なにより、wordpressというよく案件でかかわることを題材にしているので、参考になりました。
&nbsp;
<a href="http://goryugo.com/20140116/sourcetree_git/">SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった | ごりゅご.com</a>
&nbsp;
<h2>サルでもわかるGit入門</h3>
<a href="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-4858" alt="Gitを使ったバージョン管理【Gitの基本】 サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 どこでもプロジェクト管理バックログ" src="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-1024x541.jpg" width="399" height="210" srcset="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-1024x541.jpg 1024w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-300x158.jpg 300w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-228x120.jpg 228w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb.jpg 1224w" sizes="(max-width: 399px) 100vw, 399px" /></a>
こちらはもうそうとう有名だとは思いますが、一応ご紹介。
入門編、応用編、さらに逆引きで気になることが調べることができちゃいます。
説明はもちろん、「SourseTree」を元として、導入のチュートリアルもあり、メニュー化されているので、とてもわかりやすい記事、というかもうこれはサイトですね。
&nbsp;
<a href="http://www.backlog.jp/git-guide/intro/intro1_1.html">Gitを使ったバージョン管理【Gitの基本】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ</a>
&nbsp;
<h2>おわりに</h3>
今まではプログラマーが使うものとイメージがあったのですが、
サイトの設計書、html・css・js、wordpressのテーマ等、自分が日々制作しているものにも関わりがあり、
なんといっても、「実はサイトマップ変わったよ」「最新どれだっけ？」「あ、そのファイル更新してました」「以前修正したものが戻っちゃった」ことが起こるので、そちらを軽減出来るのかなと思い、便利だと思いました。
htmlのやりとりでも、社内外問わず、「ここの部分変わりました！」と伝えることが多いので、いちいち打ち合わせしてたら大変だし、漏れが発生しちゃうので、差分を教えてくれるのはとてもありがたいですね！
複数人で取り組む場合はこれぜひ導入すべきですね！
&nbsp;

Gitに挑戦してみたい！！と思ったら読んでみたい記事

今回は、最近では数が少なくなってきていますが、
イラストを装飾に使ったサイトを探してみました。
&nbsp;
<a href="http://www.yamashita-fruit.com/" target="_blank"><img decoding="async" loading="lazy" title="山下フルーツ農園" alt="山下フルーツ農園" src="/uploads-archive/2014/04/43d4a186e626f3567465de39c1bc374e.jpg" width="656" height="396" /></a>
<a class="link" href="http://www.yamashita-fruit.com/" target="_blank">山下フルーツ農園</a>
小さなイラストが背景に散らばってる感じが面白いです。
&nbsp;
<a href="http://www.kao.co.jp/asience/" target="_blank"><img decoding="async" loading="lazy" title="花王　アジエンス" alt="花王　アジエンス" src="/uploads-archive/2014/04/901a7d47f80080ae8fcaca720b35b40f.jpg" width="656" height="396" /></a>
<a class="link" href="http://www.kao.co.jp/asience/" target="_blank">花王　アジエンス 美容液シャンプー　コンディショナー　トリートメント</a>
単色ではなく、カラフルな植物系の装飾が軽く背景にあてられているのがきれいです。
&nbsp;
<a href="http://madonna-kyoto.jp/" target="_blank"><img decoding="async" loading="lazy" title="MADONNA" alt="MADONNA" src="/uploads-archive/2014/04/MADONNA.jpg" width="656" height="396" /></a>
<a class="link" href="http://madonna-kyoto.jp/" target="_blank">MADONNA styling / MADONNA hair&amp;make up | マドンナ スタイリング / ヘア&amp;メイクアップ | 京都のパーソナルスタイリスト </a>
シンプルですが、枠の感じから高級感が出ています。
&nbsp;
<a href="http://tail-of-hope.com/" target="_blank"><img decoding="async" loading="lazy" title="Catch the Tail of Hope" alt="Catch the Tail of Hope" src="/uploads-archive/2014/04/Catch_the_Tail_of_Hope.jpg" width="656" height="396" /></a>
<a class="link" href="http://tail-of-hope.com/" target="_blank">Catch the Tail of Hope</a>
まばらに配置された不規則な図形が面白いです。
&nbsp;
<a href="http://www.mitsu-mame.jp/" target="_blank"><img decoding="async" loading="lazy" title="ロート製薬｜蜜まめ(R)" alt="ロート製薬｜蜜まめ(R)" src="/uploads-archive/2014/04/34670506bb2ed78b2551d7948aef1ba6.jpg" width="656" height="396" /></a>
<a class="link" href="http://www.mitsu-mame.jp/" target="_blank">ロート製薬｜蜜まめ(R)</a>
個人的に気に入っているサイトですが、細かな装飾と動きが面白いです。

イラストや模様による装飾を使ったサイト

さくっと時間をかけずインパクトのあるバナーなどをつくろうとした時マンガ風のデザインを取り入れると楽に作れるということに今さらながら気付きそんな素材を提供してくれるサイトを自分が見つけられた範囲でまとめてみた。
<h2>一コマ漫画素材</h3>
<a href="http://manga1.net/" target="_blank">http://manga1.net/</a>
素材の数は少ないが、連絡・商用利用可能な人物素材を提供しているサイト。
<a href="/uploads-archive/2014/04/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4756" alt="1" src="/uploads-archive/2014/04/1.png" width="656" height="354" srcset="/uploads-archive/2014/04/1.png 656w, /uploads-archive/2014/04/1-300x161.png 300w, /uploads-archive/2014/04/1-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
インパクトのあるベース素材が入手できそう。
<a href="/uploads-archive/2014/04/a.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4761" alt="a" src="/uploads-archive/2014/04/a.png" width="656" height="354" srcset="/uploads-archive/2014/04/a.png 656w, /uploads-archive/2014/04/a-300x161.png 300w, /uploads-archive/2014/04/a-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
※「一コマ漫画素材」の素材を使用
&nbsp;
<h2>無料！マンガ素材辞典β</h3>
<a href="https://www.sozaijiten.com/manga/" target="_blank">https://www.sozaijiten.com/manga/</a>
「マンガ 素材」でググって1番に出てくるサイト。たぶん慣れた人は御用達な感じ。
<a href="/uploads-archive/2014/04/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4758" alt="2" src="/uploads-archive/2014/04/2.png" width="656" height="354" srcset="/uploads-archive/2014/04/2.png 656w, /uploads-archive/2014/04/2-300x161.png 300w, /uploads-archive/2014/04/2-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
景観、高架線、文字、吹き出し、キャラクターなどなんでも揃う。
まだベータ版なので量が少ないが今後に期待
<a href="/uploads-archive/2014/04/b.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4760" alt="b" src="/uploads-archive/2014/04/b.png" width="656" height="354" srcset="/uploads-archive/2014/04/b.png 656w, /uploads-archive/2014/04/b-300x161.png 300w, /uploads-archive/2014/04/b-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
※「無料！マンガ素材辞典β」の素材を使用
&nbsp;
<h2>擬音祭り</h3>
<a href="http://www.gion-matsuri.net/" target="_blank">http://www.gion-matsuri.net/</a>
擬音語だけを集めたサイト。
<a href="/uploads-archive/2014/04/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4754" alt="3" src="/uploads-archive/2014/04/3.png" width="656" height="354" srcset="/uploads-archive/2014/04/3.png 656w, /uploads-archive/2014/04/3-300x161.png 300w, /uploads-archive/2014/04/3-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
言葉のチョイスに疑問が残るが使えるサイト
<a href="/uploads-archive/2014/04/c.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4759" alt="c" src="/uploads-archive/2014/04/c.png" width="656" height="354" srcset="/uploads-archive/2014/04/c.png 656w, /uploads-archive/2014/04/c-300x161.png 300w, /uploads-archive/2014/04/c-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
※「擬音祭り」の素材を使用
&nbsp;
<h2>フキダシデザイン</h3>
<a href="http://fukidesign.com/" target="_blank">http://fukidesign.com/</a>
マンガ素材でなくても有名なサイト。
<a href="/uploads-archive/2014/04/4.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4755" alt="4" src="/uploads-archive/2014/04/4.png" width="656" height="354" srcset="/uploads-archive/2014/04/4.png 656w, /uploads-archive/2014/04/4-300x161.png 300w, /uploads-archive/2014/04/4-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
マンガだけでく多方面で利用したいサイト
<a href="/uploads-archive/2014/04/d.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4762" alt="d" src="/uploads-archive/2014/04/d.png" width="656" height="354" srcset="/uploads-archive/2014/04/d.png 656w, /uploads-archive/2014/04/d-300x161.png 300w, /uploads-archive/2014/04/d-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
※「フキダシデザイン」の素材を使用
&nbsp;
<h2>背景素材(複数)</h3>
<a href="http://www.oujyukai.com/home/material/sharing.html" target="_blank">http://www.oujyukai.com/home/material/sharing.html</a>
h<a href="ttp://www.manga-gai.net/mangakasoudan/haikei.html" target="_blank">ttp://www.manga-gai.net/mangakasoudan/haikei.html</a>
背景は大変なのかあまりまとまったサイトがなさそう。
<a href="/uploads-archive/2014/04/5.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4757" alt="5" src="/uploads-archive/2014/04/5.png" width="656" height="354" srcset="/uploads-archive/2014/04/5.png 656w, /uploads-archive/2014/04/5-300x161.png 300w, /uploads-archive/2014/04/5-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
背景は写真を見つけてPhotoshopで加工したほうが良さそう
<a href="/uploads-archive/2014/04/e1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4765" alt="e" src="/uploads-archive/2014/04/e1.png" width="656" height="354" srcset="/uploads-archive/2014/04/e1.png 656w, /uploads-archive/2014/04/e1-300x161.png 300w, /uploads-archive/2014/04/e1-228x123.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
※「マンガ工房」の素材を使用

マンガ系の素材を提供しているサイト

<h2>Kuler</h3>
言わずと知れたKulerですが、 
cs4からはデフォルトで入っているようです。 
配色のパターンを探すのにとても便利です！ 
<img decoding="async" loading="lazy" class="alignnone wp-image-4744" alt="スクリーンショット 2014-04-22 13.41.30" src="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png" width="641" height="508" srcset="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png 838w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-300x238.png 300w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-228x180.png 228w" sizes="(max-width: 641px) 100vw, 641px" />
&nbsp;
<a href="http://www.adobe.com/jp/products/kuler.html" target="_blank">デザイナー向け色見本を作成 | Adobe Kulerをダウンロード</a>
&nbsp;
<h2>Velositey</h3>
こちらはなんと数クリックでwebサイトのワイヤーフレームができてしまうという代物です。 
テンプレートですので、完全に思った通りにはできないですが、 
近いものを作って後は自分で編集すれば良いかと思います。 
<img decoding="async" loading="lazy" class="alignnone wp-image-4743" alt="スクリーンショット 2014-04-22 13.41.58" src="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png" width="640" height="536" srcset="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png 839w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-300x251.png 300w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-228x191.png 228w" sizes="(max-width: 640px) 100vw, 640px" />
&nbsp;
実際に作成してみました。 
ちょっとスペースの開け方は要調整ですね。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-4741" alt="sd-proof-XXX-home-v0" src="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg" width="640" height="601" srcset="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg 1024w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-300x282.jpg 300w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-228x214.jpg 228w, /uploads-archive/2014/04/sd-proof-XXX-home-v0.jpg 1700w" sizes="(max-width: 640px) 100vw, 640px" />
<a href="http://dandkagency.com/velositey/" target="_blank">Velositey &#8211; Website Layout Builder for Photoshop</a>
&nbsp;
<h2>Distribute Layer Spacing Horizontal</h3>
こちらは、水平方向にならんだオブジェクトを等間隔で並べてくれるプラグインです！ 
幅が違うオブジェクトを目測で並べたりする時もあり、その際にいいかもしれません。
&nbsp;
before 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4745" alt="スクリーンショット 2014-04-22 13.49.20" src="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png" width="502" height="133" srcset="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png 502w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-300x79.png 300w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-228x60.png 228w" sizes="(max-width: 502px) 100vw, 502px" />
after 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" />
端のオブジェクトを元に等間隔で並べてるようですね。
&nbsp;
<a href="http://morris-photographics.com/photoshop/scripts/distribute-horizontally.html" target="_blank">Adobe Photoshop Scripts | Trevor Morris Photographics</a>
&nbsp;
<h2>Transform Each 2.0</h3>
こちらは複数のオブジェクトを個々で変更するように、変形できるプラグイン(スクリプト)です。 
例えば、３つ並んでいる同じオブジェクトをちょっと小さくしたいなって思う時、一気に変更できたらいいのになぁ 
と思うことありませんか？ 
全部選択して変形しようとすると、おかしくなっちゃうので、これは地味に便利かと思います。
例えば下の画像を全部70％に縮小したい場合、 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" />
レイヤーを全部選択して、このプラグインを発動させると・・・ 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4747" alt="スクリーンショット 2014-04-22 13.50.51" src="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png" width="498" height="119" srcset="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png 498w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-300x71.png 300w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-228x54.png 228w" sizes="(max-width: 498px) 100vw, 498px" />
一気に変形することができます！ 
素晴らしい！！
<a href="http://blog.kam88.com/en/transform-each-20.html" target="_blank">Captain Awesome &#8211; English &#8211; Transform Each 2.0</a>
&nbsp;
<h2>Tych Panel</h3>
こちらは複数の写真を設定した内容のもと、自動的に並べてくれるプラグインです。 
メインビジュアルや、グリッド状で写真を並べたい時にいいかもしれません。
設定は、写真と写真のスペース、ボーダーの設定、場所等いろいろできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-4746" alt="スクリーンショット 2014-04-22 13.59.11" src="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png" width="640" height="521" srcset="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png 836w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-300x244.png 300w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-228x185.png 228w" sizes="(max-width: 640px) 100vw, 640px" />
試しにデフォルトのTopでやってみました。
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-4742" alt="スクリーンショット 2014-04-22 14.03.30" src="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png" width="640" height="403" srcset="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png 794w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-300x188.png 300w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-228x143.png 228w" sizes="(max-width: 640px) 100vw, 640px" />
これは設定さえすれば、だいぶ手間が省けそうですね！
&nbsp;
<a href="http://coliss.com/articles/build-websites/operation/design/photoshop-extension-tychpanel.html" target="_blank">複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel | コリス</a>

とっても便利なphotshopのプラグイン5選

border-radiusやbox-shadow、transitionなど、PCサイトでもCSS3を使うことは徐々に増えてきました。
今回は、そんなCSS3を使ってアニメーションをしているサイトで、
ちょっとひと味違う感じのサイトを集めてみました。
&nbsp;
<a class="link" href="http://giorgibou.com/" target="_blank">Georgina Bousia | Architect and Graphic Designer</a>
<a href="http://giorgibou.com/" target="_blank"><img decoding="async" loading="lazy" alt="Georgina Bousia" src="/uploads-archive/2014/04/Georgina.png" width="656" height="382" /></a>
&nbsp;
メインビジュアルに使われている、微かに白がかった菱形がゆっくり移動するアニメーションがcss3によって実装されています。 
ナビゲーションにbefore疑似要素でつけられた伸び縮みするアンダーラインも面白いです。
&nbsp;
<a class="link" href="http://www.newbalance.co.jp/wellness/" target="_blank">Wellness｜New Balance Japan</a>
<a href="http://www.newbalance.co.jp/wellness/" target="_blank"><img decoding="async" loading="lazy" alt="Wellness" src="/uploads-archive/2014/04/Wellness.png" width="656" height="521" /></a>
&nbsp;
メインビジュアルの動画もインパクトがありますが、コンテンツへのリンクをマウスでホバーしたときの画像の拡大と、変形が面白いです。
&nbsp;
<a class="link" href="https://trip-u.com/" target="_blank">TRIP(トリップ)：観光･体験商品の売買プラットフォーム</a>
<a href="https://trip-u.com/" target="_blank"><img decoding="async" loading="lazy" alt="TRIP(トリップ)" src="/uploads-archive/2014/04/58bf890e57cf7b71d2ae9ffda86c3885.png" width="656" height="419" /></a>
メインビジュアルのテキスト部分がスライダーと連動してアニメーションしています。 
この部分と下のコンテンツ画像はマウスでホバーすると拡大されます。
ホバーすると画像が拡大されるアニメーションの使われたサイトが増えてきている印象を感じました。
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2014/08/05

2014/08/05

2014/07/30

2014/07/30

2014/07/23

2014/07/16

2014/07/09

2014/07/02

2014/06/25

2014/06/17

2014/06/03

2014/06/03

2014/05/21

2014/05/13

2014/04/23

2014/04/23

2014/04/23

2014/04/16