さりげなく使える、Webデザインの参考になるサイト集
ありふれた当たり障り無いレイアウトではなくて、ほんの少しでも印象に残るレイアウトを作りたい。デザイン考えるとき、提案前に一度は見ておきたいまとめ。
Sponsored Link
一部にグラデーションを使って視線をフックさせる
複数の色相を組み合わせたグラデーション。オーロラや紅葉など自然界によく見られる配色ですが、ページ全体に入れると少々キツく感じるときがあります。
そんなときは、上図のように色相差のあるグラデーションをワンポイントだけ使うことによって適度に視線をフックさせることができます。
こちらは被写体の気持ちを代弁するかのように、目立たせたい箇所にグラデーションが使われています。目立つけど、色ベタよりもキツイ感じはしません。
グラデーションで進行方向を示す
上図はグラデーションを少しずつ透過させ、視線の進行方向を誘導しているパターン。グラデーションの色合せ・方向によって視線をコントロールしたり、意味付けを行うなどが可能となります。
背景を活かすためパーツを透過させる
標識に使われているように「塗りつぶしと白抜き」は、とても目立つので要素を主役にさせますが、他が埋もれてしまうときがあります。
上図はテキストを反転させるようにボックスで囲んで背景との対比を強め、背景画像の雰囲気が損なわれないようにボックスを透過させてます。
こちらはシンボルマークの存在が損なわれない程度に透過を抑え、スライドで動く背景画像も見やすい。また、モノトーンとカラーの対比で印象が強くなってます。
背景が動画でも中心のロゴの視認性が保たれたままに。また、ダークカラーをベースに白を加えたコントラストの強い配色は高級感や優雅なイメージを与えます。
イラストを複数レイヤーさせ雑多感を出す
サイト構築依頼の中で、キャラクターやイラストを取り入れて欲しいという要望が最近増えてきました。そんな時の参考用に色使いも含めてメモ。
写真はタイルのように敷き詰めると、密集感が出て情報量が詰まった印象になりますが、イラストを使う場合はどうすれば情報量を出せるのでしょうか。
上図はイラストを奥から手前にレイヤーさせることで見やすくなり、雑多感が出ているので賑やかで楽しそうな印象をうけます。多くの情報を感じ取ることができます。
イラスト＋アニメーションでワクワク感を出す
こちらはグリッド線を外し、自由な並びのイラストに動きを与え、ワクワク感を出してます。サイトの世界観や雰囲気をスクロールによって伝えてます。
イラスト＋アニメーション＋時間経過
下図はスクロールを感知し曲線を少しづつ出現させている見せ方。手が込んだテクニカルなアニメーション。ついついスクロールしたくなります。昼と夜で背景が変わるのが面白いですね。
昼
夜
サイズが小さいgif動画で細かい動きと賑やかさを演出。配色もポップです。
こちらもポップでクリーンな配色。明るい色は若々しさを感じます。部分的にイラストを動かしてます。
スクロールで時間経過を表現。
マスクを使い余白をつくる
四方裁ち落としのように、背景いっぱいの写真を使うのではなく、マスクをかけ写真を部分的に見せるタイプ。マスクをかけると余白ができるので、メッセージを目立たせたり、高級感を演出したり、新しい見せ方ができそうです。
こちらはマスクをかけて、さらに動きをつけてます。スクロールにより、背景いっぱいに広げた写真を展開して見せていく面白いパターン。
- [音注意！] KLM iFly 50
スクロール量に応じて六角形と画像を出現させていくトリッキーな見せ方。
マスクをかけスライドにより写真を展開。
スクロールすることでマスクが外れるレイアウト。
沖縄県の久米島の形にマスク。シンプルな色使いも美しいです。
丸版を崩して人間味をだす
丸版は写真を丸く切り抜いたものですが、丸版を使うことで、柔らかで温かい印象に仕上げてます（小さい・丸っこいものは可愛いと感じやすい）。また不揃い（円を崩す）にすると人間味が出て警戒心も薄れそうです。
太めの線でエネルギッシュに
線を効果的に活用したパターン。細めの線を使うと女性的で繊細なイメージ、太めの線を使うと男性的でエネルギッシュな印象に。
線を太くしたうえに、グリッドを整えると、頼もしい感じに。信頼と安心感。
ケイ線で軽やかに見せる
グリッドに沿ってレイアウトすると理性的で男性的な印象が強くなりますが、パステル系の色を使ったり細めのラインを使うことで軽やかに見せるレイアウト。細いラインのおかげで写真が区切られ、隣接した写真同士が干渉されずに済んでます。
上部に明るい色を使い開放感を出す
写真の構図でサイトの印象が大きく変わります。
自由感や清々しい気持ちを作りたい。そんなときは上部に明るめの色を使うと、広がりと開放感を感じさせることができます。
ダイナミックにフォントを使う
目立たせたい要素（フォントなど）は、素直に大きくするだけでも効果ありです。色の変更などができないときは大きさを変えます。
文字だけで構成されたサイト。印象に残るコピーは縦書きで差別化されてます。
こちらはテキストをダイナミックに横スクロールさせてます。
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
[…] 6. Webデザイン：さりげなく使える、Webデザインの参考になるサイト集 この記事をRTする […]