こういうのも利用するといいですね。
とある企業さんの成長分野等人材育成支援事業を利用したHTML5研修セミナーを聞いてきました。
Webの分野で厚労省が助成金、奨励金を出すということが今までにないことらしく、
もちろん奨励金の適用を検討することもさることながら、厚労省がこの分野で予算を割いてくれること自体に感動を覚えました。
このブログをご覧の方も必要であれば、情報共有しますので、コンタクトして下さい。
セミナー自体は、HTML5の流れ、取り巻く環境から実際の研修・セミナーの内容、助成金の内容の説明という具合でした。
<h2>HTML5を取り巻く背景</h3>
・7割〜8割ハイブリッドアプリ
・技術者不足による採用難と育成の重要性
・欧米比で最新技術導入の遅れ
・時限措置による教育機会（2013年3月までの奨励金）
・オフショア・エンジニアの成長
<h2>HTML5とは</h3>
・狭義
マークアップ言語
セマンティックWeb
・広義
HTML5API
CSS3
WebGL
SVG(ScalableVector Graphics)
<h2>HTML5なら出来る分業体制</h3>
・ネイティブアプリ
デザイン デザイナー
Objective-C/Java ネイティブエンジニア
PHP
・HTML5
デザイン デザイナー
HTML5/CSS3 マークアップエンジニア
JavaScript マークアップエンジニア/Webプログラマ
PHP Webプログラマ
<h2>企業研修の内容</h3>
2012年3月までの時限措置
一人20万円までの助成金
6ヶ月間の研修が必要
雇用保険を支払っている正社員であること
詳細
http://www.mhlw.go.jp/general/seido/josei/kyufukin/dl/f-top-c.pdf

成長分野等人材育成支援事業を利用したHTML5研修

今回は、SEO対策の方法について、復習することにしました。
&nbsp;
ちょうど今月(2012月10月)、Googleの<a href="http://support.google.com/webmasters/bin/answer.py?hl=ja&amp;answer=35769" target="_blank">ウェブマスター向けガイドライン</a>が更新されたようですので、
そちらから、HTMLコーディングに関する主なものをまとめてみました。
あからさまなスパム行為は省略しました。
&nbsp;
&nbsp;
<h2>基本</h3>
1.　サイトの構造はわかりやすく。
2.　主要ページへのリンクを記載したサイトマップを用意する。
　　サイトマップ内のリンクが非常に多い場合は複数ページに分ける。
3.　ユーザーが検索するときに入力する可能性と高いキーワードをサイトに含める。
4.　重要な名前、コンテンツ、リンクは、画像の代わりにテキストを使用。
　　画像を使用する必要がある場合は、alt属性を使用して、説明テキストを組み込む。
5.　無効なリンクを防ぐ。HTMLが正しいか確認する。
&nbsp;
&nbsp;
<h2>避けるべきことと、対策</h3>
1.　JavaScriptを使って、外部ページにリダイレクト(サイトにアクセスしたユーザーを、リクエストされたURLとは別のURLに移動させること)すること。
対策→　新サイトへの移動などの場合は、301リダイレクトを使用する。
&nbsp;
2.　隠しテキストと隠しリンクの利用
・白の背景で白のテキストを使用する
・テキストを画像の背後に置く
・CSSを使用して、テキストを画面外に配置する
・フォントサイズを0に設定する。
・小さな１文字のみをリンクにして、リンクを隠す
 

画像やJavaScript、動画の使用で、テキストをおく必要がある場合の対策方法と注意点
 

画像
　・alt属性を使用して、わかりやすい説明テキストを記述する。 
　　　（例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;持ってこいをするダルメシアンの子犬&#8221;&gt;）
　・画像近くに、わかりやすいキャプションや説明テキストを配置する(可能な限り画像の近くに置くと効果的)
　・ファイル名を、画像の題材がわかるようなものにする
　・alt属性にキーワードを多用しない
　　　（スパムとみなされる場合がある。例：&lt;img src=&#8221;puppy.jpg&#8221; alt=&#8221;子犬 犬の赤ちゃん 小さな子犬 レトリーバー ラブラドール ウルフハウンド セッター ポインター ジャックラッセル テリヤ ドッグ フード ドッグフード 安い 子犬の餌&#8221;/&gt;）
　・重要なテキストは画像に埋め込まない
 

JavaScript
　・JavaScript内と同じコンテンツを&lt;noscript&gt;タグ内に記述する
　　　(&lt;noscript&gt;タグ内の内容は、JavaScript内のコンテンツと完全に同様にする)
 
動画
　・動画の説明テキストをHTML内に記述する
&nbsp;
3.　誘導ページの利用
(誘導ページ：特定のフレーズに対して、検索結果の上位に表示して、ユーザーを特定のサイトやページに誘導する目的で設置された、特定のキーワードやフレーズ用に作成された、テンプレートを使用した品質の低いページの集まり)
対策→　ユーザーの利便性を考慮した、質の高いページを設置する
&nbsp;
&nbsp;
画像の配置やJavaScriptなどで、デザインの都合上、対策が難しい場合もありますが、
改めて、これらのことを頭に入れてデザインをすることで、
利便性の高い、SEOも考慮されたサイト作りに役立てたいです。

SEOを考慮したHTMLコーディングの復習

流行りのスクロール効果を自作してみました。

iOSでFlashを搭載しない変わりに代替する技術として、HTML5とJavaScriptによるアニメーション表現が発達してまいりましたが、マルチデバイス対応及びフィーチャーフォン（ガラケー）向けの資産を再利用したいという理由でflashを変換するツールも同時に複数立ち上がっています。
それぞれ案件でこなしながら、flash変換ツールに関して代表的なツール4つのメリット・デメリットをまとめてみました。
非エンジニアの筆者がまとめております点、ご容赦下さい。技術情報については末尾に参考記事を掲載しております。
<h2>swiffy（提供：GOOGLE）</h3>
flaファイル変換系
<a href="https://www.google.com/doubleclick/studio/swiffy/" target="_blank">https://www.google.com/doubleclick/studio/swiffy/</a>
<h3>メリット</h4>
再現率が高い
<h3>デメリット</h4>
出力したソースが複雑（minifyされている）であるため改修は困難。
画像がSVG形式であるため、Androidは2.x系に対応していない。
<h2>CreateJS（提供：<a href="http://gskinner.com/" target="_blank">gskinner</a>）</h3>
flaファイル変換系
<a href="http://www.createjs.com/#!/CreateJS" target="_blank">http://www.createjs.com/#!/CreateJS</a>
<h3>メリット</h4>
出力したソースが綺麗。後のカスタマイズも容易
HTML5+Javascript+Imagesという構成なので、スマートフォン全般に対応可能
<h3>デメリット</h4>
仕様・制限が多い。既存のflaファイルからの修正は困難。
CS6もしくはCreative Cloudが必要
<h2>ExGame（提供：DeNA）</h3>
swf変換系
<a href="http://developer.dena.jp/mbga/support/exgame.html" target="_blank">http://developer.dena.jp/mbga/support/exgame.html</a>
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
モバゲープラットフォーム以外では使えない
<h2>reel（提供：GREE）</h3>
<a href="https://docs.developer.gree.net/ja/technicalspecs/reel/" target="_blank">https://docs.developer.gree.net/ja/technicalspecs/reel/</a>（要ログイン）
swf変換系
<h3>メリット</h4>
ユーザーアクセス時にswfを解釈する仕組のため、ヘッダーに記述するだけ。
再現率が高い
<h3>デメリット</h4>
GREEプラットフォーム以外では使えない
<h2>まとめ</h3>
新規で構築するのであれば、CreateJS一択でいいと思います。CreateJSを前提に制作をすれば、フィーチャーフォン→flashlite、スマートフォン→CreateJSで出力したHTML5で運用も軽微になります。
ただ、まだ新しい技術ということも情報があまりにも少なく、独自に未成熟な部分も発見しております。
ツールの進化、情報の蓄積を期待しています。
フィーチャーフォン向けのswfが既にあるならば、それぞれのプラットフォームが提供している、swf変換系のツールを素直に使いましょう。
アプリ化やその他プラットフォームに対応既存コンテンツを対応させる場合は、Swiffy＋FLASH（Andorid2.x系）の組み合わせになり、現時点では、一番工数が掛かります。
こちらも、後1年するとAndroid2.x系ユーザーが少なくなり、Swiffyのみ選択するということでよくなるかもしれません。
<h4>技術参考記事</h6>
<a href="http://ameblo.jp/principia-ca/entry-11033734709.html" target="_blank">http://ameblo.jp/principia-ca/entry-11033734709.html</a>
<a href="http://d.hatena.ne.jp/ndruger/20111113/1321205098" target="_blank">http://d.hatena.ne.jp/ndruger/20111113/1321205098</a>
<a href="http://www.slideshare.net/ytksn/0322engineercafe-12124546" target="_blank">http://www.slideshare.net/ytksn/0322engineercafe-12124546</a>
&nbsp;

flash変換ツールまとめ（swiffy,CreateJS,ExGame,reel）

<div class="booklink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="booklink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/asin/4062144492/sackoh71-22/" target="_blank" ><img decoding="async" src="http://ecx.images-amazon.com/images/I/412tzq2vpML._SL160_.jpg" style="border: none;" /></a></div>
<div class="booklink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="booklink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/asin/4062144492/sackoh71-22/" target="_blank" >モチベーション3.0 持続する「やる気!」をいかに引き出すか</a>
<div class="booklink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div>
</div>
<div class="booklink-detail" style="margin-bottom:5px;">ダニエル・ピンク 講談社 2010-07-07 </div>
<div class="booklink-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4062144492/sackoh71-22/" name="booklink" rel="nofollow" target="_blank">Amazon.co.jp で詳細を見る</a></div>
</div>
<div class="booklink-footer" style="clear: left"></div>
</div>
こちらも、ベストセラー。前作のハイ・コンセプトも読んでいました。
改めて考える事が、働き方って変わったと。 今まで私自身が教育及び、見聞きしてきたことよりも本書に書いてあることのほうが共感出来る。 働き方がこの10年で変わっても、全体の雰囲気が変わるのは20年後だろうかはたまた30年後だろうか。
いち早く新しい働き方を体系化したものが本書です。
<h2>抜粋</h3>
<h3>モチベーション1.0</h4>
→生存を目的とする、飢餓動因、渇動因、性的動因などの生物学的な動機づけ。
<h3>モチベーション2.0</h4>
→外的な報酬と罰を中心に構築された周囲からの報酬や罰に対して反応するもう一つの動機づけ
20世紀のルーチンワークには有効だった。
<h3>モチベーション3.0</h4>
自律性（オートノミー）、熟達（マスタリー）、目的（ゴール）を達成したいという内発的な動機づけ
非ルーチンワークにおいて「交換条件つき（こうしたら、これをあげる）」が機能しないため、モチベーション3.0をビジネスに導入すること。
創造性が必要で右脳を使うクリエイティブワーク、知識労働者の働きと認識する。
<h3>タイプIとタイプX</h4>
モチベーション2.0はタイプXの行動を前提にし、活動によって得られる外的な報酬と結びついている。
モチベーション3.0はタイプIの行動を前提にし、タイプXのアップグレード版で活動自体からもたらされる内的な満足感と結びついている。後天的に培うことができる。
<h3>自律性（オートノミー）</h4>
人類は初期設定では、自律的であり、自己決定的である。教育や組織的なマネジメントにおいて、自然とこの自律性は影を潜める。
<h3>熟達（マスタリー）</h4>
モチベーション2.0では従順な姿勢が求められたのに対し、モチベーション3.0ではエンゲージメントが必要とされる。エンゲージメントを強めて初めて、価値あることの上達、熟達が出来る。
熟達には、向上が可能だという心の持ち方、苦痛が伴う、漸近線で完全に実現することは不可能だということを理解すること。
<h3>目的（ゴール）</h4>
人間は、本質的に人生の意義や目的を探すもの。
目的の最大化が、利益の最大化
<h2>まとめ</h3>
モチベーション3.0というものを理解し、経営に反映していきたいと思います。
マズローの5段階欲求でいうと、
モチベーション1.0生理的欲求、安全欲求
モチベーション2.0所属欲求、承認欲求
モチベーション3.0自己実現欲求
に分類出来るのではないだろうか？

モチベーション3.0

2012年9月27日に行われた「ECのミカタセミナー」というECサイト運営社向けのセミナーに参加してまいりました。 その中で、私には全く新しい視点でWebサイトを捉えているセッションがありましたので、紹介致します。
<h2>KEYNOTE SYSTEMS社のビジネス</h3>
講演をされていたのが、Keynote Systems社というアメリカのカリフォルニアに本社を置く日本法人の代表の方でした。 Keynoteというとmacのプレゼンテーションソフトしか思い浮かびませんでしたが、顧客数4,000超でNASDAQに上場している企業とのことです。 クライアントもそうそうたるもので、ebayやcoarchといった小売業者からAMEX、GMと多岐に渡っています。 その主力ビジネスが Webサイトのパフォーマンスを計測、改善するサービスということなのです。
<h2>アクセス解析とWEBパフォーマンスの関係</h3>
ここで、Webサイトのパフォーマンスってあまり意識したことなかったのですが、それもそのはずで、断言されておりました「Webパフォーマンスに限らず、日本は統計に基づく分析に関して遅れている」と。 特に統計学に携わる分野で大学の学部を見ても、統計学を専攻する学部は一つもないとのことです。 Webパフォーマンスの相関を例を上げると・・・
<ul>
<li>16%・・・1秒が遅れる毎の顧客満足度低下率</li>
<li>11%・・・1秒早くなる毎のPVの向上</li>
<li>7%・・・1秒早くなる毎のCVの向上</li>
<li>88%・・・継続的な計測による顧客満足度向上</li>
<li>200%・・・1秒早くなる毎のブランドイメージのアップ</li>
</ul>
と統計的に証明されているとのことです。 ここで、本セッションがWebパフォーマンスに限った統計のことで、レコメンドや、ランディングページ等、機能やマーケティングに関しては除外されていることをお気をつけ頂きたい。
<h2>スピード＝価値</h3>
ライリーの小売引力の法則
<blockquote>P=α*A/D^2</blockquote>
P=購入確率、α＝計数、A=魅力、D=距離（サイト速度） 購入確率は、人口ないし、品揃えに比例し、距離（サイト速度）の2乗に反比例する。 PCサイトの世界標準・・・1秒以下 スマートフォンサイトの世界標準・・・6秒以下 →日本の大手ECサイトはどれも達成出来ていない。 6秒以内に表示するためには・・・
<ul>
<li>100kb</li>
<li>CSS1</li>
<li>JS1</li>
<li>Redirect1</li>
</ul>
に抑える必要がある。 参考、chanel、zappos
<h2>まとめ</h3>
目からウロコであることが非常に多かった。世界トップレベルのサイトの取り組みというものを垣間見ることが出来、参考になりました。

Keynote SystemsのWebサイト改善手法

フリックでの操作をjQueryで組む

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;
もちろんこれらは絶対的なものではありませんし、見落としも多くあると思いますが
これらをヒントにして、実際のバナー作りを行っていきたいと思います。

large_banneｒ_hi.jpg

medium_banneｒ_hi.jpg

small_banneｒ_hi.jpg

thumbnail_banneｒ_hi.jpg

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;

small_a0790_000254_m1.jpg

thumbnail_a0790_000254_m1.jpg

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;
文字の配置や大きさの変化など、思いのほかバランスをとるのが難しかったです。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2012/10/16

2012/10/11

2012/10/11

2012/10/10

2012/10/10

2012/10/09

2012/10/04

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