月別アーカイブ: 2016年3月

2016年3月10日

秀逸な和風デザイン WEBサイト10選

こんにちは!WEBデザイナーのANAです。


現在弊社では和風デザインのWEBサイトを作成しています。
和のデザインは一見すると簡単そうですが、とても奥深く実際につくるとなるとなかなか難しいです。

これは私個人の意見ですが、私は和のWEBサイトがすごく好きです。
やっぱり日本に生まれたからには、ここに載せてあるような、秀逸な和風デザインがつくれなきゃ!ですね(*’ω’)


「秀逸な和風デザイン WEBサイト10選」、ぜひお客様の参考になればと思います。

 

●韓国懐石 しづる

wa1

【URL】http://sizzle-tsurumi.com/

 

韓国料理のサイトです。
細部に和の雰囲気を感じさせます。
全てのページにおいて、コンテンツの見易さが特徴的です。
伝えたいことをしっかり伝えています。

 

 

●SAKUZAN

wa2

 

【URL】http://www.sakuzan.co.jp/

 

岐阜にある美濃焼きの工房「SAKUZAN」さん。
本来製品上シックなになりそうなサイトですが、上手にモダンに魅せています。
共通して使用している細かい装飾がサイトの一体感を出していて、
今風なのに伝統を感じさせます。

 

 

●シェアバイク ミナポート

 

wa3

 

 

【URL】http://minaport.jp/

観光地などで自転車を借りることができるサービスのサイトです。
人の目線とコンテンツの動きを、少なすぎず多すぎず計算しておかれています。
基本写真で魅せていますが、説明部分などでイラスト使用しているのであたたかみがあります。

 

 

●ヤヱガキ酒造

 

wa4

 

【URL】http://www.yaegaki.co.jp/sake/

 

兵庫県にある酒造の会社。
写真と、サイトカラーの白、黒の文字がはっきりしているサイトで、
シンプルなのにインパクトがあります。

テキストと効果的な写真の使い方で、商品の良さを伝えています。

 

 

●榛原

 

 wa5

 

【URL】http://www.haibara.co.jp/

 

東京にある200年以上つづく和紙舗さん。
赤の中でもピンクや紫にちかいビビットの効いた色使いで、サイトを見た瞬間から目に飛び込んできます。

和の雰囲気の中にも使用しているアイコンや背景などは可愛らしくまとめていて、固くなりすぎない配慮が見えます。

 

 

●白玉の湯 華鳳

 

wa6

 

【URL】http://www.kahou.com/

 

すごくクオリティの高いサイトです。
見せ方を十分に理解して作成されています。
ひとつひとつのデザインが繊細で細やか、背景一つ、文字一つとっても文句のつけようがありません。

情報量が多いのにまとまっていて、際の見易さもピカイチですね。
私個人でいうとお気に入りのサイトの一つです。

 

 

●本家 尾張屋

 

wa7

【URL】https://honke-owariya.co.jp/

 

京都にある和菓子屋さん。
フォントの使い方、言葉の選択にセンスを感じます。
スライドの中にテキストがあって、スライドショーが切り替わるようになっています。
スライドの中に文字があるのに邪魔してないのがまたいいですね。

 

 

●角館 伝四

 

wa8

【URL】http://denshiro.jp/

 

桜皮を使用して樺細工を創っているお店です。
写真の良さはもちろんあるんですが、その写真をしっかり活かしてシンプルにつくり上げています。
構成がすばらしいので、ユーザーも迷うことなく見たい商品にたどり着けますね。

 

 

●鈴乃屋

 

wa9

【URL】http://www.suzunoya.com/753/index.php


七五三に向けた子供用の着物を紹介するサイトです。
着物と聞くと、和のテイストを前面に押し出したサイトが良く見られますが、
子供が対象ということもあり、ポップで可愛らしいそれでいて和の要素を残しています。

なんといってもグリッドデザインが効果的に使われているサイトです。

 

 

 

●株式会社ドングリ

 

wa10

 

【URL】http://www.don-guri.com/doncon/

株式会社ドングリのコンサルティングのページです。
手の込んだサイトで、ひとつひとつのキャラクターを作るのにどれくらいかかったんだろう…と
心配になるほど細かいところまでしっかりとつくられています。
見ていておもしろいサイトですね♪

 

 

どうでしたか?秀逸な和風デザイン WEBサイト10選。
日本の良さを改めて再確認できるWEBサイトばかりでしたね!

 

みなさんもぜひお気に入りのWEBサイトを見つけてみてください♪

 

それではANAでした~

2016年3月5日

アニメーション終了後にサイトを表示させる方法

こんにちは!WEBデザイナーのANAです。

今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。

アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。

ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない!

 

というわけで、簡単なやり方でなんとかできないか?と思いやってみたのが

「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。

つまりどんなことがしたいかというと、

サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す

 

と言う流れ。

今回Bike GIFをお借りして簡単に方法をご紹介しようと思います!

 

 

 

アニメーションを表示させる

 

anime1

まずはここから!
先ほどのアニメーションをサイトに入れておきます。

で、アニメーション終了後に表示させたいソースも書いておきます。

HTMLは以下のような感じ。

<div class="anime">
<img src="http://smile-design.bz/tight/blog/anai/bicycle-gif.gif"/>
</div>
<div class="mainSite">

アニメーションが終わったらこれが表示されます。
</div>

css


body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #E9E3E3;
 position: relative;
}

.anime img {
 display: block;
 position: absolute;
 top: 28%;
 left: 40%;
}

.mainSite {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #FC6;
 position: relative;
}

.mainSite p {
 font-size: 160%;
 color: #FFF;
 position: absolute;
 top: 42%;
 left: 40%;
}

 

今こんな風にサイトが見えています。

【URL】http://smile-design.bz/tight/blog/anime1.html

 

 

 

 

アニメーションを○○秒後に消す!

 

anime2

 

 

では次のステップ!

以下のjQueryでsetTimeoutを使用します。

$function(){
setTimeout(function(){
                  ここに処理をかくよ!
},5000);//5秒数後
});

 

 今回は約4秒後に、自転車のアニメーションをフェードアウトしたいので以下のように指示をします。

 

$function(){
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

 

 

たったこれだけでアニメーションが指定した秒あとにフェードアウトして消えてくれます。

 

 

 

 

ただ問題が、確かに約4秒後にアニメーションは消えて次の要素が出てきてくれるのだけど、
アニメーション再生中もスクロールしてしまえば、下にある要素が見えてしまう。

 

しかも、フェードアウトしたあとの、要素の出方がぱきっとしている…。

 

 

気にいらない私はもうひと加え!

 

 

 

アニメーションを再生中は下のコンテンツを出さない!

 

やり方としてはjQueryでcss指定してあげる。

 

 

アニメーションが再生中は下のコンテンツは非表示にするという指示を出してあげればいいのです。

$function(){
$(".anime").css("display", "none");//アニメーション中は非表示
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

こうすれば、アニメーションが流れている間は消えています。
ただ、これだけの指示だとずっとdisplay:noneで
非表示のままなので、3.8秒後に表示する指示を出してあげます。

 

 

しかも、ただ出すわけでは面白くないのでフェードインして表示させます。

 

 

 

 

 

メインのコンテンツをフェードインさせながら出そう!

 

bicycle-gif

ここでも同じくsetTimeoutを使用します。

$(function(){
 $(".mainSite").css({opacity:'0'});
 setTimeout(function(){
 $(".mainSite").css("display", "block");
 $(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示
 },3800);//約4秒後に
});
約4秒後にコンテンツを表示、そしてフェードインさせるという指示を出しています!
この指示をしてあげれば~!

 

 

 

出来ました~!
無事に完成です!

 

こんなに簡単にできるんですね♪
みなさんもぜひsetTimeoutを使っていろんなことをしてみてください!

 

 

それではANAでした(*’▽’)