YOSHITAKE

IT業界でデザイナーっぽいことやってる人です。

YOSHITAKE

IT業界でデザイナーっぽいことやってる人です。

マガジン

  • Webデザイナーが知っておきたい色彩理論

  • タイポグラフィの基礎

    デザインで文字を扱う上での、基本的なテクニックのまとめ

  • DMMの仲間たち

    • 23本

    DMM.comのエンジニア・デザイナーがゆるい感じで、いろいろ書きます

記事一覧

Webデザイナーが知っておきたい色彩理論 その④ ~M&S理論~

それではムーン&スペンサー配色理論における色彩調和論である ・同一調和 ・類似調和 ・対比調和 上記をそれぞれ解説していきます。 ただ、解説を読む前に予め留意して…

YOSHITAKE
5年前
7

Webデザイナーが知っておきたい色彩理論 その③ ~配色の基本~

ここからいよいよ配色についての内容に入っていきます。 かなりボリューミーな内容になってしまうので、回を分けて少しづつ連載していきます。 配色は知識とトレーニング…

YOSHITAKE
5年前
5

Webデザイナーが知っておきたい色彩理論 その② ~マンセルカラーシステム~

色彩学は基本的にこのカラーサークルがベースとなります。 ここでの解説もこのカラーサークルを用いながら色の仕組みを説明していきます。 ただ、このカラーサークルの…

YOSHITAKE
5年前
5

Webデザイナーが知っておきたい色彩理論 その① ~色のルーツを知る~

デザインにおける「色の使い方」を勉強するうえで、世の中にはすでに沢山の種類の本が出ています。 しかし、その大体の内容は、見本となるポスターやイラストを使用してひ…

YOSHITAKE
5年前
9

タイポグラフィの基礎 その⑥ 〜行間と行長〜

文章を扱う際に忘れられがちなのが、この行間・行長の設定です。 ウィキペディアなどで調べ物をした際に、ブラウザいっぱいに広がる文章を読んでいて、読むのが辛いと感じ…

YOSHITAKE
6年前
23

タイポグラフィの基礎 その⑤ 〜大きさを(あえて)変える〜

前回の記事、「タイポグラフィについて その④ 〜大きさを揃える〜」では文字の大きさを揃えることの重要性を解説してきましたが、今回一転して文字の大きさを(あえて)変え…

YOSHITAKE
6年前
17

タイポグラフィの基礎 その④ 〜大きさを揃える〜

同じフォント内の文字の大きさの違いを認識する 同じフォントで同じサイズで文字を打ち込んだとしても、英数字・ひらがな・カタカナ・漢字など文字の種類によって大きさの…

YOSHITAKE
6年前
16

タイポグラフィの基礎 その③ 〜役物編〜

役物について 役物(やくもの)とは、文章を記述する際に利用される記号の総称です。句読点や疑問符、括弧などのことをいいます。 ■括弧の処理 文言を扱う際に、「」、()…

YOSHITAKE
6年前
15

タイポグラフィの基礎 その② 〜カーニング編〜

カーニングを整えるということ それではここから具体的なタイポグラフィの手法に入っていきます。 まずタイポグラフィで一番注目されがちとなる、カーニング(文字間)の…

YOSHITAKE
6年前
37

タイポグラフィの基礎 その① 〜プロローグ〜

デザインを作成するうえで欠かすことの出来ない概念のひとつ、「タイポグラフィ」についての記事を書いていこうと思います。 タイポグラフィとは? そもそもタイポグラフ…

YOSHITAKE
6年前
37
Webデザイナーが知っておきたい色彩理論 その④ ~M&S理論~

Webデザイナーが知っておきたい色彩理論 その④ ~M&S理論~

それではムーン&スペンサー配色理論における色彩調和論である

・同一調和
・類似調和
・対比調和

上記をそれぞれ解説していきます。

ただ、解説を読む前に予め留意しておいていただきたいのは、これらはあくまで「理論」であり、「正解」とは捉えず、あくまで考え方の手法として捉えてください。

同一調和同一調和とは文字通り、同じ色相同士による配色方法です。
例えば、赤と、同じ赤に黒や白を混ぜた(明度を変

もっとみる
Webデザイナーが知っておきたい色彩理論 その③ ~配色の基本~

Webデザイナーが知っておきたい色彩理論 その③ ~配色の基本~

ここからいよいよ配色についての内容に入っていきます。

かなりボリューミーな内容になってしまうので、回を分けて少しづつ連載していきます。

配色は知識とトレーニングデザインにおいて、この配色という分野は熟練者にとってもなかなか難しいジャンルになると思います。

自分には配色センスがない、色をどう組み合わせていいのかわからないと悩む人も多いと思います。

しかし、色彩センスは、9割以上はトレーニング

もっとみる
Webデザイナーが知っておきたい色彩理論 その② ~マンセルカラーシステム~

Webデザイナーが知っておきたい色彩理論 その② ~マンセルカラーシステム~



色彩学は基本的にこのカラーサークルがベースとなります。
ここでの解説もこのカラーサークルを用いながら色の仕組みを説明していきます。

ただ、このカラーサークルのままでは色調がシームレスに変化しているので色の特定が難しいかと思います。

そこで19世紀初頭、アメリカの美術教師であり画家だったアルバート・マンセルにより、色を体系化したカラーシステムが提唱されました。

マンセルは色相環を純色40色

もっとみる
Webデザイナーが知っておきたい色彩理論 その① ~色のルーツを知る~

Webデザイナーが知っておきたい色彩理論 その① ~色のルーツを知る~

デザインにおける「色の使い方」を勉強するうえで、世の中にはすでに沢山の種類の本が出ています。

しかし、その大体の内容は、見本となるポスターやイラストを使用してひたすらにこういう配色、こういう配色、というのを紹介していく内容のものが多いです。

それはそれでいいのですが、個人的にはどうにもピンと来ませんでした。見本をただ流し見ているだけの感じがして、身になっている気がしなかったのです。

もっと、

もっとみる
タイポグラフィの基礎 その⑥ 〜行間と行長〜

タイポグラフィの基礎 その⑥ 〜行間と行長〜

文章を扱う際に忘れられがちなのが、この行間・行長の設定です。
ウィキペディアなどで調べ物をした際に、ブラウザいっぱいに広がる文章を読んでいて、読むのが辛いと感じたことはないでしょうか?
今回は文章の「読みやすさ」を向上させるための基本的なテクニックをご紹介していきたいと思います。

行間・行長について
まずは文章を扱ううえで意識すべき2つの概念、「行間」と「行長」があります。

行間(ぎょうかん)

もっとみる
タイポグラフィの基礎 その⑤ 〜大きさを(あえて)変える〜

タイポグラフィの基礎 その⑤ 〜大きさを(あえて)変える〜

前回の記事、「タイポグラフィについて その④ 〜大きさを揃える〜」では文字の大きさを揃えることの重要性を解説してきましたが、今回一転して文字の大きさを(あえて)変えるとはどういう事なのか、解説していきたいと思います。

文言に抑揚をつける
前回までのテクニックは、文字のまとまりや美しさを向上させるためのテクニックだったのですが、今回は文言に抑揚をつけて伝えやすくするというテクニックになります。こち

もっとみる
タイポグラフィの基礎 その④ 〜大きさを揃える〜

タイポグラフィの基礎 その④ 〜大きさを揃える〜

同じフォント内の文字の大きさの違いを認識する

同じフォントで同じサイズで文字を打ち込んだとしても、英数字・ひらがな・カタカナ・漢字など文字の種類によって大きさの違いがでてきます。
一般的に、漢字が文字として一番大きく、英字やカタカナが小さくなりがちです。

以下の画像の文字は、同じフォント、同じサイズでそのまま打ち込んだ場合のものです↓

ガイド線を引いて見るとわかるとおり、同じ種類で同じ大きさ

もっとみる
タイポグラフィの基礎 その③ 〜役物編〜

タイポグラフィの基礎 その③ 〜役物編〜

役物について
役物(やくもの)とは、文章を記述する際に利用される記号の総称です。句読点や疑問符、括弧などのことをいいます。

■括弧の処理
文言を扱う際に、「」、()、“”、など、役物が含まれる文言を扱う場合が多いと思います。

これら役物の記号の左右のカーニングは開きがちになってしまうので、その②〜カーニング編〜で解説したとおり、これらの左右のカーニングも他と揃えてあげる必要が出てきます。

もっとみる
タイポグラフィの基礎 その② 〜カーニング編〜

タイポグラフィの基礎 その② 〜カーニング編〜

カーニングを整えるということ

それではここから具体的なタイポグラフィの手法に入っていきます。
まずタイポグラフィで一番注目されがちとなる、カーニング(文字間)の調整に関してまとめてみたいと思います。

■漢字のカーニング
例えば「月曜定休日」と文字を打ち込んだとしましょう。

パソコン上では、文字一個分に取られるスペースはどの文字でも同じなので、「月」や「日」など縦に細い漢字などが組み合わさるこ

もっとみる
タイポグラフィの基礎 その① 〜プロローグ〜

タイポグラフィの基礎 その① 〜プロローグ〜

デザインを作成するうえで欠かすことの出来ない概念のひとつ、「タイポグラフィ」についての記事を書いていこうと思います。

タイポグラフィとは?

そもそもタイポグラフィとはなにか。Wikipediaから引用すれば、以下のような説明になります。

活字を適切に配置することで、印刷物における文字の体裁を整える技芸

この「文字の体裁を整える」というのがタイポグラフィにおけるポイントになるかと思います。

もっとみる