calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

webdesign_gallery

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

PR
IT/WEB業界への転職なら
Sponsored Link

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

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

inupathy

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

jcs

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

pics

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

firststage

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

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

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

hayashi

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

ppi

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

aura

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

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

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

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

mominoki

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

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

awa

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

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

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

chitazen1

chitazen2 ktk

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

saiyo

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

everylastdrop

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

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

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

ifly50

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

coralie

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

poigneedemainvirile

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

swaywater

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

kumejima

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

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

campjo

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

pae kirigaokamama

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

gatsby

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

kuronekoyamato

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

ケイ線で軽やかに見せる

afro

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

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

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

vimeo

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

obu

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

kufs

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

chronicle

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

biwako nerval

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 6. Webデザイン:さりげなく使える、Webデザインの参考になるサイト集 この記事をRTする […]

Leave a Comment

コメントする