タイポグラフィ 方法

エンジニアこそ、文字のデザイン(タイポグラフィ)を覚えよう!

こんにちは! ねこです。

今回は、主にクライアントエンジニア(フロントエンジニア)向けに、タイポグラフィのテクニックを書いていきます。

今でこそ、私の肩書きはエンジニアです。

しかし、元々、紙や Web のデザインや演出を作っていました。

今でも、ゲームの UI 演出系もやってますので、プロです。一応 笑。

そんな私が、エンジニア目線で、簡単にみためが上がる方法を説明していきます。

今回の記事は、以下のことを思ってる方向けです。

  • 自身のプロダクトの見た目を、もっとよくしたい。
  • 企画書を書くときに、見た目をキレイにしたい。
  • デザイナーとのやりとりが多いので、タイポグラフィの基礎を知っておきたい。
関連記事

こんにちは! ねこです。今回は、特にクライアントエンジニア(フロントエンジニア、Web エンジニア)向けに、デザインを気にするべき理由を書いていきます。私は、現在エンジニアですが、その前は、紙デザインや Web デ[…]

デザイン アイデア

タイポグラフィとは

タイポグラフィとは?

タイポグラフィとは、文字によるデザイン表現のことです。

デザインは、文字の配置によって全てが決まるといっても言い過ぎではありません。

エンジニアであれば、文字は得意ですよね!?

実はこれ、ちょっと気をつけるだけで、だいぶ印象がよくなります。

文字だけでデザインは成立する

デザインというと、絵やイラストが描けないと成立しないイメージはあるかと思います。

しかし、文字の扱いさえキレイに出来れば、それだけで、ほかに装飾がなくてもデザインは成り立ちます。

たしかに絵心は必要ですが、しかし、必ずしも絵が上手である必要はありません。

文字をどのように扱うか、だけで相手に与える印象はだいぶ変わります。

今すぐ使えるタイポグラフィテクニック

今から、文字のみで相手を説得させる、タイポグラフィのやり方を見ていきましょう。

ひとつひとつは、本業のプログラミングに負担にならないくらいの、かんたんな内容ですので、是非覚えておいてください!

プレゼンテーション資料を作るときにも、役立つと思います。

特に、オシャレなテンプレートを利用しているのに、自分が使うと何がダサくなるひと、必見です!

タイトルと本文にメリハリをつける

タイトルと本文のメリハリをつけると、内容がはっきり伝わる。

ひとつのデザインを人に認知させるとき、一番気にしなければならないのは、みる人の目の動きです。

人の目は、興味のあるもの、注目すべきものに目線が動きます。

やはり、見てもらう側としてはまず、主題(タイトル)がぱん、と、伝わった上で、興味をもって中身を見てもらいたいですよね。

ですので、タイトルと本文にメリハリをつけ、タイトルが目立つように工夫しましょう。

オシャレなフォントを使う

まずは、使用するフォントは大事です。

特に、タイトルや見出しに関わる部分は気をつけてみましょう。

お洒落なフォント一覧

フリーフォントでも、かなりオシャレなものも沢山あります。

ですので、効果的に利用すれば、文字をタイプするだけでデザインになります。

ここの日本語フリーフォント一覧は、すごくまとまっています。

コリス

個人でも商用でも無料利用できる、日本語のフリーフォント423種類を紹介します。 Webデザイン、アプリ、動画、紙のデザイ…

空間を大事にする

最近は、テンプレートもキレイなものが多いので、あまり、そのようなものをみないのですが。

それでも、知らないと、結構やりがちなことがあります。

それは、余白や文字のあいだを、キツキツに詰めてしまうことです。

こちら、ちゃんと空間を大事にするだけで、見え方も大きく変わります。

空間を活かしたデザイン例

特に見出しなど、目立たせたいものは、余裕をもって配置したほうがキレイに見えます。

また、グループごとに余白を開けることで、意味の違いを伝えることもできます。

要素を上から順に表示した例
要素をグループ分けして表示すると、伝えやすくなる

とにかく、位置を合わせる

例えば、スプラッシュシーンでロゴが出るところ。みたいな想定で作ってみます。

それが、こんな感じに置いてあったらどうでしょうか?

要素の位置が合ってない

やはり、おかしいと感じますよね。

もちろん、おかしいと感じる原因は色々ありますが、感覚でなく、理屈で説明できる部分があります。

それは、画面内の位置が合っていないことです。

要素のすき間の間隔が、どこも合ってない

この、合っていないすき間を合わせていくと、こんな感じになります。

すき間を合わせたデザイン
すき間を合わせることで、きれいに見える

もうひとつ、別の案を作ってみました。

複数の要素のすき間を合わせたデザイン例

例えば、複数の要素が出てきても、それぞれの位置を合わせていきます。

複数の要素のすき間を合わせたデザイン例 詳細

ここでのポイントは、それぞれの要素を置いた場所の理由をロジカルに説明できるか? です。

最初は大変だと思いますが、すべての文字の配置に、理由をつけてみる習慣をつけてみると、良いと思います。

そのうちに、気にしなくても、良いデザインにできるようになります。

文字の行間と形を変える

文字は、同じ文字でも、字間、行間などの、文字のすき間を変えるだけで、全然イメージが変わります。

文字の行間・字間を変えた例

また、文字の形をかえるだけでも、与えるイメージは大きく変わります。

文字の形を変えた例

これは、実行環境によって表現するのは難しいと思いますが、理解しておきたいデザインテクニックです。

ちょっとした気づかいで、イメージは変わる

ここまでみて、実際に難しいことをしなくても、キレイな画面にできるイメージは掴めたと思います。

ぜひ、あなたの仕事にも、これらのことを活かしてみてくださいね!

関連記事

こんにちは! ねこです。みなさん、プログラミングするときに、英文法って意識されていますか?今回は、英文法を意識しないと結構はずかしいプログラムを書いちゃうよ、というテーマで書いていこうと思います。かくいう私の英語ス[…]

プログラミング 初心者 学習 イメージ
タイポグラフィ 方法
最新情報をチェックしよう!