<p>こんにちは！木下です。<br>今回は、8の倍数でwebデザインをつくる理由を調べ、実際に奇数でデザインをし8の倍数でつくったデザインと比べてみました。<br></p><h2 id="hdea014c374">8の倍数を使う理由</h2><p>webデザインの場では基本的に8の倍数を使って「サイズの指定が必要な要素全て」の大きさを決めます。<br>「様々なディスプレイの画面サイズ」が<strong>8の倍数でつくられており</strong>(例：1440px÷8=180pxなど)、8の倍数は偶数なので要素のサイズ変更をする際に端数が出ません。<br>なので、8の倍数を使ってデザインするとコーディングをした後の変更がしやすいです。</p><blockquote>8の倍数以外の数値を使用しているwebサイトはたくさんあります。しかし、端数が出てしまう奇数ではなく、偶数を使用している割合が高いです。</blockquote><h2 id="h9b3a1a81ac">数値に基準を決めてデザインをするとデザインに統一感が出る</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/5343fae5b4bf479690f95575359375ef/1653620694361-7u5Y5eTkvc.webp" alt=""><br>例のように、32px、ここは48px…と数値がところどころバラバラだと、余白にばらつきが出るためデザイン全体の統一感が損なわれます。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/a9cbfb9c3a7a464bbb8a5abb0b0e3377/1653620719249-JeIUNcXLAO.webp" alt=""><br>そのため、数値を決めてデザインすることでまとまりがあるデザインになるといえます。<br></p><h2 id="hf72560c9ef">8の倍数(偶数有)のデザインと奇数のデザインを比べる</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/d5dbd4b4f37e4cfebd76b2af907a797c/1653620778186-mV4Zy7IMEy.webp" alt=""></p><blockquote>左が8の倍数(偶数有)でつくったデザインです。奇数(3、5、7、9)は、8の倍数(偶数有)でつくったデザインで使った数値と同じくらいの数値でつくっています。<br>3は偶数の倍数も多いのでつくりにくさはあまり感じませんでした。見た目もおかしくは見えませんが、細かい点でいうと見出しの大きさが気になります。<br>5は、倍数が5刻みなので文字サイズやボタンの位置の数値が合わせづらかったです。オブジェクトが大きかったり小さかったりし、あまり良いものに見えません。</blockquote><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/0e514b5ffeae43c39c0c3737c0715a59/1653620805805-OC51HHIkux.webp" alt=""></p><blockquote>7はフォントサイズが14pxか21pxしか使用していないためジャンプ率がないデザインになってしまい、<br>9は文字サイズやボタンの位置の数値が合わせづらく、オブジェクトが大きかったり小さかったりし7の倍数とは逆にジャンプ率がありすぎるデザインになってしまいました…</blockquote><p><br>奇数の倍数でデザインをつくってみてわかったこと<br>・奇数の倍数でデザインしても、3のように倍数が小刻みであればそれほどつくりにくさは感じない。(5、7、9はつくりにくかったです。)<br>・数値を決めてデザインしすぎるとやはり見た目が良くならなかった。<br><br>奇数の倍数でデザインをするのがだめというより、8の倍数や偶数でデザインをするとサイズが変わる時に端数が出ないので、<strong>コーディングの品質が良くなる</strong>のではないかな、とつくり比べて思いました。<br></p><h2 id="h5d34104d8c">まとめ！</h2><p>・コーディングの品質が良くするために、奇数を使うことを控えようと思いました！<br>・8の倍数の数値が全てではなく、<strong>あくまで基準として</strong>考え使用することをお勧めします！<br>私は8の倍数を基準とし、ビジュアルが他の数値の方がよくなると思ったら他の偶数の数値を使います。柔軟に綺麗なデザインをつくりましょう！</p>

8の倍数(偶数有)のデザインと奇数のデザイン比べてみた。

<p>デザインとは装飾の綺麗さも重要ですが、それ以上に<strong>「情報が適切に伝わる」</strong>ということが大切になります。<br>これから紹介する「デザインの4大原則」というものを理解することで、これまで以上に情報が伝わるようになります。<br></p><h2 id="ha9d8cc7a8f">「デザインの4大原則」とは</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/e9ab8bfab8a048a98a7fd93fe5c66f90/4%E5%8E%9F%E5%89%87.jpg" alt=""><br><strong>デザインの4大原則はこれらの4つに分けられます</strong><br>1. 接近 (Proximity)<br>2. 整列 (Alignment)<br>3. 反復 (Repetition)<br>4. 対比 (Contrast)</p><h2 id="h6db7febbb8">1.&nbsp;接近 [情報をグループ化する]</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/35afebf4952144099b8e3afc286139f2/%E6%8E%A5%E8%BF%91.jpg" alt=""><br>接近は関連する情報を近づけることで、情報をまとめる役割があります。関連する情報をまとめることで一目で情報を理解することができ、<strong>文字の大きさや色を変えずとも距離だけでカテゴリー分けできる</strong>というメリットがあります。</p><h2 id="hce3e03c558">2. 整列 [要素を整列させて統一感のあるデザインに]</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/29105d08a40c49a3961d77b2ea548de5/%E6%95%B4%E5%88%97.jpg" alt=""><br>要素を整列することでデザインに統一感が生まれ、視線の誘導がスムーズになります。[接近]でグループした要素を[整列]で整えることでさらに見やすいデザインになります。<br><strong>整列にはこれらの種類があります</strong><br>・上揃え<br>・下揃え<br>・左揃え<br>・右揃え<br>・中央揃え</p><h2 id="h50b981c72b">3. 反復[反復により規則のあるデザインに]</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/f7dafd5ae6404f9ebaf142d409a1e96e/%E5%8F%8D%E5%BE%A9.jpg" alt=""><br>反復を使い、同じルールで統一されたデザインは規則性や統一感が生まれ、情報が整理しやすいレイアウトになります。逆に反復を使わないと統一感が生まれず、散らかった印象になります。<br></p><h2 id="h9057163684">4.対比[コントラストにより伝えたいものを強調する]</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/50d3f687d3da48d2a4004c49b5bd2074/%E5%AF%BE%E6%AF%94.jpg" alt=""><br>情報に優先順位をつけ、重要な情報は色や大きさを変えることで目立ち差別化することが出来ます。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>今回紹介したデザインの4大原則はデザイナーの方でなくても意識することで写真や図を使ったプレゼンの資料作りなどにも生かされると思います。<br>ぜひ活用して伝わるデザインを目指してください！</p>

伝わるデザインに!!「デザインの4大原則」とは?

<p><span style="color:#222222">こんにちは！木下です〜</span><br><span style="color:#222222">私は2020年からインスタを使用し始めました。現在私はTwitterやLINEのように頻繁にインスタを使用するようになり、昔のインスタってどんな見た目だったんだろう？使いやすさは今と変わらずそのまま？という疑問が生まれたため、昔のインスタのUIデザインを調べて自分なりに分析してみることにしました！(それは違うよ！とか、こういう意図だったらしいよ！と教えてくださる方はぜひコメントで教えてください！)</span><br></p><h2 id="h9859cb6b50">ロゴ激変</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/fd935d1765c546a9a317e5b31f012df9/1651913822497-3flMxlUBs0.webp" alt=""><br>2016年、アプリアイコンが大幅に変更される。従来の「写真投稿」のイメージを一新するため、カメラにとらわれることなく様々な写真な動画が共有される場をイメージしたロゴに変わった。<br>まずはアプリアイコンを見ていきます！<br><br>旧アイコンは立体的な絵でシャドウが多く、どこか暗い雰囲気を持ちました。全体的な色味も落ち着いた配色になっているため、ビジネス向けな大人っぽさを感じます。しかし丸みがあるので、かっちりしすぎているような印象は持ちません。<br>旧アイコンのインスタをホーム画面で見た時のことを想像してみましたが、色が大人しく感じるため、周りのアイコンの色に埋もれてしまいそうだと思いました。<br><br>新アイコンはひと目でカメラであるとわかり、視認性の高いシンプルな形であると言えます。旧アイコンの立体的な絵を、線だけで表現するという発想ができるのが羨ましくも感じました。周りの色が彩度の高い明るい色のグラデーションになったことで、旧アイコンで感じた暗い雰囲気・ビジネス向けな大人っぽさを全く感じなくなりました。<br>若い人が好みそうで、アプリの内容も明るく楽しいものなんだろうかと、ユーザーに無意識に思わせることができる見た目であると感じました。オブジェクトに丸みがあるのはどちらも共通なので、デザインに意味がありそうですね。丸は、角がないため「優しさ」「柔軟性」「温かみ」を感じる図形です。安全であることや、気軽に使用できるといった意味を込めているのかもしれません。<br>まとめ：立体的なデザインから平面的なデザインに変わった！</p><h2 id="h8d632fb0d1">2010~2016年のヘッダーとフッターのデザインに注目してみた</h2><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c5f639f11e184de292cbcf4262809518/1651914092824-SUvDVbhvhv.webp" alt=""><br>これは<a style="color:inherit" href="https://blog.prototypr.io/the-future-of-instagram-and-its-inverted-ux-iceberg-4013b15368f6" target="_blank" rel="noopener noreferrer">On Instagram’s Inverted UX Iceberg</a>で掲載されていたインスタのホーム画面(index)のデザインの移り変わりの画像です。<br>どの時代もシンプルには変わりないのですが、今のインスタとは考えられないほど全くちがうデザインですね。<br>一つ一つ見ていきましょう！</p><h3 id="h54783bbddc">2010、2011年のデザイン</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b513b7dc3a7848abb6e77aadbecc348b/1651914463113-y7hdNyvGrt.webp" alt=""><br>2010年(左側)、2011年(右側)<br>上の2010、2011年のデザインは、ヘッダーとフッターにシャドウがかかっており、立体的で画面上にあたかも存在しているような見た目だなと感じました。しかしアイコン同様、暗めな印象を持ちます。<br>ヘッダーの「戻る」ボタンやフッターのそれぞれのボタンが大きく、それに伴いヘッダーとフッターの高さも増え、<strong>全体的にボタンが大きい</strong>です。スマホユーザーが増えている時代なので、当時は押せるとわかるようなデザインが流行っていたのかな？と勝手に想像しました。年齢関係なく使えそうな見た目ですね。<br>真ん中の投稿するボタンが盛り上がっていて、これがメイン機能のボタンであるとわかりやすいです。<br>フッターのホームボタンが家ではなく人のアイコンであることも、今と違いすぎていてびっくりしました(ホームではなくフィードとアイコンの下に記載されている)。フッターのアイコンは今のシンプルな形と比べると、どれも少しリアルに感じます。</p><h3 id="hb5c77e5e5f">2012年のデザイン</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/3a69d25bf0044f6cba2ccf2c604f9e3f/1651914585573-7YWnJIm0wZ.webp" alt=""><br>これは2012年のデザインです。ヘッダーとフッターの高さの幅が当初よりも短くなりました。フッターのボタンの<strong>アイコンは全体的に小さく変更</strong>され、形も少しシンプルになりました。<br>ヘッダーとフッターにシャドウはかかっていますが、当初よりも薄い影になっていると感じ、全体的にスッキリして見えます。<br>ただ、わかりにくいところも増えた印象を持ちました。2010・2011年のデザインはボタンのアイコンの下に補足文があったため、何のボタンかがひと目で分かったけど、2012年はアイコンの下の補足文がなくなり、ボタンを押さなければどこのページに飛ぶかがわからないと当時のユーザーは感じていそうだなと思いました。特に左から２番目のアイコン、私もどこのページに飛ばしてくれるボタンなのかがひと目でわかりません…。<br>フッターのボタンの見た目も、自分が今選んでいるページは黒い背景になってはいますが写真投稿のボタンが常に青色なため(目立たせるため？)、<strong>今何のページを選んでいるかが少しわかりづらい</strong>なとも思いました。2010・2011年よりも見た目はスッキリして見えても、2012年のデザインは使い勝手が悪そうだと感じます。</p><h3 id="h0fade3efc7">2013、2014年のデザイン</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/7769d91c4584476193cba3e2c887084a/1651914676318-d73MUSMmqb.webp" alt=""><br>2013年(左側)、2014年(右側)<br>2013、2014年のデザインです。ヘッダー・フッターにシャドウが消え、立体的ではなく、<strong>平面的なデザインになった</strong>ように感じます。<br>2012年のデザインとヘッダー・フッターの高さは変わらず、ボタンのアイコンの大きさが少し大きくなりました。視認性に配慮したのかもしれません。2014年(右側)のデザインでは、写真投稿ボタンのカメラのアイコンがシンプルな形になっていますね。<br>フッターのデザインの印象は2012年と変わらず、写真投稿ボタンに背景色があると今何のページを選んでいるかが少しわかりづらいなと思います。2014年(右側)のデザインは、写真投稿ボタンのカメラのアイコンが現在選んでいるホームの色と同じ白色になっていますが、なぜこのようにしたのかわかりません…；；。もっと写真投稿ボタンを目立たせたかったのかも、、？私はあまり良いものには思えませんでした。</p><h3 id="h789cc2e78c">2015、2016年のデザイン</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/991125316aef48a29f3f09d68aa4ac2d/1651914797364-relVvEgqHW.webp" alt=""><br>2015年(左側)、2016年(右側)<br>やっと見慣れたデザインが！！<br>2015年(左側)のデザインは、ヘッダーとフッターが<strong>今までで一番高さが低くなり、ボタンも小さくなりました</strong>。フッターの左から2番目のアイコンが、検索マークでお馴染みの虫眼鏡アイコンに変更されています。アイコンの形も微妙に変化しており、より正円に近い形に変更されているように思いました。全部のアイコンの形が正円に近い・収まるような形になったことで、<strong>統一感が出た</strong>ように感じました。プロフィールカードのアイコンが初めて人のアイコンに変わり、よりシンプルさが出たように思います。<br><br>2016年(右側)のデザインは、現在(2022年)のインスタのデザインの原点と言える見た目をしています。従来インスタで使用されていた深い青色がなくなり、<strong>白・黒・グレーといった無彩色のみのデザイン</strong>に変わりました。(通知の赤はアクセントカラー？)周りを無彩色にすることで、より<strong>写真を引き立たせるデザインになった</strong>と感じました。<br>フッターのデザインは、背景色の境界線が無くなったことで「ボタンっぽさ」が払拭されましたね。今選んでいるボタンは黒で塗りつぶしたアイコンに変わり、他はグレーの線画アイコンで目立たなくするようにしたのは革命なのではないかと感じます。<br>「写真投稿ボタンを一番目立たせる」ことをやめ「<strong>選んでいないボタンのアイコンは全て線画アイコンにする</strong>」ことで、写真投稿ボタンの主張がなくなりユーザーにわかりやすく、使い勝手の良いデザインに変わったのではないかと思いました。投稿のデザインでは、いいねやコメントのアイコンが大きくなり、より人と関わって欲しいという思いを表しているのかな？とまた勝手に想像してしまいました。<br><br>以上が、2010〜2016年のインスタのアプリアイコン・UIデザインを見た私の感想でした！<br>立体的なデザインが流行っていたり、流行りが終わって次のデザイントレンドに移行していく様子を見れて楽しかったです。</p><h3 id="ha6f97e3c13">おまけ！2022年のヘッダー・フッターデザイン</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bcb03cfebad148a599ee52f29b11335e/1651915227313-MAAtGx8fWw.webp" alt=""><br>2022年ヘッダー・フッターデザイン<br>2022年現在のインスタのヘッダーとフッターです。なんと、ずっとフッターにあった写真投稿ボタンがヘッダーに移動しています！時代を重ねるごとにインスタの機能が増え、写真投稿ボタンの重要度が一番では無くなったのかもしれません。昔、写真投稿ボタンがあった場所は動画を見たり撮ったりする「リール」に飛ばすボタンに変わりました。アイコンの形も、丸く可愛らしい見た目になりましたね。<br>フッターのアイコンの色が、2016年のデザインのように、選んでいないアイコンはグレーではなく、<strong>全部同じ色に統一</strong>されています。タップした後の変化が目に見えてわかれば、「今このアイコンを選んでいる」ということがわかりやすいから、統一感を出して同じ色にしたのかな？と思いました。</p><h2 id="h5d34104d8c">まとめ！</h2><p>インスタのUIデザインを調べてみたことで、<strong>時代に合わせたデザインや機能に定期的に変えていくことで、長く使用され愛されるアプリであり続けられる</strong>のかなと感じました。<br>私は今のデザインのインスタを使い慣れているため、昔のデザインを見たことで、今のデザインがどれほどシンプルで統一感があるかを知ることができましたし、今のデザインがあるのは昔のデザインがあってこそなのだと思いました。今よりもっと良いものにする！というインスタのデザイナーさんたちの熱い意志を感じることができました。<br>↓こちらのサイトで、より詳しくインスタの歴史を知ることができます！<br>https://mag.ibis.gs/marketing/sns/instagram_190423/<br>最後まで読んでくださりありがとうございました！</p>

8の倍数(偶数有)のデザインと奇数のデザイン比べてみた。

伝わるデザインに!!「デザインの4大原則」とは?

昔のインスタのUI調べてみた！