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

 

Web制作会社のブログ

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

2008年8月29日


【WEBデザイン】資生堂MAQUILLAGE MODE MIX TV

【WEBデザイン】・・・デジタル・・・


資生堂MAQUILLAGE MODE MIX TV

【ポイント】
TVチャンネルを見ているように、ページをチャンネルで表示している。CMを見ているようなデジタルのイメージを前面に押し出すことで、化粧品のアピールをしている。光やスピード感、ドッド文字は印象的だ。自分にぴったりのメイクもわかっちゃう!

【デザインテイスト】サイバー・エレクトリック・バーチャル、


【デザインパーツ】
タイトルやメニューの文字など書体から連想されるイメージは多い。ドットで作られたフォントを使うことで、他のイメージと組み合わせてもデジタルのイメージを出すことができる。


【レイアウト】
奇抜なレイアウトによる逸脱性と配置の規則性がデジタル感を演出する。2hの商品紹介ページでは、同サイズで区切ったエリアを設けている。画面を規則性があるように区切ることで、計算された感じがでる。


【テクスチャ】
テレビの画面のようなテクスチャを使うことで、デジタルのイメージが得られやすい。TV画面を背景にテキスト部分を透過してみせている。


【基調色・アクセントカラー】ピンク・白黒



2008年8月28日


【WEBデザイン】RazzleBerry

【WEBデザイン】・・・ゴージャス・・・
RazzleBerry


【ポイント】
リアルなイチゴとベリーのはじける場面は本当においしそう♪キラキラ感がとても効いています。
サイト用に音楽も作っていて、サイトよりダウンロードできます。ドラマのイメージソングのような感覚で、サイトのイメージソングを作るっていうのも面白いですね。

【デザインテイスト】華やか、豪華


【デザインパーツ】
マウスを動かすとキラキラが散りばめられる演出が、目を引く。商品の陰影をやや強めにつけて奥行を出すことで、リッチなイメージを引き出す。


【レイアウト】
メインビジュアルで使用するイチゴとベリーの画像をアップにしイチゴとベリーのリアル感を出すために、キラキラしたイメージをプラスした。花火のように、1点ではじけることで、派手になりすぎないゴージャス感を演出している。


【テクスチャ】
キラキラ感を出すために、特にタイトルには光があたっているような印象を与え、背景に陰影とグラデーションを使うことで、リッチ感を出している。


【基調色・アクセントカラー】ラズベリー・パープル



2008年8月27日


【WEBデザイン】キレイとつながる

【WEBデザイン】
キレイとつながる


【ポイント】
女性のイラストと、円形のコンテンツの配置によって柔らかなイメージを出している。デザインに角がないようにすることで、よりやさしい印象になる。テキストエリアを薄く透かしたり、使用するフォントをデザインテイストに合わせることで、女性的な雰囲気になる。

【デザインテイスト】フェミニン、やわらかい、やさしい


【デザインパーツ】
ナビゲーションのデザインでページの雰囲気は大きく変わる。ここでは、サイトのイメージに合わせて、丸みのあるふんわりした泡のようなイメージにし、表示するテキストもロールオーバーで拡大する仕様にした。


【レイアウト】
コンテンツ内にも円形を使ったレイアウトと女性のイラストを入れることで、柔らかいイメージにしている。


【テクスチャ】
背景に、リネンをイメージしたテクスチャを使用することで、より自然な印象を与えている。


【基調色・アクセントカラー】水色


【関連サイト】
オーダーメイドワコールララン



2008年8月26日


【WEBデザイン】AXIS

【WEBデザイン】・・・モダン・・・
AXIS


【ポイント】
配色・形状・フォントにいたるまで極力シンプルにまとめている。余白を贅沢に使って空間をデザインすると、洗練されたイメージになる。コンテンツ内の各パーツ間にも適度な余白を取ることでゆとりのあるレイアウトになる。

【デザインテイスト】洗練された、落ち着いた、シック、モード


【デザインパーツ】
グローバルナビゲーションのカラーリングは黒ベースでモノトーンでシックにまとめている。配色の彩度が高いと、にぎやかな印象が出るので、動きをつけて、バーが出るような仕様になっている。


【レイアウト】
画像の配置など、ページ全体のバランスを見ながら、余白もデザインパーツの一つとして扱っている。余白を大きく取ることで、逆にタイトルなどのパーツが引き立ってくる。パーツ内にも余白を適度に取ることで、情報を詰め込みすぎないようにしている。


【テクスチャ】
全体的にシンプルにまとめているため、べた塗りのみで構成している。「Publishing」のページでは、背景にロゴの画像を引き、ロールオーバーすると、コンテンツの内容がそれぞれ透明度を出し、背景となじませている。モダンに加え洗練されたイメージも与える。


【基調色・アクセントカラー】白・黒・グレー


【関連サイト】
AXIS design



2008年8月25日


【WEBデザイン】M&M'S

【WEBデザイン】・・・にぎやか・・・
M&M'S


【ポイント】
M&M'Sの○チョコレートなど、ジャンプ率を高くすることで、よりにぎやかな印象が出せます。右上のカラーチョコレートをクリックして、自分好みのキャラクターにカスタマイズできます。

【デザインテイスト】インパクト、ポップ、ダイナミック


【デザインパーツ】
にぎやかさを出すためにグリッドを無視しているが、全体のバランスを決めるラインはきちんと意識することで、
デザインのばらつきを抑えています。


【レイアウト】
意図的にグリットを無視してバランスをとりながら、レイアウトすることで、開放感が演出しやすく結果的ににぎやかなイメージが生まれやすいです。ナビゲーションなどのユーザビリティーにかかわる部分は意識して作成している。


【テクスチャ】
背景にM&M'Sのロゴパターンを作ることで、にぎやかな演出が行いやすくなる。


【基調色・アクセントカラー】茶・レインボー



2008年8月22日


【WEBデザイン】からだ巡茶

【WEBデザイン】
からだ巡茶


【ポイント】
パステル調の寒色がベースで、癒し的な「ヒーリング」を表現しています。
冷たい印象にならないように、ナビゲーションボタンを丸みのあるボタンにし、テキストに手書き風のラインを引くことで、柔らかい印象を与えています。
日巡りカレンダーを自分のブログ記事に貼ると、紙飛行機がヒュー♪っと巡ります。

【デザインテイスト】癒し、緩やか、さわやか、静けさ


【デザインパーツ】紙をクシャっとしたところや、紙飛行機を飛ばすことで、素朴な柔らかさを表現できる。


【レイアウト】
背景にはうすい色を使い、リラックスをイメージする余白を大きく生かして広がりを感じさせるレイアウトにしている。


【テクスチャ】
格子状の細かいテクスチャを使い、色なじみの良い色を使用することで、空気のような軽い印象が出てくる。ナチュラルを感じさせるテクスチャをしようすると、よりアナログな雰囲気を強調できる。


【基調色・アクセントカラー】薄いブルー・薄いグリーン


【関連サイト】
爽健美茶
綾鷹
一(はじめ)



2008年8月21日


【WEBデザイン】リソ研

【WEBデザイン】

リソ研


【ポイント】
色を多く使い、イラストを多用することで、飽きないようなサイトになっています。
スペシャルコンテンツには、女性に嬉しいキレイ度チェックができます。10問答えてココロと体の診断をしてみましょう。

【デザインテイスト】ポップ、わくわく、ハッピー


【デザインパーツ】
文字やアイコンに動きを付けることで、楽しさを表現しています。
画像を加工して、写真のイメージを作成し、写真を傾けてランダムに配置するとより効果的です。


【レイアウト】
イラストの多用や枠にとらわれないレイアウト。
コンテンツに合わせたモチーフを使用することで、楽しい雰囲気がでます。


【テクスチャ】
リネンをイメージするテクスチャを使用することで、楽しさに加え、サイトに合わせたナチュラルな印象も与えることができます。


【基調色・アクセントカラー】グリーン・薄いブラウン


【関連サイト】
大塚食品株式会社



2008年8月20日


【WEBデザイン】がんの痛みはがまんしない

【WEBデザイン】

がんの痛みはがまんしない


【ポイント】
製薬会社といことで、白+水色の組み合わせはさわやかで、清潔なイメージが印象的です。単色ですと無機質で冷たい印象が出てしまいがちですが、グラデーションやぼかしを使って透明感とふんわりとやさしいイメージになっています。

【デザインテイスト】さわやか、透明感、きちんとした


【デザインパーツ】
コンテンツ部分にはグラデーションを多用するとうるさくなりがちなので、犬の画像など入れシンプルなデザインに抑えると、ページ全体にメリハリが出る。


【レイアウト】
スッキリとものが片付いている部屋のように清潔で心地よい感じに、情報が見やすくまとめられている。適度な余白を取りながら、各ページへの入口を端的にまとめている。見やすく整理されていることが大切。


【テクスチャ】
グラデーションを組み合わせ、シンプルながらもつやのある質感に仕上げています。

【基調色・アクセントカラー】水色・白

【関連サイト】
緩和ケア.net



2008年8月19日


【WEBデザイン】1億人のグリーンパワー

【WEBデザイン】
1億人のグリーンパワー


【ポイント】
グリーンをアクセントカラーにイラストを使った親しみやすいデザインです。
毎日GREENな行動をして、エコポイント“GREEN SEED”をGET!すると、
集めたSEEDでGROW GREEN GOODSが抽選で当たっちゃうのは嬉しい。

【デザインテイスト】やさしい、クリーン、親しみやすい
【デザインパーツ】ちょっとした飾りのモチーフに「葉」「地球」など自然を感じられるアイテムを使用


【レイアウト】
タイトルを注目させてコンセプトを端的に伝えるため、タイトルの周りにはゆとりをもたせている。
情報を詰め込み過ぎて読みにくくならないように、全体的に適度な余白を取っている。
各情報をゾーニングすることですっきり見せている。


【テクスチャ】
派手なデザインの要素が増えると雑多な印象になり、イメージを崩してしまうため、背景に白とグリーンを使用し直線で区切って洗練されたクリアなイメージを演出している。

【基調色・アクセントカラー】グリーン・白


【関連サイト】
洞爺湖サミット
100万人のキャンドルナイト



2008年8月18日


【WEBデザイン】新潮文庫の100冊

【WEBデザイン】

新潮文庫の100冊

【ポイント】
今日は新潮文庫の100冊のサイトを紹介します。
サイトの目玉は「100冊検定」。初級・中級・上級があるそうです。

【デザインテイスト】手づくり、素朴、自然


【デザインパーツ】手書きのパンダのイラスト。


【レイアウト】
ナビゲーションのボタンなど、余白の取り方で要素の境界を表現。
ナチュラルなテイストが表現できる。


【テクスチャ】
「となりの本棚」というコンテンツでは、紙をちぎって作成したような本棚が印象的です。


【基調色・アクセントカラー】イエロー・



2008年8月 8日


【WEBデザイン】夏に欠かせない

【WEBデザイン】

1島1リゾートをひとり占め

世界地図を背景で見せて、リゾート地をクローズアップする感じなんかもいいです。


真夏の夜の怪談特集

やっぱり、稲川淳二は怖いです・・・



2008年8月 8日


【WEBデザイン】ほぼ日刊イトイ新聞

【WEBデザイン】

ほぼ日刊イトイ新聞


吹き出しが動いて、会話に臨場感が出てます。読みやすいし面白い!



2008年8月 7日


【WEBデザイン】MORISAWA

【WEBデザイン】

MORISAWA


こんなにフォントで遊んでいいんでしょうか。
共通のモチーフであるフォントが、投稿する人によって表現が変わって面白いです。



2008年8月 5日


【WEBデザイン】stitch

【WEBデザイン】

stitch


誰でも簡単にTシャツに絵が描けます。投稿したり、ブログに貼ったりできちゃいます。



2008年8月 5日


【WEBデザイン】Miu

【WEBデザイン】

Miu


今日はMiuのサイトを紹介します。
スペシャルコンテンツには、ボトル崩しゲームがあり、ボトルがはじけ落ちるところは、実際に自分で落している感じがあって面白いです。



2008年8月 4日


【WEBデザイン】チョコレート

【WEBデザイン】

明治製菓


暑い季節には甘いものが食べたくなりますね。サマーレシピがあるので、この夏、作ってみたいです。
ウエディング用ギフトとして、日付を刻んだものや、タブレターのチョコがあるのもいいですね。






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

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