ビジュアルデザインの10の基本原則 |WE LOVE DESIGN | 広告デザイン事務所AMIXのブログ
どうすればデザインが上達するのでしょうか。物事には基礎が存在し、まずはそれらを学び・守ることから上達の道のりが始まります。今回はオランダでビジュアルデザイナーとしてとして活動するJosé Torre 氏の記事 「ビジュアルデザインの10の基本原則」をご紹介します。とても完結かつ分かりやすく、デザインの原則が説明されていますので、是非一読されることをお勧めします。 原文 : “10 Basic Principles of Visual Design” 以下翻訳内容です。※翻訳・掲載は記事製作者の許諾を得ています。（Thank you, José Torre ! ） 先日私はポッドキャストを聞いていて、あるリスナーが質問した事がきっかけとなり今回のブログ記事について考えるようになりました。長い間コンテンツ作りにエネルギーを注いでいますが、未だに自分自身が納得する記事ができていません。今日はそれ
デザイン4+1の基本ルール: 『The Non-Designers Design Book』を読んだ - 詩と創作・思索のひろば
なんかで Kindle の洋書が安かったときに何となく買っていた『The Non-Designers Design Book』を読み終えた。素人のための……というよりは新人デザイナーのための本のようなのだけど、エンジニアの自分が読んでも面白かったので書いとく。日本語版もある。 4つのルール 曰わく、デザインには基本的な4つのルールがある。それぞれの頭文字を取ると "CRAP" ……となるのだけれど、これは上品な単語ではないのでそう示唆されるだけではっきりとは書かれない。ともかく、各々に対応する原則は以下のとおり。 Contrast（コントラスト） Repetition（反復） Alignment（整列） Proximity（近接） これらにどういう意味があり、どう活用すべきであるか。本で紹介される順に書いていく。 Proximity 意味的に関連する要素どうしを近くに置いてグルーピングする
グラフィック、WEBデザイナーが忘れがちなデザイン、レイアウトの基礎13｜ツーブロッカ
WEBやDTPにおいて”表現したいこと”が”問題解決”に繋がるためには、まず「デザイン」のひとつひとつに置いて意味や意図が必要です。 ”クライアントから何を聞いて、何に活かせばいいのか”の逆算にもなると思うので、 今日は「バランス」「人目を惹く」「リズム感」「アート性。見応えを高める」の4つの観点でのデザインについて基礎的なセオリーを解説していきます！ デザイン・レイアウトの基礎1：バランスシンメトリー・対称性 画面の中央に仮想のラインや軸をいメージし、それに対して左右対称になるようにエレメントを配置すること。 人は対称性の感じられるものに対し、整然とした美しさを感じるといいます。 また、自然界に完全な対称（シンメトリー）は存在しないため、その象徴的かつ人為的に作られた印象から 「安定感」「精度感」「権威」「正統性」をアピールできます。 単調になってしまうため、グラフィックや配色に気をつけ
The ustwo™ Pixel Perfect Precision Handbook 2 日本語版
『Pixel Perfect Precision™ Handbook 2』（以下PPP™）は、ウェブサイトなどのデジタル環境用のデザインをする上での基本原則と、実践ですぐに使える具体的なPhotoshopのテクニックが収録されているドキュメントです。その名の通り、パーフェクトな精度のピクセルでデザインをするためのノウハウが、わかりやすいビジュアルと簡潔な文章でまとまっています。 元々PPP™は、グローバルに拠点を置くデジタルデザインスタジオustwo™ のGyppsy氏が制作したドキュメントです。iBooks版とPDF版のPPP™ドキュメントに加え、スクリプトやPhotoshopパターン集を付録の「エクストラ」として、ustwo™ ウェブサイトにて無償で配布しています。 PPP™は、デジタルデザインを学びたい人に、デザインの基礎知識と概念的な全体像を提供できるドキュメントであると同時に、既
新人デザイナーに教えたいWebデザインの基本原則【整列】
以前私は、デザインの勉強を一切したことの無いデザイナー志望の新入社員に、webデザインを教える教育係を任されたことがあります。 教育なんて簡単なんじゃないの？と安易に考えた私は、案の定痛い目を見たわけです。この日から1ヶ月間、私は毎日3時間残業する羽目になってしまいました。 人に教えるのは意外と難しく、何から教えたら良いのかすらわかりませんでした。ただやはり最初なんで基本が大事だろうと思い、先輩達のアドバイスを受けながら、【デザインの基本原則】を教えることになったわけです！ 今まさに新人教育に困っている人がいれば、まずこの記事を読んでもらって見てください！新人デザイナーに教える手間が1.2時間はぶけるかもしれません！(記事がわかりにくければ読ませないでください。その時はごめんなさい) では、早速本題に入りたいと思いますが、まずは私が新人デザイナーに初めに教えることにした【レイアウトデザイン
WordPressの the_post() ってそもそも何者？
WordPressのユーザーコミュニティである『WordBench』（2018年9月23日をもって終了 WordPress Meetup に移行しています）にて「ループ」をテーマにした約4時間のハンズオンセミナーを行いました。 4時間、ループのことしかやらない勉強会はWordBenchでも異色だと思うのですが、参加された方の感想はおおむね好評だったようです。公式ドキュメントのCodex日本語版の「The Loop」の項が未翻訳というのも理由の一つかもしれません。 ［2017.3.11追記 日本語訳されてました！］ さて、WordPressカスタマイズのキモともいえるこのループ。私もかつて解説本から学んだとおり、 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- 記事があるときの表示内容をここに書
【PHP入門講座】 配列 - Qiita
のように連番を振った変数を作りますか？31個作った時に扱うの大変そうですね。 ここで 配列 の出番です。配列生成には array() 構文を使います。関数ではなく言語構文です。PHP5.4以降では array() の代わりに [ ] を使うことができますが、(後で説明する) キー を指定する [ ] と慣れるまでは紛らわしいので、この講座では array() で統一することにします。 以下のコードを実行してみましょう。
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
イラスト マンガ制作アプリ CLIP STUDIO PAINT（クリスタ）
※項目の横の[DEBUT][PRO][EX]は、その機能が搭載されているモデルを表しています。 各モデルの主な違いはこちらをご覧ください。 DEBUT PRO EX 自然で美しい描画 一般的な画像編集ソフトとは一線を画し、線の描きやすさと美しさは専用ソフトならでは。 高度な筆圧感知により、それぞれの筆圧にあった描き味を実現。Apple PencilやGalaxy Sペンにも対応しています。 線のぶれを抑える補正機能や、描き始めと終わりに自然に強弱をつけられる「入り」･「抜き」などを使い、はじめてでも滑らかな線を描くことができます。 DEBUT PRO EX 多彩なペイント表現 繊細なタッチの水彩、重厚感のある油彩、セルアニメーション風のアニメ塗りなど、クリエイターの作風にあわせさまざまな塗り方に対応しています。ブラシ先端の形を変えたり、紙の質感を加えたり、水彩絵の具のような線のフチを再現す
名刺の作り方･･･長い住所のレイアウト（例：京都）
名刺用紙販売所：ホーム ＞ 名刺デザインの方法 ＞ 現在のページ：名刺作成方法:長い住所のレイアウト(例：京都) 京都の日本一長い住所を名刺にレイアウトする方法 ■ 名刺サイズ（大きさ・寸法）一覧 ■ 文字量の多い長い住所のレイアウトを考える 名刺作成にあたり、結構悩むのが、 原稿（文字）の量（ボリューム）です。 特に住所は、短い方は本当に短い。 短すぎて、レイアウト、バランスの調整に悩んでしまいます。 また、長すぎる住所も悩みの種です。 省略は出来ませんし、なかなか、うまく収まりません。 うまく行を分割できる場合はいいのですが、 そういつも上手くいくわけではありません。 色々悩みながら、自分に最適のデザインのコツ＆方法、ポイントをシッカリつかみましょう。 ■ 長い住所の方はエライ！ 内心、私は長い住所の方を尊敬しています。 なぜなら、書類に長い住所をいつも、何度も、 ずーっと書かれている
感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | WebNAUT
「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や
デザインの重心って？色や大きさで変化するビジュアルウエイトのまとめ！ – ゾウデザ
世の中の全てのデザインには重さがあります。 あのデザインは100kg、あっちのデザインは50kgかな。 重さっていうと、地球の重力で物体が地面に引っ張られる強さみたいなイメージだと思います。 でも今日お話しするのは、デザインの重さ。 え？デザインに重さなんかあるの？って感じですよね。 安心してください。 重さはあるんです。 しかもこの重さの理論を知っていれば、デザインを考える時間を短縮することができます。 それでは、摩訶不思議なデザインの重さについてご紹介していきましょう。 まず、デザインのバランスとは？ バランスが悪いって言葉を耳にしたことがあると思います。 デザインを見て、なんか気持ち悪いなとか、なんか偏ってるなって感じたときは、だいたいバランスが悪い時です。 では、バランスの悪さの原因って何だと思いますか？ 実は、デザインの中に配置されているオブジェクトの重さが関係しているんです。
Design Basic Book
検索 画像 マップ Play YouTube ニュース Gmail ドライブ もっと見る »ログインブックスマイ ライブラリヘルプブックス検索オプション書籍の印刷版を入手電子書籍がありません BNNAmazon.co.jp紀伊国屋書店 BookWebセブンネットショッピングハイブリッド総合書店 Honto所蔵図書館を検索すべての販売店 »Google Play で書籍を購入世界最大級の eブックストアにアクセスして、ウェブ、タブレット、モバイルデバイス、電子書籍リーダーで手軽に読書を始めましょう。 Google Play に今すぐアクセス » Design Basic Book: はじめて学ぶ、デザインの法則生田信一, 大森裕二, 亀尾敦BNN, 2007 - 199 ページ 書籍のプレビュー » ページのサンプル タイトル ページ 目次 索引 参照他の版 - すべて表示Design B
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ - コムテブログ
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 １．アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
情報を見やすく分かりやすく整理して表現するためのフロー（自己流） | 簡デザ −かんたんデザインブログ−
最近受けた仕事で、イベントのチラシのデザイン制作があったのですが、載せる文章などの情報量が多く、整理するのに苦戦しました…。 なんとか形にして第1稿をあげたものの、ごちゃごちゃして分かりづらい紙面となり、ほぼやり直し…。 チラシ制作とか何度もやってるはずなのですが、情報を整理して分かりやすくまとめるのってホント大変だな…と改めて感じ、見返す機会になったので、情報を分かりやすく整理する方法、視覚的に分かりやすくするポイントなど、基本的なことで思い当たったものをまとめて、実際の情報整理の流れを書いてみました。 分かってるつもりでも、なかなか実践できてなくて困ってしまうま。 個人の経験と考え方でまとめたものなので、何か間違っていたらすみません…。 まずは情報を分類する まず、伝えたいことをそれぞれパートに分けます。 今回はイベントのチラシを想定します。こんな感じでしょうか。 ・タイトル（大見出し
ウェブデザインに応用するデザインの4つの基本原則
根本的な考え方の指針となる、デザインの4つの基本原則 あなたは後輩のデザイナーにどのようにデザインを指導していますか？または、先輩デザイナーからどういった指導を受けましたか？その時、どんなことが指針になりましたか？ 私の所属するbaigieは先日オフィス拡張のための引越しを終え、新しいスタッフを迎え入れる体制が整いました。今後は新たなデザイナーの方を迎えて、制作の体制をさらに強化していく予定です。ここで冒頭でも触れた件ですが、先輩であるデザイナーは後から入った後輩に説得力をもって「デザインとはこうあるべきだよ」という説明ができなければなりません。 「なんとなくこっちの方がかっこいいでしょ？」「これは俺の経験から見てナシだなあ」といった具合に、論理的な説得力が無い説明で伝えても、それは後輩デザイナーに間違ったデザインの考え方を植え付け、その場しのぎの考え方を周囲にまで蔓延させることにもつなが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Learn to Draw: Stage Four, Style | Envato Tuts+
デザインの原則 II | How to Desing a Presentation Slide
Design Principles: Graphic Design Principles Index