Web制作会社のマーズデザイン  »  Web制作会社のブログ  

 

Web制作会社のブログ

お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。

2011年9月21日

Google+のように簡単にグルーピングができる!

新しいソーシャルサービスとして注目されているGoogle+。


Draganddrop.png

なんといってもその特徴は、他のSNSにはないグルーピングの
機能が充実していることがよく取り上げられています。


好きなようにカスタマイズができ、自分の思う通りに
友人、家族、仕事などと分類ができるのです。
もちろん他のSNSでもグルーピングは可能ですが、
そのグループ分けは相手にも見えているものであり、
どんな風に仕分けられたかが見えてしまいます。

気にする人はどうしてこのグループに入れられたのか?
などなかなか仕分けしづらいところがありますが、
Google+は一切相手には分からず、こちらの思う通りに
仕分けられ、情報が効率よく整理できるというメリットが
あるようです。


後発のサービスだけに機能も洗練されており、
そのグループ分けのしかたもドラッグ&ドロップで
グループ分けができるというのも人気になっているようです。


このドラッグ&ドロップでの仕分けをSNSなどで利用できる
PHP、jqueryで作られたソースが公開されてました。
デモもあるのでさわってみていただきたいですが、簡単に
グループ分けができていきます。
機能面はスクリプトですぐに似た機能が使えるようになるところが
よいですね。


Google+のように簡単にグルーピングができる!




2011年9月20日

CSSとjqueryでつくる便利ツール

CSSとjqueryを利用してWEBサイト上にアップできる
便利なツールの制作ソースが公開されてました。
jQuery_clocks.png

sticky_notes.png
数行のコードだけで、Macの使い手にはなじみのあるスティッキーズ風の
メモ帳とアナログの時計を表示させるスクリプトが公開されていました。

デモも用意されていて、ちょっとしたツールですが、
これが簡単に実装できるというのはよいですね。


ソースをカスタマイズすればオリジナルに展開もできると
思います。


CSSとjqueryでつくる便利ツール:アナログ時計

CSSとjqueryでつくる便利ツール:スティッキーズ風メモ





2011年9月17日

便利なjqueryプラグインチュートリアル

インタラクティブなサイトを構築する際に、軽くて実装が
可能なスクリプト。
jqueryの便利なプラグインがまとめられていました。
129.jpg


514.jpg
813.jpg

良く見かけるようになったカルーセルの動きを持たせ,画像等をみせたり、
押してほしいリンクボタンに向けて、マウスの動きを追ってボタン一を指し示すもの、
必要な部分をズームアップしてみせてくれるもの、その他、マウスオンでぶるぶると
動くものなど、さまざまなjqueryが紹介されており、まとめサイトとして
有効だと思います。


ソースもダウンロードやデモが見られ、さらに便利です。


便利なjqueryプラグインチュートリア




2011年9月15日

CSSで簡単で見た目もGOODなロールオーバーを設定する

少し前だとロールーオーバー画像を作成して、
Javascriptやcssを使用して組んでいるのが主流でした。
hover.png

o0248008810515127758.png
今は、簡単にロールーオーバー画像を使わなくても
ハイライトするくらいの動きであればロールオーバー画像を
用意したように見えるように組むことが簡単にできてしまいます。


cssにソースを設定するだけの簡単さ。
数行のソースを入れるだけでリンク付きの画像が
すべてロールオーバーで半透明になります。


またハイライトというか半透明になるだけでなく、
マウスオンした際に、画像を少し動かしてういたように
見せられるhoverもとても簡単に導入ができます。


コーディングもどんどん簡単で見た目にもリッチな
サイト制作が可能になってきてますね。


CSSで簡単で見た目もGOODなロールオーバーを設定する




2011年9月14日

ビジネスに効果的なE-Mailニュースレターデザイン集

電子メールのニュースレターは、とても多くのジビネスシーンで
重要なマーケティング手法のひとつとなっています。
newsletter-templates-12.jpg

newsletter-templates-20.jpg

newsletter-templates-21.jpg

newsletter-templates-32.jpg

ニュースレターの見た目を魅力的に見せるように設計する事で、

ニュースレターの効果を増強する事が可能となります。


その参考例がいくつか紹介されていました。

キャンペーンやプロモーション時に利用される
電子メールのニュースレターでは、その
効果を求めるためにデザインやユーザービリティに
力が入り、デザイナーもそれに応えようと取り組むことから
どんどん洗練された効果的なデザインが生まれているようです。


成果を上げたEmaiニュースレターのサンプルをご覧下さい。



ビジネスに効果的なE-Mailニュースレターデザイン集




2011年9月13日

ECサイトのグッドデザインWEBサイト例

ECサイトも何度か取り上げてますが、どんどん他との差別化を
はかり、注目を集めることにも積極的になっているサイトが増えているように
思います。

ecommercewebsites32.jpg

ecommercewebsites10.jpg

ecommercewebsites16.jpg

ecommercewebsites37.jpg
一昔前は、どのような製品をあつかっているのか、
いかに製品が数多くあるのか、見やすさ、買い易さが
一番の目的だったかと思います。


次第にそれが、見やすさ、買い易さは当たり前のこととして、
より情報を求める傾向があり、口コミ情報や、レコメンド機能、
ランキングといった人気商品のピックアップでウリをアピール
することが主流となってました。


さらに最近では口コミにリアルタイムというキーワードが加わり、
SNSを使ったお買い得情報や製品に対する使用感などがリアルタイムに
求められるようになり、購買を促進していることが多くなっていると
思います。


もう1つすすんで、今度はECサイトにもデザイン性が加味され、
ビジュアル的に目を引き、サイトで興味を引き、製品にフォーカスさせて
いくといった感じでしょうか。


見た目にも楽しげなECサイトが増えてきているようです。
通常の買い物を考えれば、確かに店頭がキレイにディスプレイされており、
入り易い、あるいはお店に興味を引かれて来店するケースが
多いと思いますので、ECサイトにも同じようなことが当てはまるのでしょう。


見た目も意識した上で、しっかりと製品やお店の特徴を打ち出し、
ユーザーを引きつけていくということを主としてデザインに
こったECサイトが今後増えてくると思われます。



ECサイトのグッドデザインWEBサイト例




2011年9月13日

ビビッドな色使いが美しいWEBサイトデザイン

ビビッドな色使いでインパクトを持たせ,注目を集めることに
成功しているWEBサイト例が紹介されていました。
0198-02_vibrant_webdesign_popa.jpg

0198-09_vijufest.jpg

0198-21_ricebowls.jpg

ただ派手なだけでなく、注目を集めておいて、しっかりメッセージを
伝えることに成功していると思います。

元気な明るいイメージはもちろん、派手な色だが
色数をおさえることで返って洗練されたイメージを持たせたり、
おなじような派手で目を引くサイトでもその手法は様々です。


どうせめだたせるならしっかりとコンセプトと伝えたいメッセージが
シンプルに分かり易く載っているといいですよね。


ビビッドな色使いが美しいWEBサイトデザイン




2011年9月 9日

画像表現の幅を広げるスライドショーjquery特集

画像を表示するのにスライドショーやズームアップ表示等、
スクリプトで簡単に容量も軽く、表現力にとんだサイトデザインと
なるスクリプトがデモとソースダウンロードできるようになって
特集されていました。
slider1.png

slider3.png
先日ご紹介した、アナログ的に写真を見たら後ろにいれかえていくような
動きをする表現や、切り替わりの表現が美しいもの、
サムネイルを選ぶととなりの大きな画面に拡大して
表示されるもの等、表現法もいろいろあり、自動で
アニメーションしているもの、また手動で切り替えを指定
していくものと多岐にわたって紹介されていました。

中にはスクリプトの組み合わせでサムネイルのスライダーアクションと
そのうちの1つを選ぶと、拡大表示され、複数の画像をさらに
めくっていくように見せるパターン等かなり使い勝手の
良さそうなスクリプトが集められていました。


こうした纏めサイトはホントに助かりますね。
クライアント向けのサンプルとしても利用できそうです。


画像表現の幅を広げるスライドショーjquery特集




2011年9月 7日

画像をローディングする間のくるくるまわるアニメーションをつくる

一昔前はFlashの読み込みの際に画面上で呼び出す前にくるくると
回っているアニメーションをよく見たと思いますが、そのアニメーションも
最近ではJavascriptなどのローディング画面として使用されている
ケースが多くなっています。
anime2.jpg
anime4.jpg

anime5.jpg

ユーザーに向け、準備中であることを知らせるくるくる回るアニメーションを

カスタマイズしてオリジナルが制作できるサイトやソースが公開されていました。


メインのデザイン部分の装飾や使い勝手の部分とはことなりますが、
待たせる間にも少し気をつかってサイト構築をしておくことは、
なにかちょっとした気遣いを感じさせる気がします。


おそらくほとんどのユーザーはまったく気に留めない部分かも
しれませんが、細部にまで気を配って作ったサイトとなると
愛着もひとしおになるのではないでしょうか。



画像をローディングする間のくるくるまわるアニメーションを作る







ホームページ掲載以外にもWEBサイト制作実績・成功事例紹介多数ございます。
Webサイトからお問い合わせのお客様に限り、納品後3ヶ月のコンサルティング(期間限定)

Web制作の無料見積もり・お問い合わせ