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

 

Web制作会社のブログ

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

2011年8月31日

いざという時にありがたいオートセーブフォーム

WEBサイトでよくある登録フォームやお問い合わせフォームですが、
入力をミスしたり、何かの拍子でPCが固まったり、エラーで
これまで入力した内容がすべて消えてしまって泣くに泣けないという
経験はないでしょうか。
formautosave.png
多かれ少なかれそのような経験をされた方はいらっしゃると思います。
入力している側の立場であれば、一気にやる気をなくし、そのままに
してしまいがちですよね。


一方、登録してもらってた側に立てばそんなもったいないことは
なく、何かフォローアップがあれば、問い合わせなり、資料請求なりの
アクションが起こったのに・・・といって嘆くしかなく、
これでは双方とも不幸になっている状況です。



そんな時にこのオートセーブしてくれるフォームがあれば、
不測の事態でもしっかりフォローでき、アクションを起こして
もらうことができそうです。

その便利なフォームのスクリプトが紹介されてました。
昨今はLFOについてもしっかりケアしていかないとという
風潮になってますので、企業側でのケアも大切ですね。


いざという時にありがたいオートセーブフォーム




2011年8月30日

手書き風なデザインで面白いWEBサイトデザインを作る

手書き風の文字やイラストを取り入れ、WEBデザインでありながら、
アナログな雰囲気も漂う不思議な感じで興味を引かれるサイトデザインの
事例が紹介されていました。
hdds-8.jpg

hdds-18.jpg

hdds-25.jpg

hdds-11.jpg

実際の画像やPC文字と組み合わせでとても効果的に面白いデザインとなっているのが
サンプルからもご確認頂けると思います。

ECサイト等でも、画像はゃんとした製品画像だけれど,フレームを手書き風なラストを用いることでレトロなじやカントリー風と言ったテイスト等も面白く見せることができているといます。

柔らかい雰囲気を出すのに手書きフォントを使ったりしていることは多くありましたが、
逆にデザイン部分に手書き風を使ってみるのも面白いかもしれませんね。
海外事例に習って,提案してみたいデザインです。


手書き風なデザインで面白いWEBサイトデザインを作る




2011年8月29日

ECサイトの優れたデザイン例

ECサイトでもデザイン的にこった作りとなっている
優れたデザイン例が紹介されていました。
252.png

341.png

3612.jpg

ECサイトというと
○検索がし易い
○商品が分かり易い
○商品画像が一番めだっている
といったセオリーがあるように思っていたが、
商品ではないサイトデザインの部分で色使いがとても
ポップになって折り目を引くものや、あえて斜めにデザインして
目をひくものなど、単なる商品の羅列におわらないEC サイトが
多くなってきているようです。


ファッション系のECではよく見受けられましたが、
小物や食品関係などでもこのようなデザイン重視の
サイトが増えてきているようです。


あくまでも商品が選び易く、カートに入れてもらい易いと
いうことは大前提だと思いますが、デザイン面でも
工夫をこらして他社との差別化を行っていくことも
大切かと思います。



ECサイトの優れたデザイン例





2011年8月27日

企業サイト:いかに注目を集めるか・・・

企業サイトでは自社のサービスや製品をいかに訴求するかが
大切なこと。
そこを人目を引くデザインでうまく実行している企業サイト例が
紹介されてました。
custom.jpg

super-steil.jpg

シンプルではありながら、大胆な構成や色使い、製品写真の配置などで
しっかり注目を集めることに成功している例や、問い合わせを得るために
ガイドをだしたり、フォームページに注力しているものも
上げられていました。

競合他社に抜きん出るためには、注目を集めるデザインや機能の
導入も必要ということでしょうか。



企業サイト:いかに注目を集めるか・・・




2011年8月26日

エンタメ風デザインの404エラー画面

またもやクリエイティブ感あふれた404エラーページの
特集がありました!
404error10.jpg

404error11.jpg
今回は前にもまして飽きさせない工夫のあるものが特集されており、
宇宙空間で迷子になっているデザインや、レトロな女性の
イラストをつかったもの、赤ちゃんがPCにてをつき泣いているものなど
クリエティブな面白い作品としても見られる感じのものが
多く紹介されています。


また、すぐに本当にいきたかったページへアクセスしやすいように
検索窓を設けていたり、元いたページやトップにアクセスする
リンクボタンの設置等、使い勝手にもこだわったページが
ありました。


見せない方がいいのですが、発生してしまった場合に備えて
こうしたちょっとウィットのあるものを用意しておくと
その企業のセンスがいいなと思ってもらえるかもしれませんね。


エンタメ風デザインの404エラー画面デザイン集




2011年8月24日

わくわくする珍しいナビゲーションデザインサイト

メニューのデザインと動きに工夫がされており、見た目にも操作的にも
楽しい、珍しいナビゲーションデザインの海外サイト事例がありました。
150.jpg

417.jpg

512.jpg
サイドに配置されたメジャー部分にマウスを宛てるとメニュー項目が
表示され、縦に展開するサイトがあったり、全画面が色分けされた
タブのようになっており、クリックするとたたまれていたコンテンツが
表示されるような、こちらも縦展開するサイトがあるほか、
体裁的にはそれぞれのページが左右に連結されており、メニューをクリックすると
あたかも大きな上の上を移動して目的の箇所を表示するようなデザインなど
さわって楽しいメニューと動きをとるサイトが多く紹介されていました。

さわって楽しく、わくわくするということでだいぶ興味を引かれるのですが、
そこはWEBサイトなので、ユーザビリティ、アクセシビリティは気にしておきたい
ところです。


紹介されたサイトの中には、少々わかりづらいものもありましたが、
海外サイトで英語表記にも関わらず、使い易いサイトもとても
多くありました。


工夫をこらしたメニューや動きをいれたとしても、基本的な部分での
WEBサイトの目的を違えないということは、大切なことだと
改めて実感させてもらいました。


ナビゲーションデザインにも力を入れていきたいですね。



わくわくする珍しいナビゲーションデザインサイト事例




2011年8月23日

デザイントレンド:3Dっぽい表現のリボンやバッジ

最新のデザイントレンドとしてリボンやバッジ、バナーの
装飾デザインが人気だと取り上げられていました。
ribbons-11.jpg

ribbons-17.jpg
3Dのように立体的に見せる表現でリボンや立体的な
バッジデザインが多用されているようです。


タイトルバックや、メニュー部分のちょっとしたあしらいにも
リボンというか帯のような装飾が使われているサイトデザインが
とても多いようです。

ribbons-22.jpg

しばらくすると国内のサイトにも登場してくるでしょうね。
海外サイトと少しデザインテイストは違ってきて、より
デコラティブな感じになりそうな気はしますが・・・
どうなるでしょうか。



デザイントレンド:3Dっぽい表現のリボンやバッジの装飾デザイン




2011年8月22日

便利で高機能なjqueryチュートリアル

いつもご紹介しているjqueryの便利なチュートリアルが機能ごとに
まとめてラインナップされていました。

326.jpg

画像アルバムの使用が想定されてますが、画像上の矢印をクリックして
移動していくことも、画像下に表示された四角がマップの代わりになっており、
該当の箇所をクリックすると一気に移動させられるなど面白い、動きとなって
います。


416.jpg
こちらも画像切り替えのスクリプトですが、スライドやフェードインフェードアウト
ではなく、バブルのように大小さまざまな円がしたからばらまかれたように
なると、その部分が次の画像となっていて、次第に全面に切り替わるといった
少し面白みを持たせた動きがつけられています。


j810.jpg
こちらはロフィールやコンテンツの切り替えに最適な動きかと思いますが、
帯状のれぞれをクリックすると選択されたエリアが
広がり容が表示されその他の部分が折り畳まれたり、小さくなる仕組みです。
こちらはパターンの動きがデモとして紹介されています。


等等その他にもたくさん、機能別に便利な
jqueryが紹介されています。
デモもコードも自由に使えるようになっているのがまた良い所です。
様々なサイトに知恵を絞って、デザインに当てはめてみると
面白い効果を持たせられそうです。


便利で高機能なjqueryチュートリアル





2011年8月19日

Twitterを便利に使うためのアプリ

Twitterを使って定期的に情報を提供したり、メッセージを送りたい場合、
便利に使えるアプリケーション、WEBサービスが紹介されていました。
HootSuite
hootsuite-twitter-tool.jpg
とても使い易いツールで、複数のアカウントを使い分けることができる。


Twuffer
twuffer-twitter-tool.jpg

Tweetリストを管理できるツール。必要な日時に設定し、情報を更新する事が可能。

CoTweet
cotweet-twitter-tool.jpg
特定の時間にある特定または複数のアカウントにTweetすることが可能。


Future Tweets
future-tweets-twitter-tool-1.jpg
ツイッターメッセージを送る
スケジュール管理が可能。特定の時に、または毎日、毎月等設定が自由にできる。




Twaitter
twaitter-twitter-tool.jpg
個人使用では無料でつかえURLを短く変換する機能や、翻訳機能、コピーや編集したりする事が可能。


上記の5サイトがあげられていましたが、どれもスケジュールを管理して
定期的につぶやいたり、情報収集が出来る機能が簡単につかえるようです。

このようなアプリを使っていくとまた管理が便利になり、
いろいろと企業のプロモーション分野でも使えるのでは
ないでしょうか。


Twitterを便利に使うためのアプリ








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

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