News
Home > News > ブログやウェブサイトのデザインを「さらに良く」する6つの簡単な方法
ブログやウェブサイトのデザインを「さらに良く」する6つの簡単な方法
2009年11月12日
この記事を読んでもらっている読者の方で、ブログやウェブサイトを運営されている人はどれくらいいるのでしょうか。
自分の気に入ったデザインを使ってレイアウトされている人も多いと思います。
今回は、そんなウェブサイトのデザインを「さらによく」する6つの簡単な方法をまとめた「6 Ways To Take Your Webdesign From Good To Great」をご紹介します。
簡単にウェブデザインに追加することのできるシンプルな方法ばかりですので、すぐにでも実践することができます。
また参考例もあわせて紹介しているので、わかりやすく解説されています。
これからウェブサイトをデザインしようとする人もきっと参考になりますよ。
2009.11.20追伸 Colissさんでもオリジナルの記事を訳した記事が掲載されていましたので、あわせてどうぞ。
詳細は以下から。
1．かすかなグラデーションを使おう
ウェブデザインにおいて、背景画像を単色にしている人も多いと思います。
しかし、これにかすかなグラデーションを加えることによって、ウェブデザイン全体がエレガントな雰囲気に仕上がります。
けっして、虹色グラデーションなどを使ったりしないでくださいね、ごちゃごちゃになってしまう可能性があります。
参考サイト
ヘッダー部分にグレーの淡いグラデーションを使っており、とても見やすいウェブデザインに仕上がっています。
また「背景に粒状のざらざらテクスチャを使った、立体感のあるウェブサイトまとめ」でも紹介しているテクスチャの選び方も注目したいポイントの一つです。
こちらは背景画像にカラフルで幻想的なグラデーションを用いたウェブサイトです。
グラデーションにあわせて、「ぼやけ」を表現することでオリジナリティが生まれます。
この「ぼやけ」の簡単なフォトショップでの作り方は「フォトショップでキラキラに輝く背景画像を作る方法」で紹介していますので、よろしかったらどうぞ。
2．余白スペースをたっぷり使おう
人間の本能として、狭い場所にいろいろなパーツを詰め込んでしまう傾向にあるそうです。
しかし、パーツごとの余白を増やしてあげることで、リーダーにとっては記事が読みやすくなり、デザイン的にもシンプルでクールなウェブデザインを仕上げることができます。
参考サイト
まさに余白スペースの取り方のお手本になるすっきりとしたブログタイプのウェブサイトになります。
通常、タイトルと本文だけではデザイン的にも寂しい感じがするのですが、うまく余白スペースを作ってあげることで読みやすいウェブサイトになっています。
全体のバランスを考えながら、何度か試しながらデザインするといいかもしれません。
ちなみに、タイトル部分にWebフォントを使用していて、デザイン的にもナイスです。
余分なパーツをすべて省いたミニマルデザインの多くは、余白スペースをたっぷり取り、シンプルなデザインに仕上がっています。
このウェブサイトでは、背景画像も使わずに真っ白で見やすくなっています。
3．グリッドを意識しよう
ウェブデザイン以外でグリッドを使った身近なものといえば、新聞があります。
ボックス枠などを整列されることによって、見やすくなるのはもちろんですが、ウェブサイトのコンテンツをうまく見せることができるので、アクセスアップにもつながります。
グリッドを使ったウェブサイトをデザインする際は、The 960 GridとBlueprintがおすすめですよ。
参考サイト
ポートフォリオサイトのひとつですが、特集記事を3コラムと5コラムの2種類で表示しています。
グリッドを使っているので、大きさの違うボックス枠もすっきりまとまった仕上がりになっています。
こちらもとても見やすいデザインになっています。
実はヘッダー下のスライド部分もグリッドを使ってデザインされています。
4．使用しているフォントを見直そう
フォントは見やすさだけでなく、デザイン的要素も含んでおり、リーダーの注意を自然とひきつけることができます。
フォントの種類だけではなく、色や大きさなども変更すると効果的です。
フォントを指定するときは、読みにくいフォント（筆記体など）は避けておくのが無難かもしれません。
参考サイト
タイトルと本文のフォントを違うものを利用することで、めりはりのあるコントラストをつけることができます。
フォントの種類と大きさを変更していてとても見やすいデザインに仕上がっています。
うすくグラデーションのかかったサンセリフ系フォントを使ったミニマルなウェブサイトです。
本文中で使われている「&」がアクセントになったユニークなサイトのひとつです。
5．わかりやすくて効果的なメニューバーを使おう
わかりやすいメニューバーを使うことで、リーダーやユーザーが探しているものをすぐに見つけることができるようにデザインしましょう。
どこに何があるかごちゃごちゃでわからないと、リーダーはあなたのウェブサイトから離れていってしまいます。
これはPhotoshop VIPでも変更が必要で、リニューアル版にうまく使いたいと考えています。（かなり時間がかかっていますが、、。）
参考サイト
フォトショップの使い方やデザインに関するニュースを配信している有名デザインブログのひとつ。
カテゴリー分けがうまくされており、初めて来たユーザーも迷うことなく、探しているものが見つかります。
メニューバーに言葉だけでなく、アイコンを一緒に使うとより分かりやすくなりますね。
メニューバーにカーソルを合わせたとき（フーバー時）にアイコンが現れるデザインになっています。
これならユーサビリティーの面においても、分りやすくて好印象ですね。
使っているアイコンもかわいく、お気に入りのサイトのひとつです。
6．フッターを有効活用しよう
以前のウェブサイトにおいて、フッターの役割はサイトマップヤ問い合わせのリンクなどがぽつりと配置されていただけでした。
しかし、インターネットの高速化やウェブデザインの進化によって、ウェブサイトの重要なファクターのひとつになりつつあります。
ウェブサイトに関するあらゆる情報をまとめて配置しているものが増えてきています。
参考サイト
フリーランスで働くデザイナーさんのサイトなんです。
フッター部分にウェブサイトのコピーライトなどと一緒に、彼が現在取り組んでいるプロジェクトなどにもリンクしています。
いろいろな情報を配置することで、作者のキャラクター作りにも一役買っています。
あまり見かけないタイプのデザインですが、フッター部分に検索ボックスを配置しているユニークなサイトです。
また最近良く見かけるようになったTwitterのつぶやきも流していますね。
いかがでしたでしょうか。
Photoshop VIPのウェブサイトにおいても参考にしたいテクニックがまとめられており、次回リニューアルの際に参考にしようと考えています。
「これも大事だと思うけど、、。」
そんなあなたのご意見お待ちしています。
[参照元 : 6 Ways To Take Your Webdesign From Good To Great - myInkBlog]
RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。
もちろん無料ですのでお気軽にどうぞ。
RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。
Photoshop VIPでは、投稿記事をtwitterでも配信しています。お気軽に参加、お待ちしてます。
↓のアイコンをクリックすると、Photoshop VIPのTwitterページを見ることができます。
(No Ratings Yet)
Loading ...この記事を読んだ人はこれらの記事も読んでいます
