（日記）情報-ビジュアルでデザイン基礎
この文章はただ私の考えを書いたものです。
デザインを進める際に大切にしているポイントを、段階ごとに整理してみようと思います。
私は、情報 → ビジュアル → ディテールの順序を非常に重要視しています。どのようなデザインをする場合でも、このプロセスを必ず丁寧に取り組むよう心がけています。
今回は３つ全部やってしまうと長くなり過ぎてしまうので、情報とビジュアルのみやっていこうと思っています。ディテールで大事な錯視の方法は各自で！
1. 情報
まず、情報の段階では、視覚的な優先順位を設定することに集中します。
デザインの核心となるメッセージが明確に伝わるように構造を整え、何が最も重要かを判断して視覚的な階層を構築していきます。
2. ビジュアル
次に、ビジュアルの段階では、伝えたい雰囲気やトーンを考慮します。
状況によって異なりますが、私は主に視覚的な楽しさや魅力を提供することに重点を置いています。この段階では、色、形、レイアウトを活用して、全体のイメージを作り上げていきます。
3. ディテール
最後に、ディテールの段階では、錯視を重要な要素として取り入れます。
タイポグラフィや色彩など、デザインで扱うさまざまな要素において、人間の生物学的特性に基づく錯視が起こるため、これを細かく考慮しながら、より精巧な成果物を目指します。
情報（視覚的な優先順位）
デザインを上手に進めるために、私が最も大切だと考えているのは情報を正しく理解することです。
では、「情報を理解する」とはどういう意味なのでしょうか？私が考える情報の理解とは、情報が本来持っている形を把握することです。
すべての情報には、特定の構造や形があります。ある情報はネットワークのように複雑に絡み合った形をしており、またある情報はツリー構造のように階層的です。このように、情報ごとに独自の形が存在し、その複雑さも異なります。
こう話すと少し難しく聞こえるかもしれませんが、情報を十分に理解すると、その形が自然と頭の中に浮かび上がってきます。
私が情報を把握する際、無意識のうちによく使う質問があります。それは次の3つです：
このウェブやアプリ（サービス）は、どのような目的を持っているのか？
このウェブやアプリ（サービス）では、何を得ることができるのか？
それをどのようにして得ることができるのか？
これらの質問をする理由は簡単です。質問を通じて情報の関係性を考える過程で、自然と情報の優先順位が整理され、頭の中に情報の形が描かれるからです。
비주얼
ビジュアルを上手に仕上げるためには、私は基礎が最も重要だと考えています。私がよく使ってきた方法は、まず基礎を理論的にしっかりと理解した上で、優れたデザインをとにかく大量に真似ることです。
私が考えるデザインの基礎は、大きく分けて3つあると思います。디자인의 4요소
反復
デザイン要素（色、フォント、パターンなど）を反復して使用することで、一貫性と統一感を与える方法です。反復を作り出せる要素は主に4つあります。
⚫︎ 色: 一貫したカラーパレットを使用して、デザイン全体の統一感を保ちます。
⚫︎ タイポグラフィ: 同じフォントスタイルやサイズを反復して使用することで、一貫性を持たせます。
⚫︎ グラフィック要素: アイコン、パターン、線などのグラフィック要素を反復して使用することで、視覚的なリズムを作り出します。
⚫︎ レイアウト構造: ページや画面のレイアウトを一定のグリッドシステムに基づいて構成し、統一感を生み出します。対比
異なる要素間の差異を強調することで、視覚的な興味を引き出し、重要な情報を際立たせる方法です。この対比を生み出す組み合わせは非常に多く存在します。それぞれの要素の特性をうまく組み合わせて対比を活用することで、豊かで多様なデザインを実現できます。
⚫︎ 色の対比: 明度や彩度の異なる色を組み合わせることで、視覚的な関心を引きつけます。例えば、明るい色と暗い色を一緒に使うことで強い対比を作ることができます。
⚫︎ 明度の対比: 明るさの違いを活用して、要素間の区別を明確にします。明るいエリアと暗いエリアを対比させることで、重要な要素を強調できます。
⚫︎ サイズの対比: 要素の大きさを変えることで、重要度や階層を表現します。大きな要素はより重要な情報として認識され、小さな要素は補足的な情報として認識されます。
⚫︎ 形の対比: 様々な形を使用して視覚的な興味を高めます。例えば、幾何学的な形と有機的な形を一緒に配置することで対比効果を得ることができます。
⚫︎ 方向の対比: 要素の配置方向を変えることで、動的な印象を与えます。水平要素と垂直要素、または斜めの要素を組み合わせることで視線を誘導することができます。
⚫︎ 質感の対比: 滑らかな表面と粗い表面を組み合わせることで、奥行きと興味を加えます。質感の違いは視覚的な対比を強化します。
⚫︎ 空間の対比: 余白と埋められた空間の割合を調整することで、要素を強調します。広い余白は特定の要素を目立たせるのに効果的です。
このように、対比にはさまざまな方法があります。整列
すべての要素を見えないグリッドや線に沿って配置し、視覚的な秩序を与える方法です。整列を維持する方法は主に3つ存在します。
⚫︎ グリッドシステムの活用: デザイン要素を一定のグリッドに沿って配置することで、秩序と一貫性を与えます。
⚫︎ 視覚的なつながり線の活用: 要素間に見えない線を設定し、それに基づいて整列させることで視覚的な流れを作ります。
⚫︎ 整列タイプの選択:左揃え: テキストや要素を左側に揃えて配置します。可読性を高めるのに効果的です。
右揃え: テキストや要素を右側に揃えて配置します。特別なデザイン効果を与えたい場合に使用します。
中央揃え: テキストや要素を中央に配置し、バランス感を持たせます。
近接
関連のある要素を近くに配置することで、それらが相互に関連しているという印象を与える方法です。近接を形成する要素はおおよそ次の3つに分類されます。
⚫︎ 物理的な距離: 関連のある要素を近くに配置することでグループ化します。例えば、関連するテキストと画像を隣接させて配置し、関連性を示します。
⚫︎ 視覚的なつながり: 線、フレーム、背景色などを使用して関連する要素をまとめます。これにより、グループ間の区別が明確になります。
⚫︎ 一貫した整列: 関連のある要素を同じ整列線に揃えて配置し、視覚的な関連性を強化します。
デザインのコツ
対比
対比の種類は多岐にわたります。重み、大きさ、色など、さまざまな要素に適用することができます。
対比から得られる効果は次の通りです：視覚的な階層を形成する。
興味を引き起こす。
余白
余白とは、背景に関係なく要素と要素の間の空間を指します。
余白から得られる効果は以下の通りです：
オブジェクトにより集中できるようにする。
視覚的な階層構造を作るのではなく、階層構造を認識しやすくする役割を果たす。
視線が自由に移動できる道筋を作る。
反復
デザインの反復が印象的である理由は、人間の観点にあります。人間はパターンを探し、それを見つけると脳が快感を覚えます。
反復から得られる効果は次の通りです：
デザインに統一感を与える。
リズム感を形成する。
一貫性
良いデザインを見分ける最も簡単な方法は、一貫性です。デザインプロセスのすべての部分で一貫性を保つように心がけるべきです。
人間はすべての物事からパターンを見つけ出します。そして、パターンから外れたものは正確にはわからなくても、簡単に違和感を覚えます。
一貫性は例外として効果ではなく、原則に近いものです。
整列、タイポグラフィ、色、写真、形、アイコンなど、どんな部分でも一貫性を保つように努めるべきです。
重なり
整列、タイポグラフィ、色、写真、形、アイコンなど、すべての要素で重なりを活用することができます。さらに、重なりはグリッドとは逆の概念です。意図的に配置を崩して構成に面白さを与えます。
重なりから得られる効果は次の通りです：
デザインに物語性を与える。
デザインが興味深いものになる。
構成に立体感が生まれる。
緊張感
バランスを崩すことで緊張感を与えることができます。安定せず、不安定で隠されたような印象を与える必要があります。
緊張感から得られる効果は次の通りです：
視覚的な興味を引き起こす。
このデザインの原則を破る際には、必ず「意図」が必要です。ただ漫然と破ってはいけません。
デザイン要素
タイポグラフィ
タイポグラフィを作る際には、フォント → サイズ、太さ → 字間、行間、行の長さ、この5つを必ず総合的に考慮する必要があります。
フォントの役割は、どのような雰囲気や印象を与えるかに基づき、目的に合った書体を選ぶことです。
サイズと太さの役割は、大きさや太さを調整して重みを作り出し、優先順位に基づいて階層構造を作ることです。
字間、行間、行の長さの役割は、字間と行間を調整することで読みやすさを向上させることです。
それぞれの役割について説明しましたが、実際にはすべてが相互補完的で、相互に影響を与えます。ただし、各要素の主要な役割に焦点を当てて説明すると、上記のようになります。
そのため、たとえ1つのタイポグラフィを使用する場合でも、これらすべてを考慮した上でデザインすることが必要です。
色
色を使用する際に考慮すべき部分は、大きく分けて「色」と「色の調整」の2つです。
色はコンセプトに合った、伝えたい雰囲気をうまく表現できる単色や配色を選ぶことです。色の選択はデザインにおいて重要ですが、良いデザインを作るためには、色そのものよりも「色の調整」のほうが重要です。
色の調整は非常に重要です。同じ色であっても、周囲の要素の影響により微調整が必要な場合が多く、その調整は不可欠な作業です。
色の調整に影響を与える要素として、「色相」「彩度」「明度」「透明度」があります。一つ一つの色をいい加減に決めてデザインするのではなく、これら4つをしっかりと調整しながらデザインすることが求められます。
画像
画像についてはまだ上手に扱えていません……。
しかし、良い写真を選ぶための基準として、私なりに2つの質問を考えています：
実際の状況で撮影されたものか？
写真に感情が込められているか？
これらの質問を通じて、その写真が良いものかどうかを判断しています。
