今回は、主にクライアントエンジニア(フロントエンジニア)向けに、タイポグラフィのテクニックを書いていきます。今でこそ、私の肩書きはエンジニアです。デザインや演出を作っていました。演出系もやってますので、プロです。そんな私が、エンジニア目線で、簡単にみためが上がる方法を説明していきます。今回の記事は、以下のことを思ってる方向けです。自身のプロダクトの見た目を、もっとよくしたい。企画書を書くときに、見た目をキレイにしたい。デザイナーとのやりとりが多いので、タイポグラフィの基礎を知っておきたい。エンジニア)向けに、デザインを気にするべき理由を書いていきます。した気づかいで、イメージは変わるタイポグラフィとはタイポグラフィとは、文字によるデザイン表現のことです。デザインは、文字の配置によって全てが決まるといっても言い過ぎではありません。エンジニアであれば、文字は得意ですよね!?実はこれ、ちょっと気をつけるだけで、だいぶ印象がよくなります。文字だけでデザインは成立するデザインというと、絵やイラストが描けないと成立しないイメージはあるかと思います。文字の扱いさえキレイに出来れば、それだけで、ほかに装飾がなくてもデザインは成り立ちます。たしかに絵心は必要ですが、しかし、必ずしも絵が上手である必要はありません。文字をどのように扱うか、だけで相手に与える印象はだいぶ変わります。今すぐ使えるタイポグラフィテクニック今から、文字のみで相手を説得させる、タイポグラフィのやり方を見ていきましょう。ひとつひとつは、本業のプログラミングに負担にならないくらいの、かんたんな内容ですので、是非覚えておいてください!プレゼンテーション資料を作るときにも、役立つと思います。オシャレなテンプレートを利用しているのに、自分が使うと何がダサくなるひと、必見です!タイトルと本文にメリハリをつけるひとつのデザインを人に認知させるとき、一番気にしなければならないのは、みる人の目の動きです。人の目は、興味のあるもの、注目すべきものに目線が動きます。見てもらう側としてはまず、主題(タイトル)がぱん、と、伝わった上で、興味をもって中身を見てもらいたいですよね。タイトルと本文にメリハリをつけ、タイトルが目立つように工夫しましょう。オシャレなフォントを使うまずは、使用するフォントは大事です。タイトルや見出しに関わる部分は気をつけてみましょう。フリーフォントでも、かなりオシャレなものも沢山あります。効果的に利用すれば、文字をタイプするだけでデザインになります。ここの日本語フリーフォント一覧は、すごくまとまっています。個人でも商用でも無料利用できる、日本語のフリーフォント670種類を紹介します。Webデザイン、アプリ、動画、紙のデザイ...空間を大事にする最近は、テンプレートもキレイなものが多いので、あまり、そのようなものをみないのですが。それでも、知らないと、結構やりがちなことがあります。それは、余白や文字のあいだを、キツキツに詰めてしまうことです。こちら、ちゃんと空間を大事にするだけで、見え方も大きく変わります。見出しなど、目立たせたいものは、余裕をもって配置したほうがキレイに見えます。グループごとに余白を開けることで、意味の違いを伝えることもできます。位置を合わせる例えば、スプラッシュシーンでロゴが出るところ。みたいな想定で作ってみます。それが、こんな感じに置いてあったらどうでしょうか?やはり、おかしいと感じますよね。おかしいと感じる原因は色々ありますが、感覚でなく、理屈で説明できる部分があります。それは、画面内の位置が合っていないことです。この、合っていないすき間を合わせていくと、こんな感じになります。ひとつ、別の案を作ってみました。複数の要素が出てきても、それぞれの位置を合わせていきます。最初は大変だと思いますが、すべての文字の配置に、理由をつけてみる習慣をつけてみると、良いと思います。そのうちに、気にしなくても、良いデザインにできるようになります。文字の行間と形を変える文字は、同じ文字でも、字間、行間などの、文字のすき間を変えるだけで、全然イメージが変わります。文字の形をかえるだけでも、与えるイメージは大きく変わります。これは、実行環境によって表現するのは難しいと思いますが、理解しておきたいデザインテクニックです。した気づかいで、イメージは変わるここまでみて、実際に難しいことをしなくても、キレイな画面にできるイメージは掴めたと思います。今回は、英文法を意識しないと結構はずかしいプログラムを書いちゃうよ、というテーマで書いていこうと思います。中野ブロードウェイで、異世界散策をしよう!この記事を書いた人ねこ渋谷区在住のエンジニア。記事のリクエストや要望などはツイッターで受け付けています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。