文章はほとんどのHPにあると思いますが、
その文章でちょっと悩ませるのが折り返しについてです。
&nbsp;
紙とは違い完全に思い通りにはならないものなのですが、
cssでいろいろな設定をすることができます。
&nbsp;
その主要なものが以下になります。
<h3>word-wrap</h4>
normal 
単語の途中で改行はせず、必要に応じて表示範囲を拡大。 
break-word 
必要に応じて単語の途中で改行
<h3>word-break</h4>
normal 
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。 
break-all 
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。 
keep-all 
言語に関係なく単語の途中では改行せず、単語で改行。
<h3>white-space</h4>
normal 
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。 
pre 
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。 
nowrap 
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。
&nbsp;
となっておりますが、
言葉で説明されてもあまりピンとこないと思いますので、
英語と日本語で実際にhtmlで作成してみましたので、
ご覧ください。 
<a class="demo" href="/demo/abe/35/" target="_blank">DEMO</a>
あまり変わらないような感じがしますね・・・
word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、
おそらくhtmlの状況によって変わってくるのだと思います。
簡単な参考にしてください。
&nbsp;
ちなみに、DEMOに入ってるテキストは、
以下のサイトで生成されたものを使用しています。
テキスト何入れようかと迷った時はいいですね！
日本語 
<a href="http://www.blindtextgenerator.com/lorem-ipsum" target="_blank">http://www.blindtextgenerator.com/lorem-ipsum</a>
英語 
<a href="http://lipsum.sugutsukaeru.jp/index.cgi" target="_blank">http://lipsum.sugutsukaeru.jp/index.cgi</a>

cssで制御する折り返しのまとめ

インラインSVGはブラウザの制約等により、管理画面などを除いては、なかなか目にする機会が少ないですが、
インラインSVGによるグラフィックとアニメーションを大胆に使ったサイトが面白かったのでご紹介いたします。
&nbsp;
↓サイトはこちらです↓
「Fontwalk」<a href="http://www.fontwalk.de/" target="_blank">http://www.fontwalk.de/</a>
<a href="http://www.fontwalk.de/" target="_blank"><img decoding="async" loading="lazy" title="Fontwalk" alt="Fontwalk" src="/uploads-archive/2013/10/nino_image01.jpg" width="328" height="224" /></a>
&nbsp;
&nbsp;
まずはこちらのシーン
<img decoding="async" loading="lazy" alt="シーン１" src="/uploads-archive/2013/10/nino_image02.jpg" width="328" height="224" />
変化する図形や背景の情報などが大きな数字によって表示されていて、印象的です。
真ん中の回転する分度器のようなものはSVGならではという印象です。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン2" src="/uploads-archive/2013/10/nino_image03.jpg" width="328" height="224" />
つづいて、車で走っているようなアニメーションです。
画面いっぱいに広がるグラフィックを表示しても軽いのもSVGの魅力ですが、
こちらではその利点が最大限に活かされている印象です。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン3" src="/uploads-archive/2013/10/nino_image04.jpg" width="328" height="223" />
筆記体で文字が書かれていくアニメーションです。
WEB上ではFlashを除いてSVGでなければ、このようなアニメーションを表示できないのではないでしょうか。
&nbsp;
<img decoding="async" loading="lazy" alt="シーン4" src="/uploads-archive/2013/10/nino_image05.jpg" width="328" height="224" />
フォントが徐々に変化するアニメーションです。
パッと見たときは気づきませんでしたが、
とても凝ったアニメーションです。
&nbsp;
画面いっぱいにアニメーションを表示する場合に、
SVGが大きな力を発揮するということを、
今回改めて感じました。

SVGとスクロールによるアニメーションを使ったインパクトのあるサイト

いよいよ、igoogleの終了が迫ってきましたね。igoogleがスタートして以来、RSSリーダーが発展しようがソーシャルメディアが出てこようが、私のブラウザのホームボタンはいつもigoogleでした。
調べて見ると、2005年に始まったサービスのようです。私も学生時代から使っていたことを記憶していますので、7年以上のお付き合いになるかと思います。
この一覧性による「新聞の一面だけ見ておけ的な」サービスが好きです。
ということで、googleの戦略を考えるとigoogleに留まって欲しくないのは必然だろうなと惜しまれつつも終了が近づいているので、移行先を探しています。
igoogle代替のサービスとして<a href="http://www.symbaloo.com/">Symbaloo</a>、<a href="http://www.ighome.com/">igHome</a>、<a href="http://www.netvibes.com/ja-jp">Netvibes</a>などが名乗りを挙げており、特に<a href="http://www.netvibes.com/ja-jp">Netvibes</a>を押すブログが多いのですが、私はあえてMy　Yahoo!を選択しました。
<h2>My Yahoo!</h3>
<a href="/uploads-archive/2013/10/Yahoo__JAPAN-6.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3496" alt="Yahoo__JAPAN-6" src="/uploads-archive/2013/10/Yahoo__JAPAN-6-300x142.jpg" width="300" height="142" srcset="/uploads-archive/2013/10/Yahoo__JAPAN-6-300x142.jpg 300w, /uploads-archive/2013/10/Yahoo__JAPAN-6-228x107.jpg 228w, /uploads-archive/2013/10/Yahoo__JAPAN-6.jpg 959w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
まず、My Yahoo!への遷移ですがなんとTOPページの右横にあります。力を入れている証拠でしょうか？
<a href="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3497" alt="My_Yahoo__-_Myページ-6" src="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-300x167.jpg" width="300" height="167" srcset="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-300x167.jpg 300w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-1024x572.jpg 1024w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-228x127.jpg 228w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512.jpg 1355w" sizes="(max-width: 300px) 100vw, 300px" /></a>
デフォルトのトップページです。右上の領域は広告が入っています。これは固定で動かすことが出来ません。
&nbsp;
<h3>igoogle設定エクスポート</h4>
<a href="/uploads-archive/2013/10/3a53b4077ab6e6901cca74c790fff10f.jpg"><img decoding="async" loading="lazy" alt="iGoogle_の設定" src="/uploads-archive/2013/10/3a53b4077ab6e6901cca74c790fff10f-300x118.jpg" width="300" height="118" /></a>
それでは、移行の準備をしましょう！
igoogle&gt;igoogleの設定から最下部でエクスポートができます。
<h3>igoogle移行ツール</h4>
そしてここからが、My Yahoo!の真骨頂です。
なんとigoogleの移行ツールが用意されています。
広告の少し上の帯か以下のURLからアクセスしてください。
<a href="http://docs.my.yahoo.co.jp/st/promo/change/" target="_blank">http://docs.my.yahoo.co.jp/st/promo/change/</a>
<a href="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3498" alt="My_Yahoo_へカンタン引っ越ししよう！_-_Yahoo__JAPAN" src="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-300x273.jpg" width="300" height="273" srcset="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-300x273.jpg 300w, /uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-228x207.jpg 228w, /uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93.jpg 973w" sizes="(max-width: 300px) 100vw, 300px" /></a>
上記サイトから先ほどエクスポートをしたファイルをアップロードするだけです。
<a href="/uploads-archive/2013/10/My_Yahoo__-_Home-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3500" alt="My_Yahoo__-_Home-2" src="/uploads-archive/2013/10/My_Yahoo__-_Home-2-300x160.jpg" width="300" height="160" srcset="/uploads-archive/2013/10/My_Yahoo__-_Home-2-300x160.jpg 300w, /uploads-archive/2013/10/My_Yahoo__-_Home-2-1024x548.jpg 1024w, /uploads-archive/2013/10/My_Yahoo__-_Home-2-228x122.jpg 228w, /uploads-archive/2013/10/My_Yahoo__-_Home-2.jpg 1343w" sizes="(max-width: 300px) 100vw, 300px" /></a>
急上昇ランキングなど、GoogleのサービスでYahoo!で類似のものを持っている場合は、置き換えれるようです。
素敵な機能ですね！
<h2>まとめ</h3>
<ul>
<li>igoogleのバックアップはお早めに！</li>
<li>My Yahoo!最大の利点はigoogle移行ツールが用意されている</li>
<li>Google独自サービスでYahoo!に類似があれば代替してくれる</li>
<li>Yahoo!検索もGoogleと同じアルゴリズムなので、検索結果に差はない</li>
</ul>
ということで、Yahoo!の依存度が高くなりそうな予感をしつつ様子を見てみたいと思います。

igoogleの移行先はMy Yahoo!推し

フラットデザインが流行っているのと共に、
ロングシャドウもじわじわと流行りつつあるようです。（もしかしたらもう流行ってる？？）
&nbsp;
ロングシャドウってなに？？っていう人は、
以下のサイトをご覧ください。
&nbsp;
<a href="http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/">Flat design casts a long shadow | Webdesigner Depot</a>
&nbsp;
要はやたら長いドロップシャドウみたいな感じですね。
フラットデザインと相まっていい感じですね！！
&nbsp;
そんなドロップシャドウを簡単に作れる無料PSDがあります！
斜め45度限定になりますが、十分でしょう！
&nbsp;
以下からダウンロードして下さい！
&nbsp;
<a href="http://graphicburger.com/long-shadow-generator/">Long Shadow Generator | GraphicBurger</a>
&nbsp;
実際にPSDを開いてみると、
レイヤーがこんな感じになっているので、
<a href="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3491" alt="スクリーンショット 2013-10-28 21.43.04" src="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png" width="342" height="327" srcset="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png 342w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-300x286.png 300w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-228x218.png 228w" sizes="(max-width: 342px) 100vw, 342px" /></a>
Your design hereに合わせて、右クリックで、
「コンテンツを置き換え」をするとそのコンテンツに合わせてシャドウが生成されます。
テキスト、アイコンなんでもOKっぽいです。
&nbsp;
上のメインビジュアルが実際に作ってみたものになります。
&nbsp;
これはPSDですが、
htmlを生成してくれるサイトもあり、css3を使って表現しているようです。
以下のサイトになります。
&nbsp;
<a href="http://sandbox.juan-i.com/longshadows/">Long Shadows Generator &#8211; by Juani</a>
&nbsp;
実に簡単にできますね！！
これでロングシャドウは怖くないぞ！！
&nbsp;
&nbsp;
おまけ：
iOS７のカラーコードを一覧にしているサイトがあります。
カラーの参考にぜひどうぞ！
&nbsp;
<a href="http://ios7colors.com/">iOS 7 colors</a>
&nbsp;

流行りつつあるロングシャドウを作れる無料PSD

今回ご紹介するのは、「Flatic UserInterface Kit」というフラットなデザインのUIキット素材です。
フリーでゲットできる上に、100以上のエレメントが揃っています！
デザインで使うのも良さそうですが、 
これはワイヤーフレームで使えそうですね！
&nbsp;
<a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3460" alt="Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02" src="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02.jpg" width="599" height="364" srcset="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02.jpg 599w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02-300x182.jpg 300w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02-228x138.jpg 228w" sizes="(max-width: 599px) 100vw, 599px" /></a>
&nbsp;
<a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3461" alt="Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01" src="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01.jpg" width="600" height="364" srcset="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01.jpg 600w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01-300x182.jpg 300w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01-228x138.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a>
&nbsp;
<a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/#.UmYpoCQYRVS">Flatic UserInterface Kit &#8211; M-Elgendy</a>
&nbsp;
&nbsp;
おまけ
バーガーが画面一杯に表示され、マウスオーバーで増殖していき、 
クリックで「ガブッ」という音とともに元通り。 
なんかおもしろいです(笑)
<a href="http://www.theageofmammals.com/burgers/" target="_blank">Burgers, Guthrie Lonergan</a>

フラットなデザインのUIキットPSDフリー素材「Flatic UserInterface Kit」

「D-Ucar.net」
<a href="http://ducar.carsensor.net/" target="_blank"><img decoding="async" loading="lazy" alt="D-Ucar.net" src="/uploads-archive/2013/10/image01.jpg" width="656" height="361" /></a>
<a href="http://ducar.carsensor.net/" target="_blank">http://ducar.carsensor.net/</a>
シルエットをメインにしたイラスト。
お店や街頭がおしゃれ感を出しています。
&nbsp;
&nbsp;
「コープさが生活協同組合」
<a href="http://www.saga.coop/" target="_blank"><img decoding="async" loading="lazy" alt="コープさが" src="/uploads-archive/2013/10/image03.jpg" width="656" height="362" /></a>
<a href="http://www.saga.coop/" target="_blank">http://www.saga.coop/</a>
淡い色彩で、落ち着いた感じです。
&nbsp;
&nbsp;
「三好不動産」
<a href="http://www.miyoshi.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="コープさが" src="/uploads-archive/2013/10/image02.jpg" width="656" height="345" /></a>
<a href="http://www.miyoshi.co.jp/" target="_blank">http://www.miyoshi.co.jp/</a>
線をメインにしたイラストで、色数が控えられていて、クールな印象です。
&nbsp;
&nbsp;
「KALDI COFFEE FARM」
<a href="http://www.kaldi.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="KALDI COFFEE FARM" src="/uploads-archive/2013/10/image05.jpg" width="656" height="365" /></a>
<a href="http://www.kaldi.co.jp/" target="_blank">http://www.kaldi.co.jp/</a>
アートな感じで、おしゃれです。
Flashによるアニメーションが印象的です。
&nbsp;
&nbsp;
「水からはじまるストーリー「つないで、つながって」(TOTO)」
<a href="http://www.toto.co.jp/greenchallenge/tsunaide/" target="_blank"><img decoding="async" loading="lazy" alt="KALDI COFFEE FARM" src="/uploads-archive/2013/10/image04.jpg" width="656" height="362" /></a>
<a href="http://www.toto.co.jp/greenchallenge/tsunaide/" target="_blank">http://www.toto.co.jp/greenchallenge/tsunaide/</a>
こちらも線画メインですが、多色による線画になっています。
ただ、トーンが抑えられていて、落ち着いています。

おしゃれな感じのイラストを使ったサイト

本日は、HTMLやcssの初級者がレベルアップするために薦めたい本をご紹介します。
僕自身がお世話になった本で、良かったなぁと思う本です。
今から紹介するのは、初心者向けではなく、初級者向けになりますので、 
ある程度かじっていないと本の内容がわからないと思います。
どのぐらいの初級者かっていうと、タグの勉強はひと通りしていて、 
HTMLもいじったことがあるけど、 
サイト自体のコーディングはあんまり経験がない人って感じです。 
ある程度経験しているけど、我流って人にも、今一度見直しもらうためにも良いかもしれません。
今となってはもしかしたら少々古いかもしれませんが、 
コーディングの基礎となる所なので、学ぶとそれなりにいいコーディングができると思います。
そのおかげか僕自身も動きをつけない場合のHTMLでは、ie対応で困ることはそこまで多くありません。
&nbsp;
長くなりましたが、本をご紹介します。
&nbsp;
<iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4883376710&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
こちらは、北海道では有名なコーディング屋さんのようで、丁寧に説明してくれています。 
一からサイト全体を作リ方を教えてくれます。 
コーディング会社ならではノウハウや、制作資料なんかもゲットできます。
&nbsp;
&nbsp;
<iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4839929734&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
こちらも基本的な所から、バグについても解説してくれています。 
現場ならではの知識・経験が詰まっており、実際にやってみないとわからないことを教えてくれます。
&nbsp;
&nbsp;
<iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4048705172&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>
こちらは、上記2つとは違うのですが、 
HTML5の本で、新しく増えたタグ・機能の使い方を、サンプルを元に解説してくれます。 
コードも載っているので、勉強になります。
&nbsp;
以上になります。
&nbsp;
上の2つだけで、けっこう出来るようになるのではないかなと思いますが、 
新しいやり方、もっと効率的なやり方は日々生まれているような気がします。
&nbsp;
もっと上達したい人は、本はもちろんいいのですが、 
有名なサイトのコードを見てみて試してみるというやりかたが一番いい気がします。

コーディング初級者がレベルアップするためにオススメな本

Shopifyという無料でECサイトを作成できるサービスが8月に 
Shopify Ecommerce Design Awards 
と題してECサイトのデザインアワードが開催された。 
Shopifyはアメリカのサービスで2004からやっている、Store.jpやBaseの先駆け的な存在だ。 
Ruby on railsで開発されており、当時はそっちでのみ話題になっていた。
こちらがデザインアワードの結果ページ。 
<a href="http://www.shopify.com/design-awards" target="_blank">http://www.shopify.com/design-awards</a>
こちらが受賞サイト
<h2>1位 Whipping + Post</h3>
<a href="/uploads-archive/2013/10/1.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3201" alt="1" src="/uploads-archive/2013/10/1.png" width="656" height="340" srcset="/uploads-archive/2013/10/1.png 656w, /uploads-archive/2013/10/1-300x155.png 300w, /uploads-archive/2013/10/1-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.whippingpost.com/" target="_blank">http://www.whippingpost.com/</a>
&nbsp;
<h2>2位 GREATS</h3>
<a href="/uploads-archive/2013/10/2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3202" alt="2" src="/uploads-archive/2013/10/2.png" width="656" height="340" srcset="/uploads-archive/2013/10/2.png 656w, /uploads-archive/2013/10/2-300x155.png 300w, /uploads-archive/2013/10/2-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://greatsbrand.com/" target="_blank">http://greatsbrand.com/</a>
&nbsp;
<h2>3位 Goodwin + Goodwin</h3>
<a href="/uploads-archive/2013/10/3.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3203" alt="3" src="/uploads-archive/2013/10/3.png" width="656" height="340" srcset="/uploads-archive/2013/10/3.png 656w, /uploads-archive/2013/10/3-300x155.png 300w, /uploads-archive/2013/10/3-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.goodwinandgoodwin.com/" target="_blank">http://www.goodwinandgoodwin.com/</a>
&nbsp;
以下は佳作。10点あるが、個人的に良かったと思ったものを3点紹介。
&nbsp;
<h2>Pure Fix Cycles</h3>
<a href="/uploads-archive/2013/10/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3204" alt="4" src="/uploads-archive/2013/10/4.png" width="656" height="340" srcset="/uploads-archive/2013/10/4.png 656w, /uploads-archive/2013/10/4-300x155.png 300w, /uploads-archive/2013/10/4-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://purefixcycles.com/" target="_blank">http://purefixcycles.com/</a>
&nbsp;
<h2>Jennifer Torosian</h3>
<a href="/uploads-archive/2013/10/5.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3205" alt="5" src="/uploads-archive/2013/10/5.png" width="656" height="340" srcset="/uploads-archive/2013/10/5.png 656w, /uploads-archive/2013/10/5-300x155.png 300w, /uploads-archive/2013/10/5-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://www.jennifertorosian.com/" target="_blank">http://www.jennifertorosian.com/</a>
<h2>Society of the Sun</h3>
<a href="/uploads-archive/2013/10/6.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3206" alt="6" src="/uploads-archive/2013/10/6.png" width="656" height="340" srcset="/uploads-archive/2013/10/6.png 656w, /uploads-archive/2013/10/6-300x155.png 300w, /uploads-archive/2013/10/6-228x118.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
<a href="http://shop.societyclothing.com/" target="_blank">http://shop.societyclothing.com/</a>
&nbsp;
全体の印象としては、ほとんどがレスポンシブWebデザインであり完成度が高いということ。
あとはECサイトといえば商品が大量に陳列してあるイメージが強いが、
全てがコンセプトを全面に出しており世界観で勝負しているということ。
大量仕入れ大量販売では勝負できないサイトがコンセプトを追求し
ブランドを売っていくという方法は有効だ。
そこでweb上で一番大事になってくるのはデザインだ。
そういういみではデザインがECで成功するための最も重要なファクターの1つと再認識した。

Shopify Ecommerce Design Awards

デザインを考えるとき、何を優先してデザインしていくかということで迷うことがあります。
「<a href="http://www.amazon.co.jp/dp/4766120175" target="_blank">レイアウトデザイン レイアウト基本マニュアル（南雲治嘉 著）</a>」で優先順位とその理由について、
詳しく説明されていました。
この本ではその他、レイアウトの方法について、基礎の観点からとてもわかりやすく説明されているのでおすすめです。
今回はこの本から、デザインの優先順位の部分について、一部ご紹介いたします。
<a href="http://www.amazon.co.jp/dp/4766120175" target="_blank"><img decoding="async" loading="lazy" alt="レイアウトデザイン　レイアウト基本マニュアル　南雲治嘉著" src="/uploads-archive/2013/10/bookimage.jpg" width="250" height="250" /></a>
&nbsp;
<h2>1.わかりやすさ</h3>
見た瞬間に、その画面が何を伝えようとしているのかが、わかるようにするということ。
情報を整理し、優先順位をつけ、複雑な分割構成は避ける。
&nbsp;
<h2>2.読みやすさ</h3>
デザインには文字は欠かせないもの。
読めないような小さいサイズ、飾りすぎたり踊るような入れ方は避けるべき。
読みやすいサイズ、字間・行間、配置を心がける。
&nbsp;
<h2>3.美しさ・かっこよさ</h3>
作品は美的でなければならない。人にいい感じを与えることが、レイアウトの使命でもある。
しかし、最初に手をつけるものではない。
わかりやすさ、読みやすさを処理した後の、仕上げである。
&nbsp;
補足として
<h2>4.見る人を眠らせない</h3>
全体のまとまりがよくても、ある条件をクリアしていないと眠くなる。
その条件とは視覚的な対比であり、コントラストのことである。
&nbsp;
デザインをするとき、ついつい美しさやかっこよさを一番最初に考えてしまいがちですが、
それ以前にやるべき大切なことがあることが理解できました。
&nbsp;
４の見る人を眠らせないという部分も、
まとまりばかりを意識していて、眠いデザインになってしまったことが私にもあるので、
納得できました。
&nbsp;
みなさんもデザインに迷ったときや見直す必要があるときは、是非参考にされてみてください。

デザインの優先順位

ナビゲーションにアニメーションを使うことは、今ではごく普通のこととなりましたが、
アニメーションの仕方がちょっと変わっていて面白いサイトを集めてみました。
&nbsp;
<h3><a href="http://jtpj.jp/" target="_blank">「女子旅つくるプロジェクト」</a></h4>
<a href="http://jtpj.jp/" target="_blank"><img decoding="async" loading="lazy" alt="女子旅つくるプロジェクト" src="/uploads-archive/2013/09/SS01.jpg" width="656" height="362" /></a>
CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。
数種類のアニメーションが組み合わされていて、
とてもきれいです。
&nbsp;
<h3><a href="http://azitas.co.jp/recruit2014/" target="_blank">「Azitas 新卒採用2014・2015」</a></h4>
<a href="http://azitas.co.jp/recruit2014/" target="_blank"><img decoding="async" loading="lazy" alt="Azitas 新卒採用2014・2015" src="/uploads-archive/2013/09/SS02.jpg" width="656" height="362" /></a>
ホバーアニメーションは普通ですが、
ナビゲーションにGIFアニメが使われていて、
思わず目が止まります。
&nbsp;
<h3><a href="http://fonta.kayac.com/" target="_blank">「FONTA」</a></h4>
<img decoding="async" loading="lazy" alt="FONTA" src="/uploads-archive/2013/09/SS03.jpg" width="656" height="362" />
&nbsp;
CSS3アニメーションとjQueryを組み合わせたアニメーションが使われています。
Webアプリとしてのリッチな印象を、アニメーションが高めています。
&nbsp;
<h3><a href="http://cp.okinawastory.jp/" target="_blank">「しゅんおき！旬香周島おきなわ」</a></h4>
<img decoding="async" loading="lazy" alt="しゅんおき！旬香周島おきなわ" src="/uploads-archive/2013/09/SS04.jpg" width="656" height="362" />
&nbsp;
CSS3アニメーションがバナー類に使われています。
ゆったりとしたアニメーションが、控えめながら印象を残します。
&nbsp;
<h3><a title="風景結々" href="http://www.fukei-okinawa.jp/" target="_blank">「風景結々」</a></h4>
<a href="http://www.fukei-okinawa.jp/" target="_blank"><img decoding="async" loading="lazy" alt="風景結々" src="/uploads-archive/2013/09/SS05.jpg" width="656" height="362" /></a>
&nbsp;
左側のナビゲーションにアニメーションが使われています。
よく見るアニメーションのように思いましたが、
よくみると、色の反転の仕方などが凝っています。
&nbsp;
&nbsp;
&nbsp;

ナビゲーションに面白いアニメーションが使われたサイト

webアプリケーション、webの管理画面で、
そのままでも、少し加工して、デザインの参考に、
使えそうなデザインテンプレートがありましたので、紹介します。
&nbsp;
いずれもフリーで手に入れられます。 
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank">BlueWhale Admin</a> 
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3173" alt="Dashboard BlueWhale Admin" src="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg" width="615" height="622" srcset="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg 1011w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-296x300.jpg 296w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-228x230.jpg 228w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-120x120.jpg 120w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a> 
960 Grid CSSをベースに作っているようです。
&nbsp;
&nbsp;
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank">Twitter Bootstrap Admin Template</a> 
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3174" alt="Dashboard - Bootstrap Admin Template" src="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg" width="615" height="900" srcset="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg 699w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-205x300.jpg 205w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-228x333.jpg 228w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a> 
こちらはTwitter Bootstrapをベースに作っているようです。こちらはシンプルでいいデザインですね！
&nbsp; 
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank">Free Web Backend Admin Template PSD: App Admin</a> 
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3175" alt="Dashboard" src="/uploads-archive/2013/09/Dashboard-1024x743.jpg" width="615" height="446" srcset="/uploads-archive/2013/09/Dashboard-1024x743.jpg 1024w, /uploads-archive/2013/09/Dashboard-300x217.jpg 300w, /uploads-archive/2013/09/Dashboard-228x165.jpg 228w, /uploads-archive/2013/09/Dashboard.jpg 1100w" sizes="(max-width: 615px) 100vw, 615px" /></a>
&nbsp;
&nbsp;
<h2>おまけ</h3>
<a href="https://www.clipular.com/welcome" target="_blank">clipular</a>というchromeの拡張機能が良いらしいと聞きました。 
webサイトのキャプチャを撮れるものなんですが、それだけで終わらず、クラウドに自分で撮ったキャプチャのギャラリーを作れるというなんとも素晴らしい内容。（作れるというか自動的に一覧に表示できるようになってるという感じです。）
キャプチャして、ローカルに保存してる人なんかにはとてもいい拡張機能だと思います！！

管理画面のデザインテンプレートをフリーでダウンロード!

レスポンシブ化に便利！CSSで画像を文字に置き換える方法

日々、お優しいブロガーの方々がフリーで素材を提供してくれています。
&nbsp;
その中でも、コレも無料でもらえちゃうんだ！という驚きのものもあります。
実際に使用するのもよし、素材を見てデザイン力を学ぶのもよし、ダウンロード必須の素材です。
&nbsp;
<h3><a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank">45 PSD UI Kits | Splashnology.com</a></h4>
&nbsp;
<a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2913" alt="psdsozai1" src="/uploads-archive/2013/08/psdsozai1.jpg" width="599" height="349" srcset="/uploads-archive/2013/08/psdsozai1.jpg 600w, /uploads-archive/2013/08/psdsozai1-300x175.jpg 300w, /uploads-archive/2013/08/psdsozai1-228x133.jpg 228w" sizes="(max-width: 599px) 100vw, 599px" /></a>
&nbsp;
いろんなテーマで、UI,パーツが揃っています。
パーツが一つのテーマでいくつかあるので、統一したデザインが出来そうです。
&nbsp;
&nbsp;
<h3><a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank">Free PSD Files: 65 Useful UI Design PSD Files for Download | Freebies | Graphic Design Junction</a></h4>
&nbsp;
<a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2914 aligncenter" alt="psdsozai2" src="/uploads-archive/2013/08/psdsozai2.jpg" width="400" height="300" srcset="/uploads-archive/2013/08/psdsozai2.jpg 400w, /uploads-archive/2013/08/psdsozai2-228x171.jpg 228w, /uploads-archive/2013/08/psdsozai2-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></a>
ところどころで使えそうなパーツが揃っています。
勉強にも使えそうです。
&nbsp;
<h3><a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank">Shiny Blue UI [PSD]</a></h4>
&nbsp;
<a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2915 aligncenter" alt="psdsozai3" src="/uploads-archive/2013/08/psdsozai3.jpg" width="536" height="299" srcset="/uploads-archive/2013/08/psdsozai3.jpg 536w, /uploads-archive/2013/08/psdsozai3-300x167.jpg 300w, /uploads-archive/2013/08/psdsozai3-228x127.jpg 228w" sizes="(max-width: 536px) 100vw, 536px" /></a>
 こちらもいろんなパーツ、アイコン等があります。
&nbsp;
&nbsp;
<h3><a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank">20 Free Website Templates PSD Files</a></h4>
&nbsp;
<a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2916 aligncenter" alt="psdsozai4" src="/uploads-archive/2013/08/psdsozai4.jpg" width="550" height="300" srcset="/uploads-archive/2013/08/psdsozai4.jpg 550w, /uploads-archive/2013/08/psdsozai4-300x164.jpg 300w, /uploads-archive/2013/08/psdsozai4-228x124.jpg 228w" sizes="(max-width: 550px) 100vw, 550px" /></a>
こちらはwebサイトのテンプレートのpsd素材です。
&nbsp;
&nbsp;
<h3><a href="http://graphicdesignjunction.com/2013/06/psd-ui-kits/" target="_blank">Free PSD UI Kits | Design | Graphic Design Junction</a></h4>
&nbsp;
<a href="/uploads-archive/2013/08/psdsozai5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2917" alt="psdsozai5" src="/uploads-archive/2013/08/psdsozai5.jpg" width="500" height="854" srcset="/uploads-archive/2013/08/psdsozai5.jpg 500w, /uploads-archive/2013/08/psdsozai5-176x300.jpg 176w, /uploads-archive/2013/08/psdsozai5-228x389.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a>
&nbsp;
UIのkitが揃っておりそのままでも十分すぎる程使用出来るかと思います。
&nbsp;
本当にこういったものはありがたく、
今後とも頑張って提供して頂きたいですね！！
&nbsp;

無料でゲットできちゃう高品質PSD素材！

joomlaの管理画面を日本語化する方法を説明いたします。
特に難しいことはなく、流れに沿っていけばできるかと思います。
&nbsp;
joomlaをインストールされている前提でお話させて頂きます。
&nbsp;
<h3>１．まずは、日本語化のファイルをダウンロードします。</h4>
記事を書いた時点での最新はこちらになります。
<a href="http://joomla.jp/news/release-news/213-release-joomla-314.html">Joomla 3.1.4 リリース &#8211; Joomla! JAPAN</a>
日本語とパックになったものがありますね。
&nbsp;
<h3>２．管理画面のExtensions &gt; Extension Manager をクリック</h4>
<a href="/uploads-archive/2013/07/Extension-manager.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2789" alt="Extension-manager" src="/uploads-archive/2013/07/Extension-manager-1024x541.jpg" width="614" height="325" /></a>
&nbsp;
<h3>３．インストール画面からUpload Package File選択をクリックし、ダウンロードしたファイルをアップロード</h4>
&nbsp;
<a href="/uploads-archive/2013/07/Extension-manager-Install.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2790" alt="Extension manager - Install" src="/uploads-archive/2013/07/Extension-manager-Install-1024x592.jpg" width="614" height="355" /></a>
アップロードが完了したら次の工程に進みます。
&nbsp;
<h3>４．Extensions→Language Managerをクリックし、遷移したら、左にあるメニューの「Installed &#8211;  Administrator」をクリック</h4>
以下のページが表示されます。
<a href="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2791" alt="test - Administration - Language Manager- Installed Languages" src="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages-1024x592.jpg" width="614" height="355" /></a>
&nbsp;
<h3>５．Defaltの☆マークの箇所をクリックすれば完了です！</h4>
<a href="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2792" alt="test - 管理 - コントロールパネル" src="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640-1024x597.jpg" width="614" height="358" /></a>
無事日本語化しました！！
&nbsp;
日本語化できたのですが、やはり項目が多く、まだどういじったらいいかよくわからない状況です笑
実際になにかサイトを作ってみるようなことをしないとわからないかもしれませんね。。。
&nbsp;
&nbsp;
&nbsp;

joomlaの管理画面を日本語化する方法

WebGLのJSライブラリー「Three.js」を使ってみた

以前WebGLの動作環境についてご紹介いたしましたが（<a href="/designer/webgl%E3%81%AE%E5%8B%95%E4%BD%9C%E7%92%B0%E5%A2%83%E3%81%BE%E3%81%A8%E3%82%81.html">こちら</a>）、
こちらで、WebGLはグラフィックボードによってはブラウザが最新でも使うことができないという風にご紹介しておりました。
しかしながら、最近のChromeでは、グラフィックボードが古くても、ブラウザ側で環境を再現(エミュレーション)することができるので、WebGLのサイトを見ることができることがわかりました。
&nbsp;
少しうれしくなったので、WebGLを使ったサイトや、デモを集め些細とを探してみましたので、少しご紹介いたします。
&nbsp;
<a href="https://www.cubeslam.com/" target="_blank"><img decoding="async" loading="lazy" style="vertical-align: text-top;" alt="CUBE SLAM" src="/uploads-archive/2013/07/image01.jpg" width="640" height="455" /></a> 
<a href="https://www.cubeslam.com/" target="_blank">CUBE SLAM</a>
動物のそれぞれの動きがすごいです。
&nbsp;
&nbsp;
<a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank"><img decoding="async" loading="lazy" alt="WebGL DEMO" src="/uploads-archive/2013/07/image03.jpg" width="640" height="455" /></a>
<a href="https://developer.mozilla.org/ja/demos/tag/tech:webgl" target="_blank">mozilla Demo Studio WEB GL</a>
WebGLのデモ集です。いろんなタイプのWebGLのサンプルを見ることができます。
&nbsp;
&nbsp;
<a href="http://yomotsu.github.io/threejs-examples/" target="_blank"><img decoding="async" loading="lazy" alt="three.js" src="/uploads-archive/2013/07/image02.jpg" width="640" height="455" /></a>
<a href="http://yomotsu.github.io/threejs-examples/" target="_blank">Examples created by Yomotsu useing THREE.js</a>
three.jsという、WebGLを使いやすくするライブラリを使ったデモ集です。
いきなりコアなWebGLを扱うのは敷居が高い感じがしますが、こういったライブラリを使ってはじめるのもいいと思いました。
&nbsp;

webGLの3Dをつかったサイトやデモサイト

前回、無料のCMSについての記事を書きましたが、
今回そこででてきた「joomla」について簡単ではありますが、書きたいと思います。
&nbsp;
<h2>Joomla!（ジュームラ）とは</h3>
Joomla!（ジュームラ）とは、
タイトル通り、コンテンツマネジメントシステム（CMS）と呼ばれるホームページ構築システムのひとつです。
Joomla!はオープンソースで開発されており
数あるCMSの中で、世界で8.8%(2012年11月現在)とwordpressに次ぐシェアです。
<a href="http://www.joomla.org/download.html" target="_blank">joomlaのダウンロード</a> 
<a href="http://sourceforge.jp/projects/joomla/" target="_blank">Joomla!じゃぱん 日本語同梱パッケージ</a>
<h2>Joomla!（ジュームラ）の特徴</h3>
<ul>
<li>Joomla!3.0はレスポンシブ対応
・・・Bootstrap（CSSのフレームワーク）を使用</li>
<li>会員管理機能
・・・標準で付いており、会員へメール一斉送信や会員用ページ作成など機能満載。</li>
<li>フォーム
・・・標準で簡単なお問い合わせフォーム機能が付いている</li>
<li>拡張機能
・・・エクステンションと呼ばれる、コンポーネント・プラグイン・モジュールが豊富。</li>
<li>複数人でのサイト運営
・・・標準でアクセスコントロール機能が付いているので、簡単に権限を付けられる。</li>
<li>更新のしやすさ
wordpressのようなエディタはもちろん、ワードやパワーポイント感覚で、webの更新が出来る</li>
<li>PHPが実行できる</li>
</ul>
&nbsp;
<h2>実際に使用されているサイト</h3>
ユニセフやIKEAで使用されているようですが、 
下記URLを見ていただけるとかなり多くの事例があります。
<a href="http://community.joomla.org/showcase/sites.html" target="_blank">http://community.joomla.org/showcase/sites.html</a>
&nbsp;
<h2>インストールしてみた</h3>
&nbsp;
実際の管理画面と、サンプルで使用できるサイトが以下になります。 
サンプルで使用出来るのはブログタイプ、通常のサイトがあります。
管理画面 
<a href="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2659" alt="test - Administration - Control Panel" src="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg" width="632" height="409" srcset="/uploads-archive/2013/07/test-Administration-Control-Panel.jpg 1143w, /uploads-archive/2013/07/test-Administration-Control-Panel-768x497.jpg 768w, /uploads-archive/2013/07/test-Administration-Control-Panel-1024x663.jpg 1024w, /uploads-archive/2013/07/test-Administration-Control-Panel-228x148.jpg 228w, /uploads-archive/2013/07/test-Administration-Control-Panel-300x194.jpg 300w" sizes="(max-width: 632px) 100vw, 632px" /></a>
サンプルサイト 
<a href="/uploads-archive/2013/07/Home.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-2660" alt="Home" src="/uploads-archive/2013/07/Home.jpg" width="632" height="611" srcset="/uploads-archive/2013/07/Home.jpg 1143w, /uploads-archive/2013/07/Home-300x291.jpg 300w, /uploads-archive/2013/07/Home-768x744.jpg 768w, /uploads-archive/2013/07/Home-1024x992.jpg 1024w, /uploads-archive/2013/07/Home-228x221.jpg 228w" sizes="(max-width: 632px) 100vw, 632px" /></a>
最新のjoomla!3をインストールしてみたんですが、 
アップロードでえらい時間かかりました。
インストールとしては、DatabaseのPHPがverが5.3.1以上ではいけないという箇所以外は、 
特につまずくことなく出来ました。
その手順なんかはまた改めて書きたいと思います。

無料CMSツール「joomla」について

こちらのサイト（→<a href="http://triand.jp/">http://triand.jp/</a>）をご覧いただきたいのですが、
こちらのサイトでは、トップページのビジュアル部分にアニメーションが使われています。
とても滑らかな動きなので、FlashかHTML5のCanvasで作られていると思ったのですが、実際にはGIFファイルでした。
GIFアニメだと独特のカクカクとした動きしかできないものだと思っていたので驚きました。
調べてみると0.03秒に1コマというとても細かい間隔で作られていました。
&nbsp;
通常Photoshopでは、0.1秒までしか設定できませんが、実はもっと細かくできるんじゃないかと思って、
いろいろ試していたところ、普通にできてしまうことがわかったので、その方法をご紹介いたします。
&nbsp;
&nbsp;
まずは「ウィンドウ」→「アニメーション」でアニメーションのフレームを表示します。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img02.jpg" width="480" height="368" />
&nbsp;
つぎに、アニメーションの間隔を指定します。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img01.jpg" width="480" height="368" />
&nbsp;
ドロップボックスに表示されるのは0.1秒までなのですが、
その他を選ぶことでもっと細かく指定できます。
<img decoding="async" loading="lazy" alt="image" src="/uploads-archive/2013/07/img04.jpg" width="480" height="368" />
1コマ1コマなのでかなり根気の要る作業となりますが、
ちょっとした効果をJS等を使わずに表現するとき、
役に立ちそうです。
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Web

2013/11/07

2013/10/31

2013/10/29

2013/10/29

2013/10/23

2013/10/22

2013/10/16

2013/10/02

2013/10/01

2013/09/25

2013/09/25

2013/08/21

2013/08/21

2013/07/31

2013/07/24

2013/07/17

2013/07/17

2013/07/03