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

本記事は、[Lorenzo Doremi](https://lorenzodoremi.medium.com/)氏による「[10 easy tricks to improve your website design](https://uxplanet.org/10-beginner-tricks-to-improve-your-website-design-f26bb465f745)」（2021年2月14日公開）の和訳を、著者の許可を得て掲載しているものです。

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

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

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

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

##10) 白と黒にする

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

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

![portfolio website concept](https://miro.medium.com/max/1000/1*auK7it8NoHtUv5PrW3AyOQ.png)
>シンプルだが効果的。

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

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

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

![balance scheme](https://miro.medium.com/max/1000/1*f6ppbUUVo_k8Y03Tln7rgA.png)
>アイテムを黒の四角に置き換える。軽いものはグレーで。

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

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

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

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

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

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

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

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

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

![coffee website design elegant](https://miro.medium.com/max/700/1*kJ5qNGnzxRDbyop18bq9-Q.png)
>コーヒー豆は、奥行きや文脈を与えてくれる。

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

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

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

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

![japanese flower webside design concept](https://miro.medium.com/max/700/1*CoEHjjV9RcXfk2uWNa-5jA.jpeg)
>段落：18pt、ナビゲーションバー：24pt、タイトル：96pt

##6) Z-Indexを活用する

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

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

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

![tropical trips web design concept with a toucan](https://miro.medium.com/max/700/1*5iuUEUwzm00DjR8apA18jw.png)
>オオハシは緑のエリアに属しているように見えるが、黄色のコンテナにはみ出している。

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

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

![Color Picker](https://miro.medium.com/max/684/1*PRYly7mIPct2Tzi6a6rZsg.png)
>赤い四角の中には、面白い色がたくさんある。

![pastel](https://miro.medium.com/max/500/1*dRFfe0jJLvjGpMi-a_URLQ.png)
![bright](https://miro.medium.com/max/500/1*NLhVwdYfsBrNHQnej2KBqg.png)
>どちらも、文脈と合えば良いデザインになるし、好みの問題でもある。
>しかし、何か違うことをしたいなら、パステルカラーを試してみよう。

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

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

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

![much whitespace](https://miro.medium.com/max/500/1*C4e6mfq30ynnPn_f77GmXw.png)
![few whitespace](https://miro.medium.com/max/500/1*MWtCXH-S7_cO7zbDWiwUQg.png)
>ホワイトスペース（この場合は黒）が多いと、とても効果的。

##3) ノイズの力に気付く

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

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

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

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

![Musician portfolio website](https://miro.medium.com/max/1000/1*5xxb3BjPgykvp99_EmC9DA.png)
>微妙なノイズで、紙のような背景の印象を与える。[Jessica Felicio](https://unsplash.com/@jekafe?utm_source=unsplash-figma&utm_medium=referral)のポートレート。

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

特にコンピュータにプリインストールされた書体には、ひどいものがたくさんあります。良い書体を見つけるため、ネットサーフィンや[youtube動画](https://www.youtube.com/watch?v=wG8gYDWj-mg)で、素晴らしい書体やフォントについて学びましょう。

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

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

1.  エレガントな書体　
2.  モダンな書体
3.  本文用の書体

最初の2つの書体は、[**ディスプレイ書体**](https://en.wikipedia.org/wiki/Display_typeface)でもあることが多く、作成者は見出しとして使うことを望んでいます。

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

![abril fatface font](https://miro.medium.com/max/700/1*imBTaPeD1rQNvWarLfALIw.png)

##1) 幾何学図形を使う

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

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

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

![Ux design brief concept](https://miro.medium.com/max/1000/1*mo5E8B6hTMc4nq3qk56mRA.png)
>開発中のアプリ**Abmeister**のコンセプト要約の**A**の文字は、完璧にうまくいった。

##翻訳協力

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

Original Author: [Lorenzo Doremi](https://lorenzodoremi.medium.com/) ([LinkedIn](https://www.linkedin.com/in/lorenzo-sirio-doremi-0839551a5/))
Original Article: [10 easy tricks to improve your website design](https://uxplanet.org/10-beginner-tricks-to-improve-your-website-design-f26bb465f745)
Thank you for letting us share your knowledge!

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

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