by shigemk2

当面は技術的なことしか書かない

デザイン

カーニングって何

カーニング(文字詰め) - Webデザインテクニック タイトルなどの文字を画像で作成する場合、その文字をより美しく見せるためのテクニック。 タイポグラフィの技術。

チェックボックスの場所

チェックボックス ラベルという順番が普通。ラベル チェックボックス って並びは、ない。

テクスチャと密度感

テクスチャとは質感のことである。テクスチャはデザインの根本的な構成に必要な要素ではないが、 テクスチャを用いたデザインは見る人の目をより楽しませ、グラフィックに密度感を感じさせることが出来る。テクスチャを取り入れる手法として、以下が挙げられ…

コラージュ

コーラス23世じゃないぜ。縮尺や色などを自由に組み合わせて画像や素材を多数配置する表現手法のこと。 ピカソのキュビズムに端を発すると言われ、横尾忠則が60年代にコラージュグラフィック作品を多数生み出している。コラージュのメリットは、さまざまなイ…

切り抜き > 角版

モチーフの写真を背景とともに使用するのを「角版」という。モノの形をよりアピールしたい場合は、写真を角版で扱うよりは切り抜いたほうがよい。 また、切り抜きにもいろいろあって、背景白の切り抜き、背景黒の切り抜き、 完全な切り抜きではなくフチどり…

メソッド と パース

メソッドとは体系的な方法・方式のことで、 ここでは視点を定めて遠くにあるものを小さく、 近くにあるものを大きく描く遠近図法のことを指している。 メソッドを理解すればだれにでも簡単に立体感のある図が描けるようになる。また、パースとは、遠近法や遠…

タイリング

風呂場のタイルのように、平面に何らかの要素で隙間なく敷き詰めることを「タイリング」という。 イタストや写真など、タイリングすることによって密度感とリズム感の両方を備えたグラフィックを作成することが出来る。タイリングするエレメントの色相やその…

ムーブマン

絵画やデッサンの技法の中で、動きを感じさせる表現をムーブマンと言う。 ムーブマンにより、人の心理的、生理的機能を利用して、実際には止まっている平面の中に動きを感じさせることが出来る。なぜムーブマンを使うかというと、動きの感じられるグラフィッ…

導線の設計

一枚の画面の中で視線をスムーズに、かつ目的の場所に確実に移動させるための工夫として、「導線」というキーワードを取り入れる。 雑多な配置要素をうまく整理したいという場合にこの考えかたは有効である。読み物の場合は、最後までよどみなく読み進められ…

タイポグラフィーとは

Typography may be defined as the craft of rightly disposing printing material in accordance with specific purpose; of so arranging the letters, distributing the space and controlling the type as to aid to the maximum the reader's comprehen…

レイヤーとクラス

デザインのエレメントにはそれぞれ役割があり、こういうエレメントごとの役割の違いを「レイヤー」という。レイヤーの異なるエレメント同士が一緒に見えてしまうような組み合わせは、見る人を混乱させてしまう。 同じレイヤーの要素は近づけて配置する。(デ…

イラレのベクター画像とフォトショのラスター画像

[イラスト]Illustratorで扱う「ベクター」画像とは - @ITイラレはベクター画像を利用しており、フォトショはラスター画像を利用している。ベクター画像は回転、縮小しても画質が劣化しない。ただし、利用している環境によっては画質が変わってしまうこと…

スタンダードデザイニング

たくさんの制作物を見ていると、同じような配置の手法が使われてることがある。 これを「パクリ」というかそれとも「似たようなものが出来上がった」と言うべきかは微妙なところであるが、 デザインの型というものはある程度は存在する。読み物の場合は文章…

トーンコントロール

洗練された印象を作り出すのに欠かせないのがトーンの存在である。 重要なのは、 配色 フォント レイアウトのスタイル(ジャンプ率など) である。たとえば、キュートな感じにしたいなら暖色系を中心とした配色にするとか、 たくさん色を使って彩りよくしたい…

ジャンプ率

デザインエレメントの大小の変化を大きくしたデザインを「ジャンプ率が高い」と言う。 メリハリのあるデザインにしたいならジャンプ率を高くすればいいけども、 上品、穏やか、優しさなどを出したいデザインならジャンプ率を低くするといい。

グリッドを使うのは難しいって話

デザインにおけるグリッドシステムは数値で全てを計算する。行間 字間 段間すべての数値を計算しないといけない。故に、グリッドシステムを使いこなすのは難しいという話。

ホワイトスペース

ホワイトスペースとは、文字や画像などのデザインエレメントに何も入っていない場所をあらわす。つまり「空白」である。 美しいホワイトスペースを作りだすためには、 意識してエレメント以外の場所=ホワイトスペースの形だけを見る時間を作る 要素の内容に…

グリッドシステム デザイン

画面上に垂直 and 水平のガイドラインを置いて、そのガイドラインによって構成される格子に合わせて文字や画像などのエレメントを 配置するのがグリッドシステムである。 文字や図版といったエレメントの配置に規則性があるほうが読みやすく、見やすくなる。…

シンメトリー 対称性

象徴的かつ人為的に作りこまれた印象から、安定感、精度感、権威や統一性を演出することが出来る。 人は、対称性の感じられるものに対し、整然とした美しさを感じることが出来るのだ。 対称性をより効果的に使うには 情報量が多すぎると対称性より拡散性のほ…

フォントのセリフとかストレスとかについて

フォントにはセリフとか、ストレスとかあるけど、 セリフって何?ストレスって何? 百聞は一見に如かず、もうこの画像見たらいいです。 なお、上のように ストレスが斜め 小文字のセリフが傾いている 筆致の太さのゆるやかな推移 となっているフォントはオール…

ウェブページデザインのチップス

ウェブサイトの全てのページで一定の視覚的要素を繰り返しする。 これにより、デザインに一体性と一貫性をもたらすことが出来る。ナビゲーションは、同じ場所に、同じ順序で、同じ画像で配置する。 これにより、ウェブサイトを単なるページの集まりを統一す…

デザインにおけるカラーについて

カラーホイール カラーホイールは黄 赤 青から始まる。これら三色は合成して作れないので、原色と呼ばれる。 三原色を等量ずつ混ぜあわせて出来るのが2次色である。 両側の色を等量ずつ混ぜ合わせたのが3次色である。 トライアド 等しい距離にある3つの色の…

デザインの原則 「反復」

最早説明不要な感があるコントラストです。 フォントや文字色、サイズなどにより目立たせたいものを強調することである。コントラストの目的はページに面白みを作り出すこと、また情報の組織化を支援することである。 しかし、コントラストによって焦点でな…

デザインの原則 「反復」

同じ構造の要素を反復させることで、組織構造をより明確にしたり、一貫性を強化したりできる。以前のメニューっぽいやつが再登場。 見出しのフォントのスタイルを斜体にしたり、 フォントそのものを変えつつ反復させることで、 視覚的な組織構造と一貫性がも…

デザインの原則 「整列」

「整列」の原則というのは、ページ上のすべてのものを意識的に配置しなければならない、ということ。およそ初心者デザイナーは中央揃えをやりたくなる。 強い左揃えが、報告書の表紙に洗練された印象を与える。 整列してないものより 画像よりに整列したほう…

デザインの原則 「近接」

デザインには4つの基本原則があり、その中の1つが近接である。 近接とは、関連する項目をまとめてグループ化することである。 関係のあるもの同士を近くに配置することで、そのページの構造と内容の、直観的な手掛かりを読者に提供する。例を見てみると、関…

タイトルと本文の左端について

基本的に、タイトルと本文の左端部分は、切り揃えられているほうがよい。なぜかというとそのほうが見やすいし、デザイン的にも「タイトル」「本文」の構造が分かりやすい。 それか、タイトルの左端が本文の左端より左に寄っている必要がある。 というわけで…

眠い画像とは

ぼやけている画像を眠い画像という。 概してサイズの小さい画像を大きく表示すると眠くなる。特にタブレットでPCサイトを見ると眠い画像が多くなる。 これは、タブレットの解像度が高いためで、PC用にサイズを合わせている画像を タブレットで見ると、眠くな…