個人開発でデザインに苦戦しないための、デザインテクニック

2019/01/11 カテゴリー:デザイン タグ: , ,
  • このエントリーをはてなブックマークに追加

エンジニアさんでデザインに苦戦している、できない!という声を聞きます。

これまでデザインをつくってきて思うのは、実はデザインはロジカルな部分が多いということ。ある程度コツを押さえると、センスがなくてもキレイに整えることはできます。

今日はそのテクニックについてご紹介していきます。

SPONSOR

まず、メリハリ。メリハリは見せたい順番にレベル分けしていくことです。

フォントを大きくしたり、太字にしたり、色をつけたりして優先度がわかるようにします。MENTAの場合、このように大中小でレベルをつけています。

メリハリが無いとこのように見づらくなります。
同じように色を使いすぎたり、要素が増えすぎると見づらくなるので、見てほしい順に全体を調整していくことがポイントです。

色の組み合わせ

初心者でもまとめやすいのは彩度を使うパターン。上にように青で濃いものから薄いものと準備してます。これを組み合わせるだけでまとまります。

最初はカラーサービスがいくつかあるので、そこから選んだりして組み合わせを覚えていくといいです。

色は多くても3つまでくらいに抑えています。

ドロップシャドウは控えめに

シャドウは濃すぎると不自然。薄い方が洗練されて見えます。

SPONSOR

縦横のラインを揃えるとキレイ

雑誌やWEBでキレイだなと思うデザインをみてもらうとわかるのですが、見えないラインがキレイにそろっていると思います。これはグリッドレイアウトというのですが、縦横にラインをひいてデザインする時に意識して揃えています。逆に落ち着きすぎる場合、高等テクニックであえてずらすというのもあります。

ラインがずれるとバランスが悪いですね。

パーツは統一して揃える

HTMLタグで言えば、h1,h2,h3、ボタンやリンクなど、パーツを統一しましょう。ページごとにデザインしているサイトとかも見ますが、混乱します。

余白を意識する

余白をとりましょう。枠いっぱいにギチギチに詰めがちなんですが、ゆったりと余白をもたせるとキレイです。また、上下左右は均等に空けると整います。行間もゆったりと。

ベタとラインで区切る

ベタはこういうベターと塗ったやつで、ラインはそのまま線です。要素と要素を区別させる時に便利です。



ベタはそのまま使うと単調に見える

こういう時は背景にパターン使うとか、グラデーションを薄く入れるとリッチになります。

アイコンでクオリティアップ

Fontawesomeはよく使ってます。商用でも使えますし、SVGで落としたり、WEBフォントとして使うこともできます。ボタンとかリンクにアイコンつけるだけで、クオリティがあがるのでおすすめ。

奇抜なフォントは使いどころに注意

初心者ほど特徴的なフォントを選びがちなんですが、ロゴ以外で使うのはなかなか難しいです。

ただ、ロゴは特徴的なフォントを使うと、それらしくみえますね。

Googleフォントには日本語フォントもありますし、かっこいい無料フォントもたくさんあります。

イラストをいれてクオリティアップ

メインイメージは無料の写真素材を使うと、ありきたりに見えがちなので、有料のイラスト素材がおすすめです。これがあるだけで、見栄えがぐっとかわります。有料ですがShutterstockはおすすめです。

ここまで紹介してきましたが、結局はたくさんいいデザインをみて自分の中に引き出しをもつことが大事です。オリジナルでつくろうとせず、キレイなデザインをマネてみるところから。

Youtubeでも配信してます👇

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾
受託開発で年3,000万以上を売り上げるも、受託をやめることを決意 / 自分のサービスで生きていくために挑戦中🔥現在プロダクトの売上は月40万円 / 個人開発コミュニティ「入江開発室」を運営(約300名) / MENTAなど20個以上のプロダクトを開発。
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす