今回は今までにも取り上げてきた今期トレンドの「FLAT DESIGN」に使えるサンプルカラーを用意いたしました。
色見本に最適なカラーサンプルをパックした無料素材
フラットデザインに欠かせないのがパステルカラーを少しくすませた独特のカラー。
中でも使いやすく使用頻度の高そうな色をピックアップしてepsにしてありますので、１つのレイヤーにまとめてスウォッチ感覚で作業していただけるようにしました。
スポイトツールで色を拾ってご利用ください。
さて、人気のフラットデザインですが、素材作りの際、私が意識している点がいくつかありますので、今回は合わせてご紹介しますね♪
「グラデーションを使わない」
これはフラットデザインである以上、当たり前なのですが、奥行きや立体感を出さないようにべた塗りにするのが鉄板です。背景やパーツごと、すべて単色で塗りつぶしましょう。
「基本は四角」
これは絶対ではありませんが、基本的にスクウェア(四角形)を並べる事が多いです。
「整列」
いくつかのオブジェクトを使う場合、縦横のラインがピッタリになるように揃えて配置するのがベストです。フラットデザインがデコボコしていたら意味がないですもんね♪
「カラーリングはパステルカラーやビタミンカラーをトーンダウン」
パステルカラーやビタミンカラーそのままでもOKなんですが、少し暗めにトーンダウンさせると、落ち着いたカラーになって優しい雰囲気になります。
「フォントはサンセリフ(ゴシック体)」
これも必ずではありませんが、なるべく曲線や角のないゴシック体が合うような気がします。また、フォントを乗せるにあたっては、オブジェクトに対して大きなサイズではなく、ある程度余白(アクティブスペース)が生まれるようにするとスッキリします。
以上が私なりのフラットデザインのこだわりですw
あと、フラットは極限まで無駄を省いたスタイルなので、はっきり言ってあまりユーザーフレンドリー(親切・明確)ではないと思っています。
今までWEBデザインはリアルに作り込まれたものが主流でしたが、新しい斬新なデザインを…と模索した結果、相反するフラットデザインに繋がったのではないかというのが私の持論です。
しかし一方で、スッキリしたデザインは好感が持てるので有効であることは事実です。
こららを踏まえて、これからのWEBデザインに活かしてみてください。
