jQueryでアコーディオンを横向きに開閉する。
HTMLを用意する
&lt;div&gt; 
　&lt;dl&gt; 
　　&lt;dt id=&#8221;step1&#8243;&gt;&lt;span&gt;Step.1&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step2&#8243;&gt;&lt;span&gt;Step.2&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　　&lt;dt id=&#8221;step3&#8243;&gt;&lt;span&gt;Step.3&lt;/span&gt;&lt;/dt&gt; 
　　&lt;dd&gt;&lt;p&gt;Lorem ipsum　（中略）　venenatis.&lt;/p&gt;&lt;/dd&gt; 
　&lt;/dl&gt; 
 &lt;/div&gt;
&nbsp;
CSSを用意する
body{ 
 background:#252422; 
 } 
 div{ 
 width:800px; 
 height:300px; 
 margin:50px auto; 
 overflow:hidden; 
 } 
 dl{ 
 width:900px; 
 height:300px; 
 } 
 dt{ 
 width:35px; 
 height:300px; 
 float:left; 
 } 
 dt span{ 
 display:block; 
 width:100%; 
 height:100%; 
 text-indent:-9999px; 
 } 
 dt span.over{ 
 cursor:pointer; 
 } 
 dt span.selected{ 
 cursor:default; 
 } 
 dt#step1 span{ 
 background:url(&#8220;images/background-1.jpg&#8221;); 
 } 
 dt#step1 span.over{ 
 background:url(&#8220;images/background-1-over.jpg&#8221;); 
 } 
 dt#step1 span.selected{ 
 background:url(&#8220;images/background-1-selected.jpg&#8221;); 
 } 
 dt#step2 span{ 
 background:url(&#8220;images/background-2.jpg&#8221;); 
 } 
 dt#step2 span.over{ 
 background:url(&#8220;images/background-2-over.jpg&#8221;); 
 } 
 dt#step2 span.selected{ 
 background:url(&#8220;images/background-2-selected.jpg&#8221;); 
 } 
 dt#step3 span{ 
 background:url(&#8220;images/background-3.jpg&#8221;); 
 } 
 dt#step3 span.over{ 
 background:url(&#8220;images/background-3-over.jpg&#8221;); 
 } 
 dt#step3 span.selected{ 
 background:url(&#8220;images/background-3-selected.jpg&#8221;); 
 } 
 dd{ 
 margin:0; 
 width:695px; 
 height:300px; 
 float:left; 
 background:#D4D0C8; 
 overflow:hidden; 
 } 
 dd p{ 
 width:655px; 
 text-indent:1em; 
 padding:20px; 
 }
&nbsp;
jQueryを用意する
$(function(){ 
        $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;); 
        $(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;); 
        $(&#8220;dl dt&#8221;).click(function(){ 
                 if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){ 
                 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;}); 
                 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;}); 
                 $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
                 $(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;); 
                 } 
         }).mouseover(function(){ 
          $(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
         }).mouseout(function(){ 
          $(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
         }); 
 }); 
<a href="http://poe.ud-ac.com/JavaScript_SelfStudy/other/sample2/samp6.html" target="_blank">DEMOはコチラ</a>
「説明」
①　 $(&#8220;dd:not(:first)&#8221;).css(&#8220;width&#8221;,&#8221;0px&#8221;);
初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。
②　$(&#8220;dt:first span&#8221;).addClass(&#8220;selected&#8221;);
１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに
設定します。
③　if($(&#8220;+dd&#8221;,this).css(&#8220;width&#8221;)==&#8221;0px&#8221;){
if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を
記述します。
④　 $(&#8220;dt:has(.selected) +dd&#8221;).animate({&#8220;width&#8221;:&#8221;0px&#8221;});
ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する
dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を 
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。
⑤　 $(&#8220;+dd&#8221;,this).animate({&#8220;width&#8221;:&#8221;695px&#8221;});
同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。
これで、クリックされたラベルに対応するパネルが開きます。
⑥　  $(&#8220;dt span&#8221;).removeClass(&#8220;selected&#8221;); 
$(&#8220;span&#8221;,this).addClass(&#8220;selected&#8221;);
クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」
を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。
⑦　}).mouseover(function(){ 
$(&#8220;span&#8221;,this).addClass(&#8220;over&#8221;); 
}).mouseout(function(){ 
$(&#8220;span&#8221;,this).removeClass(&#8220;over&#8221;); 
});
最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。

アコーディオンを横向きに開閉する

HTML5のSVG + jQueryで画像の拡大縮小

案件でfacebookアプリ（iframe）を作成しましたから、その流れを軽くまとめてみたいと思います。
&nbsp;
１、アプリの作成
自分が持つfacebookアカウントで<a href="https://developers.facebook.com" target="_blank">開発者サイト</a>でアプリを作成できます。 
※１アプリ作成するのに、モバイル設定もしくは支払方法を設定する必要あります。
※２モバイル設定には、確認コードをもちいて携帯メールの認証を行います。
確認コードを受信できるため、迷惑メール解除する必要があります。
迷惑メール解除のドメインは、facebook.comではなく、facebookmail.comです。
アプリ作成完了したら、App IDとApp Secretがもらえます。
&nbsp;
２、アプリの設定
「Facebook上のアプリ」と「ページタブ」両項目のみ設定します（その前に、開発サーバを整備し、アプリのリンクを確定する必要です）。
ページタグはfacebookからアクセス用の設定項目です。
「アカウント権限」項目に、管理者の追加ができます。
&nbsp;
３、facebookページの作成＆設定
facebookの一番下（今は無限スクロールのせいで、なかなかたどり着けない）に「ページを作成」のリンクがあるから、それをクリックして、facebookページの作成ができます。
facebookページを作成できたら、ページの上方（管理者の場合）には「Facebookページを編集」のプルダウンメニューがあるから、そこから「権限の編集」でfacebookページを公開することができ、「管理人」で管理者の指定ができます。
&nbsp;
４、アプリfacebookページの関連付け（facebookページにタブ追加）
アプリの管理ページの左メニューの「App Details」には、「アプリのページ」のところに、先作成したfacebookページのプルダウンがでてくるはずですが、もし出てこなかった場合は、手動アクセスで下記URLをアクセスして、タブを追加します。
https://www.facebook.com/add.php?api_key=[App ID]&amp;pages=1
&nbsp;
以上でfacebook側の準備がすべて整いました。
&nbsp;
５、php-sdkをダウンロード
https://github.com/facebook/facebook-php-sdk　からダウンロードできます。
&nbsp;
アプリ開発編は次を期待してください。
IEとSafariでは、サードパーティ クッキーのSetが問題になっているから、次回で解説いたします。
&nbsp;
※app設定をするのに、Privacy Policy URLとTerms of Service URLがないと、後facebookが怒るから、忘れずにつけましょう。App Detailの下で設定できます。
&nbsp;

facebookアプリ（iframe）を作成してみた

弊社では、MTを利用して、お客さまのwebサイトを作成することがよくあります。
そしてその運用もすることが多いのですが、
いつも通り、新しい記事を作り、カテゴリをチェックし、公開したら・・・
カテゴリのチェックがすべて外れて保存がされておりました。
何回やってもダメなので、調べてみると、Firefoxのver16のバグとのこと。
MTのverは、MT4.12とMT5.02でした。
&nbsp;
解決方法がシックス・アパートのよくある質問に載っておりました。
<a href="http://www.movabletype.jp/faq/firefox-16-patches.html" target="_blank">Firefox 16 でカテゴリおよびフォルダの選択が保存できない。</a>
&nbsp;
verが４つしかなく、自分のverにあったものがないっっ！！
&nbsp;
と思いましたが、強行で、ver4.38のpatchをダウンロードし、アップしてみたところ、
無事修正されました！！
&nbsp;
&nbsp;
方法は簡単ですが、自分でサーバー情報いじれない場合は、
別のブラウザを使うしかないようですね。
&nbsp;
firefox早くバージョンアップしないかな〜 
最後に面白い記事を紹介。
デザインする自分にとって、ものすごく同意する記事です。
<a href="http://gori.me/it/22110">デザインをする人もデザインを依頼する人も見てもらいたい！「デザインができるまで」が話題に！ | gori.me</a> 
<a href="http://gori.me/it/22125">クライアントよ、お前の依頼の大変さを思い知れ！これが「デザイン修正」だ！ | gori.me</a>
&nbsp;

MTのカテゴリが指定しても反映されない・・・[Firefox]

IE対策 &#8211; IEと仲良く付き合う方法 &#8211;

写真を自動的に加工してくれるjQuery「vintage.js」

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&nbsp;
特にシンプルなデザインが求められている場合、 
シンプルにしすぎて、軽すぎたり、寂しい印象になってしまったり、 
それを避けようとして、シンプルから離れてしまったりするなど、 
難しいと感じることが多いです。
&nbsp;
そこで今回は、シンプルな見出しのデザインで、 
一味違うと思うサイトを探してみることにしました。
&nbsp;
<hr />
<a href="http://www.menard.co.jp/" target="_blank">MENARD</a> 
<a href="http://www.menard.co.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img1.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_1.jpg" alt="" />
<img decoding="async" loading="lazy" style="width: 100%;" src="/uploads-archive/2012/10/header_img1_2.jpg" alt="" width="779" height="60" />
&nbsp;
大きな見出し、小さな見出しともに、左端に緩やかなグラデーションのかかったマークがあります。 
これだけだと、よく見られる一般的なものですが、 
大きな見出しのほうは、マークの４つの角が、半透明程度に削られています。 
小さな見出しのほうも、上側だけが、2px程度の角丸になっていました。
&nbsp;
下に入れられたボーダーは、両者とも、グラデーションが入っています。 
大きなほうは、一直線なグラデーションではなく、ランダムなグラデーションがかかっていました。 
これによって、ただの線という感じから脱しています。
&nbsp;
ボーダーの下には少し幅のある淡いドロップシャドウがつけられていて、ほんのりと立体感が出ています。 
大きな見出しのほうは、ドロップシャドウが真ん中ほど幅広くなっていて、より質感が出されていました。
&nbsp;
大きな見出しは、タイトルと説明の文字色のトーンを微妙に変えてメリハリをつけ、 
右端に添えられた英語のタイトルは、グラデーションがかけられていました。
&nbsp;
<a href="http://madamefigaro.jp/" target="_blank">FIGARO.jp</a>
<a href="http://madamefigaro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img2.jpg" alt="" /></a>
&nbsp;
見出し画像
<img decoding="async" src="/uploads-archive/2012/10/header_img2.jpg" alt="" />
&nbsp;
とてもシンプルなのですが、フォントの使い方や、文字の配置の仕方が面白く、印象的です。
&nbsp;
<a href="http://coetoiro.jp/" target="_blank">コエトイロ</a>
<a href="http://coetoiro.jp/" target="_blank"><img decoding="async" src="/uploads-archive/2012/10/top_img3.jpg" alt="" /></a>
&nbsp;
見出し画像 
<img decoding="async" src="/uploads-archive/2012/10/header_img3.jpg" alt="" />
&nbsp;
見出しはシンプルなアイコンと３本線と筆文字風のフォントで構成されたシンプルなものですが、 
和の感じが十分伝わってきます。
 

和柄を感じさせる線の使い方と、ひっそり右端でフェイドアウトしているところが、 
より和の感じを出しているように思います。
&nbsp;
&nbsp;
<hr />
<h2></h2>
<h2>まとめ</h2>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

ケース・バイ・ケースではありますが、 
シンプルなデザインをする場合、装飾に頼らず、レイアウトによって 
見出しを引き立てる技術が、より重要になってくるのだということを、 
感じました。

シンプル系の見出しデザインの一味違うサイトを探す

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

フリックでの操作を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制作にちょっと役立つサイト５つ

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;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2012/11/07

2012/11/01

2012/11/01

2012/11/01

2012/10/19

2012/10/18

2012/10/18

2012/10/11

2012/10/04

2012/10/04

2012/09/27

2012/09/26

2012/09/20

2012/09/20

2012/09/19

2012/09/13

2012/09/13

2012/09/06