本記事は、Lorenzo Doremi氏による「10 easy tricks to improve your website design」（2021年2月14日公開）の和訳を、著者の許可を得て掲載しているものです。

ウェブサイトデザインを簡単に改善する、イタリア人デザイナーの秘訣10選

デザインの道は、誰でも初心者から始めるものです。あなたの審美眼も、他のものと同様に訓練が必要です。Dribbbleのデザインを見ることはとても役立ちますが、デザインが良いと思ってもその理由が分からないことがあります。

アイディアが出ない。引き出しがない。何をデザインすべきか思いつかない。このような理由で作業が滞り、イライラするかもしれません。そこで、特別なスキルが必要なく、ひどいデザインを改善できる、とてもシンプルなデザイントリックを10個ご紹介します。

これらは規則ではなく、大抵の場合に有効な手であることを覚えておいてください。

10) 白と黒にする

アイディアがない？いい写真がないなら、白黒にすればいいのです。適切な構図のブルータリストデザインが手に入ります。バランス、ホワイトスペース、テキストや幾何学模様の使い方を理解するのに役立ちます。

簡単な例を見てみましょう。

シンプルだが効果的。

9) 「バランススキーム」を作る

私は、たぶん私が発明した（？）「あるもの」を使ってデザインをテストするのが大好きです。私はこれを「バランススキーム」と呼んでいます。これは概念の白黒バージョンで、単純な幾何学図形を使ってコンテンツを置き換えます。

その目的は、左右と上下の両方に同じ量の黒を持ってくることです。この原理を上のシンプルなポートフォリオに適用すると、次のようになります。

アイテムを黒の四角に置き換える。軽いものはグレーで。

デザインをする時は、目分量でするしかありませんが、計算してみましょう。

左のエリアの黒い四角の合計は、約
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 px

右の大きな四角は、約
446 x 446 = 198916 px

差は僅か**3.9558%**しかありません！

注意：確かにインクスポットは四角よりも小さいですが、かなりシャープで細かいので、より注目を集めることができます。

デザインする前に計算したわけではありません。何年も練習していると、目がバランスの悪さを感じるようになるので、自動的にそうなるのです。

8) 背景のあるデザインを提示する

先の例ではグレーの背景を提示しましたが、いろいろ試してみてください。デザインに奥行きや文脈を持たせることができます。

注意：実際のウェブサイトでは、余分なスペースはないので、これは単なるプレゼンテーションのトリックに過ぎません。

コーヒー豆は、奥行きや文脈を与えてくれる。

7) サイズのガイドラインを使う

一日中サイズを試して時間を無駄にするのはやめましょう。結局は、段落は約14-18pt、サブタイトルはもう少し大きく（24-36pt）、タイトルはさらに大きく（私は96-144pt）なります。Figmaのデフォルトサイズは、タイポグラフィにはとても適しています。

小さすぎるように見えるかもしれませんが、フルスクリーンではないので当然です。

注意：書体によっては、他の書体よりも極端に小さかったり大きかったりします。Robotoなどの標準的な書体に頼るべきです。Robotoの14-18ptなどの大きなフォントであれば、段落には最適です。

段落：18pt、ナビゲーションバー：24pt、タイトル：96pt

6) Z-Indexを活用する

透過画像がある場合は、それを使ってレイヤーが作れます。ない場合は、remove.bgを使ってください。

CSSのz-indexで画像を他の要素の後ろや前に持ってくることで、3次元的な錯覚を与えることができます。これはとても効果的です。

このテクニックを使ったシンプルなデザインを見てみましょう。

オオハシは緑のエリアに属しているように見えるが、黄色のコンテナにはみ出している。

5) パステルカラーを使い始める

鮮やかな色は素晴らしいですが、攻撃的なデザインや、ひどい組み合わせになってしまうこともよくあります。また、パステルデザインが最近とても流行しているので、カラーピッカーの新しいエリアで、パステルカラーのデザインを試してみましょう。

赤い四角の中には、面白い色がたくさんある。

どちらも、文脈と合えば良いデザインになるし、好みの問題でもある。
しかし、何か違うことをしたいなら、パステルカラーを試してみよう。

4) デザインに呼吸させる

ホワイトスペースは、少なすぎるより多すぎる方が良いと思います。雑然としたデザインは最悪です。さまざまな方法で、呼吸させることができます。

ホワイトスペースを大量に残す。
テキストの壁にならないように、スペースを取る。
目立ちすぎない画像を使う。
テキストを徹底的に減らし、キャッチーなフレーズを残す。

ホワイトスペース（この場合は黒）が多いと、とても効果的。

3) ノイズの力に気付く

デザインと言うと、クリーン、スムーズ、クリアなどのコンセプトをよく思い浮かべます。しかし、完璧は欠陥に宿ります。

ノイズはデザインの強い味方です。特に、ウェブサイトにエレガントな印象やアーティスティックな印象を与えたい場合は、ノイズが効果的です。

また、微妙なノイズを加えることで、映画のような雰囲気になり、動画や動的なウェブサイトとの相性がとても良くなります。

Photoshopで、白い背景に2-4Kのガウスノイズを作り、アートボードに適用すると、ノイズの質感が得られます。

微妙なノイズで、紙のような背景の印象を与える。Jessica Felicioのポートレート。

2) 良い書体に気付き始める

特にコンピュータにプリインストールされた書体には、ひどいものがたくさんあります。良い書体を見つけるため、ネットサーフィンやyoutube動画で、素晴らしい書体やフォントについて学びましょう。

注意：多くの書体は無料ではありません。ライセンスなしで使うとトラブルになる可能性があります。でも、心配はいりません。ほとんどの書体には無料版があります！

大量のファミリーやスタイルがありますが、通常、3つの主要なカテゴリーに分類できます。

エレガントな書体　
モダンな書体
本文用の書体

最初の2つの書体は、ディスプレイ書体でもあることが多く、作成者は見出しとして使うことを望んでいます。

エレガントな書体としては、Abril Fatface、PlayfairDisplay、Volux、Chalgaなど
モダンな書体としては、Metropolis、ITC AvantGarde、Redwing、Takota、Gothamなど
があります。

1) 幾何学図形を使う

これは、おそらく最も難しいトリックですが、正しく使えば影響は絶大です。

幾何学図形を使うことで、画像を使わなくても、レイアウトのコンセプトや秩序を強化できます。正しい幾何学図形を見つけるのは難しく、私もまだうまく使いこなせていません。

大きなコツの1つは、コピーライティングの文字や数字、タイトルを幾何学的に使うことです。巨大でありながら繊細にしたり、特定の文字を形として使ったりします（Aは効果的です）。

開発中のアプリAbmeisterのコンセプト要約のAの文字は、完璧にうまくいった。

翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: Lorenzo Doremi (LinkedIn)
Original Article: 10 easy tricks to improve your website design
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

ご意見・ご感想をお待ちしております

今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。