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

 

Web制作会社のブログ

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

2008年10月27日


【WEBサイト制作】高橋酒造

【WEBサイト制作】

高橋酒造


【ポイント】
しりとりを完了したキャラクターが顔を赤くして手をつないでいる姿は、愛嬌があって思わず自分も参加したくなります。おつまみマップで自分に合うおつまみを探してみてください。そしてみんなで「わ」を広げましょう!

【デザインテイスト】愛嬌(あいきょう)チープ


【デザインパーツ】
しりとりして次の次の人につなぐとき、キャラクターの日本酒を飲みかわすしぐさが、お茶目です。順番待ちをする間も、キャラクターの表情を変えることができるので面白い。スペシャルキーワードを入れるとスペシャルムービーが見れます。


【レイアウト】
オーソドックスなレイアウトでは、お茶目なイメージに合わないので、無作法に並べたレイアウトにしている。メニューボタンは糸でつながっているようなイメージにし、主要なシンボルである「日本酒」製品を真ん中に配置している。


【テクスチャ】
手書きのような柔らかい線は、無邪気、チープさを連想させる。


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



2008年10月21日


【WEBデザイン】contents SHE

【WEBデザイン】・・・シンプル・・・

contents SHE


【ポイント】
ページ自体はおしゃれでモダンな印象が強く、敷居が高いイメージがありますが、スタッフによる人気店のレポートを飲食店を中心に紹介していて、女性にとってためになるカテゴリが多いです。画像も大きくて見ていて飽きません。

【デザインテイスト】モダン 


【デザインパーツ】
メインビジュアルは、オブジェクトをランダムに配置し、色の主張を抑えている。オブジェクトにマウスを近づけると、弾いたり、転がったり動きがあるので面白い。オブジェクトの形や色がおしゃれで、シンプルかつモダンに見える。


【レイアウト】
レイアウトはシンプルに右にメニューエリアを取り、左にメインビジュアルを置くというシンプルなもの。右のエリアにはオブジェクトとメニューといったシンプルなものにしたので、メインビジュアルに置くコンテンツひとつでサイトの表情も変わる。中央にスクロールバーを持ってきているのもポイント。


【テクスチャ】
オブジェクトの形、○漂う・☐落ちる・△弾くなどの特徴に合わせて動きをつけているので、インパクトが強い。


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



2008年10月 8日


【WEBデザイン】ヒルトンニセコビレッジ

【WEBデザイン】

ヒルトンニセコビレッジ


【ポイント】
トップにいきなり時間軸が回っているのが印象的です。日付を入力すると、ニセコで過ごすおススメプランを教えてくれるので、すぐにイメージできるし、現地での計画を立てやすいですね。カラフルな配色にすることで、子どもが好む楽しさを演出し、余白を生かしたことで大人も見やすい落ち着いた雰囲気を出しています。

【デザインテイスト】楽しい シンプル 洗練された


【デザインパーツ】
時間軸の曲線・ページ一番下の雪が積もったような曲線などで曲線を使っているので、フォントは、はっきりした文字で、太さに変化をつけることで、全体的にメリハリのある洗練されたビジュアルを作成している。


【レイアウト】
グローバルメニューはボタン風ではなくFlashで動きをつけることで、シンプルに。かつクリックしやすくしている。画像とテキストが多く使用されているが、カラフルな配色遣いで飽きないように工夫されている。


【テクスチャ】
雪の結晶を散りばめ下に積もっていくイメージは幻想的。背景には、人物の画像を使うことで、実際に雪が降っているようなイメージを演出している。


【基調色・アクセントカラー】グリーン ピンク オレンジ



2008年10月 6日


【WEBデザイン】凛挌

【WEBデザイン】

凛挌


【ポイント】
凛とした女性をフィーチャーしたサイト。人×お酒×場所をテーマに紹介しています。対談形式はページが縦長になりやすいですが、ページをめくるように雑誌感覚で読めるので、読みやすいです。また、サイト限定のオリジナルショートストーリーも楽しめます。

【デザインテイスト】かっこいい 都会的 洗練


【デザインパーツ】
ページ内で扱う画像は、クールを演出する際の重要なポイントになる。ここでの画像は人物が正面を向いている物だけでなく、いろいろな角度で撮った画像をページ1/3くらいを使って大きく表示している。さらに、店の雰囲気がでるような奥行きのある画像を使用している。


【レイアウト】
「クール」「洗練」といったキーワードを連想させるには、要素をきっちり詰め込むより、スペースを空けることも重要なポイントとなる。見出しと本文の間にある空き。ナビゲーション上下の空きなど。


【テクスチャ】
テクスチャは主張しすぎると、クールとはかけ離れてしまうことが多い。ここでは、画像にグラデーションを使い大きな変化ではなく、分かるか分からないか程度の変化にしておく。


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


【関連サイト】
大人の書道



2008年10月 2日


【WEBデザイン】 スマイルスタイル

【WEBデザイン】

スマイルスタイル


【ポイント】
ナビゲーションは、小さめですが動きをつけることでクリックしやすくしています。
活動ブログでは、ゴミ拾いレポートが掲載されています。街をきれいにしたい人が集まって、街のために活動して、感謝したりされたり。家の近くにあったら参加してみたいです。

【デザインテイスト】クリーン 親しみやすい やさしい


【デザインパーツ】
コンテンツ内の誘導ラインをクレヨンで手書きしたような、柔らかい印象のデザインに仕上げています。また、クレヨンのライだけだと幼稚に見えてしまうので、ゴシック系のフォントでタイトルを入れることで全体をカッチリまとめた。


【レイアウト】
トップページのタイトルはオンマウスで、文字が散らばることで興味を引き、端的に伝えやすくしている。情報を詰め込みすぎないよう全体的に適度な余白を使い、コンテンツ内は、1クリックで見やすくしている。


【テクスチャ】
「クリーン」をイメージさせる緑の多い公園を背景に敷くことで、「エコ」がテーマとなっているイメージが強まります。


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


【関連サイト】
kaeru
ハイジャック会議






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

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