思わず真似したくなるデザイン性の高いウェブサイト集

デザイン性の高いウェブサイト集

ウェブサイト制作はコンテンツの充実が大切なのはもちろんですが、デザイン性という点も重要です。ここではいくつかのデザイン性が高いウェブサイトを紹介します。配色が美しいサイト、WordPressに特化したデザインのサイトから、日本ならではの和の雰囲気が特徴的なサイトを紹介していますので、これからウェブサイトを制作しようと考えている方はぜひ参考にしてみてください。

色彩や配色の組み合わせを参考にしたいサイト

色彩や配色の組み合わせ

ウェブサイトを制作するのであればデザイン性が高いものを目指したいものです。そのためには、配色にこだわることも大切です。色によってウェブサイトの印象は大きく変わるので、まずは色使いの参考になりそうなサイトを紹介します。

パステルカラーの配色で参考にしたいサイト

【Izumi Massage】http://izumimassage.com.au/
上下で水色とピンクの2色をベースに、真ん中に灰色を取り入れ、メリハリがついているのが印象的です。

【Image Festival Rotterdam】http://www.image-festival.com/
全体的に優しいパステルカラーを使いつつ、色分けによりゾーニングしており、視認性も高くなっています。

カラフルな色使いで参考にしたいサイト

【株式会社サイバーエージェント・クラウドファンディング】http://www.ca-crowdfunding.com/
混ざり合ったビビットカラーで明るく元気な印象が特徴的です。また、モノクロの写真にあえて明るいビビットカラーだけを残すところも、思わず真似したくなるポイントです。

【FELISSIMO】http://www.felissimo.co.jp/500/
500色もの色鉛筆を紹介・販売するサイトで、縦に円を描きながら色鉛筆が並んでおり、画面をスクロールしていく中で徐々に色が変化していく面白さがあり、ページをより長く見てもらう工夫も施されています。

WordPressに特化したデザインを集めた参考サイト

WordPress特化

WordPressではブログだけでなく、ウェブサイトも簡単に制作する事ができます。最近では簡単に作成できる様々なテーマも増えており、カスタマイズの幅も広がりました。ここではWordPressを使って制作されたデザイン性の高いサイトを集めた参考サイトいくつか紹介します。

【株式会社LIG】http://liginc.co.jp/”
遊び心が豊富で特徴的なサイトです。トップページ画面に「LIGへの自由なメッセージ」をSNSのような感覚で投稿できるようにカスタマイズされているのが印象的です。

【ISUTA】http://isuta.jp/
カテゴリーや記事などの上にカーソルを合わせると色が変わったり、大きさが変わったりとアクセスする人を楽しませるような作りになっているのが印象です。

日本のサイトに特化したデザインを集めた参考サイト

日本のサイトに特化

日本のサイトと海外のサイトではデザインの手法が大きく異なります。なぜなら、日本語とアルファベットではフォントのデザインが異なるので、日本のサイトは日本語にマッチするデザインのものが好ましいといわれています。デザイン性の高いウェブサイトを作るならばなおさら意識したいポイントです。ここでは日本ならではの「和」の雰囲気が特徴的なサイトを紹介します。

【花嫁和婚】http://hanayomewakon.jp/
結婚式の和装での前撮りのサービスを展開している会社のサイトです。桜の木が描かれている背景や和風アイコンを起用していることで和の落ち着いた雰囲気が演出されています。

【北村徳斎帛紗店】http://kitamura-tokusai.jp/
シンプルな写真を強調し、その横に縦書きで文章とカテゴリーが記載されています。書籍や雑誌などでは日本語縦書きの右から左に流れますが、あまりウェブサイトでは見かけないデザインですので印象に残りやすいかもしれません。

参考サイト例

今回は思わず真似したくなるようなサイトをいくつかのカテゴリーに分けて紹介しました。ウェブサイトを作る上で様々なサイトを見ることは勉強にもなり、より新しいアイディアも生まれやすくなります。
デザイン性が高いウェブサイトを作るためにはとても重要ですので、国内外問わず数多くのサイトを参考にして、デザインの幅を広げてみてくださいね。

関連記事

メニューをデザインする時に役立つ素敵なコツ

メニューをデザインする時に役立つ素敵なコツ

レストランやカフェなどに必ず置いてあるメニューブック。という事は、店の数だけメニューブックの種類が存在し、それぞれのデザインが必要になります。従って、デザイナーを続けていると、メニューブックのデザインを依頼される場合も多いでしょう。ここでは、メニューブックのデザインに役立つコツをお届けします。 メニューの内容をしっかり把握 料理の種類自体は、お店の人しか分かりませんので、そこは漏らさず教えてもらうしかありません。 料理の名前など必要項目を並べるだけで良いという希望でしたら、そこはその通りにして、シンプルでもセンスのあるデザインで仕上げましょう。 ただ、わざわざデザイナーにメニューブック制作を頼むという事は、お店の人もメニューブックが売り上げに貢献してほしいと期待しているはずなので、そこはデザインの力で助けたいものです。 そのようなメニューブックを作りたいという要望が少しでもあれば、まず、料理の写真を掲載する事を勧めましょう。しかし、この写真は美味しそうに撮れていなければならないので、腕に自信がある場合以外は、プロに頼んだほうが良いと思います。 写真が用意できたら、次はお店の売りにしたい料理を聞きます。 デザインする時は、この料理の写真をメニューブックで一番最初に目にする場所に大きく載せましょう。 「こだわりの」「とろける」「野菜たっぷり」などのキャッチコピーも付けたほうが良いので、お店の人に考えてもらうか、予算に余裕があればコピーライターに頼むというのも手です。 店の雰囲気に合ったデザインを 文字だけのシンプルなメニューブックも、写真をふんだんに使ったメニューブックも、どちらもお店の雰囲気に合ったデザインでなければ良い効果が生まれないでしょう。それは、色、フォント、罫線や飾り、グループの配置といった細部まで影響します。 和風、洋風、中華だけでなく、庶民的なのか高級志向なのか、若者向けなのか年配向けなのかに加えて、お店の内装、特に壁やテーブルの色、照明の具合など、詳しい情報から総合的に判断しなければなりません。 また、メニューブック自体の大きさもデザインの考慮に入れるべきでしょう。一般的には、食事主体の店は大きめに、雰囲気重視の店は小さめにしています。 メニューブックをスタッフが持っていくのか、テーブルに置いたままにしているのかも、テーブルの寸法を含めて、メニューブックの大きさを決める重要なポイントです。 その形態も、メニューブックという名の通りの冊子状のものから、2つ折りや3つ折りの見開き1ページのもの、観音扉のように左右に開くものなど様々です。 さらに、ページ数を考える必要もあります。文字や写真を詰め込み過ぎると読みにくくなるので、1ページに余裕を持たせるべきですが、料理数が多くてページ数が増えてしまうかもしれません。 しかし、そんな場合でも12ページくらいを上限にし、その際はドリンクメニューは別にするなど、お店の人と相談しましょう。 テンプレートや素材の活用術 依頼を引き受けた以上は、細部までこだわって仕上げたいところですが、メニューブックのデザイン単価が低いのも事実です。 そこで、既存のテンプレートや素材を活用してみましょう。 ただ、現在、日本のサイトで提供されている無料のメニュー用テンプレートはデザイン的に満足できるものが少ないと言えます。 しかし、レストラン、そば屋、中華料理店といった業種による傾向を知るのに良い材料かもしれません。 と言うのも、横並びのデザインを好むとまでは行きませんが、イメージから掛け離れた奇抜なデザインは避けられる風潮があるからです。 一方、海外のサイトにあるテンプレートや素材は、かなり高いレベルのものが入手できます。 いずれの場合も、商業利用可能か、よく調べて使ってください。 何とか工夫すればお店の人でも自作できるメニューブックですが、そこをデザイナーに依頼するのですから、できるだけ力になりたいものです。 依頼した側も依頼された側も満足できるようなデザインを目指しましょう。

見た目が美しいバナーを作成するための4つのコツ

見た目が美しいバナーを作成するための4つのコツ

今まで新商品の紹介や色々なサービスを宣伝する際にはチラシやポスターなど紙媒体のものが主流でしたが、インターネットの普及にともなってデジタル広告は、効率的でコストも抑えることができるので、ポピュラーな宣伝手段になってきました。そんな需要が拡大しているデジタル広告の中の1つ、バナー広告のデザインにおいて、見た目が美しいバナーを作成するための4つのコツをご紹介します。 使える要素を全て並べてみる まずはチラシやポスターなどと同じ要領で、使えるデザイン要素を思いつく限り全て並べてみましょう。この段階では全体のデザイン構成を意識しすぎず、自由に、とにかく使えそうなデザイン要素を出来るだけ盛り込んでみることです。 もちろんこの段階で並べた全てのデザイン要素を採用することはできませんが、この思いつく限りのデザイン要素を出して、組み合わせてみる行為は意外にも自分が思いもつかなかった新しいデザインを生み出すきっかけになることがあります。時間を惜しまずにこういった工程を踏むことが、美しい見た目のデザインを導き出す近道になります。 メインとなるデザインを決める 使える要素を全て並べたら、次にその中からメインとなるデザイン要素を決定します。ここでは主役となる軸を決めることになりますので、少し慎重に考える必要があります。 たくさんのデザイン要素の中から軸を決めるとなると、どれを選べばいいのか悩んでしまうかもしれません。しかし、今回のバナーのターゲットに、どの要素をメインに打ち出せば注目してくれるか、訴求したい内容が伝わるか、を考えれば自ずと絞り込まれてくるものです。 また、どうしても迷ってしまいメインとなるデザインを決めることが出来ない場合には、バナーデザインのまとめサイトなどから傾向を探り、デザインのヒントを得ることも1つの方法です。しかしバナーデザインのまとめサイトからデザインを参考にする場合、あくまで他のデザインを模倣するつもりではなく、デザインの傾向を探るくらいに留めておきましょう。 メインを元に周りのデザインを定義する メインとなるデザイン要素を決めたら、次は引き算の考えで余分なデザイン要素を省いていき、周りのデザインを定義していきましょう。この余分な要素を省いていく方法はバナーデザインを作成する上で見た目の美しさを左右する重要なポイントになります。メインになるものを引き立てる要素はそのまま残しておき、逆にメインより存在感がでてしまいそうな要素や、ぼかしてしまう恐れのあるものは思いきって外してしまいましょう。多くのデザイン要素を詰め込んでしまうと訴求したい内容が散漫してしまうので、この取捨選択の工程は非常に重要です。 大胆に遊び心を取り入れるのがコツ 最後に見た目の美しいバナーを作る上で、大胆に遊び心を取り入れたデザインに仕上げることが必要になります。 では、遊び心を取り入れるために、実際にはどのようにしたらいいのでしょうか? 簡単な方法の1つとしては、現在のトレンドを取り入れてみるということです。流行しているデザイン構成やオブジェクトモチーフ、流行カラーを取り入れてより現在のトレンドに合うようにブラッシュアップをかけるのです。また、カラーを上手く使用することで見た目の美しさが大きく変化します。例えば、グレーやブラックの背景に白文字を使用すればコントラストを作り出すことができるのでシンプルで美しい見た目になります。トレンドやカラーを取り入れた遊び心あるデザインに仕上げる事で、PCやスマートフォンの画面上でも一段と目を引く美しいバナー広告となるでしょう。 見た目が美しいバナーを制作するための4つのコツ関して紹介をご紹介させていただきましたがいかがでしたか?デザイン要素を足したり引いたりと少し難しいように思えるかもしれませんが、美しいバナーを作成するために是非ともこのコツを活用して作成してみて下さい。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。