デザインの⽅針は決まった、デザインの基本的なメソッドやルールも勉強した、このウェブサ イトで解決すべきユーザーの課題も理解した。でもいざビジュアルデザインに着⼿しようとしても、まず何から⼿をつければいいのかわからない……。経験が豊富でないデザイナーの⽅でこういうお悩みを抱えている⽅はいませんか？
この記事では、そういったデザイン初学者向けに、ビジュアルのスタイリングを実際に⾏う際に意識するとよいことをまとめました。パソコンの前で頭と⼿が⽌まってしまっているあなたの背中を押す⼀歩となれれば幸いです。
島根県出身。大学卒業後、ウェブデザイナー／UIデザイナーとして事業会社、広告代理店、メディア開発会社などに勤務。コーポレートサイト、自治体・交通・学校法人などのサービスサイト、業務アプリケーションなどのウェブデザイン・UIデザインを数多く手がける。著書に『ウェブデザインの思考法【第2版】』（マイナビ出版）。
1. 「モチーフ」を決める
⾃分で⼀から考えるにせよ、AIに指⽰するにせよ、いわゆるデザインギャラリーから参考サイトを探すにせよ、まずが今回のビジュアルデザインの特徴となるモチーフやテーマを何にするのかを決めると、作業をとっつきやすくなります。利⽤するユーザーにどこに「ひっかかり」をもたせるか？という視点です。
ここでいうモチーフとは以下のようなものが挙げられます。
ドットや円を散りばめる
https://brand.studysapuri.jp/
曲線で区切る・囲う
https://hrn.or.jp/monthly_supporter/
紐やラインをあしらう
https://recruit.jmc-ltd.co.jp/
幾何学模様を用いる
https://recruit.nstock.co.jp/
写真や動画の使い方を工夫する（例：断ち切りに近い形で使用する、複数の写真を組み合わせる）
https://beachpoint.capital/
https://group.kyoshin.co.jp/
イラストを配置する
https://sou-group.jp/
https://hirakata-elcl.jp/
特徴的なタイポグラフィを主役にする
https://novasell.com/
https://brewgood.jp/
斜め線を多用する
https://houei-butsuryu.co.jp/
https://www.unitrust.co.jp/
グラデーションやぼかしを活用する
https://interg.co.jp/
世にはさまざまなウェブデザインがありますが、参考デザインを集める際にもこのようなモチーフに注⽬してみるとデザインを類型化できるでしょう。
特徴的なモチーフやテーマが決まれば、それを起点として、今回⾃⾝が⽬指すデザイントーンを視覚化‧具現化していきます。ドットやイラストを使う！となればそれをまずはページ全体に散りばめてみる、斜め線を使う！となればアイコンやあしらいに取り⼊れられるところはどこか検討する…… といった具合です。
2. ページ全体の「流れ」をつくる
スタリッシュ、ポップ、上品、⾼級など、どんなデザイントーンであれ、優秀なビジュアルデザインに共通しているのは「退屈でない」ことです。スクロールしていく中で⾃然に読み進められる、⼼地よさがある、飽きない。こういった利⽤体験を意識し、デザインの中で視点の流れやリズム感を⽣み出しましょう。
いくつか具体的な例をあげます。
全て左右対称にしない
カラム数や要素の配置など、連続するブロックで同じ構成を続けない
ブロックごとに背景色やあしらいや写真をかえる
連続するブロックで横幅は全て同じにしない
あえて整列線からはみ出してズレを生み出すポイントをつくる
こうした変化やあしらいが、ユーザーを退屈させず、コンテンツを読み進めたくなる視線の流れをつくります。デザインは⼀貫性は保つべきですが単調であってはなりません。ページ全体を俯瞰して「⼀枚の絵」として美しくなるバランスを意識しましょう。
ただしアクセシビリティの観点から、ページを⾳声で読み上げた時に違和感のない順番であることは前提です。また視点をいたずらに左右に振ることで視野狭窄のユーザーにとって使いにくくなることは避けましょう。
以下はこういった工夫が上手く表現されているよい参考例です。エリアごとに緩急をつけ、レイアウトに細かいズレを生み出すことで、さりげなく自然に、でも適度な引っ掛かりを感じながら心地よく読み進められる設計になっています。
参考例
https://www.toyo-e.co.jp/
https://kaketsugi.jp/
3. 「選択と集中」を意識する
作成するページや要素、すべてに同じだけ⼿をかける必要はありません。例えばニュースリリース⼀覧や問い合わせフォームなどは、多少装飾を変えても印象や使いやすさは⼤きく変わりません。むしろ中途半端に⼿を加えることは世にすでにあるベストプラクティスに逆らうことになりかねません。⼀⽅で、トップページのメインビジュアルや⼯夫、サービス紹介のセクション、⾒出しのデザインなどは、⼯夫次第でサイト全体の印象を⼤きく左右します。
まずは「⼿をかけたときに効果が⼤きい部分」を⾒抜き、限られたリソースを有効活⽤するある種の「算段」をたてられるようにすること。デザイナーとしての費⽤対効果のよい作り⽅を意識しましょう。
4. 「相反する要素」を組み合わせる
⼤きい⽂字と⼩さい⽂字、濃い⾊と薄い⾊、太い線と細い線など、対照的な要素を組み合わせコントラストを意識するとデザインに奥⾏きやで視覚的なメリハリが⽣まれます。
いくつか具体的な例をあげます。
見出しの横に小さな説明文を添える
https://www.odakyuhousing.co.jp/
大小の図形を組み合わせる
https://recruit.iij-engineering.co.jp/
細いラインと太いラインを重ねる
https://fivot.co.jp/
大きな写真と小さな写真を組み合わせる
https://recruit.ito-noen.co.jp/
デザインが一本調子で面白みに欠けると悩んでいる場合は、ぜひ試してみてください。
5. h2からデザインを考える
ページのどこからデザインを始めればいいか迷う場合、まずはページをいくつかの「ブロック」や「エリア」に分けて考えると良いでしょう 。その際、注⽬すべきなのがh2です 。h2はページを区切る１番⼤きな単位であり、h2とそれに付随するコンテンツが決まると、ページ全体の構成が⾒えやすくなります 。細かいパーツから着⼿するのではなく、まずはページを構成する⼤きな「柱」から組み⽴てていくと作業の⾒通しもよくなります。
左はよくあるコーポレートサイトのワイヤーフレームです、これをなんとなく上から順番に眺めるのではなく、右の図のようにh2とコンテンツの集合という視点でページ全体を眺めて分解してみると類型化しやすくなり、効率的にデザインを検討しやすくなります。
6. 「こなれ」感はサイズ感に現れる
ブラウザやデバイスやカラムのサイズに対して⽂字サイズやコンポーネントのサイズや余⽩が極端に⼩さい場合、余⽩が多すぎて「間延びした」印象を 与え、空間がうまく使われていないと感じられます。逆に、要素や⽂字が⼤きすぎると、窮屈で圧迫感のある印象を与えます。
例えば以下の2つは両⽅ともPowerPointで作った資料です。右の資料は左の資料からフォントやあしらいはそのままで余⽩‧⽂字サイズ‧⾏間を調整したものです。ただのドキュメントですが、これだけでぐっとこなれて読みやすくなり、「こなれた印象」が⽣まれます。
このようにデザインにおけるサイズ感は視覚的な美しさに⼤きく影響しますが、この感覚はある程度実践を経て⾝につける以外にないのが難しいところです。配⾊理論やタイプグラフィの知識は座学である程度⾝につけることができますが、この⼤きすぎる‧⼩さすぎるといった空間把握能⼒はデザインをこなし⾝につけていくしかありません。
そういった意味で参考サイトや競合サイトから最も学ぶ‧「盗む」べきは「⼤きさ」といえます。⾃分のデザインはお⼿本となるデザインに⽐べサイズ感に違和感はないか。細かい装飾やレイアウトやアイデアや構成はもちろん盗作してはいけませんが、このサイズに対する「審美眼」や「感覚」は⼤いに盗んでいきましょう。
Web Designing ルーキーズキャンプ開催中！
『Web Designing』のマイナビ出版さんの『Web Designing ルーキーズキャンプ』でウェブデザイナー向け研修を担当しています。ただいま9⽉開講コースを絶賛募集中！ディレクター向け研修も同時開催中です。
特に⾃社のデザイナー向けに研修を検討している担当者の⽅はぜひ 各種割引も応相談とのことです。本記事で解説したノウハウやTipsを学べる機会です。ぜひご検討ください。
