”おしゃれ”なサイトの作り方
結論から言うと、サイトの出来栄えは、「デザインシステム」で決まります。
聞き馴染みのない言葉だと思うので、以下で詳しく解説します。
デザインシステムとは
デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、また具体的にデザイン・実装するためのUI（ユーザーインターフェース）パターンやコンポーネントなどを備えた一連のリソースのことを指します。
つまり、自社っぽいデザインするためのパーツや色を保存する場所のことですね。
なんでデザインシステムが必要？
デザインシステムを作る目的としては、複数のデジタルプロダクト・サービスを展開する際にブランドの一貫性やデザイン品質を担保したり、サイト制作を効率化させるという点が挙げられます。
つまり、ユーザーから見たときに世界観がこちゃごちゃのサイトだとダサく見えますよね。部屋のインテリアでも、リビングが北欧、寝室はアメリカン、キッチンは和風だとイマイチですよね。サイトでも同じことが言えます。
また何回も使うパーツはちゃんと保存しておくと探す手間も省けるので効率アップするのでおすすめです。
デザインシステムの作り方
おすすのツールは「Notion」
私はNotionというツールを使ってます。
Notion自体はあらゆるニーズに応えられるツールであるため、世界的に爆発的な広がりを見せていますので、別の機会に紹介します。
こちらはStudioTegamiにおける実際のデザインシステムです。
ロゴ
ロゴは会社の顔であるため、解像度の高いデータを格納しておきます。
アイコン
アイコンは自社のサイトでよく利用するアイコンやイラストを格納しておきます。Googleで検索すれば色々なアイコンやイラストが落ちていますが、あまりお勧めしません。
理由は3つ ・商標権を侵害する可能性がある ・解像度が低い ・世界観がバラバラになるため
以上の理由からアイコンやイラストは、正式に購入することをおすすめします。
以下、アイコンやイラストを購入するおすすめサイトです。
https://blush.design/collections/humaaans/humaaans
https://www.drawkit.com/product/peach-illustration-system
Color
個人的にはこれが最も重要だと思っています。
用意するのは
・基本パレット（コーポレートカラー）
・二次パレット（ベースカラー、メインカラー、アクセントカラー）
基本パレット
基本パレット（コーポレートカラー）は会社の個性・目標の統一化をはかり、社内外に印象付けるために使われている色のことを示しています。
例えば
Starbucks：緑 自然・安らぎを与えるイメージ
au：オレンジ 元気・親しみやすさを与えるイメージ
ANA：青 清潔・信頼を与えるイメージ
二次パレット
プレゼン資料の作成にも言えますが、基本は3色で大丈夫です。
数が増えるほど扱いが難しくなります。
定義するべきは、ベースカラー/メインカラー/アクセントカラーです。
カラーの配分率
ずばり、カラーの配分率は70%・25%・5%がベストです。
では、そんな色を選べば良いのか。こちらは話せば長くなります。
強いて言うなら
・原色を避け、色にくすみを持たせる
・アクセントカラーはメインカラーの補色を選ぶ
色は奥が深いので、以下の本を読むことがおすすめです。
フォント
フォントも統一すると、すっきりした読みやすいサイトに仕上がります。
しかし、フォントは数千とありますので、選ぶのが難しいのが実態です。ビジネスの場では提案書のフォントは「メイリオ」にすると良いなど言われることがありますが、個人的には垢抜けないデザインになるのでおすすめしません、、、
私のサイトで利用しているフォントはこちらです。
見出し：Raleway
本文：NotoSans
他にも様々な統一した方がよい項目はありますが、以上のことを気にしておけば、おしゃれなサイトに仕上がるので、ぜひ利用してみて下さい。