最近よく見かけるようになってきた、フラットなデザインのサイト。 
こちらのブログ(→<a href="http://w3q.jp/t/3526" target="_blank">http://w3q.jp/t/3526</a>)でフラットなデザインのWebサイトについてまとめられていたので、 
こちらで紹介されているサイトが、どうしてかっこよく見えるのか、まとめてみました
<a href="http://w3q.jp/t/3526" target="_blank"><img decoding="async" loading="lazy" alt="フラットなデザインのWebサイトまとめ17個" src="/uploads-archive/2013/02/tn_blogimg.jpg" width="328" height="170" /></a>
&nbsp;
<h2> &#8211; 形 &#8211;</h3>
&nbsp;
四角、正円といったシンプルな形をベースに構成しています。
四角については、Web上のコンテンツが仕様上四角なので、 
各要素の外枠になるボックスが四角なのはWebサイトでは一般的なことですが、、 
フラットなデザインのサイトでは、枠だけでなく、ロゴやアイコンやイラストなども 
四角がベースになっていて、統一感が出されています。 
角も丸めたり、削ったりせずに、そのままです。
逆に丸い要素は、正円がベースになっていて、安定感と統一感を支えています
<img decoding="async" loading="lazy" alt="四角" src="/uploads-archive/2013/02/tn_eximg00.jpg" width="328" height="226" />
<img decoding="async" loading="lazy" alt="丸" src="/uploads-archive/2013/02/tn_eximg00_2.jpg" width="328" height="226" />
&nbsp;
&nbsp;
<h2>&#8211; 色 &#8211;</h3>
グラデーションでの色の変化がないため、 
使った色がそのまま飛び込んできて印象にのこります。 
サイトのイメージが色として記憶に残る感じです。 
単色のサイトも多い印象です。 
２色以上の場合でも、トーンを変えて他の場所に使うということはなく、 
全くそのままの色が、全体の要素に使われています。
こちらのサイト(→<a href="http://www.diesel.com/" target="_blank">http://www.diesel.com/</a>)では多色を使っているように見えましたが、 
それぞれのコンテンツに合わせて、コンテンツのイメージカラーが統一されています。 
スクロールで表示されているコンテンツに合わせて、上下のナビゲーションの色が変化していて、おもしろいです。
<img decoding="async" loading="lazy" alt="DEISEL ピンク" src="/uploads-archive/2013/02/tn_eximg01.jpg" width="328" height="226" />
<img decoding="async" loading="lazy" alt="DIESEL 緑" src="/uploads-archive/2013/02/tn_eximg02.jpg" width="328" height="226" />
&nbsp;
&nbsp;
<h2>&#8211; レイアウト・文字 &#8211;</h3>
文字はフラットさを引き立てるように、 
大きな余白が用いられたレイアウトが目立ちます。
フラットなデザインでは装飾が少ない分、文字の大きさや太さにメリハリをつけて、 
変化やリズム感が出されています。 
文字の大きさの差は、２倍以上あることが多いようです。
画像を使わずに、テキストとして配置されていますが、 
フォントの種類を細かに変化させていることがわかります。 
日本のサイトの場合だと、使えるフォントが限られてくるので、 
この辺がネックになりそうです。 
必要と想定される代理のフォントを絞込み、具体的に設置するのがポイントになりそうです。
<img decoding="async" loading="lazy" alt="文字のメリハリ" src="/uploads-archive/2013/02/tn_eximg03.jpg" width="314" height="253" />
&nbsp;
&nbsp;
<h2>&#8211; アイコン &#8211;</h3>
白抜きや単色のアイコンが圧倒的に多いです。 
大きくデフォルメされた、シンプルな形のアイコンが使われることが多いようです。 
ファビコンについても、とてもシンプルなものが多いです。
<img decoding="async" loading="lazy" alt="白抜きアイコン" src="/uploads-archive/2013/02/tn_eximg04.jpg" width="176" height="50" />
&nbsp;
&nbsp;
<h3>～ まとめ ～</h4>
<ul>
<li>色はイメージカラーに統一。トーンを変化させたバリエーションの色は使わない。</li>
<li>四角・正円で要素の形を統一。それ以外の形も、シンプルな線で。</li>
<li>余白を多くとって色を強調。</li>
<li>文字は大きさのちがいを２倍ほどつけてメリハリを。</li>
<li>細かくフォントを設定して、フォントでもメリハリを。</li>
<li>アイコンは単色。シンプルに。</li>
</ul>
&nbsp;
まとめてみると、デザインで重要なポイントが凝集されている印象です。 
フラットなデザインの製作は、デザインの基本を学ぶいい機会になりそうです。
&nbsp;

フラット（べた塗り）なデザインのサイトを調べてみる

GIFアニメを使ったちょっと味のあるナビゲーション

http://dainfagerholm.blogspot.jp/
こちらのサイトで紹介されている作品は、
「ステレオグラフィック・ドローイング」という手法で製作されています。
平面で描かれたイラストが、左右に振れるGIFアニメーションによって、
立体的に浮かび上がります。
&nbsp;
今回はこちらを写真で作ってみることにしました。
&nbsp;
<h2>作り方</h3>
<h3>手順１　写真をステレオグラム化する</h4>
「ステレオグラム」とは、２枚並んだ画像を、平行法・交差法といった特殊な見方をすることで、
裸眼で立体的に見ることができるものです。
&nbsp;
もちろん普通の同じ写真をただ横に並べただけでは立体的には見えません。
人が立体を感じることができるのは、右目と左目でものを見たときにズレがあり、
そのズレを元に、脳が立体だと感じるようになっているためです。
そのため、ステレオグラムを実現するためには、
この左右の見え方のズレを再現した２枚の画像が必要になります。
&nbsp;
今回は、<a href="http://www1.axfc.net/uploader/so/1149833" target="_blank">seeneon</a>というソフトを使って、このステレオグラムを製作しました。
<h4>seeneonを使ったステレオグラムの作成手順</h6>
1.　立体化する画像を準備します
今回はこの２枚の画像を立体化します。
<img decoding="async" loading="lazy" alt="リス" src="/uploads-archive/2013/01/867880_27859284.jpg" width="400" height="286" /><img decoding="async" loading="lazy" alt="犬" src="/uploads-archive/2013/01/1142381_49316099.jpg" width="400" height="291" />
&nbsp;
2.　深度マップを作成する
写真を元に、深度マップを作成します。
こちらのソフトでは、赤・緑・青のいずれかを選び、その濃さから深度を判定します。
今回は赤を使いました。赤が濃いところほど近く、赤が薄いところほど遠くになります。
<img decoding="async" loading="lazy" alt="リス深度マップ" src="/uploads-archive/2013/01/867880_27859284_dp.jpg" width="400" height="286" />
<img decoding="async" loading="lazy" alt="犬深度マップ" src="/uploads-archive/2013/01/1142381_49316099_dp.jpg" width="400" height="291" />
&nbsp;
3.　 seeneonを使ってステレオグラム化する
i.　元の画像と、深度マップの画像のファイルをドラッグ＆ドロップします
<img decoding="async" loading="lazy" alt="使い方1" src="/uploads-archive/2013/01/flow1.jpg" width="338" height="223" />
ii.　 深度マップに使った色を選びます（今回は赤なので&#8217;R&#8217;）
<img decoding="async" loading="lazy" alt="使い方2" src="/uploads-archive/2013/01/flow2.jpg" width="338" height="223" />
iii.　生成ボタンを押します
<img decoding="async" loading="lazy" alt="使い方3" src="/uploads-archive/2013/01/flow3.jpg" width="338" height="223" />
これでステレオグラムが完成しました。
<img decoding="async" loading="lazy" alt="リスのステレオグラム" src="/uploads-archive/2013/01/867880_27859284_parallel.png" width="716" height="255" />
<img decoding="async" loading="lazy" alt="犬のステレオグラム" src="/uploads-archive/2013/01/1142381_49316099_parallel.png" width="716" height="260" />
今回は平行法で作っているので、平行法(画像の真ん中にしきいをつけて、画像が重なって見えるようにする)で見ると、
この状態でも立体的に見えます。
しかし、GIFアニメーションを利用して、２つを重ねて表示すると、特殊な見方をしなくても立体的に見ることができるので、
今度はPhotoshopを使ってGIFアニメーションを作ります。
&nbsp;
<h3>手順2　Photoshopでアニメーションにする</h4>
1.　「作った画像の半分の幅」×「作った画像と同じ高さ」の大きさで「ファイル」→「新規作成」
2.　作った画像を右、左それぞれが枠内に収まるようにして、レイヤーで重ねます
<img decoding="async" loading="lazy" alt="重ねる" src="/uploads-archive/2013/01/pt_flow1.jpg" width="400" height="305" />
3.　「ウィンドウ」→「アニメーション」でフレームを表示
<img decoding="async" loading="lazy" alt="フレーム" src="/uploads-archive/2013/01/pt_flow2.jpg" width="400" height="177" />
4.秒数を指定します（今回は0.1秒）
<img decoding="async" loading="lazy" alt="フレーム秒数" src="/uploads-archive/2013/01/pt_flow3.jpg" width="205" height="178" />
5.　フレームを新規作成し、新規作成したほうの表になっていたレイヤーを非表示にして、アニメーションの完成です。
<img decoding="async" loading="lazy" alt="フレーム追加" src="/uploads-archive/2013/01/pt_flow4.jpg" width="400" height="125" />
&nbsp;
<h3>手順3　GIFに出力する</h4>
「ファイル」→「Webおよびデバイス用に保存」でGIF形式で書き出せば、完成です。
<img decoding="async" loading="lazy" alt="GIF書き出し" src="/uploads-archive/2013/01/pt_flow5.jpg" width="400" height="296" />
<h3>完成</h4>
↓↓できあがったもの↓↓
<img decoding="async" loading="lazy" alt="3DりすGIFアニメーション" src="/demo/ninomiya/11/squirrel.gif" width="400" height="285" />
<img decoding="async" loading="lazy" alt="3D犬IGFアニメーション" src="/demo/ninomiya/11/dog.gif" width="400" height="291" />

3DなアニメーションGIF作ってみた

CSS3のアニメーションを使ったボタン

2013年初のブログということで、簡単にwebデザインのトレンドのお話をしたいと思います。
まずは、昨年のwebデザインから。
海外の方の好みなのでしょうか。 
数多くのwebサイトが掲載されています。
<a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2012" target="_blank">Best of Web Design in 2012 | Inspiration</a>
簡単に大きく分けていうと、
・ベタ塗り 
 ・大きな写真を背景としてブラウザいっぱいに表示 
 ・背景にちょっとしたテクスチャ(紙等) 
 ・レトロな配色 
 ・ワンカラム 
 ・スクロールによるアニメーション 
 ・大きなキャッチコピー
こんな感じでしょうか。 
(もっと細かくみたら他にもあると思います・・・)
海外の方のものなので、 
日本のWEBサイトで見かけるのとは違うかも知れませんが、 
僕個人としては、確かに上記のようなサイトが多くあった感じがします。
そして、今年のデザインのトレンドですが、 
こちらも海外の方のブログですが、 
トレンドを20個紹介してくれています。
<a href="http://www.hongkiat.com/blog/web-design-trend-2013/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For in 2013</a> 
箇条書きにすると以下の様な感じです。
１．レスポンシブデザイン 
 ２．Retinaの対応 
 ３．ヘッダーの固定 
 ４．背景に大きな写真 
 ５．CSSでの透過 
 ６．ミニマルなランディングページ 
 ７．QRコードの掲載 
 ８．ソーシャルメディアのバッジ 
 ９．細かいイラスト 
 １０．無限スクロール(インフィニットスクロール) 
 １１．HPのチュートリアル 
 １２．スライドでコンテンツ移動させる 
 １３．クリックで開閉、表示・非表示になるナビーゲーション 
 １４．画面いっぱいのタイポグラフィー 
 １５．オープンソースやAPIの使用 
 １６．ボックスの影(ドロップシャドウ) 
 １７．CSS３によるアニメーション 
 １８．縦のナビゲーション 
 １９．１ページのwebデザイン 
 ２０．円形の要素を使用したデザイン
ざっと書いてしまうとこんな感じです。
昨年から見られるトレンドもありますが、 
今年もトレンドとして引き続きあるってことですねー
僕として、今は、「ベタ塗り」や「テクスチャ」が好みではありますが、 
今年のトレンドには見当たらないのシフトしていかないとダメかもしれませんww

2012年のベストwebデザインと、2013年に予想されるwebデザイン

CSS3で伊勢丹の紙袋を作ってみた

CodeIgniterの基本的な設定

Illustratorにできて、Photoshopにできない表現方法のひとつに、
「グラデーションメッシュ」があります。
グラデーションメッシュを使うと、細かにグラデーションの設定ができるので、
かなり繊細な表現が可能となります。
しかし、このグラデーションメッシュは、使い方に癖があり、複雑な形のものでは思い通りに操作することが難しいため、
なかなか手が出せずにいました。
&nbsp;
そんなときに、<a href="http://www.amazon.co.jp/dp/4861006406" target="_blank">「Illustratorグラデーションメッシュらくらく操作ガイド」</a>という本を見つけました。
こちらの本には、Illustratorのグラデーションメッシュでのソフトウェアの癖を理解したうえで、
それを回避しながら、思い通りにグラデーションメッシュを扱う方法が紹介されていました。
&nbsp;
その中でも、文字の装飾について載っていたので、ご紹介いたします。
&nbsp;
まず、私のこれまで知っていた方法でグラデーションメッシュを文字に適用するとします。
1.グラデーションメッシュを適用するオブジェクトを選択して
2.「オブジェクト」→「グラデーションメッシュを作成」
この方法でグラデーションメッシュを作ると
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img02.jpg" />
↑こちらのように、メッシュがグチャグチャになってしまい、
この状態のメッシュでグラデーションをかけようとすると、
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img03.jpg" />
↑このようによくわからないグラデーションになってしまいます。
これではグラデーションメッシュで思い通りに製作することは、到底できません。
これは、単純な形では便利に使えるようになっているIllustratorにおけるグラデーションメッシュの
作成の仕組みによるものだそうです。
&nbsp;
これを回避する方法のひとつとして、本では３つ程方法が紹介されていましたが、
今回は文字のような、既に形が出来上がっているもので、複雑な図形の編集で有効な方法である、
「ダイレクト選択メッシュ法」について、紹介いたします。
&nbsp;
まずは、文字をアウトライン化したものを用意します。
これを、ナイフツールを使い、とめ・はねのような動きのあるところを切り分けていきます。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img04.jpg" />
次に、切り分けた、それぞれのオブジェクトの、4隅に当たる4つのアンカーポイントを、
ダイレクト選択ツールを使って選択します。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img05.jpg" />
この状態で、「オブジェクト」→「グラデーションメッシュを作成」の手順で、メッシュを作成します。 
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img06.jpg" />
そうすると、次の画像のように、形に沿ったグラデーションメッシュが出来上がります。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img07.jpg" />
これを切り分けたオブジェクトすべてに行うことで、
きれいなグラデーションメッシュが出来上がりました。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img08.jpg" />
形に沿ったグラデーションメッシュができるので、
次の画像のように、思い通りにグラデーションをかけることができました。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img09.jpg" />
&nbsp;
こちらと似たようなグラデーションを、アウトライン化した文字に、
「効果」→「スタイライズ」→「光彩(内側)」を乗算でかけることでもできますが、
細かな設定はできないので、凝った表現が必要なときは、この方法が表現を広げてくれそうです。
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img10.jpg" width="100%" />
&nbsp;
ちなみに、グラデーションメッシュは現状のSVG1.1ではサポートされていないため、
Illustratorでグラデーションメッシュを使ったオブジェクトは、jpgやpng等と同じラスターデータに変換されてしまいます。
次世代のSVGである、開発中のSVG2.0ではグラデーションメッシュが採用される予定のようですので、
SVG2.0の普及が待ち遠しいところです。

Illustratorの「グラデーションメッシュ」で、少し凝った文字の装飾

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

白は、Webサイトのデザインの中で、最も多く使う色なのではないかと思います。
今回、白をメインテーマにしたサイトのデザインをすることになったので、
ただ白を使ったサイトではなく、白をうまく引き立てたデザインのWebサイトを探してみました。 
<a title="website01" href="/uploads-archive/2012/12/website01.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website01" src="/uploads-archive/2012/12/website01-300x223.jpg" alt="website01" width="300" height="223" /></a> 
<a href="http://www.storia-wedding.jp/" target="_blank">http://www.storia-wedding.jp/</a>
上品な空の青が、新婦さんのドレスの白を綺麗に引き立てています。 
<a title="website02" href="/uploads-archive/2012/12/website02.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website02" src="/uploads-archive/2012/12/website02-300x223.jpg" alt="website02" width="300" height="223" /></a> 
<a href="http://kuad-entrance.com/" target="_blank">http://kuad-entrance.com/</a>
余白を多く使い、白のイメージを強め、
淡いグレーが白の邪魔をすることなく、白の一部のようにして、白を引き立てています。 
<a title="website03" href="/uploads-archive/2012/12/website03.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website03" src="/uploads-archive/2012/12/website03-300x223.jpg" alt="website03" width="300" height="223" /></a> 
<a href="http://g-u-k.jp/" target="_blank">http://g-u-k.jp/</a>
極端に余白を大きくし、有彩色の色を使わないことで、白のイメージが印象に残ります。
&nbsp;
<h3>まとめ</h4>
白を引き立てたサイトの特徴として、次のような印象を感じました。
・余白を大きく取り、白の印象を強める(色のついた場所を極力小さくする)
・上品な有彩色を背景に使って、白の白さを引き立てる
・淡いグレーやベージュを用いて、白を邪魔することなく、白の陰影のような印象にすることで、メリハリを付ける。
&nbsp;
以上のようなことを、参考に、白のサイトのデザインをしてみたいと思います。
&nbsp;

白を引き立てる白のサイト

HTML5でWebカメラ &#8211; Photobooth.js

medium_blogtop.jpg

small_blogtop.jpg

thumbnail_blogtop.jpg

blogtop.jpg

インラインSVGの基本まとめ

見出しはコンテンツの中でも重要な場所ですが、 
デザインを考えるときに、迷うことが多い場所です。
&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>
今回シンプルな見出しを探してみたところ、 
文字だけだったり、 
点線や実践一本、１色ののマークやアイコンが左端にひとつあるなどのものが、 
大半を占めていました。
 

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

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

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で歩くアニメーションに挑戦

今回お仕事で、表示サイズが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;
とはいえ、 これからどんな新しいサービスがでてくるのか楽しみにしたいと思います！

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

イラストチックな、絵本テイストのサイトデザインをすることになったので、
どういったデザインにしたらよいのか参考にするために、
絵本テイストのサイトを探してみました。
&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ブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2013/02/07

2013/01/31

2013/01/24

2013/01/17

2013/01/10

2013/01/10

2012/12/19

2012/12/13

2012/12/13

2012/12/06

2012/12/06

2012/11/22

2012/10/18

2012/10/04

2012/09/27

2012/09/20

2012/09/19

2012/09/06