少しの手間で大きく変わる、細部にこだわったWebデザインを

thumb_subtle

「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか?私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう!


追記: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デザインを

シェアする

コメント

  • yumi

    はじめましてManaさん。
    いつも勉強させていただいてます。
    今回の記事で背筋がシャキッとして、創る楽しみがまた増えました。
    ありがとうございます。

  • ふむふむ

    「メタリックな雰囲気漂うサイト、MetaLab。ひとつひとつの要素がシャキッと引き締まっていますね。」についての質問なのですが? ハイライトってどうやって入れるんですか? 1pxのラインみたいに見えるんですけど?微妙に全ての色がグラデーションみたいに見えるんですけど?レイヤースタイルの内側の境界線ではないって事でしょうか?

  • いつも拝見させていただいています。
    今回の記事も、いつもどこかで接していながら改めて「なるほど」と思うことばかりでした。

    今後のWeb制作に活用させていただきます。
    また、これからも役立つ情報を楽しみにしています。

  • Pingback: 効果で立体感を出す()

  • Webクリエイターボックス

    @ふむふむさん
    Photoshopでどうやって表現するか、ですかね?明るい色をインナーシャドウ(サイズ1~2px)で入れるとハイライトを表現できますよ!

  • これはすごく同感します!

    ほん少しの手間でクオリティが上がるんですよね。

    なんか足りないと思うウェブデザイナーさん
    全ての方に見ていただきたい記事ですね^^

  • やべぇw

    今 すごくボクが知りたかった情報。

    デザイン面という
    ぼくが苦手なしかも探していた加工法。

    ありがとう~ MANA先生!!

  • なるほどですね縲怐B自分のサイトを色々デザインしているのですが、とても参考になる情報ばかりでした。ありがとうございました。

  • ふむふむ

    マナさん
    ありがとうございます。早速やってみます!デザインしてると何か物足りないとか、色々悩んで止まってしまうのですが・・・マナさんのアイデアはいつも参考になるヒントがいっぱいで助かりますww 日本語で説明していただけるのも助かりますww あ、でも英語で説明してくれた方が勉強になるのか・・・?ww 英語もデザインの両方頑張ります

  • Pingback: links for 2011-08-03 « 個人的な雑記()

  • Rockfield

    Manaさん
    初めまして。いつも楽しく拝見させてもらっています。いろんなデザイナー歴12年目の物です。
    僕も思春期を海外で過ごしたので勝手に親近感もたせてもらいながら参考にさせてもらっています。

    日本だとグラデーション処理を嫌うお客さんが結構いるんですよね・・・。
    それで、ベタにしてくれって言われることが良くあるんですが、でもベタ処理だとノッペリしちゃって自分的に納得できなくて、あんまり分からないように少しだけグラデーション入れてみたりしてます。

    それをWindowsで見ると見事にベタ1色になっていたりしてどよーーーんとします・・・。

    これからも期待してます!

  • Webクリエイターボックス

    > 日本だとグラデーション処理を嫌うお客さんが結構いるんですよね・・・。
    し、知りませんでした…!これはカルチャーショック!なんでなんでしょう??

  • Pingback: N. » Blog Archive » Weekly Twitter Log (2011/7/23 窶骭€ 8/5)()

  • Pingback: 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 | Ginpen.com()

  • とても参考になります。

  • Pingback: テクスチャの使い方で見るWebサイト « nia.note()

  • Pingback: twitterでふぁぼってたサイトデザインの話題を備考しておく | takaraism.wordlife()

  • Pingback: Facebookのデザインもなかなかよいです | Country Netlife plus()

  • Pingback: PHPが超苦手な私でもWordPressをゴニョ×2できる7つの理由*frasm()

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)