【一般的なデザインとビジュアルデザインの違い】

一般的なデザインとビジュアルデザインの違い。ぐちゃぐちゃなデザインは見た目も良くなく、ユーザーに悪影響をもたらしてしまいます。今回は、一般的なデザインとビジュアルデザインの違いについて書いていきます。

ワードプレスのテーマデザインにも採用されているビジュアルデザインについて話ししていきます。レイアウトやカラーについての基本的なデザインの扱い方を知っていれば、それをカスタマイズする時にも役立つことでしょう。

【レイアウトのスタイル関連】

あなたに質問です。Webデザインのポイントは何だと思いますか？その答えは「情報をデザインする」と言うことです。つまり「メディアがWeb」だと言うことです。コーポレートサイトのデザインをイメージしましょう。

この場合、Webサイトをデザインすることが重要だと言うことです。その意味は「楽しさなのか」「信頼なのか」によって、Webデザインは、大きく異なります。レイアウトのスタイルは、ワードプレステーマの選択によって決まります。

レイアウトのスタイル思考について

ブログを作成する際、ページレイアウトの重要性は言うまでもないと思います。どうしてかと言うと、ブログを作っていれば自ずと分かることです。HTMLを使っている限り、ブログのレイアウトは出尽くしていると言えます。

ユーザーは、ブログを見る時、ブラウザーを使います。ブラウザーには、あなたも知っての通り、いくつかあります。一応、知らない方もいるかと思うのでこちらの方に記載しておきます。良く覚えておきましょう。

どのブラウザーから見ても、ページを上から下に見ていき、日本語のWebサイトでは、左から右への横書きです。このようなデバイスやブラウザーによる制約がある限り、ブログのレイアウトもそう大きくは変わらないと思います。

「Yahoo! Japan」や「excite」などのホームページを見ると分かると思いますが、トップページには、なるべく多くの情報を詰め込んでいることが分かります。もし分からない方がいれば、あなた自身で確認してみて下さい。

他の例で見てみると「楽天市場」の場合、商品の一覧ページには、商品の紹介が延々と続いています。このように使いやすいと感じるWebサイトのレイアウトや同業他社のWebサイトを参考にしてみるのもオモシロいものです。

アイデアの具現化について

ワードプレスには、世界中のWebデザイナーが腕を競って提案された膨大な数のテーマが存在します。その中からテーマを選べば「カッコ良いブログ」「可愛いブログ」「スマートなブログ」などが簡単に構築できます。

ですが、それだけでは残念ですがデザインしたことにはなりません。あなたなりのアイデアが活かされていなければ出来上がったブログを見た時、コンテンツは、居心地悪そうにしか見えるのではと思っています。

例えばですが、ユーチューブの動画などを参考にしてみるのも良いかも知れませんし、Webデザインを参考としたWebサイトを見て勉強しても良いかと思います。下記に参考となるWebサイトの紹介をしておきます。

ブログそのものを着こなす訳ではないのですが、それでもポイントを押さえた自分なりの工夫がなければ個性を探すことが難しいと言えます。またブログをデザインするとは、ブログを通して、コンセプトを具現化することに他なりません。

それが例え、ワードプレスのテーマを使っていたとしても、デザイナーのアイデアによって、適度に消化され、再構成される訳です。ユーザー一人一人の意識を無理なくコンセプトに導くことが可能となる訳です。

グリッドについて

グリッドを知らない方の為に説明すると「グリッド」とは「格子」「方眼」「送電網」「配管網」などの意味を持つ英単語です。直線が縦横に規則正しく並んだ図形やそのような構造のもので、網目状に繋ぎ合わせたものを意味します。

ブログのレイアウトは、グリッドを基本にした方が良いでしょう。ブログ自体、初期の頃から、電子ブックが念頭に置かれていた為に、書籍等でおこなわれていたグリッドシステムを使った編集様式が主流になっています。

ヘッダーやサイドバー、フッターと言った特別な機能を持ったエリアは、グリッド線をガイドとして配置しています。またコンテンツエリア内のテキストや画像の配置もグリッドに沿って配置します。

バランスについて

ブログ全体のバランスを見た時、左右のバランスをどうするかが最大の問題だと私は考えます。ユーザーが通常の方法でブラウザーを開いた時、表示されるブログを念頭にレイアウトを考えた方が良いでしょう。

左右どちらかにあるサイドバーに挟まれた少し広めのコンテンツエリア。そしてこれらの上にヘッダーが乗っかっているようなレイアウトは、安定感が抜群と言えます。当ブログ(miブログ)を参考にしてみて下さい。

落ち着いてコンテンツエリアの情報を読むことができます。左右どちらかにあるサイドバーに配置するナビゲーションや画像は、幅と位置関係を考慮して、アクセントを付け加えることも可能となります。

動線について

画像をいくつか並べてみて、ページを構成する際、画像のサイズと配置がバランスを取る要素になると考えて下さい。左右のバランスを取りたい時は、同じくらいの画像サイズの写真を左右対称の位置に配置してみましょう。

あくまでもバランスを考慮した上で、更にユーザーがページに配置した情報に目を通す順序を意図的に作り出したい時は「左上から右上」そして「下の段」へと移動した動線を意識したレイアウトにすることができます。

人は、他人のブログを見た時、まずどこに視線がいくのか、そしてその視線は、どこに誘導したいのかです。つまり動線を考えて「画像」や「テキスト」などを配置した方が良いのではと言うことを言いたい訳です。

リズムについて

決まった形を規則正しく丁寧に繰り返すことで、そのページに対し、ある一定のリズムと言うものが生まれます。それはユーザー一人一人の感性に働きかける方法の一つと言えます。ではリズムを意図した配置ではどうでしょう。

ラフを描くなどして、どのようなイメージをユーザーが持つのかを、テストしてみなければいけないと思っています。リズムを持たせるビジュアルデザインは、高度なデザイン技術に於いて、間違った形を選んだりしてしまうものです。

また大きさの順番を間違えたりすると、不安定で不快なイメージをユーザーに与えてしまうことも在り得るのです。動くコンテンツも、リズムをブログに与えます。また動くページでは、静止しているブログも同じことが言えます。

縦と横について

日本語の場合、見出しや説明文の文字を縦に並べることは良くある話しです。このことを「縦組み」と言います。ですが、ブログを見てみると、縦組みをあまり目にすることはほとんどないと言っても良いのではないでしょうか。

だからと言って、できないと言う訳ではありません。そこで縦組みをデザインに組み込めば、印象的なページをレイアウトすることができる訳です。またグリッドを使って配置するだけではなく、コントラストも考えた方が良いでしょう。

縦と横とを強く印象付けることで、より縦組みを意識的に使用することが可能となります。この場合、情報は、横組みに表示するようにしましょう。ここまで縦組みにすると、特別な場合を除いて、ユーザーに大きな違和感を抱かせます。

ワードプレスのテーマだけでデザイン性を出すのではなく、あなた自身が持っているであろうデザイン性も一緒に考え出せれば、より以上に素晴らしいデザイン性を持ったブログが出来上がります。是非挑戦してみて下さい。

今回は以上となります。一般的なデザインとビジュアルデザインの違いについて書いてきましたが、分かりましたか？内容的にさっぱり分からないと言う人もいたのではないでしょうか。何はともあれ、難しく考えるのは止めましょう。

トップページへ戻る