さりげなく使える、Webデザインの参考になるサイト集

• 作成：2016/04/11
• 更新：2016/06/29
• Webデザイン

ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。

一部にグラデーションを使って視線をフックさせる

複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。

そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。

• INUPATHY

こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。

• 株式会社ジェイ・シー・エス

• P.I.C.S.

グラデーションで進行方向を示す

上図はグラデーションを少しずつ透過させ、視線の進行方向を誘導しているパターン。グラデーションの色合せ・方向によって視線をコントロールしたり、意味付けを行うなどが可能となります。

• ファーストステージ

背景を活かすためパーツを透過させる

標識に使われているように「塗りつぶしと白抜き」は、とても目立つので要素を主役にさせますが、他が埋もれてしまうときがあります。

上図はテキストを反転させるようにボックスで囲んで背景との対比を強め、背景画像の雰囲気が損なわれないようにボックスを透過させてます。

• 林化成株式会社

こちらはシンボルマークの存在が損なわれない程度に透過を抑え、スライドで動く背景画像も見やすい。また、モノトーンとカラーの対比で印象が強くなってます。

• 株式会社インサイト

背景が動画でも中心のロゴの視認性が保たれたままに。また、ダークカラーをベースに白を加えたコントラストの強い配色は高級感や優雅なイメージを与えます。

• 箱根湯本温泉あうら橘

イラストを複数レイヤーさせ雑多感を出す

サイト構築依頼の中で、キャラクターやイラストを取り入れて欲しいという要望が最近増えてきました。そんな時の参考用に色使いも含めてメモ。

写真はタイルのように敷き詰めると、密集感が出て情報量が詰まった印象になりますが、イラストを使う場合はどうすれば情報量を出せるのでしょうか。

上図はイラストを奥から手前にレイヤーさせることで見やすくなり、雑多感が出ているので賑やかで楽しそうな印象をうけます。多くの情報を感じ取ることができます。

• 株式会社 もみの木

イラスト＋アニメーションでワクワク感を出す

こちらはグリッド線を外し、自由な並びのイラストに動きを与え、ワクワク感を出してます。サイトの世界観や雰囲気をスクロールによって伝えてます。

• 安房医療福祉専門学校

イラスト＋アニメーション＋時間経過

下図はスクロールを感知し曲線を少しづつ出現させている見せ方。手が込んだテクニカルなアニメーション。ついついスクロールしたくなります。昼と夜で背景が変わるのが面白いですね。

昼

夜

• お酒卸しの株式会社知多善

サイズが小さいgif動画で細かい動きと賑やかさを演出。配色もポップです。

• 加藤憲ホールディングス株式会社

こちらもポップでクリーンな配色。明るい色は若々しさを感じます。部分的にイラストを動かしてます。

• テレビ朝日 新卒採用サイト2017

スクロールで時間経過を表現。

• Every Last Drop

マスクを使い余白をつくる

四方裁ち落としのように、背景いっぱいの写真を使うのではなく、マスクをかけ写真を部分的に見せるタイプ。マスクをかけると余白ができるので、メッセージを目立たせたり、高級感を演出したり、新しい見せ方ができそうです。

こちらはマスクをかけて、さらに動きをつけてます。スクロールにより、背景いっぱいに広げた写真を展開して見せていく面白いパターン。

• [音注意！] KLM iFly 50

スクロール量に応じて六角形と画像を出現させていくトリッキーな見せ方。

• Coralie Castot

マスクをかけスライドにより写真を展開。

• Poignée de main virile

スクロールすることでマスクが外れるレイアウト。

• Sway Water

沖縄県の久米島の形にマスク。シンプルな色使いも美しいです。

• Re-Land Project

丸版を崩して人間味をだす

丸版は写真を丸く切り抜いたものですが、丸版を使うことで、柔らかで温かい印象に仕上げてます（小さい・丸っこいものは可愛いと感じやすい）。また不揃い（円を崩す）にすると人間味が出て警戒心も薄れそうです。

• FAMILY OUTDOOR

• ペエ歯科クリニック

• 横浜きりがおかマタニティクリニック

太めの線でエネルギッシュに

線を効果的に活用したパターン。細めの線を使うと女性的で繊細なイメージ、太めの線を使うと男性的でエネルギッシュな印象に。

• GATSBY

線を太くしたうえに、グリッドを整えると、頼もしい感じに。信頼と安心感。

• ヤマト運輸

ケイ線で軽やかに見せる

グリッドに沿ってレイアウトすると理性的で男性的な印象が強くなりますが、パステル系の色を使ったり細めのラインを使うことで軽やかに見せるレイアウト。細いラインのおかげで写真が区切られ、隣接した写真同士が干渉されずに済んでます。

• AFRO FUKUOKA

上部に明るい色を使い開放感を出す

写真の構図でサイトの印象が大きく変わります。

自由感や清々しい気持ちを作りたい。そんなときは上部に明るめの色を使うと、広がりと開放感を感じさせることができます。

• Cameo

• 大府あおぞら有床クリニック

ダイナミックにフォントを使う

目立たせたい要素（フォントなど）は、素直に大きくするだけでも効果ありです。色の変更などができないときは大きさを変えます。

• 京都外国語大学

文字だけで構成されたサイト。印象に残るコピーは縦書きで差別化されてます。

• クロニクル、クロニクル!

• 虹色エモ

こちらはテキストをダイナミックに横スクロールさせてます。

• Nerval

2012/12/17

読むだけで配色センスがレベルアップ！５分程度で読める良記事まとめ

ある国で純白の白色は「死」、米国での緑色は「お金」をあらわす。経理財務に関係するサイトで「赤」を無意味に使用してはならない。 世界のさまざまな地域の人たちを対象にデザ

2013/11/5

画像は使わない！文字を装飾するCSS／jsまとめ

画像を使うと変更がめんどう。出来ることならテキストで済ませたい。Webデザインはカーニングなどによる可読性の調整は難しいですが、CSSやjsを用いた簡単な指定で、文章の読みやす

2013/05/7

漢字も企業も漫画もOK！高品質フリーフォント全部まとめ

無料フォントは星の数ほどあるけれど 結局どれを使ってよいのか、迷ってしまう 今回はシーンごとに使えるように、無料フォントをジャンル分けしました。まとめサイトをまとめ

2015/07/27

コンテンツを盛り上げる、逆引きデザインテクニック

渾身の文章なのに読まれない、どうも読み飛ばされてる感じがする。文章内容の他に原因があるのではないか、そう感じている人はいませんか？ 先週、実務で役立つ逆引きレイアウト