webサイトの制作しているときに、毎回ではないんですが、
時々利用する便利なサイトをご紹介します。
&nbsp;
地味に役立つのでブックマークおすすめです！
&nbsp;
<h3>Metallic Ratio</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service01.jpg" alt="" width="656" />
&nbsp;
レイアウト等のバランスを決める時なんかに重宝します。
いわゆる黄金比、白銀比、はたまた、青銅比を、 いろいろなパターンで、教えてくれます。
簡単な図もありますので、視覚的にもわかりやすいです。
&nbsp;
<a href="http://ratio.b-shiki.com/" target="_blank">Metallic Ratio</a>
&nbsp;
<h3>PXtoEM.com</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service02.jpg" alt="" width="656" />
&nbsp;
主にフォントサイズですが、サイト制作にあたっていろんな単位で指定できますが、
単位毎で、大きさがわからないこともあります。
&nbsp;
それをわかりやすく表にしてくれています。
記入すると、変換してくれるフォームあるので便利です。
&nbsp;
<a href="http://pxtoem.com/" target="_blank">PXtoEM.com</a>
&nbsp;
<h3>css3clickchart</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service03.jpg" alt="" width="656" />
&nbsp;
CSS3のコードって長く、ちょっと複雑になったので、いちいち覚えていられません。。。
そんな時に、このCSS3のコードを教えてくれるサイトが便利です。(英語ですが)
&nbsp;
大きなページ遷移がなく、一画面で、
コード、デモ、サポートブラウザ等が表示されているので、
ありがたいサイトです。
&nbsp;
<a href="http://css3clickchart.com/" target="_blank">css3clickchart</a>
&nbsp;
<h3>j-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service04.jpg" alt="" width="656" />
&nbsp;
jQueryのプラグインを紹介しているサイトです。
プラグインないかな?って探す時に便利です。
カテゴリ別に分かれているので、検索も割りとしやすいです。
&nbsp;
<a href="http://jquery.kachibito.net/" target="_blank">j-snippet</a>
&nbsp;
<h3>WP code-snippet</h4>
&nbsp;
<img decoding="async" src="/demo/abe/images/service05.jpg" alt="" width="656" />
&nbsp;
wordpressのコードのスニペットです。
日本語なのでわかりやすいです！
一覧しかないように見えて、
特徴やタグで検索できるので、
まずはこちらで探してみると見つかるかもしれません。
&nbsp;
<a href="http://kachibito.net/wp-code" target="_blank">WP code-snippet</a>

web制作にちょっと役立つサイト５つ

何度でも発信していこうと思います。今置かれている立場そして、向かう先。
<h2>過去-今置かれている現状-</h3>
まずは、この記事を読んでいただきたい。 さすがに、田原さん非常によくまとまっていて現状を端的に述べてくれています。
<a href="http://www.taharasoichiro.com/cms/?p=892" target="_blank">絶不調企業シャープ、ソニー、パナソニックと絶好調企業ユニクロ、ここが決定的に違う</a>
<blockquote>かつてシャープは、「液晶のシャープ」として一世を風靡した。 
ところがいま、過剰な設備投資に加え、主力商品の液晶テレビや太陽電池で 
赤字に歯止めがかからず、深刻な経営不振に喘いでいる。 
数年前まで液晶テレビ「ＡＱＵＯＳ」が飛ぶように売れていた状況からは、 
にわかに信じがたい凋落ぶりだ。
この状況を受けて進められた台湾の鴻海（ホンハイ）精密工業との資本業務提携も、 
シャープ株の急落を受け、出資を棚上げされている。 
このため、２０１３年３月期には、最終赤字が２５００億円へと大幅に拡大するとの 
予想を発表。 
創立１００周年を迎えながら、シャープは創業以来最大の危機に直面しているのだ。
しかし、経営不振はシャープに限ったことではない。 
日本の電機産業が軒並み深刻な業績悪化に陥っている。 
パナソニックは３万６０００人、ソニーやＮＥＣは１万人規模の大幅な人員削減を 
打ち出している。日本の電機産業全体が危機的状況に陥っているのだ。
そもそも歴史を振り返ると、まず戦後すぐに繊維産業が日本の産業を牽引してきた。 
僕が高校を卒業するころは、東洋紡や鐘紡といった繊維メーカーが、就職する学生の 
人気企業だった。繊維産業は、発展途上の日本を支えていたのだ。 
８０年代には、繊維メーカーに替わり、家電メーカーの時代になる。 
経済発展の段階に応じて、主力となる産業が変わっていくのである。 
どの国も、同じような発展のプロセスをたどるのだ。 
家電産業でいえば、コモディティ化が進んだことで、いままで基幹商品だったものが、 
うまみの薄い商品になり、逆に経営の足を引っ張っていくことになった。
いま日本は、家電の段階を過ぎた。 
新しい産業に取り組まなければならない時期を迎えているのだ。 
具体的に言うと、家電産業に替わるのはＩＴ産業だろう。 
ところが日本は、ＩＴ産業に取り組めていない。 
その証拠に、iPhoneのアップルにしてもWindowsのマイクロソフトにしても、 
みなアメリカの企業である。 
日本も家電産業からＩＴ産業へと替わっていかなくてはならない。 
ところが、そうなっていないところが家電産業の危機的状況のいちばんの 
原因なのだろう。
ユニクロの柳井正さんに、なぜユニクロはうまくいっているのか、と僕は 
聞いたことがある。 
下着メーカーや繊維メーカーは苦しんでいるのに、なぜユニクロはうまくいって 
いるのか、不思議に思ったからだ。 
柳井さんの答えははっきりしていた。「当たり前だ」と。
繊維産業は、経済発展のある段階で成長する産業なのだ。 
日本は繊維産業が発展する段階をすでに過ぎている。 
だから、ユニクロはすべて中国で生産し、日本で売ってきた。 
ところが、中国経済がだんだん成長してきた。当然、人件費も高くなる。 
そこで、今度は生産拠点をバングラデシュに移した。 
そして、今度は中国でユニクロの製品を売るようにしているのだ。
産業のプロセスはこのように発展し、成長する産業も変化していく。 
ところが日本は、いつまでも家電産業を中心にしてきた。 
本当は、ＩＴ産業をどう育成して、産業の基幹にするか、もっと真剣に 
考えなければならない。</blockquote>
<div> 長い引用になってしまいましたが、田原さんはこのあと、エネルギー産業に言及されていくので、割愛。このように、産業が変化していくなかで、我々はIT産業に携わっている。これからどうしていくのかいいのか、一つの成功事例を述べているのが次の記事。</div>
<h2> 未来-このようにしたい-</h3>
<a href="http://satoshi.blogs.com/life/2012/09/contents.html" target="_blank">Gangnam Style と韓国のコンテンツ戦略</a>
<blockquote>ここ一ヶ月ほどで、米国で一気にメジャーに躍り出た歌がある。韓国のタレント、PSY の Gangnam Style である。
７月にYoutube に公開した<a href="http://www.youtube.com/watch?v=9bZkp7q19f0&amp;feature=player_embedded" target="_self">プロモーションビデオ</a>が一億回以上再生されただけでもすごいが、Ellen&#8217;s Show で Britney Spears にダンスを教え（<a href="http://www.youtube.com/watch?v=QZmkU5Pg1sw" target="_self">参照</a>）、ABC の Google Morning Amerika で紹介され（<a href="http://www.youtube.com/watch?v=aS8mDE-SOVk" target="_self">参照</a>）、NBC の Today Show にゲストとして招かれて歌を披露し（<a href="http://www.youtube.com/watch?v=9bZkp7q19f0&amp;feature=player_embedded" target="_self">参照</a>）、Saturday Night Live がパロディを演じた（<a href="http://www.nbc.com/saturday-night-live/video/lids/1417085/" target="_self">参照</a>）。これほど完璧なタレントの売り出しは見たことがない。当然、iTunes Music のチャートでは堂々 No.1 だ。やはり Justin Biever のマネージャと契約したことが大きかった（<a href="http://mediadecoder.blogs.nytimes.com/2012/09/04/digital-notes-justin-biebers-manager-signs-korean-web-star-psy/" target="_self">参照</a>）。
偶然が生み出したスターなのか、最初から綿密に計画された結果作られたスターなのかは外からは分かりにくいが、韓国がここ数年力を入れて来た「コンテンツ輸出戦略」がついに効果を表しはじめた結果、と私は見ている。
８月２０日に Dogers スタジアムに PSY が来た時のビデオを見ると、かなり計画的に仕込まれて来たことがわかる（<a href="http://www.youtube.com/watch?v=jz4H5WI6bvY&amp;feature=player_embedded" target="_self">参照</a>）。メジャーリーグ・ベースボールは、単にスターが会場に来たからと言ってその人の曲を流したりはしない。これは、明らかなプロモーションだ。
「こんなお笑い芸人なら日本には腐るほどいる」 という批判する人もいるが、結局は結果がすべて。面白いコンテンツを持っていても、世界に売り出すのは簡単ではない。Apple の iPhone を見て「あんな携帯ならうちにも簡単に作れる」と言った日本のメーカーのエンジニアのセリフと妙に重なる。</blockquote>
隣の韓国は、内需に限界があると判断し、早くから輸出を積極的に展開している。 そして、資源がないと分かっているので「芸能」というコンテンツを国策として売りだしている。 iTunes Music チャート全米1位という結果を出していることに関する記事です。
<h2>まとめ</h3>
日本もいいものたくさん持っています。 続きはまた発信していきます。

海外展開に関する備忘録-気になったブログ記事-

jQueryで歩くアニメーションに挑戦

フルスクリーンのコンテンツイメージスライダーのjQueryプラグイン

【jQuery】サムネイルにいいねボタンとツイートボタンをつける

今回お仕事で、表示サイズが133px×55px(スマートフォン用なので、元の画像サイズは266px×110px)のバナーを作ることになったのですが、
どのように文字や写真などを配置するのが良いのか曖昧だったので、
小さくても良いバナーがなぜ良いのか、調べてみることにしました。
&nbsp;
今回調べたバナーは、<a href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ</a>というサイトに載っていた、
120px×60pxのものから選びました。
&nbsp;
今回は、レイアウトについて調べてみました。
こちらがそれぞれの要素の比率や配置を調べてみた結果です。
<img decoding="async" src="/uploads-archive/2012/10/banneｒ_hi.jpg" alt="" width="100%" />
調べてみたところ、すべてバナーがそうだったわけではありませんが、1:1、1:2や2:3、
さらに、1:1.61前後の黄金比(1:1.1618&#8230;)が使われているものも多かったです。
&nbsp;
また、写真やイラスト、アイコンといったイメージと、文字が、対極的に使われていることが多いようです。
イメージはイメージ、文字は文字とわけることで、見やすく、まとまった印象になるのだと思います。
&nbsp;
色は写真やイラストを除く領域では2～3色をベースにしていることが多いようです。
&nbsp;
今回調べたほとんどのバナーが3～4つの要素で構成されていました。
小さいバナーに限ったことではないですが、小さいバナーでは領域が小さいので、
何を伝えたいのかをはっきりとさせて、要素を絞り込んでデザインすることが、
より重要になってくるようです。
&nbsp;
&nbsp;
<h2>まとめ</h3>
・要素の比率や配置は、1:1、1:2、2:3や黄金比のような、決まった比率を用いるときれいにまとまりやすい。
・写真・イラストと文字は対極的に配置すると、まとまった印象になり、見やすい。
・写真・イラストを除く領域の色数は、2～3色をベースにすると、まとまりやすい。
・要素はできるだけ絞り込んで、伝えたいことをはっきりとさせる。
&nbsp;
&nbsp;
もちろんこれらは絶対的なものではありませんし、見落としも多くあると思いますが
これらをヒントにして、実際のバナー作りを行っていきたいと思います。

banneｒ_hi.jpg

小さいサイズの良いバナーのデザインを調べる

最近米国を中心にサブスクリプション・コマースというのが人気になっているらしく、
日本でも徐々に浸透しつつある現状のようです。
&nbsp;
サブスクリプション・コマースとは、定期購入型の販売モデルで、
例えば、 一ヶ月単位で金額を支払い、それ相応の商品を月毎で受けられるというものです。
&nbsp;
どのサービスも基本的にはなにか特化したものになり、
その道のプロであったり、長けた人達が
その人におすすめな商品や、適した商品を 選択し提供する形になります。
&nbsp;
現代では、物がありふれていて、どれが良くて、どれが悪いかなんてわかりづらいですが、
厳選したものを提供してくれるなら選ぶ手間も省けていいかもしれませんね。
そんなサービスを国内で運営しているものをご紹介します！
&nbsp;
<h2>GLOSSYBOX</h2>
<img decoding="async" src="/demo/abe/images/subec01.jpg" alt="" width="656" />
&nbsp;
コスメのサンプルが毎月送られてきます。
化粧品は数も多いし、新しいのもどんどん発売されるので、 自分に合った商品を探すためにいいかもしれませんね。
&nbsp;
<a href="http://glossybox.jp/" target="_blank">GLOSSYBOX</a>
&nbsp;
<h2>フリパン</h2>
<img decoding="async" src="/demo/abe/images/subec02.jpg" alt="" width="656" />
&nbsp;
こちらは、男性用のパンツが毎月７枚まで送られてきます。
このサービスはなんと無料らしいです。
なぜ無料なのかというと、パンツに広告がプリントされているからです。
タダコピみたいな感じですかね。
&nbsp;
<a href="http://www.free-pants.jp/" target="_blank">フリパン</a>
&nbsp;
<h2>SAKELIFE</h2>
<img decoding="async" src="/demo/abe/images/subec03.jpg" alt="" width="656" />
酒蔵を営んでいるプロの方が厳選したお酒を毎月送ってくれます。
お酒を楽しんでもらうために、まずは、軽いものから、 徐々に濃いものへと段階を経て送ってくださるそうです。
&nbsp;
<a href="http://sakelife.jp/" target="_blank">SAKELIFE</a>
&nbsp;
<h2>yamory</h2>
<img decoding="async" src="/demo/abe/images/subec04.jpg" alt="" width="656" />
&nbsp;
非常食の定期宅配サービスです。
こちらは、月額で支払い、商品は半年毎に送られてきます。
常に新しい非常食を保管しておけるイメージですね。
新しいのが送られてきたら、古いのを食べるみたいな。。。
&nbsp;
<a href="http://yamory.com/" target="_blank">yamory</a>
&nbsp;
<h2>「やさい便」</h2>
<img decoding="async" src="/demo/abe/images/subec05.jpg" alt="" width="656" />
&nbsp;
新鮮野菜の定期宅配サービスで、クックパッドにより提供されています。
やさいを届けて、クックパッドでその調理を見てもらう、 といった感じでしょうか。
何人かの農家、専門家の方がいて、その中から好きな人を選んで、
その人に、隔週もしくは週毎で送ってもらえるです。
&nbsp;
<a href="https://shop.cookpad.com/" target="_blank">「やさい便」</a>
&nbsp;
<h2>バニラ</h2>
<img decoding="async" src="/demo/abe/images/subec06.jpg" alt="" width="656" />
&nbsp;
生理用品定期お届けサービスです。
毎月訪れるもので、かつ女性からすると買うのを忘れてしまいがちなもののようなので、
定期販売の理に敵ったサービスかもしれませんね。
&nbsp;
<a href="http://vanilla-day.com/" target="_blank">バニラ</a>
&nbsp;
<h2>Box To You</h2>
<img decoding="async" src="/demo/abe/images/subec07.jpg" alt="" width="656" />
&nbsp;
こちらは商品を販売しているのではなく、
個人でもfacebookを通じて、販売ができるようになるサービスです。
facebookの実名を活かして安心、安全にできるとのことですが・・・
&nbsp;
<a href="https://www.box2you.com/" target="_blank">Box To You</a>
&nbsp;
<h2>プラナスボックス-PrunusBox</h2>
<img decoding="async" src="/demo/abe/images/subec08.jpg" alt="" width="656" />
&nbsp;
お試しコスメをお届け、
とのことですが、
上の方で説明した、GLOSSYBOXと同じようなサービスです。
&nbsp;
<a href="http://prunusbox.jp/" target="_blank">プラナスボックス</a>
&nbsp;
<h2>HATCH（ハッチ）</h2>
<img decoding="async" src="/demo/abe/images/subec09.jpg" alt="" width="656" />
&nbsp;
ライフスタイルアイテム定期購入型通販サイトとのことですが、
なにかひとつに特化した商品ではなく、
その道のプロ、専門家が複数おり、その方々からサービスを受けるというものです。
雑貨やCD、はたまた、スタイリストによるスタイリングなんてのもあるみたいです。
&nbsp;
<a href="http://shop.hatch8.jp/" target="_blank">HATCH（ハッチ）</a>
&nbsp;
<h2>ワイナレッジ</h2>
<img decoding="async" src="/demo/abe/images/subec10.jpg" alt="" width="656" />
&nbsp;
ワイン定期購入サービスで、 ソムリエの方が、毎月厳選したものを送ってくださるそうです。
&nbsp;
<a href="http://wine-k.jp/" target="_blank">ワイナレッジ</a>
&nbsp;
そして最後におまけとして、 mixiが18日に開始したサービスを紹介します。
&nbsp;
<h2>Petite jet&eacute;(プティジュテ)</h2>
<img decoding="async" src="/demo/abe/images/subec11.jpg" alt="" width="656" />
&nbsp;
ちょっとオトナのファッションを、
とのことで、２０代の女性向けに、
オンでもオフでも着れるような服を届けてくれるサービスです。
&nbsp;
<a href="http://petite-jete.com/" target="_blank">Petite jet&eacute;(プティジュテ)</a>
&nbsp;
いろいろ紹介しましたが、 サービスのポイントとしては、
大きくいうと
&nbsp;
・商品が数多くあり、素人目にはなかなか違いがわからないもの
・大事なんだけど、購入を忘れてしまいがちなもの
&nbsp;
といった感じでしょうか。
&nbsp;
お酒やワインなんかは、今まであんまり飲んでなかったけど、
これから飲んでみたいから頼むっていうのもあるかもしれないですね。
&nbsp;
もしくは、「選んで買う」という行為自体が面倒くさくなってしまった人達向けでもあるんでしょうか？
&nbsp;
物があふれるこの現代に適したサービスかもしれませんが、
選択することを放棄してしまうので、
自分でなにかを選ぶという行為がおろそかになり、
物を判断する能力が劣化してしまうのではないかと思ってしまいます。
&nbsp;
とはいえ、 これからどんな新しいサービスがでてくるのか楽しみにしたいと思います！

国内のサブスクリプションコマース１０サイト

今回はデザイン関連のお話です。
webデザインをするとよく悩むのが配色についてですが、 
この配色を手助けをしてくれるサイト
<a href="http://kuler.adobe.com/#" target="_blank">kuler</a>
というのがありまして、たまに利用していたんですが、 
これがphotoshopやillustlater、fireworksでも利用できるということを最近知りました。
いつの間にかadobeのものになっていたようです。
csなにから使えるようになったのかはわかりませんが、 
cs6では使えました。
<h2>photoshop cs6での「kuler」の使用方法</h3>
photoshopを開きまして、下の画像の箇所からkulerがあるはずです。
ウィンドウ　＞　エクステンション　＞　kuler
<img decoding="async" loading="lazy" class="alignnone wp-image-254" title="kuler_01" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/kuler_01-1024x660.png" alt="" width="550" height="359" />
&nbsp;
kulerのパネルが出現しました！
<img decoding="async" loading="lazy" class="alignnone wp-image-255" title="スクリーンショット（2012-09-12 13.45.09）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.45.09）-1024x660.png" alt="" width="550" height="358" />
選択したテーマをダブルクリックすると、色をスウォッチに登録できます。
&nbsp;
上の３つのボタンの右側の作成を押すと、下のように自分で作成することもできます。
<img decoding="async" loading="lazy" class="alignnone wp-image-256" title="スクリーンショット（2012-09-12 13.46.11）" src="http://blog.alan-trigger.info/wp-content/uploads/2012/09/スクリーンショット（2012-09-12-13.46.11）-1024x660.png" alt="" width="550" height="359" />
いわゆる配色のルールが設定されているので、自分でも作成しやすいかと思います。
困った時はこれを参考にしたいですね！！
でも、こういうのに頼らずに配色できるようになりたいですね・・・
&nbsp;
&nbsp;
&nbsp;

a0790_000254_m1.jpg

デザインで配色に困った時に使えるツール

Pathのアプリのメニューぽい動きをjQueryで作ってみる2

【jQuery 3Dエフェクト】で動きがイケてるメールフォームを作る

イラストチックな、絵本テイストのサイトデザインをすることになったので、
どういったデザインにしたらよいのか参考にするために、
絵本テイストのサイトを探してみました。
&nbsp;
こちらが私がいいと思った６サイト
coby採用情報スペシャルサイト 
<a href="http://www.coby.jp/recruit/special/">http://www.coby.jp/recruit/special/</a>
<a href="http://www.coby.jp/recruit/special/"><img decoding="async" src="/uploads-archive/2012/10/ss01.jpg" alt="" width="100%" /></a>
&nbsp;
デスクトップビバリーくん 
<a href="http://www.dental-plaza.com/melmaga/present/index.html">http://www.dental-plaza.com/melmaga/present/index.html</a>
<a href="http://www.dental-plaza.com/melmaga/present/index.html"><img decoding="async" src="/uploads-archive/2012/10/ss02.jpg" alt="" width="100%" /></a>
&nbsp;
Pochi 
<a href="http://po-chi.jp/">http://po-chi.jp/</a>
<a href="http://po-chi.jp/"><img decoding="async" src="/uploads-archive/2012/10/ss03.jpg" alt="" width="100%" /></a>
&nbsp;
札幌山本養蜂園 
<a href="http://www.koguma-honey.com/">http://www.koguma-honey.com/</a>
<a href="http://www.koguma-honey.com/"><img decoding="async" src="/uploads-archive/2012/10/ss04.jpg" alt="" width="100%" /></a>
&nbsp;
カンロ　キャンディパーク 
<a href="http://www.kanro.co.jp/candypark/">http://www.kanro.co.jp/candypark/</a>
<a href="http://www.kanro.co.jp/candypark/"><img decoding="async" src="/uploads-archive/2012/10/ss05.jpg" alt="" width="100%" /></a>
&nbsp;
2011 to 2012 
<a href="http://2011to2012.info/">http://2011to2012.info/</a>
<a href="http://2011to2012.info/"><img decoding="async" src="/uploads-archive/2012/10/ss06.jpg" alt="" width="100%" /></a>
&nbsp;
どれもかわいらしく、親しみやすい印象が強いです。
&nbsp;
これらのサイトの、共通点をまとめてみました。
・イラストがたくさん大きめに使われている。
・手書き風フォントが目立つところに使われている。
・色数が多い傾向がある。特にタイトルでの多色使いが特徴的。
・文字の大きさが多様。
・布や紙のテクスチャが使われていることが多い。
・レイアウトは不規則的で動きのあるものが多い。
&nbsp;
今回は極端な例のものを大目に選んだのですが、
この共通点を目立つ場所で使うことで、絵本テイストの印象を強められると思いました。
&nbsp;
試しにバナーを作ってみました。
<img decoding="async" src="/uploads-archive/2012/10/banner.jpg" alt="" />
&nbsp;
文字の配置や大きさの変化など、思いのほかバランスをとるのが難しかったです。

絵本テイストのサイトデザイン

画像やコンテンツを左右にスライド、スクロールするjQuery

<a href="https://path.com/">https://path.com/</a>
こちらのアプリのメニューの動きが心地いいので、
jQueryのプラグインなどを使って再現に挑戦しました。
<a href="https://sterfield.co.jp/demo/ninomiya/02/demo1.html" target="_blank" class="demo">demo</a>
&nbsp;
イージングを、<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing</a>のeaseOutBackで。
回転を、<a href="http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html" target="_blank">jquery-animate-css-rotate-scale.js</a>を使ってみました。
&nbsp;
実際は、回転させてから動くようですが、
今回は逆の動きになってしまいました。
&nbsp;
また次回、近い動きを目指してみます。

Pathのアプリのメニューぽい動きをjQueryで作ってみる1

先日、弊社が入居する<a href="http://www.waseda.jp/rps/incubation/index.htm" target="_blank">早稲田大学インキュベーションセンター</a>の交流会に参加して来ました。
基本的には、入居者及び起業に関心を持つ学生限定のクローズドな会ですが、毎回ゲストをお呼びして、講演が行われます。
今回は
「IT従業者のメンタルヘルス」
という題材で早稲田大学スポーツ科学部　内田直教授によるものでした。
精神科医でもある内田先生の元に訪れる精神疾患者はIT従業者の割合が非常に高いということで、そのような現状と予防策を教えて頂きました。
まず、何故精神疾患に陥るのか簡単に説明すると、交感神経と副交感神経のバランスが崩れること。
交感神経は、緊張、副交感神経は緩和（リラックス）ですが、IT従業者は、交感神経が長時間働いている割合が多いと仰っていました。その理由として
<ul>
<li>一人への責任が大きい</li>
<li>長時間労働が多い</li>
<li>ゲーム等の趣味でもディスプレイを眺める人が多い</li>
<li>慢性的な運動不足</li>
</ul>
などがあり、その中の一つで、昨今話題のブルーライトについて言及されていました。ディスプレイから発生する光が太陽の波長に似ていて、脳が昼間だと勘違いし、交感神経系を刺激してしまい、精神疾患の一因になるだけではなく、複合的に<a href="http://www.lifehacker.jp/2011/03/110308_bed_ipad.html" target="_blank">睡眠障害</a>まで引き起こしてしまう可能性があるとのことです。
このブルーライトを抑制するメガネが流行っておりますが、同様の効果が得られるWindowsやMacのフリーソフト「<a href="http://stereopsis.com/flux/" target="_blank">F.lux</a>」を導入するとよいということを教えて頂きました。
実際に導入をすると、ディスプレイ全体が、オレンジ色にかかり、青白いが少なく、色温度が抑えられていることが実感出来ます。
また、デザイナーなど色を忠実に再現しなくてはいけないような場合には、ワンボタンで1時間動作を切るというありがたい機能も搭載しています。
エンジニアはまず、導入しておけってことですね。
&nbsp;
<h2>まとめ</h3>
&nbsp;
以上、ブルーライトを抑えるフリーソフトをご紹介しましたが、あくまで予防策の一つで何より一番は、運動をすること。その時間を作ることだと仰っていました。
&nbsp;
&nbsp;

早稲田大学教授が教える話題のブルーライトを抑えるフリーソフト「F.lux」

イラストをWebデザインに向けて製作することとなりましたが、
実際描いてみると、2012年現在のトレンドに合っておらず、 
古いイメージになってしまいました。
そのため、今回は、2012年のWebトレンドに合わせ、 
イラストの質感を上げる方法について調べてみました。
まずこちらがこれまでの方法で私がIllustratorでイラストを製作した場合。
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust0.jpg" alt="イラスト0" />
&nbsp;
やはり古い印象を感じさせてしまいます。
そこで今回は、色の塗り方について、次の３つの方法を試してみました。
&nbsp;
1.グラデーションを穏やかにして、ハイライトをつける。 
2.グラデーションを使わず、面で陰影をつける。 
3.直線的でない、形に合わせたグラデーションを使う。
&nbsp;
では実際にやってみましょう。
&nbsp;
1.グラデーションを穏やかにして、ハイライトをつける。
&nbsp;
こちらの方法は、こちらの本を参考にさせていただきました。 
「ウェブデザインコーディネートカタログ」技術評論社(2011) 
<a href="http://www.amazon.co.jp/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0-%E9%BB%92%E9%87%8E-%E6%98%8E%E5%AD%90/dp/4774146870">http://www.amazon.co.jp/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%8D%E3%83%BC%E3%83%88%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0-%E9%BB%92%E9%87%8E-%E6%98%8E%E5%AD%90/dp/4774146870</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust1.jpg" alt="イラスト1" />
&nbsp;
一番時間がかかりました。 
先ほどよりは落ち着いたイメージですが、 
ハイライトのかけ方が難しく、あまりうまくいきませんでした。 
アイコン向けの方法のようです。

2.グラデーションを使わず、面で陰影をつける。
&nbsp;
こちらはの方法は、こちらのサイトに掲載されているイラストを参考にさせていただきました。 
<a href="http://dc2009.drupalcon.org/">http://dc2009.drupalcon.org/</a>
<a href="http://f-power.co.jp/appeal">http://f-power.co.jp/appeal</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust2.jpg" alt="イラスト2" />
&nbsp;
時間は他の二つの方法の中間くらい。 
落ち着いたイメージで、影もしっかりかかっていていい感じです。
3.直線的でない、形に合わせたグラデーションを使う。
&nbsp;
こちらはの方法は、こちらのサイトに掲載されているイラストを参考にさせていただきました。
<a href="http://tou.ch/docs/about">http://tou.ch/docs/about</a>
&nbsp;
<img decoding="async" src="/uploads-archive/2012/10/illust3.jpg" alt="イラスト3" />
&nbsp;
3つの方法の中では圧倒的に早くできました。 
Illustratorの「効果」メニューのスタイライズで、 
光彩(内側)を乗算で15%の不透明度でかけただけです。
時間がかからなかった割には、落ち着いた質感あるイラストになりました。
&nbsp;
やってみた感想としましては、 
イラスト製作に必要な時間や、載せるWebサイトのデザインに合わせて、 
これらの方法を使い分けていくと、いいのではないかと思いました。

IllustratorによるWebデザインのためのイラスト質感UPを目指す

最近縦長のサイトが増えてきており、
体外そういうサイトは、ページ内リンクのスクロールに
アニメーション効果がされていることが多いかと思います。
&nbsp;
そのアニメーション効果は基本的には変わらないので、
なにか面白い動きができないものかと思い、
jQueryのプラグインの<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery Easing Plugin</a> のイージング効果を利用しよう！
と思い、いろいろと試してみました。
&nbsp;
その結果、
本家のサイトにも試せるものはありますが、
どれかひとつだけしか試せないのもなんなので、選べるようにしました。
スピードも調節できます。
&nbsp;
デモは下記リンクから
<a class="demo" href="/demo/abe/10/" target="_blank">DEMO</a>
&nbsp;
違いがわからない動きが多いですね。。。
ものによっては、ものすごい効果のもありますね?
&nbsp;
<h4>イージング効果を付ける方法を説明します。</h6>


		<div id="crayon-64953fd57d38f771442295" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>XHTML</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57d38f771442295-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d38f771442295-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57d38f771442295-1">&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d38f771442295-2">&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
基本的には、jquery.easing.1.3.jsを読み込めばOKです。
（jqueryはもちろん必要です。）
&nbsp;
あとは、アニメーションスクロールのスクリプトのanimateを以下のように設定すればOKです。


		<div id="crayon-64953fd57d393672114889" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;">
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div>JavaScript</div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$('a[href^=#]').click(function() {
 var speed = 1000; 
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top; 
 $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });
 return false;
 });</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd57d393672114889-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-2">2</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-4">4</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-6">6</div><div class="crayon-num" data-line="crayon-64953fd57d393672114889-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd57d393672114889-8">8</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd57d393672114889-1">$('a[href^=#]').click(function() {</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var speed = 1000;&nbsp;&nbsp;</div><div class="crayon-line" id="crayon-64953fd57d393672114889-3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var href= $(this).attr("href");</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var target = $(href == "#" || href == "" ? 'html' : href);</div><div class="crayon-line" id="crayon-64953fd57d393672114889-5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var position = target.offset().top; </div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, { duration: speed, easing: 'ここに効果名を入れる' });</div><div class="crayon-line" id="crayon-64953fd57d393672114889-7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;</div><div class="crayon-line crayon-striped-line" id="crayon-64953fd57d393672114889-8">&nbsp;&nbsp; });</div></div></td>
					</tr>
				</table>
			</div>
		</div>


&nbsp;
なにかおもしろい動きをつけるとちょっと印象には残りますよね。
これからどんどん動きのあるサイトは増えてくるとおもいますので、
その中でどれだけ「ユーザーの記憶に残る」ことができるか、
そのような工夫をしていかなければと思う今日この頃です。

jQueryのイージング効果をスクロールでいろいろ試せるデモを作ってみた

日本は成熟国として文化を高付加価値で輸出できるようになってきた。 
デジタルコンテンツのスピードが最も早いのは当然だが 
アニメやオタク文化の海外での反響にはびっくりだ。 
一節では広義でのアニメ産業の輸出額は年間5000億円を超えていると言われている。 
10年前はここまでの輸出産業になるとは予想できなかったのではないだろうか。
アニメを初めとしたサブカルチャーの発展は日本経済にとってとても良いことだと思う。 
サブカルチャーも立派な芸術分野だと思うが、一方で純粋芸術に対する関心が低いのではと最近思う。
純粋芸術の教養は、服飾品や建築、家具などへの高い付加価値を創造する。 
成熟国としての文化と組み合わせることによりブランドとなり、高い国際競争力を持つことができる。 
せっかくアニメが開いた突破口をそれだけで終わらせないためにも、 
日本もこの分野への投資をしてみてはどうかと最近思う。
優れた芸術作品は不景気に生まれやすいと言われている。 
不景気になり格差が広がると社会生活の中で順当に出世してお金を得られるという流れを前提にできなくなり、 
芸術という社会とはある種反対の分野へ夢や情熱を傾ける人が増えるからだろうか。
60年代から70年代にかけて、イギリスから始まった音楽文化は国境を超え全世界が熱狂した。 
火付け役とも言えるビートルズも50年代というイギリスの不況期に青春を過ごした労働者階級が主だった。
その少し前、世界恐慌期にアメリカで行われたニューディール政策だが、 
これにはもうひとつの側面があり、文化芸術の発展を促す計画が同時進行していたことはあまり知られていない。 
フェデラル・ワンといわれる政策で、美術、演劇、音楽など様々な純粋芸術の振興を目的としたプロジェクトが1935年から行われていた。
これは国家レベルで行われた最大規模の芸術振興のプロジェクトだ。
以下はその成果の例
・美術 
5000人~1万人が雇用され、20万点もの作品が制作され、さまざまなポスター・壁画・絵画・彫刻が作成された。 
それらの作品は公共機関や学校や病院などに飾られ、2000以上のビルの壁面を覆い、国内で最も目立つパブリック・アートがいくつも誕生した(wikipediaより)
→ 美術教養の向上により、工業製品などのパッケージデザインなどのクオリティが上がった
・演劇 
5000人~1万人強が雇用され、毎月1000回もの講演が行われ、新作1200本以上が創出された。 
公演のうち80%が無料だったとされ、フェデラル・ワンの中で最も予算を使ったプロジェクト。
→ 現在のブロードウェイミュージカルやハリウッド映画の土台となった
・音楽 
1万人~1万強が雇用され毎週5000回もの講演が行われ、新作5000曲以上が創出された。
→ 音楽の力で不景気の暗い空気を拭いモチベーションを向上させたらしい
その後の産業発展と、不景気への刺激策として有効に作用している。 
これから不景気を脱却し、高付加価値の輸出産業を育成していかなければならない今の日本には一石二鳥だ。
さらには純粋芸術の発展はインターネットの質の向上も当然見込まれる。 
まずは自治体などからこういった動きが出てくることを期待したい。と考えてみた

不景気と芸術

ファーストサーバーの大規模障害事故から2ヶ月がたとうとしているが、まだ余波がおさまらない。 
ファーストサーバショックたる言葉まで現れ始めている。 
更には信頼性の高いとされていたEC2まで大規模な障害があり、 
クラウドと呼ばれるものに対する信頼がここ2ヶ月で急激に失墜している。
そもそも、レンタルサーバーは安すぎると思っている。 
ハードの性能が上がり5年前の上位プランと同等のサービスが 
今では下位プランで利用できるようになっている。
ユーザーとしてはありがたいが、サーバーの需要が今後劇的に増えるとも思えない。 
サーバー会社としては付加価値での差別化が難しく、価格競争に陥っている感がある。 
価格競争に陥れば十分な設備投資ができず管理への費用もかけられない。
国内のIT市場は今や13兆円規模と今や日本を支える産業になりつつある。 
特に通信を要するビジネスにおいてサーバーは&#8221;土台&#8221;であり 
これの安全性は国として担保しなければ、今後の発展に支障がでる。
今回の件は、需要が一巡した今風紀を整える必要があるという警告だったのかもしれない。
まずは評価基準を作ること。次に利用者を教育すること。 
そうすれば 
・業者は付加価値を見出しやすくなる 
・利用者は意図するサービスを選びやすくなる
全体としてはリスクが明確化されることにより 
若年層や高齢者等など利用者層の拡大につながるかもしれない。
顧客情報を扱うような重要な基幹システムの利用者は 
高付加価値のサーバーを選定すればよいし、逆にスタートアップのベンチャーや学生は 
リスクが高いサーバーでリスクヘッジを内製することでコストを下げれば良い。
今は両者のサーバーがごっちゃになっておりわかりづらい。
そこで、一利用者として評価基準を考えてみた。
1. 安全性と管理、運用体制による5段階の評価 
第三者評価機関によるレーティング。 
バックアップ体制や障害対策、復旧スピードなどをサービスごとに 
A1、A2、A3、B、Cの5段階で厳正に調査し、業者はこれを明記する。
2. サポートの範囲 
以下の3つの基準によりサポート体制を明記する。
・代行サポート 
各種設定やインストールなどを業者が行なってくれる
・テクニカルサポート 
電話若しくはにて各種設定やインストール方法を教えてもらえる
・標準サポート 
自動若しくは標準でインストール可能な機能が整備されている
3. サーバーの種類 
・共有サーバー 
・VPS 
・専用 
・クラウド
4. 利用できる機能とその利用方法 
webサーバーや言語、SSLなど何が利用できて 
利用にあたってユーザーはどのような手続きが必要かを明記
5. 処理能力と記憶容量
6. 実測ベースでの処理速度 
利用者の増減にかかわらず最低限担保される速度
7. セキュリティ対策と利用範囲 
どのようなセキュリティ対策が行われているかと 
ユーザーがどのような手続きによりどういったセキュリティ対策を利用できるか
以上の7点。 
第三者機関は 
・2~7の内容が現行のトレンドからして最適か 
・長期安定運用を可能にする耐性か 
・万が一の際最良の復旧措置が取れるか 
を判断して1の評価をつける。 
更新は年1回。
というのが理想だ。
何はともあれ、サーバー会社は利用者に&#8221;継続して安定的&#8221;に 
サービスを運用できるようにする責任がある。 
欲を言えば利用者との距離を縮め、レンタルサーバーをより身近な存在にしてほしい。 
それがITリテラシーの向上と市場発展に繋がるからだ。
・サーバー会社は付加価値を高め収益を確保し更なる安全性と利用価値の拡大を 
・利用者はリスクの明確化により最適な選択と利用者層の拡大を
そのための整備が今、必要だと思う

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2012/10/04

2012/10/03

2012/09/27

2012/09/26

2012/09/20

2012/09/20

2012/09/19

2012/09/13

2012/09/13

2012/09/06

2012/09/06

2012/08/30

2012/08/30

2012/08/30

2012/08/22

2012/08/09

2012/08/09

2012/08/02