人気記事
【初心者必見】栄えるWebデザインの特徴

こんにちは、永田です!

 

「デザインのアイデアが見つからない」

「イメージはあるけど何が必要で、どのように作れば良いかわからない」

「クライアントと打ち合わせをする際に方向性を共有したいがラフ案が浮かばない」

 

などWebデザインを行う上でデザインの問題はつきものであると言えるでしょう。

 

そこで今回はシリーズものとして用途やクライアント様が求めるデザイン像に合わせて幾つかのアイデアを皆さんに提供したいと思います。

 

この記事によって一人でも多くのWebデザイナーたちが抱えるデザインのアイデア問題が解決されれば良いなと考えております。

 

是非最後まで読んでいただき、実践に移してみてください。今回は5つのデザインの作り方についてご紹介いたします。

 

キュートで可愛いデザインのつくり方

暖色系も寒色系も明度を上げた明るい色で構成すると、キュートな印象になります。

 

書体は、子供向けのサイトや見た目をやわらかい印象にしたければ丸みがかった文字を、フェミニンでおしゃれに見せたいなら明朝体を選択するとよいでしょう。

 

サイト内に使用するパーツは、背景に網掛けや水玉、水彩を取り入れたり、レースやリボン、花や植物素材、手書き風のアイコンなどを組み合わせて使用すると可愛く見せることができます。

 

また具体的なポイントとしては、レースやチェック、花飾りといった装飾をたくさん使うことや、ペールトーンと呼ばれる柔らかいピンク、水色、黄色を組み合わせること、商品を象徴するキャラクターの使用、丸みを帯びたフォントを使うことなどが挙げられます。

 

おすすめの書体

A-OFF新ゴPro メイリオ ヒラギノ丸ゴProW4 など

 

 

ポップで元気あふれるデザインの作り方

ポップなデザインはトーンのはっきりした色を複数組み合わせてカラフルに構成されています。

 

書体は、ゴシック体が多く使われています。文字自体を装飾して斜めに配置したり、縁取りをしたり、丸や四角でくくったり、同じ単語内で太さを変えたりするとよいでしょう。

 

サイト内に使用するパーツには、背景にドットや斜線を取り入れたり、写真やイラストをステッカー風にしたり、フラッグやリボン、吹き出し素材を取り入れると、にぎやかで元気な印象になります。

 

また具体的なポイントとしては、メイドの高いカラフルな配色で構成することや、軽快な動きを取り入れポップさを演出すること、見出しパーツにフラッグや線画のイラストを効果的に使うこと、写真やイラストをステッカー風にすることなどが挙げられます。

 

おすすめの書体

A-OFF新ゴPro TrueLogoG-Extra Regular 源柔ゴシックP など

 

 

エレガントで気品に満ちたデザインの作り方

レウェディングやジュエリーといった気品のある女性向けのサイトは白や黒、茶色を基調としているデザインが多く、アクセントカラーにはゴールドなどがよく使われています。

 

書体は明朝体をメインに、飾りとして使用する欧文フォントは、流れるような筆記体を使用すると華やかに見えるでしょう。

 

背景にダマスク柄のテクスチャを敷いたり、見出しの下に飾りを入れると、よりエレガントな雰囲気を出すことができます。

 

また具体的なポイントとしては、背景にダマスク柄を使い華やかに見せることや、アクセントカラーにゴールドを使うこと、黒色を引き立ててみせること、上品なセリフ体と明朝体で見せるなどが挙げられます。

 

おすすめの書体

リュウミン A1明朝 ZENオールド明朝-R など

 

 

ナチュラルで優しいデザインの作り方

白を基調として、アクセントカラーにグレーや茶色といった落ち着いた色を組み合わせて、色数少なく構成するとナチュラルな雰囲気を出すことができます。

 

カラフルな色を使いたい場合は、自然の中で使われている「アースカラー」を取り入れてみましょう。書体は、ゴシック体、明朝体の双方の組み合わせが可能です。

 

フォントの太さは細めで、文字の行間をゆったりとると良いでしょう。

 

背景にリンネルのテクスチャを敷いたり、手書き文字やイラストで装飾すると、より優しい印象になります。また具体的なポイントとしては、トーンを抑えたシンプルな配色で構成すること、リンネルのテクスチャーを背景に敷くこと、行間・文字間・余白をたっぷり取ること、手書きイラストを組み合わせること、写真を優しい色合いに加工することなどが挙げられます。

 

おすすめの書体

丸明オールド はんなり明朝 こぶりなゴシック など

 

 

クールで先進的なデザインの作り方

白やグレーなどの無彩色と、グラデーションを組み合わせて構成すると無機質で先進的な雰囲気を出すことができます。

 

書体は、細くて丸いゴシック体を使用しているサイトが多く見られます。

 

背景には、ポリゴンのテクスチャやグラデーションのパーツを取り入れたり、ファーストビューに置くメイン画像には、鮮やかな2色の色合いのデュオトーンに加工された画像を採用して近未来的な演出をするとよいでしょう。

 

また具体的なポイントとしては、背景にグラデーションとポリゴンのテクスチャーを使うことや、写真をデュオトーンに加工すること、細くて丸いゴシック体を使ってすっきりと見せること、無機質な素材感を出すこと、グラデーションやパーツを透過させて透明感を出すことなどが挙げられます。

 

おすすめの書体

游ゴシック ヒラギノ角ゴシック メイリオ など

 

最後に

いかがでしたでしょうか。今回の例はWebデザインをする上で最頻なアイデアであると考えられます。

 

デザイン一つ一つに方向性があり、それに合わせた配色やフォントが存在します。

 

これらのことを踏まえてデザインを行うことによって、デザインに意味が生まれます。この意味はクライアントを満足させる上でとても重要な要素であると言えるでしょう。これからもWebデザインのアイデアについて発信しますので、ご参考程度に読んでいただけたらなと思います。

【未経験者必見!】Webデザイン解体新書



Twitterでフォローしよう

おすすめの記事