--- title: プログラミング講座 #9 デザインの基礎 tags: author: [ZOI_dayo](https://www.docswell.com/user/ZOI_dayo) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/VJN5ZLX378.jpg?width=480 description: 部活用に作成した資料です。 デザインを軽くですが解説しています 知っておくとめちゃくちゃ便利なので、ぜひ一度読みましょう published: May 07, 23 canonical: https://www.docswell.com/s/ZOI_dayo/KENXPR-Programming-09 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/VJN5ZLX378.jpg) プログラミング講座 #9 デザインの基礎 @ZOI_dayo # Page. 2 ![Page Image](https://bcdn.docswell.com/page/YE9YZ48PJ3.jpg) デザインのセンス デザインはセンスがいるようなイメージがありますが、そうじゃないです 絵が描けるとか、色を見分けられるとか、そういう技能系のことじゃなくて、 どちらかというと「こうやれば見やすい・読みやすい」という豆知識集だと思います と言っても僕もあまり得意なわけではないので基礎の基礎ですが ... # Page. 3 ![Page Image](https://bcdn.docswell.com/page/GE861Q8X7D.jpg) 想定 基本的に、Webページかポスターあたりを作ることを想定しておきます もしポスターやロゴ作りたいならFigma (お金があればAdobe Illustrator) などがいいです Webページ作りたいなら普通にVSCodeでHTMLとCSSを書きましょう 動画作る場合、DaVinci Resolve (お金あればAdobe Premiere Pro) がおすすめです WindowsならAviUtlもありです、Macの人はiMovieはやめておきましょう...逆に大変です # Page. 4 ![Page Image](https://bcdn.docswell.com/page/LEL9QXRNJR.jpg) まず、デザインとは? デザインは、「伝えたいことをうまく伝える技術」です 「なんか色をつけること」とか「いっぱいデコレーションつけること」ではないです ... そのため、デザインをする側は「何を伝えたいか」を自覚しておくのが大切です でもそんなに難しく考える必要はなくて、たとえば「イベントに来てほしい」とか そのくらいで大丈夫です あとは、いい感じのデザインでそれを伝わりやすくするだけです # Page. 5 ![Page Image](https://bcdn.docswell.com/page/4JMZ1LRQEW.jpg) デザインのルール デザインにはいくつかルールみたいなものがあります 当然、それを破っても良いデザインを作ることはできますが、少し難しいので 初心者のうちはあまりお勧めしません 簡単なルールばかりなので、少しずつ紹介していきます # Page. 6 ![Page Image](https://bcdn.docswell.com/page/PJR6LKRK79.jpg) ルール: シンプルにする まずは最低限に絞りましょう 人はあまり何も考えずにポスターやWebページを見ているわけです その状態で、虹色の文字などを見せられると、情報量の多さに脳がストップしてしまいます せっかく作ったデザインで脳に負担をかけてしまっては、伝えたいことも伝わりません なので、最初はできるだけ要素を削りましょう # Page. 7 ![Page Image](https://bcdn.docswell.com/page/PEXMWLR57X.jpg) ルール: 色を決める 色は、「白黒系+1色(+アクセント1色)」にすると失敗しにくいです さっきの「シンプルにする」にも繋がりますね この一色を決めることでテーマカラっぽくなって、デザインに統一感ができます 白黒+1色でほんとにデザインできるの? となりますが、たとえばYouTubeなら、 よく見るとほとんどの部分が白黒か赤でできていると思います Twitterも白黒+水色ですね このくらいで十分なことがほとんどです # Page. 8 ![Page Image](https://bcdn.docswell.com/page/3EKGVLRRJD.jpg) ルール: 原色は避ける PCでの色は、RGBと言って、Red、Green、Blueの色の三原色で作られています 色の表記法として、これを0~255に分けて、2桁ずつの16進数にして繋げたものがあります たとえばRが100%、Gが0%、Bが0%の時、#FF0000 で、(255, 0, 0)とも表します このような、Rだけ、Gだけ、Bだけ、と言った色は、少し古そうな雰囲気を出してしまうことがあります たとえばもう少し薄くするとか、少しずらしてみるとかしたほうがいいです # Page. 9 ![Page Image](https://bcdn.docswell.com/page/L73NM38G75.jpg) ルール: 原色は避ける これが(255, 0, 0)、つまり純粋な赤です 少し目がチカチカするような気がします(主観ですが...) これよりも、(230, 50, 53)と少しずらしたほうが落ち着いて見えませんか? もちろん、目指すイメージ(落ち着き/活動的)に合わせて調整してください # Page. 10 ![Page Image](https://bcdn.docswell.com/page/87DW64MNJG.jpg) ルール: 余白を開ける たとえばこのスライド、フチ10%くらいには文字が置かれていませんね また、タイトルと本文の間や、本文の行同士の間にもある程度のスペースがあります このように、要素同士(フチも含めて)にしっかりと余白を取らなければ、窮屈な印象を 与えてしまいます 余白は、たまたま余るものではなく、めちゃくちゃ重要なんです # Page. 11 ![Page Image](https://bcdn.docswell.com/page/VJP9YMRNE8.jpg) ルール: 余白を開ける 余白なしで、最大限文字を入れようとするとこうなってしまいます これでは大変です 流石に窮屈ですね... 読みにくい...(頑張って読んでくださいw) また、さっきのスライドの方を見てもらったほうがわかりやすいと思いますが、できるだけ、要素同士の縦横を揃えた ほうがいいです さっきのスライドで、タイトルの左端と本文の左端がほとんど同じ位置からのスタートになっているのがわかりますか ? 対称性とか、縦横の揃い方とか、そういうのは大抵「きれいに見せる」効果があります 縦横に微妙にずれているデザインは多少不安定な印象を与えるので、初心者がやるとただガタガタなだけになりがちです たとえばこんな感じですね なんで今右にずらした!?みたいになってしまいます こうやって階段状にしてみるとか、まあうまくやればきれいになると思いますが、まずは定石のような 失敗しないやり方をやってみましょう # Page. 12 ![Page Image](https://bcdn.docswell.com/page/2EVMG9RYEQ.jpg) ルール: 文字を加工しない フォントは、まあまあすごいデザイナーの作品です なので、普通に使った時にきれいに見えるようになっています それを こうやっ て傾け てみた り、 鏡文字を入れてみたり、 急に文字が読みにくくなってしまいます、できるだけやめましょう # Page. 13 ![Page Image](https://bcdn.docswell.com/page/57GG8ZMW7L.jpg) ルール: デフォルトの機能は使わない これは主にMicrosoft Officeとかでですが、デフォルトの「3D文字」とか 「ページ遷移」とか「3Dフラグ」的なものはあまり使わないほうがいいです というのは、あれはOfficeができた頃からあるやつで、「当時は凄そうに見えた」機能です 当時は3DCGもあまりなかったので、「コンピュータすご、3Dできるんだ」だったわけです ただ今では、ただ3Dにするだけではすごいとは思われず、逆に古い印象を与えてしまうこともあるの で、できるだけ控えたほうが吉です もちろんうまく使えばいいとは思いますが... # Page. 14 ![Page Image](https://bcdn.docswell.com/page/4EQX9LRQ7P.jpg) ルール: 文字サイズを変える パンフレットなどを作っている時、おそらく重要な内容とそうでない内容があるはずです ここで、重要なものは大きく太字に、そうでないものは小さく細字にしてしまいましょう ちらっと見ただけの人に何を伝えたいか、というのを重視したらいいです # Page. 15 ![Page Image](https://bcdn.docswell.com/page/KJ46XD8Y71.jpg) ルール: 似たものは近くに置く 当たり前といえば当たり前ですね たとえばレストランのメニューではピザとパスタはそれぞれまとめて書いてあります 何かを探していてパッと見た時、どこを見ればいいのかわかるか ? ということを考えれば良いと思います # Page. 16 ![Page Image](https://bcdn.docswell.com/page/LE1VNZ2N7G.jpg) ルール: 背景色と文字色に注意する 暗い背景に暗い文字を置いたときは、このようにとても見にくくなってしまいます なので、できるだけ背景色と遠い色がいいです ただ、現実的には文字は白黒の2択ですけど... なお、背景が写真などで、1色ではどうしようもない時は、たとえば などを使うことで誤魔化せる場合も多いです あと個人的には すりガラス(半透明・背景ぼかし) 縁取りを使う時は、結構太めの方がきれいになります ドロップシャドウ とかも万能で好きですね # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GEWL492M72.jpg) ルール: フォントには気をつける フォントには大きく2種類あります このスライドでも使っているゴシック体(sans-serif)と、明朝体(serif)です 明朝体はスッキリしていて本文に使うと読みやすいです、あと高級感あります ゴシック体はタイトルなどにも使えて、なんかフレンドリーな感じがするかな ...? 最近のIT企業のロゴとかはゴシック体が多いと思います あと、太さにも注目です 太い文字と細い文字では見やすさも印象も違うので、うまく使い分けましょう # Page. 18 ![Page Image](https://bcdn.docswell.com/page/47ZM29DME3.jpg) 他のポイント いいデザインをできるようになるには、まずいいデザインをいっぱい見るのが大切です 何がいいデザインか、というのは個人の判断で大丈夫です なんかすごそう、でもいいし、言いたいことがスッと伝わってくるならきっといいデザインなのだと思いま す ゲームの配信でもいいし、好きな企業でも、YouTubeでも、道端の看板でも、 なんでもいいです # Page. 19 ![Page Image](https://bcdn.docswell.com/page/YJ6NVK15JV.jpg) おすすめデザイン 僕の気に入ったものをいくつか紹介します - - 第73回灘校文化祭「SAIL AWAY」 https://fest2019-clone.mkobayashi.me/ 僕がWebデザインを始めたきっかけです この年から灘のWebサイト・パンフレットの質が大幅に上がりました 雪原てとら/映像学区 https://www.youtube.com/@eizo-gak おしゃれな動画を作っていらっしゃるYouTuberです カメラの話もあって面白いです # Page. 20 ![Page Image](https://bcdn.docswell.com/page/GJ55DP4GJ4.jpg) おすすめデザイン PC系YouTuberではこんな人もいます - - ららぽん https://www.youtube.com/@rarapon 自作キーボードの動画を多く投稿されている方です 映像もきれい ハク/pc3589 https://www.youtube.com/@pc3589 自作PCとかガジェット系の方です # Page. 21 ![Page Image](https://bcdn.docswell.com/page/LE3NM3GPE5.jpg) おすすめデザイン 本買うのもいいです おすすめできるほど知らないのですが...とりあえず、 「デザイン入門教室」という本は間違いなく良いです https://www.amazon.co.jp/dp/479735142X 僕もロッカーに入れておくつもりなので、ぜひパラっとでもいいので読みましょう # Page. 22 ![Page Image](https://bcdn.docswell.com/page/8EDW64137G.jpg) まとめ デザインの話でした デザインはWeb開発でもポスター作成でも動画編集でもゲーム開発でもプレゼンでも 使うので、知っておいて全く損はないはずです! これを軽く知っておくだけで、めちゃくちゃいいデザインが作れるようになります このシリーズでは珍しく、他の回を見なくても理解できる回なので、ぜひ他の人にも 宣伝してください! () # Page. 23 ![Page Image](https://bcdn.docswell.com/page/V7P9YMQPJ8.jpg) 終わり