読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

フラットデザインの導入

ビジュアルデザイン

サイトリニューアルの際、工数削減という目的で「フラットデザイン」を採用しました。今回は、その時調査した内容のまとめです(ほぼリンク集ですが ^^;)。

フラットデザインとは

フラットデザインを導入しているサイトを探す時に使った、まとめサイトです。

「フラットデザインを言葉で説明するとどうなる?」という視点では、こちらの記事が参考になりました。

引用になりますが、フラットデザインの説明としては、この言葉がわかりやすかったです。

必要最低限の情報のやり取りを意識した設計に加えて、基本エフェクトの無いシンプルなタイポとカラー中心の設計。

ということで、1)無駄をなくす、2)タイポグラフィを工夫する、の2点に着目してフラットデザインなサイト作りを進めました。

1)無駄をなくす

言い換えると、「余計な装飾をなくす」つまり、このサイトが伝えたいことを最低限補完できる装飾があれば良い、ということ。

今回リニューアルしたサイトは、「研究の現場や臨場感が伝われば良い」ので、現場の写真があれば事足りると判断し、装飾として使うのはアイコンのみにしました。

アイコンは以下のフリー素材を使用しました。

2)タイポグラフィを工夫する

そもそもフォントの種類と特徴が自分の頭に全く入っていないので、まずは、「フラットデザイン フォント」などで検索して、まとめサイトなどいくつか見てみました。

「フラットデザインと和文フォントは合わない」という記事が多数見つかりますが、こちらの記事で紹介されている「AXIS Basic」が和文フォントとして良いな〜と思いました。

が、有料ということで断念。なので、フリーフォントで探してみました。

が、そもそも、iPhoneのシステムフォントで日本語のものはヒラギノしかないので、cssのfont-familyは特に工夫せず、タイトル画像に何のフォントを使うかを考えました。

最終的にはPhotoshopに入っていた「Savoye LTE」に決めたのですが、「理系を表す字体」ということで「筆記体」が思い浮かび採用しました。フラット関係ないですね。。

ただ、何となくフラットデザインって”はね”のないサンセリフだなって勝手に思っていたのですが、そんなことはないという発見ができたのは良かったです。