<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>アウトプットのついでに記事を投稿しようと思っているので気軽な感じで見ていただければ幸いです。</p>
<h1 id="%E8%BF%91%E6%8E%A5%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9B%AE%E7%9A%84">
<a class="header-anchor-link" href="#%E8%BF%91%E6%8E%A5%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9B%AE%E7%9A%84" aria-hidden="true"></a> 近接の基本目的</h1>
<p>近接の基本目的は組織化です。関連する要素を近づけてグループ化することで、自動的に組織構造が出来上がり、情報が組織化されていれば可読性が上がます。</p>
<h1 id="%E5%AE%9F%E4%BE%8B">
<a class="header-anchor-link" href="#%E5%AE%9F%E4%BE%8B" aria-hidden="true"></a> 実例</h1>
<p>今回は、以下のレポート表紙を近接を使ってより組織構造がはっきりしたデザインにしていきます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/486d659ce2faea2c01a845c5.png" alt width="250" loading="lazy" class="md-img"></p>
<h2 id="%E7%8F%BE%E7%8A%B6%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9">
<a class="header-anchor-link" href="#%E7%8F%BE%E7%8A%B6%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9" aria-hidden="true"></a> 現状の問題点</h2>
<ul>
<li>情報が組織化されていない</li>
<li>中央揃えでページを埋めつくすために空白が均等になっている</li>
<li>英語が読めない場合、各行が独立した要素に見えてしまう</li>
</ul>
<p>上記の問題を以下の改善策で解決していこうと思います。</p>
<ul>
<li>タイトルとサブタイトルを近づける</li>
<li>著作名と日付をタイトルとサブタイトルから離すことで全く違う情報だと視覚的に伝える</li>
</ul>
<p>上記の改善策で解決したデザインが以下になります。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/21cdbdf13b9730f068a7d745.png" alt width="250" loading="lazy" class="md-img"><br>
<strong>近接を意識的に使用することによって見栄えが良くなるだけでなく、情報が明確に伝わるようになります。</strong></p>
<h1 id="%E9%81%BF%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E9%81%BF%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> 避けること</h1>
<ul>
<li>要素間に均等の空白を作らないこと</li>
<li>関連しない情報は離して配置する</li>
<li>ただ空いているという理由だけで、隅や中央に何か貼り付けないこと</li>
</ul>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>筆者も今まではなんとなくでwebデザインなどを見てきましたが、意識してデザインを見ることで新しい発見があったり、ここはもっとこういう風にした方が情報が伝わりやすいのでは？など分かるようになってきて非常に楽しいです😁<br>
これからもデザインに関して記事を投稿しようと思いますので応援よろしくお願い致します。<br>
最後まで見ていただきありがとうございました。🙇‍♂️</p>
<h1 id="%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE" aria-hidden="true"></a> 参考文献</h1>
<p><a href="https://www.amazon.co.jp/gp/product/4839955557/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4839955557&amp;linkCode=as2linkId=bc927c57568a4b5f3b4bd9968be3d8b4" target="_blank" rel="nofollow noopener noreferrer">ノンデザイナーズ・デザインブック [第4版]</a></p>


4つのデザイン原則の近接について

Discussion