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

 

Web制作会社のブログ

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

2011年7月29日

「自然」から発想するWEBデザイン例

『自然』からデザインを創造し、WEBサイトデザインを作り上げた
優れたデザイン例があげられていました。
diving-in-red-sea-500x253.jpg
海と珊瑚などをモチーフに、ダイビングのサイトデザインとして
一目で内容を伝えられるものとなっています。

real-casual-500x252.jpg
zillu-500x253.jpg
リアルな感じの表現やかわいらしいテイストのイラストでの表現など
一口に自然ということからのインスピレーションだとしてもその
表現方法はデザイナーの数以上にあるでしょう。

vita-herb-500x259.jpg

中には、一見すると自然=グリーンの色だけ?とも思われますが、
ひいてみてみると、コンテンツを表示するエリアが、植物の葉のモチーフが
使ってあるなど、ダイレクトではなくてもそれとイメージさせるような
表現法もあります。


本当に様々な捉え方ができ、表現方法があるので、デザインは面白いですね。

目の肥やしをたくさん吸収して、目的に応じた様々な提案が
できるようにしていきたいと思います。


「自然」から発想するWEBデザイン例




2011年7月28日

思わず二度見する、ポップで目を引くヘッダーデザイン

思わず二度見してしまうような、インパクトのあるヘッダ--デザインを
持つWEBサイト例があげられていました。
Header-cover.jpg

9.png
シンプルで見やすいこと、ユーザビリティに配慮といってる部分もありますが、
注目を集めるには、このくらいインパクトがあると効果絶大ですね。


目的や企業の性格によってはアリなデザインです。
派手な感じですが、よくみるとナビゲーションなどは
ビジュアルでわかるようになっていたり、押さえるところは押さえて
デザインされているのがみられます。


決まりきったテンプレートのデザインのサイトで流されてしまうよりは
冒険してみるのもありかもしれませんね。
ただ個性が強いと賛否両々で、肯定派と否定派がぱっきりわかれるので、
反応は極端にでてくることになります。

イメージを大切にするという意味と影響を考えつつの導入に
なるかと思います。

エッセンスとなるヒントを抜き出し、ここまでとがらなくても注目を
ひく為に、デザインをヘッダ--に施していくことは試してみる価値が
あると思います。


思わず二度見する!ポップで目を引くヘッダーデザイン





2011年7月27日

ナビゲーションデザインの優れたWEBサイト事例

海外サイトですが、メニュー部分のナビゲーションのデザインに
凝ったWEBサイトが紹介されていました。
unusualnavigation25.jpg

unusualnavigation34.jpg
通常とはひと味違う、デザイン性にとんだ形のものや
製品ビジュアルなどを魅せるセンター位置にナビゲーションを
大胆に配置したり、視覚的にうったえかける形だけや
イラストをメニューとして触らせる手法等々、たくさんの
工夫がなされていました。


デザインをいつもの上やサイドの同じ形での配置から
少し上下におどらせたり、画面中央にデザインとして
入れ込むなど、工夫を凝らすとぐっとサイトの
目新しさも感じられ、また触って楽しむプラスαの効果も
期待できるようです。


これらをjavascriptなどで動きを与えてみるともっと
面白く、目を引く、注目を引き、下層への誘導を
行うことができるのかと思います。

ナビゲーションデザインにもこってみるデザイン提案してみたいですね。


ナビゲーションデザインの優れたWEBサイト事例




2011年7月26日

便利ツール:エラーコードの内容がすぐ調べられるサービス

PCなどでよく直面するエラーコード。
数値だけで表示されるため、一見なんでそうなったかが
わかりません。そのエラーコードの意味を調べやすくした
サービスが7つ紹介されてました。
clip_image001.png

clip_image005.jpg
エラーメッセージのコードを入れるだけで、どんな内容のエラーなのかを
表示してくれるので、原因が即つかめるサービスとなっています。

膨大なサイトから探しださなくとも、こちらの7つのサービスのURLを
登録しておけば、問題解決がはやくなりますね。。。



ただし、英語のサイトなので、英語が苦手な方は翻訳サイトをつかったりと
少々手間がかかってしまいますが・・・。
こうしたサイトの日本語版のサービスもあるのでしょうか。
今度時間のあるときにまた調べてみたいと思います。




2011年7月22日

歴史的デザインにインスパイアされたWEBデザイン

クリエイティブアートには過去の作品や美術品に影響を受けて制作されたものが
多いです。
 となるとWEBデザインにおいても過去のデザインからインスパイアされて、
よりよいデザインが生まれるのではないかということが載ってました。
072201.jpg
072202.jpg
とても有名なキリストの最後の晩餐。
こちらは遠近法がとられており、絵に奥行きが感じられます。
奥行きを感じさせる遠近法を用いたWEBサイトデザインが下のサンプルです。

確かにだんだんと前に出てくるイメージであり、手法としては
同じようです。


その他バロックからは光と影のコントラストだったり、
ロココ調からは、フレームなどに使う装飾だったりと
様々に影響をうけてデザインが作られているようです。


こうして対比してもらうと意外なところからヒントを得ているものが
あったり、新たな発見や視点を変えて、トライすることができそうですね。

温故知新ということでしょうか。
なかなか面白い比較でした。


歴史的デザインにインスパイアされたWEBデザイン






2011年7月21日

WEBデザインにクリエイティブに取り入れられたソーシャルメディアリンク例

言わずと知れたソーシャルメディアをWEBサイトやプロモーションサイトに
リンク設置する事例はどんどん増えて来ています。
ただリンクボタンを配置するだけでなく、デザイン的にテイストに
あわせて取り込み、配置をしている優れた事例が紹介されていました。
socialmedialinks2.jpg
socialmedialinks38.jpg
そのサービス名称やアイコンが広く知られていることもあるのでしょうが、
あまりとりたてて何かをする訳ではなく、アイコンをデザインにあわせて
棚に配置してみたり、ごくシンプルにアイコンのみが並べられていたり、
スマートフォン型のデザインの中に組み込んでいたりと、視覚的な
認知度が高いので、アイコンのみで十分機能するとみているものが
多い感じでした。


確かにアイコンのみの配置で、とりたてて枠をつけない配置ですが、
だいたいサービスは一つではなく複数へのリンクがおかれており、
それが全て同じようなサービスということもあり、認知度は
格段に高いと思います。


デザインになじませていれてしまっても、これだけ普及していると
しっかり認識されていて全く問題はなく、かえってビジュアル的に
よりよい統一感のあるデザインとなり訴求力は高まるのかも
知れませんね。


WEBデザインのクリエイティブに取り入れられたソーシャルメディアリンク例




2011年7月20日

ほとんどFlashの動きに見えるjquery

jqueryで制作されたサイトで、かなり動きのある
ほぼFlashで制作されたと見間違えるようなスムーズな
動きのサイトが紹介されていました。
jq_1.jpg
jq_5.jpg
アニメーションのように背景がずっと動き続けているものは
ボトルの動きがとても滑らかで、ボタンアクションなども
あり、触って楽しめるサイトでした。

パネルが動かせたり、クリックで別のパネルがコンテンツに
展開したり、まるでぷよぷよゲームのように上からコンテンツの
固まりが落下してくる動きだったり、その動きは本当に
スムーズでストレス無い上、軽くて待たされることが
なく快適でした。

国内でもどんどん利用率が高くなってくると思われます。
今のうちにいろいろとネタを仕込んでおかないとですね。


ほとんどFlashの動きに見えるjquery





2011年7月15日

ページを有効に使ってみせるjqueryのスクリプト

ページ長を押さえて、効果的にたくさんの情報を訴求できる
jqueryでのスライダーや回転木馬式のスクリプト例が紹介されていました。
03-anythingslider.jpg
07-feature-list.jpg
単なる横へのスライドだけでなく、横にスライドする画面の中に
縦に回転するメニューもあったり、動画再生コンテンツが
あったりと様々な活用法で、ほとんどスクロールしなくても
膨大な寮の情報を提供することが可能となります。


もちろん順番にずっと動かし手いることも可能ですし、
タブなどを用意して、任意で切り替えさせるなども自由です。

あまりページは長くしたくない、面白い動きを入れたいが重たくしたくない、
訴求したい情報がたくさんある場合は、有効ですね。


ページを有効に使ってみせるjqueryのスクリプト例




2011年7月15日

アクションを誘引するボタンデザイン

お問い合わせや資料請求に応募ボタンなどユーザーにアクションを
起こしてもらう為には、その誘導口となるリンクボタンが
大切な役割を担っています。
いかにしてうまく誘導していくか・・・。
入り口となるボタンデザインの効果的な例が紹介されていました。

calltoaction13.jpg
calltoaction19.jpg

目立たせる為には、
様々な形で目を引く方法
中のテキストを太字を使ったり、フォントを変えて目を引く方法
ちょっとしたユーモアを交えて目を引く方法
おしたり、触ったりしたくなるデザイン

上記のことをふまえてデザインを行うとよいといっています。
ドロップシャドウをつけたり、光沢感を与えたり、背景色とコントラストの
強い色味を選んだりと目を引く為に様々な工夫をするひつようが
あります。

余白をうまくつかうということも大切ですね。
目につきやすく、押しやすく、押すとどうなるかが創造しやすいこと・・・。
大切なようです。


アクションを誘引するボタンデザイン集








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

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