最近よく見かけるようになってきた、フラットなデザインのサイト。 
こちらのブログ(→<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のアニメーションを使ったボタン

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

CSS3を使って、背景パターンをつくる

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の「グラデーションメッシュ」で、少し凝った文字の装飾

白は、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;

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

インラインSVGを利用した棒グラフ

medium_blogtop.jpg

small_blogtop.jpg

thumbnail_blogtop.jpg

blogtop.jpg

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

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

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

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

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

今回は、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コーディングの復習

フリックでの操作を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

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

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

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

カテゴリーから探す

年別から見る

記事一覧 - Author: ninomiya

2013/02/07

2013/01/31

2013/01/24

2013/01/17

2013/01/10

2012/12/20

2012/12/13

2012/12/06

2012/11/29

2012/11/22

2012/11/01

2012/10/18

2012/10/11

2012/10/04

2012/09/27

2012/09/20

2012/09/13

2012/09/06