配色の基本【体験記】2023年8月19日いいねこの記事でわかること『けっきょく、よはく。』で有名なingectar-eさんが制作したFullmeの体験記です。|【先行リリース中】デザインスクールこんにちは、涼太郎です。この記事は、デザイン書籍『けっきょく、よはく。セットコースの体験記録です。5の範囲で僕が学んだことのまとめをしていきます。Fullmeに興味があってこれから挑戦してみようと思っている方でもネタバレにならずに楽しんでもらえるように、かつ僕自身の振り返りに役立つような内容にしていきたいと思いますので、ぜひ最後までお付き合いくださいね。配色の基本このレッスンから学んだこと自主課題Webデザインを学びたいなら、Fullmeしよう。こちらの書籍がおすすめ。Designコースの第5回目は「配色」がテーマです。レッスンは以下の内容です。色のイメージについて配色の参考サイト色の選択。メインの色やアクセントの色に何を選ぶかによって伝わる印象が変わります。基本的ですが今回もとても重要なテーマですね!このレッスンから学んだことRGBとHEXWebデザインで用いる色の表現の仕方には主にRBGとHEXがあります。RGBはRed/Green/Blueの略で、私たちが見るディスプレイがそれぞれの色に発光することによってその組み合わせで様々な色が見えるという仕組みですね。numberの色表現です。16進数によって色を表現する方法で、0~9とA~Fを使って6桁で表します。...って、これって#FFFFFFとかの書き方のことですね。これHEXと呼ぶんですね、知りませんでした。涼太郎(255,255,255,0)って書くのが面倒なときに#FFFFFFって書いてた。配色と比率と色のイメージこのブログの配色は、ベースが薄い青みがかったグレー、メインが青に寄った濃いグリーン系の色、アクセントが少し緑色に寄った黄色となっています。ブログのテーマに採用しているSANGOは「70:25:5」の比率に沿って配色をしてくれていると思うので、その面でもとても気に入っています!左からベースカラー(#ECF0F4)、メインカラー(#006865)、アクセントカラー(#EDEA3D)です。本文の背景が白いから、モバイルで見てくれている人にはベースが白になっているかもね。「癒し、安らぎ、調和、安定」をイメージする緑色を濃くすることによって落ち着いた感じを出したくてこの色にしました。このブログはトップ画像にもあるように辞書をイメージして作っていて、僕の経験したことや頭の中を整理するための場所として記録するのが目的だったのであまり派手すぎない色を選んでいます。今回のレッスンでは、「サービス内容に合った配色に変更してデザインを完成させよう!」ということで、架空の企業サイトのファーストビューが提供されるのでそれを自分なりに改善する課題です。ポイントとしては課題に指定されている「力強い印象を与えられる色を考える」「インパクトのある色を意識する」「三つの配色構成を考える」を念頭にフォント選定や色作りをしていきます。使用フォント「力強い」をキーワードにフォントを選考しました。色使い色は、ingectar-eさんの書籍『いろいろな、いろ。配色に着目したデザインレイアウトの本』を参考にしました。今回はジムの中でも力強さやインパクトをキーワードとしているため、負荷高めの本気め筋力系をイメージした配色を選びました。ベースとして白(#FFFFFF)、メインカラーが情熱の赤(#CF262F)、アクセントとして黒(#352F2E)、そしてサブカラーとしてオレンジ系(#E17240)を使用しています。画像はサンプルのものをそのまま使用しています。工夫したところとしては、彩度を少し落として黄色を乗せることでどことなく真剣味を出すようにしたのと、コントラストを高めるというか黒い部分をより黒く強調することでこれもまた本気で結果にコミットできそうな雰囲気を醸すのに成功しているのではないでしょうか。元の画像アレンジした方そのほか工夫したところ下の画像内で工夫したところが二つあります。整えるためにアシストの線を引いてみました。1つめは各要素を並行にすることです。サンプルの画像内では「無料体験後のご入会で」の四角と「初月」の四角など位置にズレがあって気になったのでそれを揃えました。他の要素もできるだけ並行になるように整えてみました。2つめは「50%OFF!」の文字にドロップシャドウを加えたことです。今回この文字部分は特に強調したい部分かなと思いまして、何もしないと他の文字に埋もれてしまう感じがしたので違和感の無い程度に差別化してみました。最後に、作成したページの画像を載せておきます。Webデザインを学びたいなら、Fullmeしよう。色が与える印象によって人の行動にまで影響を与えるなんてすごいですよね。Fullmeで学んでいると今までは何となく目にしていた街中の広告を見る目が変わってくるのがわかります。|【先行リリース中】デザインスクールこちらの書籍がおすすめ。涼太郎イギリスと革製品とSFが好きです。iPadでお絵描きしたりパワポデザインしたり。WILFRED3【Fullme】無料で学べるFigmaおためし授業、大変よい。ダレスバッグ同じカテゴリーの人気記事1【Fullme】無料で学べるFigmaおためし授業、大変よい。イギリスと革製品とSFが好きです。iPadでお絵描きしたりパワポデザインしたり。配色の基本このレッスンから学んだこと自主課題Webデザインを学びたいなら、Fullmeしよう。こちらの書籍がおすすめ。