フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

Webデザインが簡単になるパーツデザインのパターンを徹底解説!

Webデザインをやるときにできるだけ基本的な部分では悩まずにポンポンアイデアが出てくるようになると、本当に手間をかけるべきところに注力できるのでいいですよね。

そのために有効な方法が、パーツデザインのパターンを知っておくということです。パーツデザインとは例えばヘッダーメニューのデザインやヘッダー画像の配置デザイン、見出しデザインなど一般的によく使うWebデザインのパーツのデザインです。

色んなサイトを見ているとだいたいいくつかのパターンがあることに気づくと思いますので、そのパターンを学習しておくだけでWebデザインが早くなおかつクオリティがあがります

例えばヘッダーメニューだと以下のような帯状のメニューもあれば、その下にあるようなシンプルなメニューもあります。

他にもたくさんありますが、このようなパターンを頭の中に入れておきましょうということです。

もちろん、最終的には案件にあわせてディテールを調整していきますが、大まかなパターンを増やしておくことは引き出しを増やすいうことであり、デザイン力そのものに繋がってきます。

逆にそれを知らないと本来時間をかけるべきではない簡単な部分のデザインにも時間をかけてしまうことが往々にしてあります。

ここでは次のWebデザインパーツのパターンを解説していきます。

  • ヘッダーメニュー
  • ヘッダー画像
  • 見出し / セクション
  • ボディコンテンツの並べ方

それでは1つずつどんなデザインパターンがあるかをみていきましょう。

※解説用に作っているので、デザイン細部の精度は低めです。レイアウトパターンがこのくらいあるんだなという見方で参考にしていただけたら幸いです。

ヘッダーメニューのデザインパターン解説

まずはヘッダーメニューのデザインパターンを解説していきます。メニューの並べ方だけでも色んなパターンがあります。

シンプルなヘッダーメニュー

まずはシンプルなパターンです。先ほど例に出したものですね。

メニューの項目が多くなると1行に収まらないので、2行にしてメインとなるメニュー部分だけ目立つようにします。

帯状のヘッダーメニュー

ヘッダーメニューを帯状のデザインにしたパターンです。これもよく見ますね。

スッキリかつ目立つヘッダーメニュー

帯状のデザインよりシンプルスッキリにしつつ、メインメニューを目立たせるヘッダーメニューです。

スッキリかつ目立つヘッダーメニュー2

こんなパターンもよくありますね。

アイコンを使ったヘッダーメニュー

アイコンを使うと見栄えがぐっとキャッチーな感じになります。

英語表記と合わせたヘッダーメニュー

小さく英語表記をあしらうとちょっとオシャレになります。

 

ヘッダーメニューのパターン、色んなものがありましたが、この辺はオーソドックスでよくあるヘッダーメニューのデザインです。ぱっと思いつくぐらいになっているといいでしょう。

ヘッダー画像のデザインパターン解説

次にヘッダー画像のデザインパターンを解説していきます。ここもメニューとあわせてファーストビューに入る部分ですごく重要なデザインですのでしっかりデザインできるようにパターンをまずは身につけましょう。

シンプルにヘッダー画像をフルワイド表示する

ヘッダー画像にシンプルにキャッチコピーをのせただけのデザインですが、割とよく使われる定番デザインです。画像の左側を少しマスクしてテキストを見やすくしています。

画像をグレーアウトしてキャッチコピーを目立たせる

イメージがガラッと変わりますね。キャッチコピーを目立たせたいと思ったら使ってみましょう。

ヘッダー画像をぼかしてキャッチコピーを目立たせる

今度はヘッダー画像をぼかしました。見た目だけではなく、視覚的情報としてもヘッダー画像自体が抽象的なイメージになり、その分キャッチコピーがはっきりします。

ヘッダー画像をアシンメトリーにトリミングする

アシンメトリーとは非対称を指しますが、ヘッダー画像を左右で非対称にトリミングし、余白部分からヘッダー画像にかけてキャッチコピーをまたいでのせます。キャッチコピーが随分アクティブに感じますよね。

ヘッダー画像をカルーセル対応にする

カルーセルとは回転台と約され、ぐるぐる回っていく様子のことです。ヘッダー画像が横にどんどんスライドしていく仕様のことですね。初心者の方には実装が少し難しいと思いますが、よくあるパターンで、要件としてもリクエストされることが多いです。

おまけ

おまけですが、次のようなデザインもあります。ヘッダー画像の下に大きくメニューが4つありますよね。昔のAppleのサイトでこれが実装されていました。メニューの部分に大きく打ち出したいサービスやメニューをのせます。

 

ヘッダー画像もたくさんパターンがありましたね。この辺のありがちなパターンをおさえておくと迷いが少なくなると思います。

見出し/セクションのデザインパターン解説

ボディ部分をデザインしていると各見出しやセクションごとでメリハリをつける必要があります。ノッペらしたデザインだとコンテンツとコンテンツの境界線がわかりづらくなり、UIがさがります。

見出しも1つ1つ解説をしていきましょう。

まずはわかりづらい見出し/セクションのデザイン

まずはこちらの何の配慮もないデザインですが、どうでしょうか。わかりづらいですよね。これを色んなパターンを使って修正していきます。

背景色をセクションごとで切り替える

背景色をセクションが切り替わるごとに変えるデザインパターンでランディングページなど縦長のデザインでは特に頻出です。

見出しの文字を大きくしてわかりやすくする

基本中の基本ですね。だいぶ大きくしたな、ぐらいでも結構普通だったりするので思いっきりやりましょう。

セクション間でデザインしたラインをひく

単純な線だと無機質すぎて寂しいので、ちょっとデザインをしたラインをひいてみましょう。だいぶ印象は変わり、見やすくなります。

見出しにアイコンを入れる

見出しにアイコンをいれると視覚的な差別化がされてさらに見やすくなります。

見出しに記号性のあるものをつける

見出しのデザインを少し工夫して、各見出しに共通した記号性のあるデザインをあしらってみましょう。ぱっと見てどれが見出しかかなりわかりやすくなります。

少し発展系で、記号部分に各見出しの英語表記を追加であしらってみました。ちょっとオシャレになります。見やすさだけではなくこんなオシャレな工夫も考えながらできるといいですね。

見出しの工夫はデザイナーの腕の見せどころの一つだと思います。ここがしっかりデザインできているかどうかで全体を見渡したときのすっきり感や理解のしやすさが全く異なります。

ボディコンテンツの並べ方のデザインパターン解説

例えばトップページのボディ部分に「3つの特徴」のようなコンテンツを並べるとき、いくつかのデザインパターンが考えられます。ここもおさえておきましょう。

上から順に並べるオーソドックスなスタイル

比較的ありがちで簡単なデザインですね。デザイン自体はもっとやりようがありますが、レイアウトという観点でみていただければと思います。

また、それぞれに写真を使わず、1枚にまとめてしまってよりコンパクトに収めることも考えられますね。

横にコンテンツを並べる

1つのコンテンツの組み方を変えて、横にコンテンツを並べるデザインもあります。

左右に振り分けるデザインパターン

各コンテンツを順番に左右に振り分けるとアクティブな印象のデザインになります。この方法もよく見かけます。ここまでワイドにガンガンふりわけなくても、左右に少しゆれるようにコンテンツを配置していくこともあります。デザインに動きをつけたいときには参考になります。

 

 

ということでデザインパターンをパーツごとに解説してきました。

同じ素材を使っていても各パーツのパターンが変わるだけで印象は結構変わりますよね。この記事でご紹介したオーソドックスなパターンはすぐに思いつくぐらいになっていると、よりデザインをサクサクできると思います。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介