Web制作会社のブログ
お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。
2008年9月30日
【WEBデザイン】MOLSKINE
【WEBデザイン】
【ポイント】
手帳だけを紹介したスペシャルコンテンツです。
グローバルメニューボタンが手帳のアイコンになっているので、一目で見やすく分かりやすいのが特徴です。ページの真ん中で実際の手帳を使用シーンに合わせて開いてみることができるので、自分に合った手帳をすぐに選べます。手帳の特徴を画像を使って説明してくれるのも嬉しいです。
【デザインテイスト】シンプル 上品 安心感
【デザインパーツ】
キーカラーが彩度の高い配色になっているため、サブカラーは黒やグレーといった無彩色系を使うことで、メリハリがあるシンプルな洗練されたイメージを出しやすい。
【レイアウト】
基本的に分かりやすいレイアウトを心がけている。上部メニュー型などの王道のレイアウトはユーザーにとっても安心してみることができるので、信頼感も与えることができる。
【テクスチャ】
派手なテクスチャはシンプルで洗練されたイメージを崩してしまうので、テクスチャの使用は最小限に抑えたほうが良い。ここではヘッダーとサブメニューにグラデーションをかける程度に抑えている。
【基調色・アクセントカラー】オレンジ ピンク グリーン 白黒
2008年9月29日
【WEBデザイン】 マクドナルドJapan
【WEBデザイン】
【ポイント】
マックスマイルファクトリーでは、自分の顔を写真で撮ってサイトに掲載することができます。さらに、アイコンや壁紙などのおまけが貰える嬉しいコンテンツ。
また、ページ右下「？」マークをクリックすると、アンケートが出てきて気軽に投稿できちゃいます。
【デザインテイスト】楽しい、ポップ、ワクワク
【デザインパーツ】
トップページでは、ポスターのような画像を上下に移動してみることができて、わくわく感が出て飽きないようになっています。上下の矢印はロールオーバーで基調色のイエローを使用しているので、クリックし易いです。
ページ右下「？」マークをクリックすると、アンケートが出てきて気軽に投稿できちゃいます。
【レイアウト】
左側をグローバルメニューにすることで、コンテンツのタイトルが目立ち、コンテンツ内のページが見やすくなっています。タイトルなどに角丸を多用することで、柔らかい、やさしいイメージになります。ページ数が多いようですが、サイト内を検索できるようなっているのも嬉しいです。
【テクスチャ】
グリッドや背景にロゴの入った紙のようなテクスチャにすることで、シンプルな落ち着いた雰囲気にすることで、コンテンツの内容を引き立たせることができる。
【基調色・アクセントカラー】ブラウン イエロー
2008年9月24日
【WEBデザイン】New York Niche
【WEBデザイン】
【ポイント】
NY在住の日本人クリエイターによって運営されているWEBマガジンを紹介します。ヘッダー部分のイラストはインパクトがあって楽しいイメージがあります。女性スタッフ中心で作られているサイトで、内容に親近感があり、読んでいてとても面白いです。こんなサイト作ってみたい。
【デザインテイスト】柔らか やさしい
【デザインパーツ】
写真やタイトルに角丸を使ったり、柔らかなグラデーションを使うと効果的。
【レイアウト】
テキストエリアにも、角がないものを使用している。角丸の半径が大きすぎるとポップや子供っぽくなってしまうので注意したい。ページの背景に花のモチーフ柄を引いて柔らかい印象にしている。
【テクスチャ】
NYGuide部分のボタンや、タイトルの吹き出し部分は、「明⇒暗」を狭くすることで、より質感につやを出している」
【基調色・アクセントカラー】ブルー
2008年9月19日
【WEBデザイン】NOODLE ON NOODLE
【WEBデザイン】・・・デジタル・・・
【ポイント】
馴染みのあるCUP NOODLEのサイトを紹介します。みんなでカップヌードルを積み上げていく作業は、みんなと作り上げているという一体感が出て、ただ単純に面白いです。みんなで宇宙を目指しましょう！
【デザインテイスト】バーチャル
【デザインパーツ】
カウントの数字を電卓で使われているようなフォントを使うことで、デジタルのイメージを出している。
【レイアウト】
中央にカップニュードル。サイドに四角に区切ってコンテンツを配置することで、計算された感じが出ている。
【テクスチャ】
マップを使うことで、リアルに積み上げていることが分かり現実では不可能なバーチャルな体験ができる。飛行機や花火を飛ばすことで、スピード感が出る。
【基調色・アクセントカラー】グレー 赤
2008年9月17日
【WEBデザイン】 ±0kasitsuki
【WEBデザイン】・・・モダン・・・
【ポイント】
有名デザイナーの作品である、かわいい加湿器のサイトを紹介をします。この加湿器を見ていると、とても欲しくなります・・・
順番に自動再生でコンテンツを見て、途中で一時停止・再生作業ができるというのはいいですね。加湿器を買って、部屋の加湿器の画像を送ると抽選で、豪華賞品が当たる企画はうまい。
【デザインテイスト】洗練された 落ち着いた モード
【デザインパーツ】
グローバルナビゲーションは、配色の彩度が高いとにぎやかな印象になるので、カラーリングはモノトーン+彩度の低い色でシックにまとめている。
【レイアウト】
余白を大きく取ることで、逆にタイトル・画像が引き立ってきます。パーツ内にも適度な余白を取りゆとりのあるレイアウトを心がける。
【テクスチャ】
派手なテクスチャなどで、デザインの要素が増えると雑多な印象になり、洗練されたイメージを壊してしまうため、テクスチャの使用は最小限に抑えたほうがいい。ここでは、画像の中にグラデーションを使うなどして、光に照らされている感じを演出している。
【基調色・アクセントカラー】グレー白
【関連サイト】
±0オンラインショッピング
2008年9月16日
【WEBデザイン】 PRIVATE LABEL
【WEBデザイン】・・・モダン、シンプル・・・
【ポイント】
あまり情報を詰め込みすぎず、ブランドのイメージが上手く伝わっているサイトになっている。情報を絞ることで明快にスッキリと見える。
スクリーンセーバーやブログパーツをダウンロードできます。
【デザインテイスト】ミニマム モダン
【デザインパーツ】
グローバルメニューを隠すことで、視覚的に喧嘩せず、無彩色主軸としてデザインすることができる。
【レイアウト】
レイアウトは左にメニューエリアをとり、右にメインビジュアルを置くというシンプルなもの。右のエリアに強いビジュアルを置けば、インパクトのあるデザインになる。メインビジュアルでサイトの表情も変化する。
【テクスチャ】
背景の画像をグレーの壁を使ったもので統一することで寂しくなりすぎず、ブランド商品もよく見える。
【基調色・アクセントカラー】グリーン
【関連サイト】
SANEI
2008年9月12日
【WEBデザイン】OTONA GLICO
【WEBデザイン】
【ポイント】
25年後の磯野家（サザエさん）の設定で製品を紹介している。
チョコレートをもっと知ってもらいたい！というコンテンツが盛りだくさん。チョコレートの伝統・香りの秘密などの知識はちょっと勉強になる。「オトナノアソビ」はついついやってしまうコンテンツ。
【デザインテイスト】思いやり 愛情 柔らかさ
【デザインパーツ】
やさしさは柔らかさという感覚と共通した印象があるので、背景に柔らかさを出すような淡い中間色を使った羽の画像を用いている。
【レイアウト】
ざっくりとしたシンプルなレイアウトにするため、掲載する情報は少なめであることが前提のレイアウトになっている。特に目的別メニューはたった4つとかなり少ない。大きめの文字を使いながら簡単な操作性を保つことは見栄え以上にやさしさを感じさせるポイントと考えられる。
【テクスチャ】
繊細な色を心がける。全体的にはコントラストの低い印象を受けるデザインだが、記事の文字色やナビゲーションのボタンなど操作や使い勝手にかかわる部分については、可視性が下がらないようにコントラストを保った。各種背景のみ淡い中間色のグラデーションで柔らかさを出している。
【基調色・アクセントカラー】黄 赤 茶
2008年9月11日
【WEBデザイン】SWORD FISH
【WEBデザイン】・・・シック・・・
【ポイント】
画像をたくさん使っているが、商品ページ以外を白黒にするなど、シックなデザインを意識したサイトになっている。5周年記念パーティーの告知ページはシックなイメージに加え、文字にピンクを使い、画像をランダムに配置した遊びを加えたページになってる。
【デザインテイスト】洗練 スマート 上品
【デザインパーツ】
シックを連想させるパーツとして、グローバルメニューがある。写真はモノトーンにしてから、コントラストをつけている。メニューバーは、うっすらと背景が見えるくらいに透明度のあるグリッドのテクスチャのあるブラックを使っている。最後に文字を入れ、透明度を80％くらいにし、背景となじませている。
【レイアウト】
シックを考えた場合、オーソドックスなレイアウトが適切。その中で、いかに洗練されたデザインにするかが重要。基本はアースカラーなど落ち着いたトーンにし、色相調整も少なめにする。アースカラーによるカテゴライズを行うことで、レイアウト自体はシンプルであるが、スマートなイメージを持たせる。
【テクスチャ】
白黒の画像を背景に敷くことで、余計な装飾が省かれ、落ち着いたイメージになる。
【基調色・アクセントカラー】白 黒 グレー アースカラー
【関連サイト】
SWORD FISH shopping
2008年9月 9日
【WEBデザイン】 Madame Surto
【WEBデザイン】・・・アナログ・・・
【ポイント】
ファッション系はかっこいいスタイリッシュな印象を受けるサイトが多いが、、背景のイラストやマークに凝っていて、温かさ・華やかながでている。雑誌を紹介しているコンテンツでは、雑誌を切って張ったように配置していて面白い。
【デザインテイスト】手づくり 温かみのある
【デザインパーツ】
アナログ感を出すために、身近にあるものをできるだけリアルに見せたい。フェルトをピンで止めた仕様や、ジップを使ったり、スクロールバーをボタンにをしているのも面白い。
【レイアウト】
グリッドに沿ったレイアウトではなく、自由な配置をすることでアナログ感が増す。ここではナビゲーションを斜めに配置している。この際に配置がバラバラすることで読みにくくならないよう注意が必要。
【テクスチャ】
アナログ感をイメージするため、フェルトと糸を使って表現している。さらに、手書きしたようなフォントを使うことで、洋風なレトロな雰囲気も加わる。
【基調色・アクセントカラー】薄いピンク・薄い水色
2008年9月 8日
【WEBデザイン】HPF.MALL
【WEBデザイン】・・・洋風・・・
【ポイント】
「H.P.F MALL」は、個性派バイヤーたちがセレクトした商品に会える場所。ということで、個性的な建物に商品を配置したイメージ画像はインパクトがあります。商品のサイズを200倍くらいまで拡大できるので、見やすいです。
【デザインテイスト】アナログ レトロ アンティーク
【デザインパーツ】
見出しやグローバルナビゲーションには明朝系を選んでいる。
【レイアウト】
レイアウトは中央に配置することで雰囲気も落ち着いて見える。デザインに装飾を多く施すので、レイヤーの重なりを見せられるよう、コンテンツを中央に持ってきている。装飾がよく見えるように、ヘッダー位置に余裕を持たせた。サイドナビゲーションはヘッダーに合わせたかたちに位置。
【テクスチャ】
商品の枠にアンティーク調の額を使用することで、よりレトロな感じが出る。ブランド紹介のコンテンツでは、背景に世界地図をひき、ブランドの生産国をマークしている。殺風景にならないよう小物を配置している。
【基調色・アクセントカラー】白・グレー
2008年9月 4日
【WEBデザイン】ポストペット
【WEBデザイン】・・・コミック・・・
【ポイント】
コマ割りや吹き出し、オノマトペ（擬音語、擬声語）などの要素を取り入れることで、漫画と同様にコミカルなそれらしい雰囲気を作ることができる。ページ全体を明るく、キャラクターアイコンや、ロゴマークをうまく利用しかわいらしさや、楽しさも演出できる。
ｔｙｐ-Mというコンテンツでは、「あしたのモモ」という短編ストーリーがあって、モモが身近に感じられる。今のところ４話まで公開中。みんなが知っているモモを使った、面白いコンテンツが豊富。
【デザインテイスト】コミカル、キャラクター
【デザインパーツ】
キャラクターを使ったアイテム作りがポイントになる。キャラクターはメインビジュアルと小見出し、バナーなどにも使っている。
【レイアウト】
キャラクターの絵を大きく扱うために、コンテンツ領域の上部を確保し、ビジュアル要素の大きさや位置・表情でかわいらしさや楽しさを演出している。テキストエリアや見出しは、角のないものをしようしたり、背景に柔らかいイメージを張り込んでいる。
【テクスチャ】
特にWebメールのページでは、グラデーションを使い柔らかな雰囲気を演出している。
【基調色・アクセントカラー】ピンク
2008年9月 3日
【WEBデザイン】愛知県名古屋のデザイナー学院
【WEBデザイン】
愛知県名古屋のデザイナー学院
【ポイント】
「お問い合わせ」「資料請求」のボタンは、アイコンと基調色を使い、内容を引き立たせるよな、機能的かつオーソドックスなデザインにしている。下層ページに入っても、デザインは変わらないが、コンテンツのメニューがスライドする動きによってページが変わったことが分かる。また、スクロールするとサイドメニューが見える位置に移動するのも面白い。
【デザインテイスト】シンプル、落ち着き、安心感
【デザインパーツ】
メニュ－ボタンにグラデーションを敷いただけではのっぺりとした印象になってしまうので、基調とした色で濃い色のラインを引くことで立体感を出している。
【レイアウト】
幅広い年齢層・インターネットスキルを考慮して、基本的に分かりやすいレイアウトを心がけることで、安心感をあたえる。王道なレイアウトはユーザーに安心感＝信頼感を与えることができる。
四角く区切ったレイアウトの中で、「願書受付中！」をリボンのように斜めに配置し、引き立たせている。
【テクスチャ】
ボタンなどは無理してテクスチャを利用する必要はなく、シンプルなデザインにする。
【基調色・アクセントカラー】ブルー
2008年9月 2日
【WEBデザイン】カルピス
【WEBデザイン】
【ポイント】
「カルピス広場」では、カルピスを楽しく知ることができます。Web上で工場見学できたり、カルピスをマドラーで叩いて音楽を作ったり。子どもから大人まで楽しめます。
【デザインテイスト】自然、手作り
【デザインパーツ】
紙に手書きしたような文字が印象的。素朴な柔らかさが出る。
【レイアウト】
コンテンツを多く配置しているが、要素の境界線を罫線ではなく、点線で区切ったりすることで、アナログなテイストが表現できる。
【テクスチャ】
ナチュラルなイメージを感じるテクスチャを使い作成。「すこやかQ&A」「すこやかブック」のコンテンツのタイトルにはフェルトのような立体感のあるテクスチャを使用している。
【基調色・アクセントカラー】水色
Webサイトからお問い合わせのお客様に限り、納品後3ヶ月のコンサルティング(期間限定)
