image

ずっと使えるデザインの基本をまとめました。【2017年改訂版】

Basic Design Rules 2017

「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。

デザインってむずかしい。

効果的な配色カラーパレットの選び方や、読み手の興味を惹くフォントの組み合わせ方、デザインコンセプトをうまく伝える秘訣やポイントなど、実践的に活用できるテクニックを中心に揃えています。

デザインの基本を知ることで、古びないテクニックを学びましょう。
Index of Foundamental Design

デザインガイド目次

デザインの基本に関するエントリー

Design

あらゆるデザイン制作に対応でき、長く使えるデザインの基本をまとめています。

目次に戻る
デザインで確実に覚えておきたい、20の基本原則まとめました。

デザインをするときに覚えておきたい、20個の基本原則をまとめてご紹介します。

【後半】デザインで確実に覚えておきたい、20の基本原則まとめました。

デザインをするときに覚えておきたい、20個の基本原則をまとめてご紹介します。

デザインに迷ったら見直したい、50個の秘訣テクニック完全ガイド

基本的なコツから、専門的なテクニックまで、劇的なデザインの改善に。

現役デザイナーが明かす!デザインを良くする12個の鉄板ルールと具体例

デザイナーが美しいビジュアルコンテンツを作成するときに検討している、12個の重要なデザインルール。

全デザイナー要注目!美しいデザインの構図を決める10個の黄金ルールまとめ

構図をマスターする、いくつかの秘訣やコツ、デザインテクニックを見ていきましょう。

ノンデザイナーのための厳選デザインテクニックガイド25個

クリエイティブなデザイン過程における、さまざまな問題を解決するテクニック。

グリッドって万能!デザインがグンと良くなる15の理由まとめ

グリッドをデザインレパートリーに加えたい、15個の理由と参考アイデアをまとめてご紹介します。

黄金比って何?デザインに取り入れたい5つの重要ポイント

実際に黄金比を利用して、どのようにデザインを改善すればよいか、5つのポイントをご紹介します。

三分割法をつかった、美しい構図レイアウトの早業デザインテクニック

たいていは、写真撮影における基本要素として知られていますが、どんなデザインの現場にも役立つアイデアで、どのように活用すればよいのか、シンプルにまとめています。

デザインの階層ルールをつくる、5つの効果的なテクニックまとめ

効果的なビジュアル階層、ヒエラルキー(英: Visual Hierarchy)を作成する5つのデザインテクニック。

実例で学ぶ!背景に「透かし」を使った、万能デザインテクニック12個まとめ

あらゆるデザインに役立つ、背景に透かし(英: Transparency)を加える方法を見ていきましょう。

デザイン制作で気をつけたい、フロー重視の構図をマスターする黄金テクニックまとめ

まずはじめに、基本となるレイアウトとデザインの流れ、フローを見ていきましょう。

実例で学ぶ!プロが実践する、ぼかしエフェクトをつかったデザインテクニック10個

意図的に選択された、異なるタイプのぼかしイメージを利用し、デザインを強調するテクニックをご紹介します。

デザイナーが覚えておきたい、ビジュアルコミュニケーションの基本原則10個まとめ

配色の決め方にはじまり、タイポグラフィやシェイプ、直線ラインの使い方、機能的な階層の作り方、余白スペースの取り方など。

基本原則「色、文字、余白」で極める、伝わるデザインのコツまとめ

今回は、デザインにおける3つの基本原則、色(英: Color)と書体(英: Typography)、余白スペース(英: Space)について見ていきましょう。

デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。

デザイナーが確認しておきたい、デザインリソース完全ガイド 2015年度

素材を探すのに時間を取られているひとに向けて、デザインに必要なリソースやツール、参考文献などをまとめています。

美しい幾何学パターンを利用した、50個のデザインアイデアまとめ

幾何学パターンをうまく利用する、50個のデザインポイントを、参考サンプル例と一緒に見ていきましょう。

配色に関するエントリー

Color

頭を悩ますひとも多い「配色」。どのように素敵なカラーパレットを選択するのか、秘訣やコツ、テクニックのポイントを学びます。

目次に戻る
これだけは知っておきたい、色の基本原則まとめました。

魅力的で、効果的にデザインを作成する配色の基本。

人気デザイナーが明かす!カラー配色の秘密テクニック10個まとめ

配色を選ぶときの実践的なテクニックやポイントをまとめてご紹介。

デザイナーが知っておきたい、配色の基本原則10個まとめ

印象に残る独自の美しい配色のコツをまとめたエントリー。

配色選びに困ったら確認したい、色の組み合わせ用チートシート The Ultimate Combinations Cheat Sheet

デザイン制作のなかでも、正しい色の組み合わせを見つける作業。色選びに困ったときに確認したいエントリー。

配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめ

コピー&ペーストで使える、100種類の素敵な配色をまとめています。

Webデザイナー向け配色ガイド!すぐに役立つカラーパレット50個まとめ

ウェブデザイン制作で配色の参考にしたい、さまざまなWebサイトから集められた、50種類の美しいカラーパレットを今回はまとめています。

結婚式の配色はこれだ!参考にしたい美しい色の組み合わせ25個まとめ

実際にデザインされた結婚式の招待状をモチーフに、美しい配色の組合せ25個をまとめてご紹介します。

もう配色デザインには迷わない!すごい無料カラーツール19個まとめ

直感的で手軽に色を決めることができ、デザイン制作で覚えておきたいツールが揃っています。

単色カラー配色をマスターする!鉄板デザインテクニック9個まとめ(参考パレット25個収録)

基本を学ぶことで、効果的で美しい見た目を作成する手助けをしてくれます。

プロの魅力的な色使い!参考にしたい配色カラーパレット20個まとめ

ブランドや会社などを設立するときに参考にしたい、20種類の配色カラーパレットを今回はまとめてご紹介します。

2015年人気トレンド色を学ぶ!Webサイト向け配色カラーパレット20個まとめ

2015年のデザイントレンドを反映した20種類の配色カラーパレット

配色に困ったら試したい!デザインにグッと効く、素敵カラーパレット4選

デザイン案件に役立つ、4つの美しい配色をご紹介。

魅力的なブランドカラーを実現する!参考にしたいデザインガイド11個まとめ

ブランドカラーを利用したサンプル例を見ながら、どのようにパーフェクトなブランドカラーを決めるのか見ていきましょう。

色彩トーンをつかった、配色えらびの基本テクニックまとめ

きちんと整理されたレイアウトに、コンテンツもうまく配置し、フォント書体まで決めることはできても、配色に関しては迷ってしまいがちです。まずは、簡単な色の選びかたを見ていきましょう。

配色がうまくいく、デザイナーが覚えておきたい7つの鉄板ステップ

この記事は、デザインに合った配色カラーパレットのつくり方の紹介ガイドです。より多くの色をつかって、直感的に素敵な色の組み合わせるテクニックを学びましょう。

配色が苦手なひとも大丈夫!瞬速でウェブ用カラーパレットを作成する方法

1つの色を決めるだけで、ウェブサイトに最適なカラーパレットを手軽に作成する方法を紹介しています。

フォント、文字テキストに関するエントリー

Text

フォントの組み合わせ方や、タイポグラフィ用語事典、現役デザイナーが実践しているテクニックなどをまとめています。

目次に戻る
これだけは知っておきたい、フォントの基本をまとめました。

このガイドでは、フォントとはなにか包括的にまとめたエントリーとなります。

現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール

デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、デザインの基本を学んでいきます。

テキスト文字編集でよくある、20の間違いと解決テクニックまとめ

ォントをデザインするときに間違いやすいポイントを学び、デザイン案件の最終チェックリストとして。

用途、業種に合わせて選べる!フリーフォント組み合わせ完全ガイド

デザイン制作においてフォントを選ぶときに活用したい、30種類のフォント組み合わせを小技やテクニックと一緒にまとめています。

結婚式にオススメ!無料で使える美しいフォントの組み合わせ25選

エレガントで美しい雰囲気を演出する、結婚式にぴったりなフリーフォントの組み合わせ25選をまとめています。

デザイナーにおすすめ!写真に文字をうまく入れる、6個の秘訣テクニック完全ガイド

あらゆるプロジェクトに応用できる、文字テキストとイメージ写真の組み合わせ方のデザインテクニックやコツをまとめています。

プロデザイナーの仕事から学ぶ、フォントを極める10個の基本テクニック

デザインプロジェクトにおけるフォントの使い方を改善してくれる、10個のデザインテクニックをご紹介します。

カーニングのプロ技を学ぶ!文字組みに必要な9つのテクニックまとめ

なぜデザインにおいてカーニングが重要なのかという理由、そしてプロデザイナーが実践する9つのデザインテクニックをご紹介。

デザイン初心者が覚えておきたい、文字フォントの基礎テクニック26個まとめ

これからタイポグラフィを本格的に学ぼうというひとに向けて、基本的なテクニックやコツをまとめています。

ノンデザイナー向けガイド!文字を美しく並べる3つの基本テクニック

コンテンツをより読みやすくしてくれる、3つのテクニックをご紹介。

プロデザイナーが教えてくれた、フォント組み合わせ実践テクニック8個まとめ

フォントを使ったデザインを美しく仕上げる、シンプルで効果的なテクニックをご紹介。

トップデザイナーが教える、フォントの超実践デザインテクニック10個まとめ

2種類の異なるフォントを使って、よりメッセージ性の高いデザインを作成してみましょう。

文字フォントを使った階層のつくり方7個まとめ

文字テキストの階層をどのようにでデザインで利用するのか、7つのポイントにまとめています。

文字テキストとイメージ写真の上手な組み合わせ!5つのシンプルな方法まとめ

文字テキストとイメージ写真を組み合わせる、効果的な5つのテクニック。

【図解付き!】知っておきたいタイポグラフィ用語完全ガイド

タイポグラフィの専門用語を図解付きで説明した完全ガイド。

日本語フリーフォント、これだけは欲しい厳選22個

無料ダウンロード可能で、商用ライセンスにも対応した日本語フリーフォントという条件で、幅広いデザインに利用できる、万能アイテムのみをまとめています。

日本語フリーフォント、かわいいデザインコレクション厳選30個

デザイナーの悩みを解決する、無料ダウンロードでき、商用ライセンスにも対応した日本語フリーフォントという条件で、使いやすいアイテムだけを厳選しています。

Webサイト制作に関連するUIやUXのエントリー

Web UI/UX

ウェブデザイン制作で特に重要となる、デザインテクニックや最新トレンドなどをまとめています。

目次に戻る
2017年のWebデザインはどうなる?デザイナーが注目したい流行トレンド10個まとめ

今年のウェブデザインの流行トレンドを予想したエントリーで、Webの全体的なイメージをつかみたいときに。

ナチュラルな配色カラーパレットをUIデザインにうまく活用する方法

UIデザインに自然なナチュラルカラーの組み合わせを利用する方法について、私のアイデアをご紹介します。

2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ

アプリデザインのトレンドは絶えず変化しています。時間が経てば消えてしまうものから、成長し、進化を続けるものもあります。2017年のUIデザイントレンドを見ていきましょう。

ハンバーガーメニューはもう古い!代わりに使えるモバイル用ナビメニュー5つまとめ

より使いやすく、実践的なナビメニューをタイプ別に比較、分析しています。ウェブサイトを作成するときの参考にどうぞ。

流行なんて関係ない!いつでも使える黄金ウェブレイアウトUIパターン12個まとめ

いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。

デザイナーの勉強になる、有名ブランドのスタイルガイド厳選50個まとめ

今回は、会社やスタートアップなどをはじめるときに見ておきたい、有名企業のスタイルガイド50種類をご紹介します。

プロデザイナーから学ぶ、ウェブサイトを良くするために心がけたい15個のポイント

プロのデザイナーから学ぶことは、ウェブデザインのスキルを改善するのにもっとも最適な方法といえます。今回は、ウェブデザインを改善する15個のテクニックを見ていきましょう。

Web制作で必要になる、7つの素敵レイアウトアイデアまとめ

この記事では、実践的で幅広いニーズやビジュアルスタイルに応える、7つのレイアウトアイデアを見ていきます。

Web新時代!心地よいアニメーションを実現する6つの基本テクニックまとめ

今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。

UXデザインを改善する、参考にしたいアニメーションの使い道4つまとめ

今回は、UIデザイン体験を改善するために、アニメーションを加えることができる場所やシチュエーションを、いくつかの具体的なサンプル例と一緒に見ていきましょう。

モバイルの使いやすさを劇的向上!参考にしたい7つのポイントまとめ

今回は、本当に素晴らしいモバイルユーザーエクスペリエンスを生み出す鍵となる、7つのUXデザインのヒントを見ていきましょう。

ユーザーが信頼できるUIデザインをつくる、7つの基本ポイントまとめ

今回は、ユーザーの信頼を得るためのUIデザインテクニックを、実例サンプルと一緒にまとめています。

プロならこうする!ウェブ制作の配色選びで確認したい、デザインポイント8個まとめ

この記事では、ウェブサイト制作の配色えらびに重要な8つのポイントを見ていきましょう。

文字フォントの使い方で変わる!階層づくりに必要な基本テクニックまとめ

文字テキストの階層を利用してユーザーにメッセージをうまく伝え、魅力的なウェブサイトづくりを目指す、基本テクニックやルールをまとめて見ていきましょう。

デザイナー要注目!作業効率がアップする話題のデザインツールまとめ

いままでの作業フローをいい意味で、劇的に変えてくるデザインツールを探しているひとは多いかも知れません。これまで話題となった作業効率をアップするデザインツールをまとめてご紹介します。

Index of Foundamental Design

デザインガイド目次

エントリーは随時アップデートしています、ブックマークはこちらよりどうぞ。

© Copyright 2017 Photoshop VIP
}