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を利用した棒グラフ

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

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

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

<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

イラストを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サイトのデザインに合わせて、 
これらの方法を使い分けていくと、いいのではないかと思いました。

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: ninomiya

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

2012/08/30

2012/08/22