YOSHITAKE

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

YOSHITAKE

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

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

  • タイポグラフィの基礎

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

  • DMMの仲間たち

    • 23本

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

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

それではムーン&スペンサー配色理論における色彩調和論である ・同一調和 ・類似調和 ・対比調和 上記をそれぞれ解説していきます。 ただ、解説を読む前に予め留意しておいていただきたいのは、これらはあくまで「理論」であり、「正解」とは捉えず、あくまで考え方の手法として捉えてください。 同一調和同一調和とは文字通り、同じ色相同士による配色方法です。 例えば、赤と、同じ赤に黒や白を混ぜた（明度を変えた）暗い赤やピンクとの関係は、基本的に調和するという理論です。 M＆S理論で

YOSHITAKE

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

      ここからいよいよ配色についての内容に入っていきます。 かなりボリューミーな内容になってしまうので、回を分けて少しづつ連載していきます。 配色は知識とトレーニングデザインにおいて、この配色という分野は熟練者にとってもなかなか難しいジャンルになると思います。 自分には配色センスがない、色をどう組み合わせていいのかわからないと悩む人も多いと思います。 しかし、色彩センスは、9割以上はトレーニングによって得られるものです。 配色理論を知り、調和のテクニックを知り、トレーニン

      YOSHITAKE

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

        色彩学は基本的にこのカラーサークルがベースとなります。 ここでの解説もこのカラーサークルを用いながら色の仕組みを説明していきます。 ただ、このカラーサークルのままでは色調がシームレスに変化しているので色の特定が難しいかと思います。 そこで19世紀初頭、アメリカの美術教師であり画家だったアルバート・マンセルにより、色を体系化したカラーシステムが提唱されました。 マンセルは色相環を純色40色相に分け、色名や記号を付けて扱いやすくしました。 これにより色を伝えるうえで人

        YOSHITAKE

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

          デザインにおける「色の使い方」を勉強するうえで、世の中にはすでに沢山の種類の本が出ています。 しかし、その大体の内容は、見本となるポスターやイラストを使用してひたすらにこういう配色、こういう配色、というのを紹介していく内容のものが多いです。 それはそれでいいのですが、個人的にはどうにもピンと来ませんでした。見本をただ流し見ているだけの感じがして、身になっている気がしなかったのです。 もっと、その奥にある、配色を美しく見せるための原理や理論を知りたいと思ったのが、色につい

          YOSHITAKE

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

        YOSHITAKE

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

          YOSHITAKE

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

          YOSHITAKE

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

          YOSHITAKE

        マガジン

        • Webデザイナーが知っておきたい色彩理論
          4本
        • タイポグラフィの基礎
          6本
        • DMMの仲間たち
          23本

        記事

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

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

          YOSHITAKE

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

          YOSHITAKE

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

          前回の記事、「タイポグラフィについて その④ 〜大きさを揃える〜」では文字の大きさを揃えることの重要性を解説してきましたが、今回一転して文字の大きさを(あえて)変えるとはどういう事なのか、解説していきたいと思います。 文言に抑揚をつける 前回までのテクニックは、文字のまとまりや美しさを向上させるためのテクニックだったのですが、今回は文言に抑揚をつけて伝えやすくするというテクニックになります。こちらもタイポグラフィとしては重要なテクニックとなります。 強調したい文言を大きく

          YOSHITAKE

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

          YOSHITAKE

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

          同じフォント内の文字の大きさの違いを認識する 同じフォントで同じサイズで文字を打ち込んだとしても、英数字・ひらがな・カタカナ・漢字など文字の種類によって大きさの違いがでてきます。 一般的に、漢字が文字として一番大きく、英字やカタカナが小さくなりがちです。 以下の画像の文字は、同じフォント、同じサイズでそのまま打ち込んだ場合のものです↓ ガイド線を引いて見るとわかるとおり、同じ種類で同じ大きさのフォントであるにもかかわらず、大きさの差異が出ています。 タイポグラフィの基

          YOSHITAKE

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

          YOSHITAKE

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

          役物について 役物(やくもの)とは、文章を記述する際に利用される記号の総称です。句読点や疑問符、括弧などのことをいいます。 ■括弧の処理 文言を扱う際に、「」、（）、“”、など、役物が含まれる文言を扱う場合が多いと思います。 これら役物の記号の左右のカーニングは開きがちになってしまうので、その②〜カーニング編〜で解説したとおり、これらの左右のカーニングも他と揃えてあげる必要が出てきます。 カーニング調整に加え、役物の場合はもうひとつ処理を加えてあげます。 括弧など文

          YOSHITAKE

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

          YOSHITAKE

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

          カーニングを整えるということ それではここから具体的なタイポグラフィの手法に入っていきます。 まずタイポグラフィで一番注目されがちとなる、カーニング（文字間）の調整に関してまとめてみたいと思います。 ■漢字のカーニング 例えば「月曜定休日」と文字を打ち込んだとしましょう。 パソコン上では、文字一個分に取られるスペースはどの文字でも同じなので、「月」や「日」など縦に細い漢字などが組み合わさることによって、以下の画像のように文字と文字の間の空間にバラツキが出てきます。 こ

          YOSHITAKE

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

          YOSHITAKE

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

          デザインを作成するうえで欠かすことの出来ない概念のひとつ、「タイポグラフィ」についての記事を書いていこうと思います。 タイポグラフィとは？ そもそもタイポグラフィとはなにか。Wikipediaから引用すれば、以下のような説明になります。 活字を適切に配置することで、印刷物における文字の体裁を整える技芸 この「文字の体裁を整える」というのがタイポグラフィにおけるポイントになるかと思います。 「印刷物における」とありますが、今の時代はテキストが乗る媒体は印刷物だけでな

          YOSHITAKE

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

          YOSHITAKE