ウェブデザインBでは、第06回 レイアウト、第07回 配色、第08回 UIデザイン・UXデザイン・ユーザビリティと、ウェブデザイナーがデザインワークを行なっていく上での必要な要素をレクチャーしてきました。
ページデザインのテイスト別の特徴
今回はウェブサイトの「龍弥デザインへの依頼が多い4つのテイストのページデザイン」にフォーカスし、ページデザインごとの「テイストのキーワード」や「使われている表現」や「使われている配色」「選ばれているフォント」、「余白の取り方」などの特徴を分析して考えていきたいと思います。
シンプル・ミニマルテイスト
シンプル・ミニマルテイストの特徴
シンプル・ミニマルテイストのページデザインの特徴は、
余分な装飾や色を入れすぎず、極めてシンプルにレイアウト・配色を仕上げている点です。
実はページデザインを作っていて最も時間がかかるのはシンプルデザインです。
難易度は非常に高く、手を抜くと簡単にページデザインが破綻してしまいます。
シンプルテイストは写真や各ブロックを大きく扱うため、そのぶん余白も大きくなります。
そのため、破綻させないコツは余白の重要性を忘れずデザインの一部として捉え、
しっかりとメリハリを効かせることです。
| テイストのキーワード | 「シンプル」「ミニマル」「シック」「フォーマル」「スマート」など |
|---|---|
| 使われている表現 | 大きめの写真と余白を適切に使う。 |
| 使われている配色 | 無彩色。 |
| 選ばれているフォント | 主にゴシック体を使用。見出しなどポイントで明朝などを使用することもある。 |
| 余白の取り方 | 大きめにとり余裕のある見せ方をする。 |
龍弥デザインでのシンプル・モダンテイストのWebサイト制作実績
[公式]atypique design – アティピックデザイン – 建築パース制作 3DCADパース 完成イメージ図制作
龍弥デザインでの紹介：アティピックデザイン
総合建設業・一級建築士事務所 河野建設株式会社
龍弥デザインでの紹介：河野建設株式会社
安全弁・バルブ整備の技術集団。創業四十年。⽇本⼀の安全弁整備技術で、日本の⽯油化学プラントを支える。 リセイ工業
龍弥デザインでの紹介：安全弁・バルブ整備 リセイ工業
保温・板金加工取付け施行 確かな技術で自然環境保護へ 株式会社ヒサタ
龍弥デザインでの紹介：株式会社ヒサタ
その他の参考サイト
ナチュラルテイスト
ナチュラルテイストの特徴
ナチュラルテイストのページデザインの特徴は、バランスを見ながら手書きのイラストやアイテムを使用し、それらをページデザイン全体に馴染ませるイメージで配置している点です。このイラストやアイテムにはページ背景色やページ背景パターンも含まれます。
また配色に関してですが、全体的に比較的彩度を落とし落ち着いた印象を持たせています。
もし強めの色味を使うとしても「アースカラー」と呼ばれる自然由来の色を使った配色が多くなります。
ナチュラルテイストのページデザインのコツは、最初に関連キーワードをひたすら探し、一番重要な「モチーフ」アイテムを決め、一つのモチーフのために全体を合わせていく流れを作ることです。
| テイストのキーワード | 「ナチュラル」「落ち着いた」「手書き感」「あたたかみ」「優しさ」 |
|---|---|
| 使われている表現 | 手書きのイラストやアイテムをページデザイン全体に馴染ませるように配置。 |
| 使われている配色 | 彩度を落とした落ち着いた色味。 |
| 選ばれているフォント | 主にゴシック体を使用するがスクリプト体などページのテーマ性に沿ったものを使用する場合もある。 |
| 余白の取り方 | ページ全体に馴染ませるようにイラストやアイテムを背景などに配置させるため純粋な余白は多くない。 |
龍弥デザインでのナチュラルテイストのWebサイト制作実績
岡山で昭和29年創業の老舗建具店 白石建具店
龍弥デザインでの紹介：白石建具店
一般社団法人はれとこ
龍弥デザインでの紹介：一般社団法人はれとこ
その他の参考サイト
ポップ・キッズテイスト
ポップ・キッズテイストの特徴
ポップ・キッズテイストのページデザインの最大の特徴は、上述したシンプルテイストとは真逆で、アイテムや装飾をコラージュなどして、ページ全体にふんだんに配置して仕上げる点です。
また配色面でも彩度が高く、色数が多くなりがちです。
ナチュラルテイストのページデザインは、一つのモチーフを中心にページデザインを進めると言いましたが、ポップ・キッズテイストのページデザインはその逆で、骨子となる部分をしっかり作り込み、そこにアイテムを散りばめていくイメージです。
ページデザインの際には「アイテムや装飾を全て消してしまっても読み物として成り立つかどうか？」を判断基準にすればいいと思います。
ポップ・キッズテイストはある意味では自分のやりたいことを全て行えますが、
同時にアイテムやレイアウトなど全てが独りよがりになりがちです。
ページデザインを客観視するために他人の目で意見してもらいましょう。
| テイストのキーワード | 「元気」「楽しい」「にぎやか」「カラフル」「カジュアル」 |
|---|---|
| 使われている表現 | 写真の切り抜きやイラストなどのアイテムを多用。 |
| 使われている配色 | 高彩度かつ多色。 |
| 選ばれているフォント | 主にゴシック体を使用するがテーマ性に沿ったものを使用する。 |
| 余白の取り方 | 余白を埋めるように写真やアイテム・装飾を配置するため余白は少なめになる。 |
龍弥デザインでのポップ・キッズテイストのWebサイト制作実績
一級建築士事務所 別枝大輔建築研究所
龍弥デザインでの紹介：別枝大輔建築研究所
あなたの動きやすい体と笑顔を守りたい はやし整骨院グループ｜岡山県早島・倉敷 整骨院
龍弥デザインでの紹介：はやし整骨院グループ
岡山で子供も学べる英語・英会話教室エイブルイングリッシュスクール
龍弥デザインでの紹介：エイブル・イングリッシュ・スクール
TSCテレビせとうち・Radio momo × 中国学園 キニナル箱！公式サイト
龍弥デザインでの紹介：中国学園制作番組 × テレビせとうち・Radio momo 「キニナル箱！」
その他の参考サイト
和風テイスト
和風テイストの特徴
和風テイストのページデザインの特徴は、日本的表現を主として取り入れたもので、ポイントとなるテキストを縦書きにしたり、和柄模様などのアイテムや和紙や古紙などのテクスチャを背景パターンに使用したりと、世界観を最重要視したものである点。
近年ではミニマル・シンプルテイストと和風テイストをうまく配合してページデザインを組むことが多く、
ワンポイント的に和柄やテキストの縦書き表現を使用することが多いです。
和風テイストのページデザインの注意点として、
他のテイストとの配合は極めて難易度が高い点が挙げられます。
和風テイストデザインに他のテイストを取り入れるのはかなり難しいため、
基本的には上述のミニマル・シンプルテイストの中に和風テイストを取り込むのがいいでしょう。
| テイストのキーワード | 「和風」「日本」「古風」「美しい」「荘厳」 |
|---|---|
| 使われている表現 | 縦書きのテキストや和柄模様のアイテムを配置。 古紙などのテクスチャを使って背景パターンを作るなど、 和の世界観を活かした表現が多い。 |
| 使われている配色 | 基本は無彩色。 テクスチャなどに彩度を落とした落ち着いた色味を使用することもある。 |
| 選ばれているフォント | 主に明朝体を使用する。 |
| 余白の取り方 | 落ち着いた印象を持たせるため大きめにとることが多い。 |
龍弥デザインでの和風テイストのWebサイト制作実績
デジタル魚拓サービス 「魚墨 -うおすみ-」
龍弥デザインでの紹介：デジタル魚拓サービス「魚墨」
その他の参考サイト
本日のまとめ
今回は「龍弥デザインへの依頼が多い4つのテイストのページデザイン」を紹介しました。
基本的にどのテイストでも作り方の手順は同じです。
- 見本となるサイトをしっかり探しイメージを膨らませ必要な構成コンテンツのデザインラフを描く。
- デザインラフをワイヤーフレームに清書しテーマに沿った装飾アイテムのアイディア（仮）を盛り込む。
- 関連する装飾アイテムを集め、使用が確定したものはトリミングなどして使用します。
以上です。
龍弥デザインでは特に「ナチュラルテイスト」や「ポップ・キッズテイスト」のご依頼が多く、ヒアリングでも「あたたかみ」というキーワードがよく出てきます。
つまり「あたたかみのあるデザイン」のウェブサイトが出来上がることを期待して、龍弥デザインにお問い合わせをしてくださることが多いということ。
どんなテイストに期待してお問い合わせをしてくださるかはわかりません。
どんなテイストにでも対応できるように自らの引き出し（=センス）を磨き増やしておきたいですね。
余裕があったらこれもやりたい
時間があったら以下の技術をレクチャーしたい！
実際の現場で何度も使っている極めて実用的な技術です。
- 龍弥デザインがよく使う「写真をハーフトーン（ドット）加工」
- 龍弥デザインがよく使う「写真のイラスト化」
写真素材は「ぱくたそ」さんの素材を使わせていただきましょう！
