Webクリエイターボックス » Webデザイン http://www.webcreatorbox.com WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 Sat, 04 Feb 2012 01:55:43 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 「焼肉 三十八」のリニューアルをしました！ http://www.webcreatorbox.com/tech/redesign-mitohachi/ http://www.webcreatorbox.com/tech/redesign-mitohachi/#comments Tue, 08 Nov 2011 02:10:37 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5595 こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。


IT系、Web業界の求人に強い転職サイト【green】

受注

福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。

簡単なリニューアル時のご要望をまとめると下記６点でした。

  • お知らせ欄は更新可能
  • WordPressで構築
  • 写真やテキストは流用
  • 携帯版作成（コンテンツは一緒）
  • ブログ・口コミ掲示板は削除
  • IE6は非対応でOK（ありがとうございます！！！）

制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeやEメールで行いました。松野氏は私が制作時に使っているツールや配色の仕方などを熱心に質問して頂き、「私も使ってみます！」「勉強になります！！」と、とっても向上心のある方だなあという印象でした。そして彼女とは誕生日が一緒というミラクル！お誕生日には素敵なAAを頂きましたｗ ありがとうです松野氏ーーー！！！

サイト構成

旧三十八Webサイト

旧 三十八Webサイトのデザインです。最初に旧Webサイトを見たときの印象は、ホームに表示しているものが多く、使っている色も多いからか少し雑然としたイメージ…。また、いくつかのページをひとつにまとめられるかな？ということでサイトマップから見直すことにしました。

旧サイトマップ

旧サイトマップ。ホームに表示するものが多いです。

新サイトマップ

新サイトマップ。「アクセス」と「予約・問い合わせ」ページをなくし、その情報はフッターにまとめました。その他ホームに表示していたいくつかを思い切って切り捨てました。

ワイヤーフレーム

サイトマップを元にワイヤーフレームを作ります。レイアウトが変わるホーム・メニュー・三十八についての３点。レイアウト自体は特に問題ないとのことで、このまますすめることに。飲食店のWebサイトなので、なるべく画像を大きく・多く打ち出してユーザーの食欲をそそらせようというレイアウトです。下記画像クリックで拡大表示できます。

ホーム

ホーム


三十八について

三十八について

デザイン

デザイン面でのご要望は下記３点。

  • 赤と白をメインで
  • ファミリーやカップルが気軽に来れる楽しい雰囲気
  • 高級感はいらない
テクスチャと配色

赤メインでも旧サイトのように全面に使ったらドギツイ感じになってしまうので、使う箇所をしぼってアクセントとして使用。また、ロゴは和風な雰囲気だったので、和紙を連想するような茶色のテクスチャを背景に使用し、温かみのあるデザインにしました。

CTA

予約は電話のみとのことなので、電話番号をページヘッダーとフッターに２箇所設置しました。CTAがあるサイトは上部と下部に二箇所必ず設置！これ大事です！テストに出ます！！

写真を貼り付けたようなデザイン

写真を貼り付けたようなデザインにして親近感をプラス。

ページ内リンク移動時のエフェクト

ページ内リンク移動時のエフェクト

ページ内リンクをスムーズに移動できるよう、jQueryを使って効果を付け加えています。コードはいたって簡単！コピペして使っちゃってください :)

HTML

<a href="#link">ここをクリックでリンク</a>
・・・
・・・
・・・
<a id="link">ここに飛びます</a>

JavaScript

$(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });
});

jQuery

<head>～</head>内に記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

HTML5でマークアップ

最近はもうHTML5で統一しています。まだまだ勉強中なので時間かかったりしますが、なかなか楽しいですよ！

アウトライン

アウトライン

アウトラインはこんな感じです。画像クリックで拡大表示します。

IE対策

IE8以下はHTML5に対応していないのでhtml5.jsというスクリプトを読み込ませて対応させます。<head>～</head>内に下記コードを記述。

<!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
JavaScriptをオフにしている場合

JavaScriptを使って対応させているので、JavaScriptをオフにしている場合はこのように注意書きが表示されます。以下を<head>～</head>内に記述。

<noscript>
      このサイトはJavaScriptがオンになっていないと正常に表示されません
</noscript>

携帯版サイトの作成

携帯版サイトの作成

携帯電話に対応させるため、WordPressの「Ktai Style」を使用しました。いくつかのテーマが付属でついているので、その中からレイアウトの近いものを選び、コードやCSSをカスタマイズします。カスタマイズ方法も本家サイトで説明しています。

Before & After

旧三十八Webサイト

旧Webサイト

新Webサイト

新Webサイト

いかがでしょう？その他過去に作った作品はポートフォリオサイトで見ることができます。また、過去リデザインのレビューは

を読んでみてください。ご意見・ご感想お待ちしております！

※現在多忙のため新規制作依頼を受け付けておりません。ご了承くださいませ。

※焼肉 三十八様へ配慮し、一部削除いたしました。

]]> http://www.webcreatorbox.com/tech/redesign-mitohachi/feed/ 21 効果的なミニマルデザインと退屈なデザインの境界線 http://www.webcreatorbox.com/tech/minimal-design-tips/ http://www.webcreatorbox.com/tech/minimal-design-tips/#comments Tue, 01 Nov 2011 01:46:06 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5549 ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。


IT系、Web業界の求人に強い転職サイト【green】

ミニマルデザインとは

そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると

ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。

とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるために、見せたいものや伝えたいことの中から引き算をしていき、最小限度におさえたデザインをミニマルデザインと呼んでいます。余分なものをそぎ落とすことで、ユーザーにより明確にメッセージを伝えることが可能です。

効果的なミニマルデザインに挑戦！

ではどうすれば効果的なミニマルデザインに仕上げることができるのでしょう？そのポイント紹介します。

何を目立たせるかを明確にする

「あれも見て欲しい」「これも見て欲しい」とたくさんのものを打ち出すのではなく、ユーザーに見て欲しい１つのものにフォーカスを当てます。

Less is bore

色をおさえてシンプルにしているつもりでも、表示する要素が多いのでシンプルになりきれてません。これはこれで問題ないと思いますが、ミニマルにするにはもう少しけずってみましょう。

Less is more

思い切って商品画像と商品名、値段のみを表示しました。商品画像がより目立たされ、スッキリとまとまりました。

メリハリをつける

ミニマルデザインと退屈なデザインの一番の違いはここだと思っています。一口にメリハリ…といってもその方法は様々ですが、ここではテキストを使って違いをみてみましょう。

Less is bore

文章が同じサイズで羅列されています。パッと見て何が言いたいのかわかりにくですね。

Less is more

見出しを大きく打ち出しました。テキストでメリハリを付けるひとつの手段として、ジャンプ率を高くする方法があります。ジャンプ率とは本文と見出しの文字サイズの比率のことです。サイズの大小の比率が大きいほどジャンプ率は高くなり、比率が小さいとジャンプ率は低くなります。ジャンプ率が高ければ高いほどメリハリがついて印象的なデザインになります。

余白のバランスに気をつける

余白があるとミニマル？いいえ、そうとは限りません。下の画像を見たらきっと納得するはずです。

Less is bore

上の画像では余白のバランスが悪く、これはわざと作った余白なのか、ただの余った空欄なのかがわかりません。余白があるのに美しくない。なぜか？その答えは余白のバランス＝余白同士の距離にあります。

Less is more

２つの要素を真ん中にまとめました。上下の余白と左右の余白を同じ値にするとバランスがとれて美しく配置されます。ただしWebの場合は特に下の値がブラウザーサイズによって異なりますよね。


そこで第二案。画面左・画面上からの距離を同じにしました。また２つの要素の間の距離は画面上・左の距離の半分くらいです。他にも配置の仕方はいろいろあるので、いろんなデザインを見てバランスのとり方を研究するとつかめてくると思います。

色をおさえる

多くの「ミニマルデザイン」と呼ばれるWebサイトは無彩色（白・グレイ・黒）を使っています。その理由はコントラストをつけやすいく、色味がない分シンプルにまとめられるからです。

Less is bore

例えばこのデザインでは、配置の仕方など、とってもシンプルなのに色を使いすぎています。

Less is more

モノクロ＋１色でまとめてみました。「今すぐ注文する」をクリックしてほしいというのがひと目でわかりますね。このモノクロ＋１色という配色はミニマルではないデザインでもよく使われる、簡単にアクセントをつけることのできる配色のひとつです。

細部にこだわる

ただ目立たせたいものをドカーンと置いただけでは、ミニマルデザイン特有の高級感や上品さは演出しきれません。「少しの手間で大きく変わる、細部にこだわったWebデザインを」の記事でも書いたとおり、わずかなテクスチャを加えたり、1pxにこだわったりして細部を作り込むことで、より洗練されたデザインが完成します。

Less is bore

商品詳細ページの例です。悪くはないかもしれませんが、なにか物足りなさを感じませんか？

Less is more

背景に白〜グレイのグラデーション、商品を反射させたように見せ、CTAボタンにもグラデーションを入れてみました。少しの違いですが、より完成度の高いデザインに仕上がりました。このようにわずかに効果をつけるだけで変わってきます。

ミニマルデザインの問題点

上品にまとめることができるミニマルデザインデザインですが、いいことばかりではありません。主に以下の問題点があげられると思います。

なんのWebサイトかわからない

そのサイトをパッと見た瞬間になんのサイトなのかがわからない。一番ありがちな問題点だと思います。一般的にページを開いた５秒間の内に、それがなんのWebサイトなのかがわかるかどうかはとても重要とされています。すぐにわからないサイトは直帰率の低下にも繋がるため、簡素すぎて目的がわからないサイトは避けるべきです。

どれがクリックできるかわからない

テキストリンクのうち、デフォルト設定である下線＋青色のテキストが一番リンクだと認識されやすいようです。しかし、中には装飾をそぎ落としすぎてテキストリンクの装飾も一切排除しているサイトも…。マウスオーバーするまでそれがリンクなのかわからない、なんてテキストはユーザビリティを無視しすぎです。引き算のしすぎに注意しましょう。

「でもクライアントにアレコレ詰めろって言われるんだよねー」

これ、デザインをしていたらよくあると思いますｗ そんな時は「可読性の向上」「シンプルな美しさ」「訴求力の高さ」を合言葉にミニマルデザインのよさを熱弁すると何か変わるかもしれません。また、「もしマイクロソフトがiPodのパッケージをデザインしたら･･･」で紹介されていたこの動画はかなり説得力があると思いますｗ

効果的なミニマルデザインの例

アップル

ミニマルといえばアップル！注目してほしい要素以外を極力そぎ落とし、洗練されたデザインを作り続けています。

Omnia

他の要素を極力小さくすることで、フルスクリーンで見せている背景画像がさらに引き立っています。

Excellence Image

大きなキャッチコピーがパッと目にとまります。色もおさえてありメリハリがついてます。

T O Y

ミニマルデザインといってもモノクロだけではありません。このサイトはビビッドな一色を背景色に使い、飾りもほとんどないデザインです。装飾をしなくとも色が派手なのでインパクトがあります。※Flash

Rob Treutel

メニュー名をどーんと表示させているだけですが、それでどんな内容のサイトなのかわかります。

iconwerk

アイコンデザインを専門にしているデザイン会社のWebサイト。アイコンにフォーカスするよう余計な情報を一切載せていません。

Mike Ingham

グラデーションやシャドウの入れ方が上手で、全体的にとってもエレガント。

Steffen Knudsen Allen

フォトグラファーさんのWebサイト。写真以外の要素はほぼ装飾なしです。

CRW / Corporate Risk Watch

グリッドが特徴のサイト。モノクロで統一し、グリッドに合わせてカチッとデザインしている分、手描き風の青いラインが目立ちます。

Checkland Kindleysides

色も表示する要素も抑えて全体の動きに注目するようにデザインされています。※Flash

流行っているからといってどのサイトでもミニマルデザインが取り入れられるかといったら、そういうわけではありません。デザイナーの自己満足な「作品」にならないよう、取り入れていきたいですね。

]]> http://www.webcreatorbox.com/tech/minimal-design-tips/feed/ 14 インスピレーションの宝庫！Web制作会社のポートフォリオWebサイト35 http://www.webcreatorbox.com/inspiration/web-design-agency-website/ http://www.webcreatorbox.com/inspiration/web-design-agency-website/#comments Wed, 24 Aug 2011 01:55:51 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5175 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します！


IT系、Web業界の求人に強い転職サイト【green】

Web制作会社のサイトの特徴

Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。

制作実績

多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。

  • スクリーンショット
  • クライアント名
  • 制作したサイトの簡単な説明文（長過ぎ注意）
  • いつ制作したのか
  • WebサイトURL
  • クライアントからの感想

こちらのサイトではWebサイトを動画で見ることができます。見どころをしっかり抑え、jQueryなどのアニメーションもその場で見ることができるので、動きのあるWebサイトを紹介する際には特に効果がありそうです。

お問い合わせフォーム

お問い合わせフォームに制作依頼内容、予算などを加えている会社も多く見られました。依頼専用フォームと質問・意見用フォームでわけて、ザックリでいいので依頼内容を書いてもらえば、ムダが省けたり、最初からスムーズにやりとりできそうですね。

制作依頼内容、予算、ページ数、希望製作期間などが送信できるようになっているサイトもチラホラ。

ブログ

ブログは必須ではないと思いますが、ブログを書いている制作会社が多い気がします。内容は基本的にはWebサイトやサービスの新着情報ですが、中には制作したWebサイトやマーケティング戦略のケーススタディを公開している会社もありました。具体的には、以下の内容をまとめていました。

  • 制作したWebサイトの概要
  • クライアントからの要望
  • 制作したWebサイトの見どころ
  • 実際に行ったマーケティング概要
  • 結果（アクセス解析）
  • クライアントからの感想

Radiumのブログでは実際にしたデザインの過程をワイヤーフレームから紹介したり、マーケティングで使っているツールの紹介、ROIの計算方法など、制作者の勉強にもなる記事を公開しています。

Icelabのブログでは実際に製作中のアプリの製作過程を記事で紹介しています。コードを書いて説明もしています。アプリ公開後ではなく、製作途中に書いていってるのが興味深いですね。

遊び心

Web制作会社のサイトでは細かい所に仕掛けがあったり、思わず眺めてしまったりという「小ネタ」が仕込まれていたりします。自社サイトということもあり、自由に仕込めるんでしょうねｗ

作品一覧のサムネイル画像にマウスオーバーすると「Luv This!（いいね！）」がクリックできます。クリックすると下からニョキっとコンタクトフォームが現れ、どのサイトにいいね！したのかを送信する事ができます。これからWebサイト制作を依頼しようとしているクライアントがどんなデザインが好みなのかがわかるいいアイデアですね！

ゴリラが現れたり。

フッターで「London Baby!」と叫んでみたり。

マフィアに殺されそうな人を発見したり。

Web制作会社のポートフォリオWebサイト

私が見ていて「お！」と思った素敵なデザインのWebサイトをいくつか紹介します。ざっくりカテゴリー分けしてみました。

シンプル＋ビビッドカラー

1. Unfold（ノルウェー）

スクロールする時の動きがおもしろい！しかも無限ループです。斜めの線の使い方が素晴らしい。

2. Moovents（イタリア）

「M」の字を動かしてお花のような模様にしています。さらにカラフルな色を足してパララックス効果で動かしているところにクリエイティブ性を感じますね！

3. 2am（UK）

かわいらしいイメージのあるピンクも、モノクロ＋彩度の高いピンクだとこんなにかっこいいデザインに仕上がります。

4. tme solutions（UK）

どのカテゴリーにするか悩みました…。なぜなら見るエリアによってデザインが違うからです。手描き風だったりクールな印象だったり。ナビゲーションメニューが上からびよーんと現れるのもおもしろい！いろんなところにユニークなアイデアが仕込まれています。

5. Uber（UK）

フルスクリーンの背景画像が迫力あります。「Showreel」のページではさらに迫力のあるフルスクリーンのプロモーションビデオが見ることができます。

6. Blurb Creative（UK）

暗めの色合いの中で浮かび上がるビビッドな色が特徴のデザイン。背景の模様も好きです。半透明のボックスを少しずらして変化をつけています。

7. The Creative District（アイルランド）

ピンクを使っていますが、セリフフォントを使って大人っぽいイメージにまとめています。

ミニマル

8. enjoythis（UK）

とってもシンプルなデザインの中で手描き風のロゴがかわいらしさ・素朴感を演出しています。

9. DRAFT（日本）

ウィンドウのサイズによってカラム数が変わるレイアウト（可変カラムと言うんですかね？）が素敵なWebサイト。ぜひウィンドウのサイズを変更してみてください！

10. Birch Studio Ltd（UK）

上部の横長に広がる作品写真が特徴。他をシンプルに抑えている分、余計目立ちますね。

11. Erskine Design（UK）

ところどころ手描き風のデザインも加えていますが、色味を抑えている分大人っぽく仕上がっています。

12. TH= SUM（カナダ）

色を一切使わない、モノクロオンリーのサイト。シックな雰囲気のなか、イラストがアクセントになってかしこまりすぎないデザイン。

13. Tokyo Digital（UK）

イギリスにあるのにTokyoという不思議な名前の制作会社。グリッドベースの整列されたデザインが特徴。

イラスト

14. Pieoneers（カナダ）

ホームのポップなイラストはもちろん、各ページにある手描き風の大きな見出しイラストもインパクト大！

15. Creative Spark（UK）

ビビッドな色と不思議系キャラクターがインパクトのあるサイト。Webだけでなくプリントデザインも素敵な作品ばかりです。

16. Orange Label Design Studio（UK）

カラフルなドット絵が特徴のWebサイト。マリリン・モンロー、マフィアに今にも殺されそうな人、おっぱい丸出しのおねーちゃんなど、細かいところまでよく見てみるとおもしろいです！

17. Radium（US）

Web制作ではなくインターネットマーケティングの会社ですが、好きなデザインのサイトなので一緒にご紹介。イラストやカラフルな色使いが印象的です。

18. Studio 7 Designs（カナダ）

シロクマさんやオーロラ、トーテムポール、レイヴンなど、カナダらしいイラストが散りばめられています。イラストを使ったデザインが得意のよう。

19. WitFlow（ポーランド）

ベージュ×青緑の配色が個人的に気に入りました。シャドウやグラデーションを使わずに表現した3D風ボックスがかわいらしいです。

20. Actual Size Creative（US）

スクロールや開閉するコンテンツのアニメーションが特徴。ゴリラが登り降りしたり、住所にわざわざ「アメリカ　地球」と書いちゃうところに遊び心を感じます。

21. Local Wisdom（US）

シャドウをうまく利用して奥行きが感じられるデザイン。色使いも個性的です。

テクスチャ

22. Marah Creative（US）

わずかなテクスチャ感と、ホームのイメージやフッターのリボンについたシャドウのつけ方が上手！

23. Amazee Labs（スイス）

テクスチャとイラストが素敵にマッチしています。大胆な色使いやタイポグラフィもうまくまとまっていますね。

24. Kooba（アイルランド）

紙をちぎったような質感や水彩画のようなエフェクトが美しいサイト。

25. Goldenboy（UK）

かっこいいイメージになりがちなグランジ風デザインも、色を押さえることでどこかクラシカルな雰囲気に。

手描き風

26. 株式会社ブラン（日本）

チョコチョコ歩く女の子と手描き風のデザインがかわいらしいサイト。

27. Icelab（オーストラリア）

目の覚めるような鮮やかな水色とかわいらしいイラストが特徴のサイト。赤がアクセントになって引き締まっていますね。

28. Carsonified（UK）

手描き風イラストや２色のみを使った配色、タイポグラフィ、大胆な配置など、見ているだけで楽しくなるようなサイト。

29. Pixel Thread（UK）

手描き風のロゴや木目調の背景、色合いがとっても温かみがあります。

クール

30. MetaLab（カナダ）

前の記事「少しの手間で大きく変わる、細部にこだわったWebデザインを」でも紹介した、1pxのラインをうまく取り入れているWebサイト。カナダの会社とは知りませんでした！

31. FLIPP Advertising（カナダ）

「What we do」ページのパイチャートを使ったサービス紹介の仕方がおもしろいですね。

32. Invoke（カナダ）

こちらも「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介しました。深みのある赤がかっこいいですね。

33. Paramore（US）

各ページわずかなアニメーションがシンプルでかっこいいです。社内写真も公開していて、思わず「こんなところで働きたい！」と思ってしまうかも。

34. formoda（UK）

制作実績のページではその作品に合わせて上部背景画像が変わります。こだわってますね！

35. Abstraktion（UK）

黒×赤はやっぱりかっこいいですね！矢印キーで操作できます。

いろいろ見てみましたが「このサイトこの国だったんだ！」なんて発見もたくさんありました。あ、こっそり国をメモしているのバレちゃいました？そもそも「次はどこの国に住もうかなー？せっかくだからおもしろいWeb制作会社が多い国がいいなあ！」と思ってWeb制作会社のWebサイトを探し始めたのがきっかけなのです。で、150社以上Web制作会社を見てみましたが、その約４割がイギリスの制作会社のデザインでした…！次行く国はイギリスで決まりですかね！

]]> http://www.webcreatorbox.com/inspiration/web-design-agency-website/feed/ 8 少しの手間で大きく変わる、細部にこだわったWebデザインを http://www.webcreatorbox.com/tech/subtle-design-details/ http://www.webcreatorbox.com/tech/subtle-design-details/#comments Tue, 02 Aug 2011 02:22:45 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5012 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！


IT系、Web業界の求人に強い転職サイト【green】

追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを

グラデーションを加える

「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。

ヘッダーのビビッドな背景色が特徴のOnehubのサイトを見てみましょう。上記画像はDebeloper Toolにてグラデーションをなくし、単一色にしたもの。黄緑が強すぎて少しチープなイメージに…。

こちらがグラデーションを加えたバージョン。黄緑の強い印象も薄れ、爽やかな印象になりました。

更にもう一例。こちらはTestFlightのサインアップフォームです。同様にグラデーションをなくしてみました。特に問題はありませんが、なんだか物足りない…。

こちらが本物。各列、各テキストフォームにグレーのグラデーションがかかっています。立体感がとっても美しいですね。作りこまれている印象があります。

どちらもわずかなグラデーションですが、印象は変わってきますよね。色差・明度差はあまり激しくない方が綺麗にデザインに反映すると思います！

1pxのラインを加える

たかが1px。されど1px。専門学校に通っていた頃、デザインの授業の先生が言っていた言葉を未だに覚えています。「1 pixel line makes all the difference // 1ピクセルの線がすべてを変える 」! 1pxの線の有無で全体のデザインが引き締めることができます。では具体的な例を見てみましょう。

メタリックな雰囲気漂うサイト、MetaLab。ひとつひとつの要素がシャキッと引き締まっていますね。

アップで見てみると、囲み線だけでなく1pxのハイライトも入っている事がわかります。こだわってますね！

他、1pxラインを用いたデザインいろいろ。

濃い赤のグラデーションとうまく組み合わさっています。

全体を暗い色の線で囲み、上部と仕切り線にハイライトをプラスして立体感がでています。

1pxラインはグラデーションと非常に相性がいいです。ラインの色に気をつけて実装してみてください！

シャドウを加える

シャドウはそのオブジェクトを浮き上がらせる効果があるため、何かを目立たせたい場合やサイト全体に奥行を与えたい場合に有効です。

クールな印象のWebサイト、Themify。このサイトのフッター部分に注目してみましょう。

背景色が暗めの紫なので見えにくいのですが、白いコンテンツボックスにシャドウがかかっている事がわかります。制作者のNick氏はカンファレンスにて「ほんの少しのシャドウで、本当に見えにくいと思いますが、このシャドウが奥行きを与えています」と語っていました。

こちらはサムネイル画像一覧にシャドウを加えているサイト。シャドウなしで感じる物足りなさも、シャドウを加えることで全体をエレガントな雰囲気に変えてくれます。

シャドウを加える際は、そのシャドウの透明度に注意してください。あまり濃い色のシャドウだと逆に沈んで見えてしまう事もあります。また、オブジェクトからの距離も重要です。シャドウの位置が離れすぎていると不自然になりがちです。わざと位置を離すのは上級者さん向け！

ノイズを加える

背景等にノイズを加えたパターンを使うことで、テクスチャ感が出て、無機質なイメージから温かみのあるデザインへと変える事ができます。

濃いグレーの背景にわずかなノイズを加えたサイト、Worry Free Labs。ノイズの有無を比較してみると、若干の違いがわかると思います。ノイズを加える事で、ページ内にある手描きイラストを効果的に表現しています。

BonBon Buttonsで使われているボタンデザインはキャンディーをイメージしているため、ノイズがうまく質感を出しています。ちなみにこのBonBon Buttonsはダウンロードすると少しのコードで実装できるのでぜひ試してみてください :)

ノイズを加えた画像は、Photoshopなら フィルター＞ノイズ＞ノイズを加える から作成できます。また、NoisePNGというサイトで簡単にカスタマイズ・ダウンロードができるので、こちらも試してみてください！

レタープレス効果

型押しをしたような効果のレタープレス。どことなく高級感がでますよね！レタープレスをする時のポイントは、

  • 文字色は背景より暗め
  • 太めのフォントの方が効果が綺麗に見えます
  • インナーシャドウでローライトを
  • ドロップシャドウでハイライトを
  • グラデーションを使ってより美しく！

レタープレス効果を使った実例いろいろ…





これらのわずかな装飾類は、なくてもいいけどあればよりデザインに深みが増すものだと思っています。「このデザイン素敵だな！」と思えるサイトに出会ったら、思いっきり拡大して細部まで見てみると「こんなところにもこだわりが！」と気づけたりして、いい勉強になりますよ！なんだか思い通りのデザインと少し違うな…という時に思い出してみてください！

追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを

]]> http://www.webcreatorbox.com/tech/subtle-design-details/feed/ 15 「Webサイトにデザインなんて関係ねー」と言う人に一言。Webデザインの重要性とは？ http://www.webcreatorbox.com/webinfo/how-important-web-design/ http://www.webcreatorbox.com/webinfo/how-important-web-design/#comments Tue, 21 Jun 2011 01:55:54 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=4723 マーケティング専門の人が「Webサイトにデザインなんて関係ないぜ！すべてはプロモーションとコンテンツ次第なんだぜ！」と豪語していたのでそれに反論を。もちろん彼の言っている事はWebサイトを世に広めるためにはとても大切な要素です。でもだからといってデザインが全く関係ないというのは極論すぎます。という事でWebデザインの重要性について考えてみたいと思います。


IT系、Web業界の求人に強い転職サイト【green】

なぜWebデザインは重要なのか？

全体のデザイン

以前「ECサイトの色やデザインと購買意欲の関係」という記事で触れたとおり、ECサイトにおける約半数のオンライン消費者が、全体のデザインを理由にそのサイトを再訪問しないようです。この結果から、多くのユーザーがWebサイト上のデザインを重要視している事がわかります。では具体的にWebデザインはどのような役割があるのでしょうか？

ユーザーに印象付ける

Webデザインの最も重要な役割のひとつとしてそのサイトをユーザーに印象付ける、という点があげられます。「ちょっと変わったレイアウトのサイト」「色がきれいなサイト」など、受ける印象は人それぞれですが、ユーザーにどんなサイトであったかを記憶してもらう事で、再訪問してもらいやすくなると思います。

ここでちょっとした検証をしてみようと思います。まずはこちらの画像をご覧ください。

colourpixel

とあるサイトのCSSを無効化したものです。このサイトを見てどんなWebサイトだったかを説明できますか？

colourpixel

次にそのサイトのCSSを有効化し、少しぼかしてみました。人の記憶なんてこんなもの。それでも「オレンジで派手なサイト」として印象づくでしょう。「ここまでインパクトのあるデザインが重要だ！」というわけではありませんが、デザインはサイトがユーザーに与える印象を左右します。

色のはたらき

「配色パターンからWebデザインを考える」でも書いたように、色にはそれぞれ一般的に連想されるイメージがあります。色によって落ち着いたり、食欲が増したり、危険を感じたり。こうした色の効果をうまく用いることで、サイト内を誘導する事ができます。

色とタイプ別消費者

ECサイトにおいて、色は特定のタイプの消費者を引き寄せる力、消費者の行動を変える力があるようです。

視認性を高める

視認性とはサイトの見やすさの事。背景色と文字色・文字サイズ・レイアウト…などなど、項目の多いサイトになってくると、これらの扱い次第で見にくくも見やすくなります。個人的には黒バックに白文字が苦手なので、Macのコントロール＋オプション＋コマンド＋８で色を反転させて見たりしています。またホワイトスペースを利用したり、適度にマージンを加えると全体的にスッキリとした読みやすいページとなります。

モバイル版Webサイトのメインコンテンツのフォントサイズは最低でも14pxは欲しいところ。

ターゲット層を絞る

大人っぽいデザイン、男性向けのデザイン、子どもらしいデザインなど、デザインによってメインターゲットとなるユーザー層を絞ることができます。具体的にはフォントや色、画像、イラストなど、様々なデザイン要素を組み合わせてターゲット層に合わせたデザインを作り上げていきます。デザインは最もサイトを見て欲しいユーザーとそうでないユーザーを振り分け、最終的にそのサイトの目標達成に近づける力を持っています。

かわいいデザインテンプレート

例えばこのかわいいデザインのサイトが…

男性向けスーツの販売のサイト

男性向けスーツの販売のサイトだったら…。いや、違和感ありすぎです。はい。つまりそういう事。

Google検索時のプレビュー

Google検索時のプレビュー

Googleで検索した時にタイトル横の虫めがねアイコンをクリックすると、そのサイトのサムネイル画像が表示されます。例えば「ロゴデザインのギャラリーサイト」を探していて、トップページにサムネイル一覧が表示されているサイトを見たい！となった時にこの機能を使えば、いちいちリンクをクリックしなくても見た目で判断することができます。あるいは「きれいなデザインのWebサイト」を探している時もこのプレビュー機能が使えますね。また、上記のとおりサイトの全体の印象を覚えていれば「なんかオレンジで派手なサイト」を探し出すことができるかもしれません。

だがしかし例外もあったりする

デザインがいろいろアレでも、世界的に有名なサイトもいくつか存在しています。そういったサイトには「Webサイトにデザインなんて関係ないぜ！」とも言えなくもないですが、それにはずば抜けたプロモーション、またはすさまじいコンテンツが必要だと思います。

「世界一」という名のプロモーション

世界一長いWebサイト

18.939583kmもの長さのある世界一長いWebサイト、World Highest Website。スクロールしきれません。

世界一古いWebサイト

CERNは世界一古いWebサイト。1990年に作られたそうです。それだけでなんだか気になっちゃいますね。

その他、いろんな「世界一」のWebサイトを紹介しています。

幅広すぎるコンテンツ

craigslist

craigslistは1995年に運営開始されたコミュニティサイト。主にお仕事・お部屋探しや物の売り買いに使われている世界的に有名なサイトです。デザインは10年以上ほぼ変えられる事なく運営されていますが、そのコンテンツ量とユーザー数、また世界各国に対応させているため人気が衰える事はありません。

２ちゃんねる

日本では誰もが知っている２ちゃんねる。1999年より運営を開始し、細かくカテゴリー分けされた膨大な量の掲示板が特徴。初期のサイトデザインは分かりませんが、10年くらいはほとんど変わっていない気がします。

もう「Webサイトにデザインなんて関係ねー」なんて言わせません！Webデザインがなぜ必要なのかを考えながら、そのサイトに適したデザインを提供していきたいですね。最近読んだ「ユーザをサイトに長居させるもの窶唐ｻれはデザインの魅力と楽しさだ」はこれからのWebデザインについて熱く語られていて、とても興味深く読ませて頂きました。ぜひ読んでみてください！

]]> http://www.webcreatorbox.com/webinfo/how-important-web-design/feed/ 26