Skip to content →

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

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

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

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

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

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

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

色の組み合わせ

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

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

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

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

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

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

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

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

パーツは統一して揃える

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

余白を意識する

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

ベタとラインで区切る

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



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

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

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

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

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

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

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

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

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

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

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

Youtubeでも配信してます👇

SHARE

PROFILE

入江 慎吾
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営(月間流通額700万突破)/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SPONSER

Published in デザイン