おしゃれなサイトは、デザインにこだわりがあり、人の記憶にも残りやすいものです。どんな内容のサイトでも共通して使えるデザインの基本と、参考になるサイトをまとめて紹介します。デザイン初心者もこれだけはおさえておきましょう。
デザインをおしゃれにする基本知識
デザインによって、人が受け取る印象は大きく異なります。どのような影響で印象が変わるのか、その理由を考える癖をつけることがデザイン上達への第一歩といえます。
色の数を増やしすぎない
デザインの基本、全体バランスの中で色の使い方は非常に重要です。
訴求する内容やコンセプトによって、求められるデザインは異なります。この求められるデザインを具現化する上で重要なのが『配色』です。配色では無駄な色使いをせず、シンプルに仕上げることが鉄則です。
見やすさという点だけでなく、配色は受け取る印象を大きく左右することもあります。
配色で最初にチェックしておきたいのは『背景色と文字やクリエイティブの色の組み合わせが見やすいかどうか』です。さらに、『サイトの内容やコンセプトに適切な配色になっているかどうか』も確認しておきたい点です。
これだけではありませんが、基本的な部分ではこのあたりを意識することで色を使いすぎることがなくなるでしょう。
Webデザインのトレンドを知る
デザインは日々進化し、トレンドも変わっています。よいデザインを作るには、まずトレンドを知ることが大切です。
日常で目にし、触れるデザインを観察して『どういう印象を得たか』『それはなぜか』『ほかのサイトのデザインとは具体的に何が違うのか』と、考える癖をつけるとよいでしょう。
まずは、さまざまなデザインに触れて基本を知ることです。その上で、自分ならではのデザインを考えて、創意工夫していくことでデザインの上達に一歩近づくことができます。
おしゃれなデザインに共通する4原則
配色以外にもデザインには基本原則があります。初心者でデザインを学びたいという人は、まずはここから理解を深めていきましょう。
関係があるものを近接させる
まずは『Proximity（近接）』です。近接とは、関係がある項目をまとめたり、空間的に近づけたりして配置することをいいます。
実際に視線の流れを考えると、わかりやすいでしょう。
上から下へ、または右から左へ、左から右へと、人は同じ方向へと視線を向けます。そのため、不規則な視線の導線をさせてしまうようなデザインは非常に見づらいものとなってしまうのです。
特に関連する情報はグルーピングして、目できちんと追えるように配置しましょう。
一定のルールで整列させる
次に、『Alignment（整列）』です。ビジネスマンによく使用されているマイクロソフトWordのシステムでいうと、文字列の左ぞろえ・中央ぞろ・右ぞろえ、これがデザインでいう整列にあたります。
透明の線があるとイメージして、画面上でデザインをそろえることで、全体に一体感が生まれてより見やすくなります。
ちなみに、中央、左、右のどこにそろえるかで見え方の印象は異なります。中央ぞろえはまとまりが薄い印象で柔らかい印象に、左ぞろえ・右ぞろえにすると、強さが生まれます。
これは透明の線の影響で、どちらかにそろえることで線のイメージが強まるためです。
デザイン上の特徴を反復させる
『Repetition（反復）』は、デザインの一体感や統一感を生み出します。反復とは、デザイン上のある特徴を繰り返し使用することです。
特徴の種類はさまざまですが、たとえばフォント・フォントの大きさ・色・アイコンなどが挙げられます。
デザインに一体感があると、内容が頭に入ってきやすくなり、見た目にも洗練されたイメージを与えます。
頭に入ることで、覚えてもらいやすかったり、伝えたいイメージをしっかり認識してもらいやすかったりするため、伝えたい情報をきちんとアウトプットするという点ではとても大切なポイントになります。
コントラストをはっきりさせる
最後に、『Contrast（コントラスト）』も重要なポイントです。コントラストとは、要素ごとの違いをはっきりとさせるということです。
Wordを例に説明すると、タイトルと本文でフォントの大きさを変えたり、タイトルを太字にしたりすることがあると思います。これは、「ここはタイトルで強調したい部分です」と視覚的にわかりやすく伝えているからです。
コントラストはこうした役割を果たす技能です。
ほかにも、フォントの色や背景色を変えて、コントラストをはっきりさせることも多いです。
見本になるおしゃれなWebサイト
デザインにはトレンドがあり、見本となるデザインを見て学ぶことが大切だと冒頭で紹介しました。実際に参考となるサイトを三つ紹介します。
ミニマルデザインが特徴のKIDORI
『KIDORI』は、寛容植物のECサイトです。一般的に情報量が多くなりがちなECサイトですが、シンプルでミニマルなデザインが洗練された印象を実現しています。
余白を多めに取り、商品ページで商品の特徴を表すために統一感を持たせたアイコンを使用しています 。また、デザインの基本である色数をおさえたサイトということもわかりやすいサイトです。
盆栽、多肉植物、塊根植物、観葉植物通販/KIDORI -キドリ-
モバイル向けのRaNa design associates
デバイスによって最適なデザインのあり方は大きく異なります。デバイスは、大きく分けるとパソコン・スマートフォン・タブレットに分かれます。
サイトのジャンルにもよりますが、最近ではスマートフォンでのサイト閲覧が一般的なので、スマートフォンに適したデザインのニーズが多めです。
モバイルファーストデザインとは、モバイル用のデザインをメインに考え、それに合わせてパソコン用のデザインを作るというものです。
『RaNa design associates』はデザイン会社です。この会社の採用ページのデザインは、スマートフォンユーザー向けに最適化されています。チャット形式で情報を見やすく整理し、読み進めていくという作り方はとても参考になります。
Change the Work｜RaNa design associates, inc.（株式会社ラナデザインアソシエイツ）
ユーザビリティの高いすすメトロ！
東京メトロが運営する『すすメトロ！』はアニメーションを多く使用し、ユーザーを楽しませるデザインが多用されています。
スクロールの動き、アイコンにカーソルを合わせた時の動きなど、一つ一つに趣向が凝らされており、ポップな印象を与えられることや、注目してほしいところに目線をひくことができます。
ただし、これはうまく使用しなければごちゃごちゃとした印象を与えてしまいます。見づらさも増してしまうので、使い所をしっかりとおさえて使用するようにしましょう。
「ここだ！」というポイントを見つけることもデザインをする上では重要なスキルです。
デザインの参考になるギャラリーサイト
ギャラリーサイトは、デザインを学ぶ人にとっては新たな着想を得るためのアイデアの宝庫といっても過言ではありません。ぜひチェックしてみましょう。
MUUUUU.ORG
『MUUUUU.ORG』は縦に長いレイアウトで、美しいデザインのサイトを集めたギャラリーサイトです。
各サイトのジャンル（ショッピング、エンタメなど）によって分類されているので、ギャラリーを幅広く眺めるのはもちろん、作りたいジャンルで絞ってサイトを検索することも可能です。
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
I/O 3000
デザインは言語の壁を超え、世界共通で伝わるものです。『I/O 3000』は国内外を問わず、参考となるデザインを紹介するギャラリーサイトです。
MUUUUU.ORGと同様に、ジャンルから検索することも可能です。また、使用しているタグやカラーからサイトを探すこともできます。
特定のものを探すわけではなく、漠然とデザインを検索したい時は、ランダムにサイトを表示してくれるシャッフルソートも可能です。
おしゃれなWebサイトを作るためのツール
基礎を学んだら、いよいよ制作です。おしゃれなデザインのサイトを作るために、便利なツールを活用しましょう。ツールをうまく活用することでスキルアップを目指すこともできます。
配色・フォント・試作の制作に便利なデザインツールを紹介します。
配色に悩んだら 配色の見本帳
色を少なくすることが基本と伝えましたが、配色もデザインにおいて重要です。色の選び方だけでなく、その組み合わせでも大きく印象が変わります。
色の選択肢が多いだけに配色は非常に奥深く、配色に関するツールはたくさんあります。
『配色の見本帳』は色を選ぶと、その成分情報とカラーパターンを検索することができるという便利なサイトです。配色技法にもとづいて、組み合わせを提案してくれます。
配色の参考にしながら、自分の個性でアレンジしていくとよいでしょう。
配色の見本帳 | キーカラーで選ぶ配色パターン – 色見本と理想の配色との出会い
Webフォントを探せる GoogleFonts
色と同じくらい与える印象に影響するのがフォントです。同じ内容でもフォントが変われば、別物のようになることもあります。
『GoogleFonts』は無料でWebフォントを提供してくれるツールです。
Webフォントとは、サーバ上にあるフォントを呼び出して表示をするものです。より幅広いフォントから、自分のイメージにあうものを選ぶことができます。
GoogleFontsを使えば、導入やカスタマイズを非常に簡単に行えます。
プロも使うデザインツール AdobeXD
デザインツールと聞いて無視することができない、世界的に愛用されている『AdobeXD』を紹介します。
Adobeはほかにも『Photoshop』『Illustrator』といった有名なデザインツールを提供していますが、なかでもAdobeXDは初心者でも扱いやすいといわれています。
プレビュー画面で作業ができたり、動作が素早かったりと、UIデザインには適しています。
また、ほかのAdobeツールとの連携も可能なので、今後デザインを深めて、さまざまなデザインをする上でも便利でしょう。
Adobe XD CC体験版ダウンロード | UI/UXデザイン、プロトタイプ、共同作業ツール
4原則を守っておしゃれなサイトを作ろう
これからデザインを学ぶという人はもちろん、趣味でサイトを作ってみたいという人も、まずは『おしゃれなデザインに共通する4原則』をしっかりインプットして、デザインに生かしていきましょう。
