ウェブサイト制作で参考にしたいシンプルなデザインとは?

shunichi shiga
参考にしたいシンプルウェブデザイン

シンプルなデザインのウェブサイトは、テキストや画像、余白のバランスがよく取れていて、サイト訪問者の目を引きます。それだけでなく、コンテンツのテキストやイラスト、構成などもシンプルなデザインで統一することで、内容がわかりやすく見やすいウェブサイトになります。今回はシンプルなデザインで構成されたウェブサイトの特徴を紹介します。

シンプルなウェブサイトの特徴とは?

シンプルなサイトの特徴

シンプルに整えられたウェブサイトを訪問したとき、おそらく多くの人が「見やすい、わかりやすい、使いやすい」と感じるのではないでしょうか?まさにそれがシンプルなウェブサイトの特徴なのです。
シンプルなウェブサイトはユーザー目線に立ってデザインされていることが多く、全体に統一感があります。さらに画像のレイアウト、テキストとのバランス、余白の取り方なども計算され訪問者が疲れないように配慮されています。
そのため、一目見て「これは何のサイトなのか、どんなサービスがあるのか、どのようにしてサービスを受けるのか」が伝わりやすくなり、ストレスなくサイトを見ることができるのです。単純に「シンプルなデザインはオシャレ」というだけでなく、使い勝手がいいことも魅力です。

シンプルなのに魅力あるウェブサイトの参考例

魅力のあるウェブサイト

「シンプルで魅力的なウェブサイトはどのように制作すればいいのか?」と悩むデザイナーの方は少なくありません。そのようなときは、他のデザイナーが制作したウェブサイトを見ることをオススメします。数多くの実例を見て学ぶことで、オリジナルのアイデアが浮かんでくるかもしれません。そこで、ぜひ参考にしたいシンプルなウェブサイトをいくつか紹介します。

【余白の使い方が美しい】

税理士法人 青木会計:
http://www.aokikaikei.or.jp/
写真をほとんど使っておらず、白色の背景にテキストを中心に構成されたウェブサイトです。

【少ないカラーでわかりやすく】

I.Field:
http://ifield-plus.co.jp
企業カラーを使用したシンプルでわかりやすいデザインのウェブサイトです。スクロールが短いので、一目でサービス内容を把握することができます。

【写真の見せ方が魅力的】

星のや京都:
http://hoshinoyakyoto.jp/
写真とテキストのバランスが良く、企業の良さが引き立てられています。

他にも、ウェブサイト制作の際に参考にしたいシンプルなデザインを集めたサイトがありますので、こちらも参考にしてみてください。

Design Iketeku:
http://design-iketeru.azu-mi.com/taste.php?taste=simple

commteblog:
http://commte.net/blog/archives/4591

シンプルでミニマルなウェブデザインの具体例60個まとめ:
http://photoshopvip.net/archives/8451

Web Design Search:
http://webdesign-s.com/webdesign/03_08.html

テキストと絵のどちらでメッセージを伝えるか

テキストと絵

クライアントからウェブサイトに載せる原稿を渡された際、そのままの状態で載せることはあまりなく、多くの場合は読みやすいようにリライトしてから掲載するのではないでしょうか?文章が冗長だと訪問者に読まれない可能性があるので、表現方法を変えたり、絵やイラストを使用したりすると伝わりやすくなります。文章が重要なコンテンツの場合にはテキストを中心にデザインし、気軽に楽しんでもらうのが目的のサイトならイラストを多めにするといった使い分けができると、デザインの幅がさらに広がります。

発信したいことで、ブログの構成を決める

ブログの構成

企業の発信源として「ブログ」は欠かせないツールの1つですので、ウェブサイトと併せてブログ制作も依頼される場合があります。ブログを作るときに気をつけたいポイントは、「どんなことを発信したいか」を正確に認識することです。それによって、無駄を省くことができ、シンプルで使用しやすいブログになります。実際にPVの集まりやすいブログは、内容が充実していることはもちろん、背景の色合いやボタンの使用など含めサイト自体がシンプルで使いやすいデザインとなっています。

発信したい内容

シンプルなデザインのウェブサイトを作るためには、クライアントのイメージや期待する効果をヒアリングし、必要な情報やコンテンツをサイトに取り入れ、さらに見やすさや使いやすさを意識して制作を心がけると良いでしょう。今回ご紹介したようなポイントを参考に、より良いウェブサイトのデザインを作ってみてはいかがでしょうか。

関連記事

思わず目が奪われるシンプルデザインの看板を作ろう!

思わず目が奪われるシンプルデザインの看板を作ろう!

街の中にはさまざまな看板があふれていて、どれも色や形、素材など、さまざまな工夫が施されています。カラフルな看板が立てられている賑やかな街では、逆にシンプルなデザインの看板の方が、その中で人目につきやすいこともあります。では、シンプルな看板をデザインするためのポイントを紹介します。   どうしてシンプルデザインの方が目立つのか? 看板は人や建物が集まっている場所に設置されていることが多く、そのデザインは様々です。看板がたくさん設置されている場所では、「カラフルな看板がたくさんあるな」とひとまとめに認識されてしまい、どれも同じような看板だと思われやすくなってしまうので、結果カラフルなのに目立たないということになりかねません。 一方シンプルなデザインの看板は、内容が明確に表現されていることもあり、周囲の看板と差をつけることによって人々の目を引き、注意をひきやすくなります。ただ単に「シンプルであればいい」というわけではなく、掲載されている内容や色使いなど伝えたいことが明確なデザインであることが大事です。   一目で内容がわかる看板づくりを心がける 人が看板を見る時間は、車の運転中で約3〜5秒と言われています。また、歩行者は自分にとって必要な情報しか見ないという調査結果も出ており、ほとんどの人は視界に看板が入ってもその内容までを見てはいないとされているのです。 そんな状態の中では、いかに情報をキャッチしてもらうかが重要となるので、一目見ただけでその看板がどのような内容なのかわかるようにデザインする必要があります。 わかりやすいシンプルなデザインにするためには、内容を1つに絞り込むことがポイントです。例えば企業の認知度を上げたいという依頼ならば、極端なことを言えば、その企業の会社名やロゴを掲載するだけでも十分です。ただし、ロゴだけとは言っても、ロゴの色やフォント、余白のバランスなどを考えながら、より広告として効果的なデザインにする必要があります。   ムダなものを省いて必要最低限の情報を載せる 看板にはたくさんの情報は必要ありません。前述したように、人が看板の内容を捉えるのはほんの一瞬です。たくさんの情報を載せたところで、そのすべてを捉え切れるはずもなく、それどころか一体何を伝えたい看板なのかさえわからなくなってしまいます。 看板というメディアの役割は、人により詳しい情報を伝えるためにあるのではなく、見た人にインパクトを与えることで興味をひくためのツールとして使われることが多いです。クライアントから得た多くの情報の中から「絶対に必要」と判断した情報以外を削除していき、内容や見た目をよりシンプルにすることで、効果的で印象に残る看板に仕上げていくことができるでしょう。   街の景観に配慮した色使いで印象づける 看板や屋外広告を制作したことがある方なら、少なからず「マンセル値の制約」を受けたことがあるのではないでしょうか?1905年にアルバート・ヘンリー・マンセルさんによって考案された「マンセル・カラー・システム」では色を、色相、明度、彩度の三属性に分類しています。現在日本国内で、景観を損なわないために、看板デザインに対してこの三属性に規定を設けている自治体が増えてきています。 「目立つ色を使いたい」とデザイナーが思っていても、看板を設置する場所によってはその色が使えないことがありますので、事前に各自治体のホームページなどで調べておくのがオススメです。 シンプルな看板は、「看板を見る人の立場や心情を想像しながら、より効果的にデザインする」ことが大切なポイントとなります。また、「いかに多くの情報をわかりやすく簡潔にまとめられるか」という面でデザインの訓練にもなるので、ぜひ積極的に挑戦していきましょう。

シンプルに仕上げたLPのデザイン参考例

シンプルに仕上げたLPのデザイン参考例

元々はユーザーが最初にアクセスしたウェブページの事を意味したランディングページ(LP)ですが、インターネット広告業界では専ら、バナー広告などのリンク先にある、長めの1ページにまとめた商品やサービスの売り込みを指しています。 その大抵のページにはキャッチコピーや口説き文句があふれていますが、最近ではシンプルに決めたものも登場してきました。そんな時代を先取りするLPをご紹介しましょう。 こんな依頼ならシンプルなデザインに キャッチコピー、ベネフィットフレーズ、利用者の声といった、LPのお決まりの言葉を盛り込んで、極太ゴシックや補色などを使って派手に作ってほしいという従来のLPを要望されたら、それに従うしかありませんが、そのようなLPも飽和状態なので、シンプルデザインが合う内容であれば、違った提案をするのも一つの手です。 例えば、銀行や証券会社のような信用第一の業種なら、あまり美辞麗句を書き立てるのも逆効果なので、簡潔かつ的確にまとめたいものです。 また、サービスに絶対的な自信があるものは、それをさりげなく披露すると、必ずや説得力を持つ事でしょう。 シンプルなデザインで気を付けたい点は? いくらシンプルにすると言っても、文章や画像を単調に並べただけではデザインに失敗していると考えざるを得ません。フォントはベーシックなものが良いですが、その大きさや太さでメリハリを付けましょう。 また、画像も1枚をベタッと貼り付けるのではなく、説明で欲しい所に貼るという必要性を熟慮するべきです。 そして、それらの配置は、「これはこんな事ができて、その成果はこんなふうで、こんな感想が届いています」といった物語を感じるものにすると、読み進める気を起こさせるでしょう。 シンプルなデザインのLP例 成功例を見ると、シンプルデザインがより良く理解できると思います。 ドローンを使って、空撮を行ったり環境をモニタリングする会社のLPです。サービスを簡潔にまとめ、一番の関心事である写真の出来を明確に提示しています。 また、使用するドローンは、良く知られているDJIのファントムではなく、上位機種のインスパイアである事を強調したデザインです。 イギリスの不動産業者向けにデジタルマーケティングを伝授する会社のLPです。信頼を感じさせる緑色を取り入れ、スタイリッシュに仕上げています。 SNSなどと連動して街に出ている友人を探す事ができるアプリのLPです。一目で理解できるアイコンを作って、このアプリが何の役に立つのか、どんな動作をするのかを端的に説明しています。 企業や個人投資家向けのベンチャーキャピタルファンドのLPです。要望した色はブラック、そして、プラチナとホワイトでしたが、ブラックはそのまま使うと信頼感を損なうため、グラデーションにしています。 オランダを中心とした求人広告会社のLPです。企業の人事向けに、優秀な人材を集める方法を解説する教材を、分かりやすいインフォグラフィックで説明しています。 ペットと死別した人のために、その遺骨を収める壺を販売するデザイナーのLPです。最小限の言葉が説得力を増しています。 持ち家、借家に関わらず、省エネを目指す人に指南する電子書籍のLPです。白熱球や蛍光灯よりもLEDという誰でも知っている省エネの方法を提示しているので、見ただけで内容を理解できます。 WordPressを使ったサイトを最適化するサービスのLPです。大きく描いたバロメーターが、あっと言う間に心配事を解決してくれるような印象を与えます。 デザイン by Infinity デザイン どんなに口説き文句を並べるよりも、簡素な言葉や単純な画像のほうが力を持つ時があります。それらはもちろん、人々の関心を引くものでなくてはなりません。 依頼内容からその核心となる部分を見出し、是非シンプルなデザインへと昇華してください。

シンプルなステッカーで人を引き付けるには

シンプルなステッカーで人を引き付けるには

ステッカーは、色々な企業で使われる販促ツールの1つです。企業の特色が強く出るためブランドアピールにはとても効果的で、収集家も多いのが特徴といえます。 カバンやスケートボード、スノーボード、PCや手帳など様々な場所に貼られ、愛されるステッカーの多くはシンプルである傾向が強く、それを貼ることで好みを主張できるものである場合が多いです。今回は、シンプルでありながら人を惹きつけ愛されるステッカーを作成するコツをご紹介していきます。   ワンポイントで作るシンプルなステッカー ステッカーの中でもポピュラーなワンポイントステッカー。こちらは企業ロゴやブランドロゴ、アニメキャラクターなどをモチーフに、1つの絵や模様でシンプルにステッカーを作る方法です。このワンポイントステッカーの優れた点は、どんな絵や模様でも違和感なく作成できる点です。ノベルティや企業の配布物で配られるステッカーで一番多いタイプでもあります。 また、アイキャッチが良く手にした人が気軽に貼ることが出来るため、宣伝効果も高く人の目に触れる機会が多いのも特徴の1つです。   装飾を削ぎ落としすぎないシンプルなデザイン ワンポイントのステッカーがあれば、色々な情報を盛り込んだステッカーも存在します。そんな様々な種類の中で手にとってもらうためには、シンプルな装飾であることが条件の1つと言えます。しかし、あまりにシンプルすぎると、今度は伝えたい情報が不十分だったりちょっと物足りないデザインになってしまう場合があります。そうならないためにも、「絶対に削ってはいけない情報」を先に決めておく必要があります。 模様1つでステッカーを制作することでシンプルさを演出できます。しかし、そこに文字を当てはめることでよりステッカーとしての魅力が増す場合があります。文字と模様や絵柄のバランス、色、大きさなど考慮したうえでデザインすることで、伝えたい情報が盛りこまれたシンプルかつスタイリッシュなステッカーを作ることができます。   ステッカーチューンを考えてシンプルなデザインへ 実際にステッカーを貼る人たちの特徴として、自分好みの作品に仕上げたいという方が多く存在します。このステッカーを貼ることで自分独自の表現をすることを、ステッカーチューンといいます。周りからは適当に貼っているように見えるステッカーも、実は色や全体のバランスなどを熟考して配置されている場合が多いです。つまりデザイナーは人の手に渡るところまでではなく、渡ったあと、どういう場所に貼られ、その場合どういう見栄えになるのかをイメージしながら制作する必要があるということです。 有名人でも私物などに貼る方も多く存在し、その人たちが使用する事でとてつもない宣伝効果を生みます。実際に制作してみて物に貼った時にどういう風に見えるのか、どういう印象を与えたいのかをしっかりイメージし、デザインに起こしてみると実際に使用される頻度も高まるでしょう。   フラットデザインでシンプルなステッカーを Webデザインなどでよくあるフラットデザインの技術を、ステッカーでも利用することができます。 文字や絵柄を一緒に入れたいとき、注意をひいて何かを訴えたいときによく使われます。このフラットデザインの特徴は、色々な表現を1枚に収めシンプルに見せることが出来る点にあります。他の形式ではごちゃごちゃしてしまうデザインも、フラットデザインにすることですっきりしたシンプルなデザインにまとめることができます。文字や模様、絵柄など色々取り入れたいときに是非とも試してみてください。 今回、シンプルでありながら人を惹きつけるステッカーの種類と制作のコツをご紹介致しました。実際に貼られた際のイメージや他のステッカーと合わせた時のことも考慮するとより良いデザインが仕上がると思います。また、伝えたい内容をシンプルにまとめることで、人をひきつけ手にとってもらいやすくなることでしょう。是非ステッカー作りの際の参考にしてみてください。

最新のデザインコンペ

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