プロ級のサイトを作るために必要な4つのコツ

シンプルなはがきのデザインを目指すなら、文字が主役のタイポグラフィがオススメです。タイポグラフィは奥が深く、チョイスするフォントや字間のバランスでデザインの表情がガラリと変わります。さらにこだわりたいなら、フォントを手作りするのもいいでしょう。ここでは、要素がそぎ落とされ、絶妙なバランス配置をされているはがきが、シンプルなはがきのデザインになりうるということを具体的な例を交えてご紹介いたします。   手書きデザインでシンプルに仕上げるには 手書きの文字をデザインに活用してシンプルに仕上げるには、余白のバランスが決め手となります。手書き文字はそのままレイアウトすると、紙面に対する余白が少なくなり、一歩間違えるとスーパーの手書きPOPのような印象になってしまうこともあります。もしそのようなイメージを求めているわけではないのなら、文字の余白を調整することでバランスがとることができる可能性があります。 また、手書き文字は字間が間のびしやすいので、「シンプル」に見せるためには取り込んだ手書き文字の字間バランスをイラストレーター上で調整するといいでしょう。もし味のある文字を書く自信がない場合は、手書き風のフォントを活用してみるのもオススメです。多種多様なタッチがあり、イメージに合わせた文字をセレクトできます。   水墨画を参考にしたシンプルなデザイン 日本の文化である「書」は美しい文字デザインの1つであり、粋と情緒が漂う和の芸術ですが、黒一色で表現された「水墨画」も同様です。日本人は、畳の部屋に一輪挿しだけを配置したような空間が芸術だと感じるように、シンプルでさりげない雰囲気を好みます。 そこで、水墨画の白い空間に漂う曲線の美しさを、はがきのデザインへと応用してみるのもいいかもしれません。はがきのホワイトスペースを「美」と捉え、水墨画のような余白のあるデザインに挑戦してみましょう。「シンプルかつさりげない」がコツとなります。   シンプルだけど動きのあるはがきデザイン はがきを受け取る人に印象づけるためには、シンプルな中にも動きのあるデザインを意識したいところです。そのためのコツとして、曲線を活用した動きのあるデザインにしたり、ワンポイントで動物や花・波など、動き出すイメージのモチーフを溶け込ませたりするのがオススメです。 中でも特にオススメなのは、シルエットイラストのキャラクターを活用することです。影絵という黒一色のイラストはシンプルなデザインテイストを壊すことがない上に、今にも動き出しそうな躍動感を表現できるのでモノトーン系のデザインには是非取り入れると良いでしょう。   シンプルでクリエイティブなはがきデザイン グラフィックデザインには「大きいデザイン」と「小さいデザイン」があると言われています。「大きいデザイン」とは、ぱっと見た時の印象がメインビジュアルやカラー、ビジュアルイメージなど全体を印象づけるデザインのことを指します。一方「小さいデザイン」とは、文字のバランスや余白、アイキャッチのポイントなど、細かい処理のことを指します。 クリエイティブと言えば「大きいデザイン」ばかりを想像しがちですが、シンプルできれいなデザインは「小さいデザイン」がとても重要です。例えば、一見して全体のイメージがしっかりシンプルなものになっていても、細かい所にも手を抜かずに、薄いアミや線画を駆使したデザインを施すことで、統一感のある美しいデザインに仕上がるからです。はがきは一目で全体を認識できるサイズなので、細部におけるクリエイティブの丁寧さによって、全体の印象が左右されるケースが多いです。   まとめ いかがでしたか？シンプルなはがきのデザインは「余白」や「バランス」が全体の印象を左右するため、普段からシンプルなデザインをするトレーニングをしておきたいものです。オススメの方法は「ホワイトスペースのバランスがきれいだな」と思うダイレクトメールやフライヤーの、余白と要素のサイズを定規ではかっておくことです。 普段から余白と要素のサイズ感覚を掴んでおけば、いざデザインワークを行う時にスムーズにでき、作業時間を短縮できるかもしれません。「ホワイトスペースを制する者はシンプルデザインを制す」ことを念頭に置いて、トレーニングしてみてくださいね。

クリック率やコンバージョン率が重要なサイトのボタンは、「購入する」「資料請求」「参加する」など、企業の収益や集客に直結することから、つい目立たせたくなってしまうかもしれません。しかし、いかにも「押してください」とアピールされたボタンデザインでは、逆にユーザーは引いてしまう傾向があります。ここでは、オシャレでかっこいい上にユーザーのアクションを促せるボタンのデザイン例を紹介します。 見慣れた記号で生み出すオシャレなボタン デザイン by JohanP インターネットが普及して年月が経った今では、ネットショッピングや情報収集をする際に、ボタンを瞬時に見つけたり、どう操作すればどうなるかすぐに理解できたりというような、「条件反射」でアクションをするようになってきました。 そのため、ユーザーが一目見て「このボタンを押せばこうなる」と理解できるようなボタンデザインである方が、ストレスなく利用できるでしょう。ボタンデザインの中でも、見慣れた記号やモチーフをベースにデザインされたボタンは、アレンジしても「このボタンを押せばこうなる」と伝わりやすくなります。 例えば、カートのマークをクリックすれば「購入する・カートに入れる」、三角を丸で囲んだマークは「動画が再生される」などが挙げられます。こうした一般的に使われている記号をオシャレにデザインすることで、ユーザーのアクション促進とビジュアルの良さを両立させたボタンになります。 デザイン by Secret99 次アクションが一目でわかるデザインを デザイン by DiegoIsCo ボタンであることがわかりやすい立体的なデザインは、高齢者に向けたサイトや親しみやすさを狙ったサイトには合っても、オシャレでクールな雰囲気のサイトにはあまり馴染まないかもしれません。 そんなときは、別の方法で「ボタンであること」がわかるようなデザインにするのがオススメです。代表的なデザインとして挙げられるのは、カーソルを乗せると色が反転するデザインや、ボタン内の写真が変化するロールオーバーです。 また、ユーザーがボタンを押した次のアクションを予測できるようなデザインにすることも大切です。ボタンをクリックしたら申込みフォームになるのか、購入画面になるのか、別のサイトへリンクしているのかなど、わかりやすいデザインにしましょう。 次の予測ができないサイトはユーザーにストレスを与えやすく離脱されやすいので、ボタンだけである程度次ページが予測できるナビゲーションにしたいものです。世界中で共通して広く使われているマークを利用する他、文字で表現する方法などもあります。その場合は、日本語よりも簡単な英語でのデザインの方が見やすいため、よく使われる傾向があります。 デザイン by thydesigns デザイン by TJCD フラットなデザインの中にでも映えるボタンのデザイン デザイン by IuliaG オシャレでかっこいいサイトで比較的使われているのがフラットなデザインのボタンです。フラットなボタンはシンプルなデザインのものが多く、ボタンとして目立たせるには難易度が高いかもしれませんが、そんなときには同系色を活用するテクニックがオススメです。 例えば、サイトのイメージカラーと同じフラットな単色ボタンを、ロールオーバーで彩度を変えた同系色に変化させることで、クールな印象をキープしながらも、ボタンとして認識させることが可能です。アイキャッチとなる写真をボタンとして使い、マウスポインタを乗せるとモノクロや反転になるデザインもオススメです。 デザイン by schabo ユーザーの目を奪うオシャレなボタン作りを デザイン by JhEign つい好奇心が湧いて押してしまうような、閲覧する人々の目を奪うオシャレなボタンを作るためには、オリジナリティのあるユニークなモチーフの追求と日々のデザイントレーニングが必要です。 イラストに自信があるなら、ボタンに使うモチーフを自分流のタッチで描くのもオススメですし、手軽にかっこいいボタンを作るなら、布や紙、マテリアルのテクスチャーを活用するのも良いでしょう。例えばジーンズショップのサイトなら、デニムのテクスチャーにステッチを施すだけでもオシャレなボタンになります。 このように、サイトが紹介しているものがイメージできるようなモチーフの研究は、ユーザーの購買意欲を刺激しやすく、本来の目的である「コンバージョン率」のアップにもつながるかもしれません。 デザイン by Grace Coote   デザイン by harsh.spy4 オシャレでかっこいいデザインは「引き算」が鉄則ですが、そこに「ボタン」とわかってもらうための工夫も取り入れる必要があるため、難易度が高いと感じるかもしれません。しかし、「サイトの商品やサービスに興味を持っているユーザーのアクションを促す」という目的を常に意識していれば、アイデアが浮かびやすくなります。ぜひかっこいいサイトの中でキラリと光るボタン作りを研究してみてください。

最近は、既存のブログサービスに飽き足らず、WordPressなどを使って独自にブログを作る人が多くなってきました。 さらに、それらに用意されているデフォルトのテンプレートでは味気ないと考えて、デザイナーにブログデザインを依頼する事も多くなっています。そんな依頼を受けた時、どうすれば希望通りのブログデザインになるかを、ビジュアルの部分に絞ってご紹介しましょう。 コンテンツのイメージに合わせるのが肝心 ブログの主役はコンテンツ（投稿記事）なので、デザインはそれを引き立たせるものでなくてはなりません。女性向けのかわいいファッションの内容に、背景が黒でシャープなデザインは似合わないでしょう。 このように掛け離れたデザインは論外ですが、画像を多用する内容なのに、デザインが頑張り過ぎて、全体がゴチャゴチャしてまとまっていないというのは、よく見かける悪例です。 そういう場合は、「派手にしてほしい」と希望されない限りは、極力シンプルに仕上げたほうが望ましいと思います。また、画像を多用する内容でなくても、デザインに使う色数は3〜5色に留めておくのが無難でしょう。   ウェブならではのレイアウトとは？ ブログはだいたい上の図のようなレイアウトになっています。 これをコンテンツに合わせて工夫していきますが、どのブログにも同じようにしている部分があるので、それに慣れた読者を考えて配置させましょう。 「ヘッダー」は、一番に見せたいという画像があれば大きめに、そうでなければロゴとブログ名だけの簡素なデザインでも良いでしょう。 「グローバルメニュー」は、ロゴだけのヘッダーだったら、その横にある場合も多いです。だいたいは、「ホーム」「自己紹介」「連絡先」といったブログ全体に共通するリンクが並びます。TwitterやfacebookなどのSNSのリンクボタンも、ここに置いてあるのが主流です。 この下に「お勧めの記事」へのリンクを設けてあるデザインも散見します。 「サイドメニュー」には、検索窓、カテゴリーによるリンク、投稿日順によるリンクなど、「サイドバー」には新着記事や人気記事などがが入ります。 投稿日順によるリンクは、カレンダーで表示するのもポピュラーでしょう。 また、図は2カラムという「サイドメニュー」「サイドバー」と「記事枠」が横に2列並んだ構成ですが、この3つが横に3列並んだ3カラムという構成もよくあります。 さらに、「サイドメニュー」「サイドバー」がなく「記事枠」だけというのも、画像を中心としたブログに多用されます。 「記事枠」は、トップページでは記事の一覧を更新順に並べる事が多いでしょう。画像中心のブログでは、記事の画像も併せて載せる方法が良く採られています。「フッター」は文字中心で各リンクを作りましょう。「ヘッダー」で「ホーム」「自己紹介」「連絡先」を表示しなかった場合、ここに表示します。ただ、「ヘッダー」で表示していても、それが画像のリンクボタンだったら、「フッター」にも文字でリンクを作ったほうが良いでしょう。というのも、ブラウザが画像を上手く読み込めなかった時、ここにリンクがあれば助かるからです。 このように、二重三重のリンク先を作るのもウェブならではと言えます。 自分なりのチェックポイントを作る 完璧にレイアウトを決めても、それぞれのパーツを作って組み合わせるとゴチャゴチャした感じになってしまう事が多々あります。 大抵は「演出」がばらついているのが原因でしょう。 具体的には「ボタンやバナーなどの枠と内容の間の上下左右マージンが均一ではない」「画像、文章、リンクが一つのグループになっている時の余白に統一感がない」「ドロップシャドウなどのエフェクトがパーツによってバラバラ」といったものが挙げられます。やりがちなミスを把握して、作成時に確認してください。 デザイナーが仕上げて終わるポスターやパンフレットなどとは違い、ブログはデザインした後からが本番です。 依頼主の意図を充分に汲み取って、どんな事があっても対応できるような、将来を見越したデザインにしたいものです。