すべてのカテゴリ

今日は色彩検定の学習で、インテリアにおける色の心理効果・視覚効果について学びました。色には「好き・嫌い」だけでなく、人の感じ方や空間の広さ、温度感まで変える力があります。Webデザインでも配色はとても重要なので、今後の制作にも活かせそうな内容でした！🌞 暖色・寒色色には暖かさや涼しさを感じさせる効果があります。🔶 暖色赤オレンジ黄色→ 温かい・活発・親しみやすい印象🔷 寒色青水色青緑→ 涼しい・落ち着いた・清潔感のある印象最近ではLED照明でも光の色を変えることで、暖色・寒色を演出できます。ただし、寒い部屋に暖色暑い部屋に寒色を使う場合は、壁全体など広い面積ではなく、小物や照明など部分的に取り入れる方が自然だと学びました。🎨 進出色・後退色色には距離感を変える効果もあります。🔴 進出色→ 手前にあるように感じる色🔵 後退色→ 奥にあるように感じる色例えば、部屋の奥側の壁に後退色を使うと奥行きを感じ、反対に進出色を使うと壁が近く感じられます。限られた空間でも、色の使い方次第で広さの印象が変わることを知りました。🏠 膨張色・収縮色明るさによって空間の広さも変わって見えます。☀️ 高明度色（明るい色）→ 空間が広く感じる🌑 低明度色（暗い色）→ 空間が引き締まり、狭く感じるそのため、床・壁・天井を明るい色でまとめると、開放感のある空間になります。⚖️ 軽い色・重い色色には「軽さ」「重さ」の印象もあります。これは明度によって決まります。🌿 高明度→ 軽快・爽やか🌳 低明度→ 重厚・落ち着いた印象また、天井 → 壁 → 床の順に少しずつ暗くすると、自然で安定感のある空間になります。逆に、

今日は色彩検定で学ぶ「面積効果（面積の効果）」についてまとめます。同じ色でも、「どれくらいの面積で使うか」によって、見え方や印象は大きく変わります。例えば、鮮やかな赤。ワンポイントで使うとアクセントになってオシャレな印象ですが、画面いっぱいに赤を使うと、とても強く刺激的な印象になります。逆に、落ち着いたグレーでも、大きな面積で使うことで上品で洗練された雰囲気を演出できます。Webデザインでも、この考え方はとても重要です。例えばホームページでは、背景色（ベースカラー）メインカラーボタンや見出しのアクセントカラーというように、色の役割と面積を意識して配色することで、見やすくバランスの良いデザインになります。「好きな色をたくさん使う」のではなく、どの色を、どのくらいの面積で使うかを考えることが、伝わるデザインへの第一歩です。色彩検定では色そのものだけでなく、このような「色の使い方」まで学べるので、Web制作やバナー制作、チラシ作成などにもすぐ活かせる知識ばかりです。これからも、実際のデザイン制作と結び付けながら学習を続けていきたいと思います😊今日の学び💡✅ 同じ色でも面積が変わると印象が変わる✅ 大きな面積ほど色の印象は強くなる✅ 配色は「色」だけでなく「面積のバランス」も重要✅ Webデザインでも背景・メイン・アクセントの役割を意識すると見やすくなる

本日は**「住空間のカラーコーディネーション」**について学習しました。Webデザインだけでなく、インテリアデザインでも色はとても重要な役割を持っています。色の使い方ひとつで、居心地の良さや使いやすさ、空間の印象が大きく変わることを学びました。インテリアの色彩は4つの考え方が基本住まいの色彩計画は、次の4つの視点から考えることが基本になります。① 生活を包む色彩住む人が毎日過ごす空間だからこそ、落ち着きや安心感を与える色選びが大切です。② 目的や用途に応じた色彩部屋の役割によって適した色は異なります。例えば、集中したい部屋やリラックスしたい部屋など、用途に合わせて配色を考えます。③ 住むための色彩見た目の美しさだけではなく、生活しやすさや快適性も考慮した色彩計画が重要です。④ 利用者に応じた色彩子どもや高齢者など、利用する人に合わせて見やすさや安全性にも配慮した色選びが求められます。空間のゾーニングと配色のポイント住宅は用途ごとに大きく3つの空間に分けられます。1. パブリック空間家族や来客が利用する共有スペースです。玄関廊下・階段リビングルームダイニングルーム和室明るく清潔感があり、誰でも心地よく過ごせる配色が向いています。2. プライベート空間個人がゆっくり過ごすための空間です。ベッドルーム子ども部屋リラックスできる色や、利用する人の年齢・好みに合わせた色使いが大切になります。3. サービス空間生活を支える機能的な空間です。キッチンバスルーム洗面所トイレ清潔感や明るさを感じられる色を取り入れることで、快適で使いやすい空間になります。今日の学び色は「好きな色を選ぶ」だけではな

本日も色彩検定の学習を進めました。今回は、**インテリアデザインにも活かせる「視覚効果」**について学びました。同じ色でも、周りの環境や使う面積によって見え方が大きく変わることを知り、とても興味深い内容でした。面積効果同じ色でも、色を使う面積が大きくなるほど、明るく鮮やかに見えるという現象です。例えば、小さな色見本では落ち着いた色に見えても、その色を壁一面に使うと、想像以上に明るく鮮やかに感じることがあります。💡 インテリア例小さなサンプルで選んだ壁紙が、実際に施工すると明るく感じることがある。大きなソファやカーテンは、色選びを慎重にすると失敗しにくい。色の対比周囲の色によって、色の見え方が変化する現象です。ドアや家具の色も、壁や床など広い面積の色の影響を受けて印象が変わります。💡 インテリア例白い壁の前では家具が濃く見える。濃い壁紙の前では、同じ家具でも明るく見えることがある。色の同化周囲の色に引っ張られて、色が近づいて見える現象です。例えば、タイルやレンガでは、目地の色によって全体の印象が変わることがあります。💡 インテリア例白い目地なら明るく清潔な印象。グレーの目地なら落ち着いた印象。補色残像鮮やかな色をしばらく見た後に白い壁を見ると、反対側の色（補色）が残像として見える現象です。有名な例として、病院の手術室では血液の赤色による補色残像を抑えるため、壁が薄い緑色になっていることがあります。💡 インテリア例アクセントカラーを使う際は、長時間過ごす空間での見え方にも配慮すると、より快適な空間づくりにつながります。今日の学び色は単体で見るだけではなく、面積周囲の色見る時間によっ

本日はデモサイトの制作を進めました！今回は主に「COMPANY（会社概要）」と「CONTACT（お問い合わせ）」セクションのPCデザイン部分を制作しました。COMPANYセクションでは、会社情報が見やすく伝わるように、写真と会社概要を左右に配置したレイアウトを採用しています。情報量が多くなりがちな会社概要ですが、余白や罫線を調整しながら、シンプルで見やすいデザインを意識しました。また、CONTACTセクションでは、「お問い合わせ」「LINEクーポン」「資料請求」の3つの導線をカード形式で整理しています。サイトでは、お客様によって求めている情報が異なるため、・まずは相談したい方・LINEで気軽に情報を受け取りたい方・資料を見て検討したい方それぞれが迷わず目的のページへ進めるような導線設計を意識しました。まだPC版の制作段階ですが、少しずつサイト全体の形が見えてきて完成が楽しみです！今後はスマートフォン表示への対応を行いながら、ホバーアニメーションやスクロール時の演出なども追加し、より見やすく使いやすいサイトへ仕上げていきたいと思います。引き続き頑張ります！

普段、洋服やインテリア、パッケージ、Webデザインなどで何気なく目にしている「柄」。「チェック柄」「花柄」とひとまとめに呼んでしまいがちですが、調べてみると、それぞれに名前や特徴があります。今回は少し踏み込んで、代表的な柄から「名前は知らなかった！」という柄までまとめてみます。① チェック柄だけでもこんなに違う「チェック」と呼ばれる柄にも、実はいろいろな種類があります。ギンガムチェック白ともう1色を使い、同じ幅の縦横の線を重ねたチェック。シンプルで、爽やか・かわいらしい印象があります。タータンチェック複数の色や太さの異なる線を重ねた柄。スコットランドの伝統と深く関わり、クラシカルな雰囲気があります。グレンチェック細かな格子を組み合わせた落ち着いたチェック。スーツやジャケットなどにも多く、上品で知的な印象です。千鳥格子（ハウンドトゥース）鳥が飛んでいるようにも見える、ギザギザとした形が連続する柄。モノトーンで使われることも多く、クラシックでシャープな印象があります。アーガイルひし形と斜めのラインを組み合わせた柄。ニットや靴下などでおなじみですね。同じチェック系でも、かなり雰囲気が違います。② ストライプにも名前がある線が並んだだけに見えるストライプも、線の太さや間隔によって呼び方があります。ピンストライプ針のように細い線が並ぶ柄。スーツなどに使われ、シャープで知的な印象。チョークストライプチョークで線を引いたような、ピンストライプより太く少しぼんやりした線。マルチストライプ複数の色や異なる太さの線を組み合わせたストライプ。単純な縞模様でも、線の太さ・間隔・色数で表情が変わるんです

本日は、現在制作を進めているWebサイトの「店舗紹介」セクションをHTML・CSSでコーディングしました。今回は、デザインカンプをもとに、レイアウトや装飾を細かく再現することを意識して制作を進めました。実務を想定したコーディングを行いながら、HTMLの構造やCSSのレイアウト、画像の配置方法など、多くのことを学ぶことができました。今回制作した内容今回作成したのは、店舗の魅力が伝わる「店舗紹介」セクションです。✔ HTMLで構造を設計まずはHTMLでレイアウトを組みました。セクションタイトル左側の店舗内観写真右側の店舗外観・相談スペース吹き出し特徴カードデザインだけを見るとシンプルに見えますが、実際は見やすく保守しやすいHTML構造を考えながら作成しています。✔ CSSでデザインを再現CSSではデザインカンプに合わせて細かく調整しました。例えば…CSS Gridを使ったレイアウトFlexboxでアイコンと文字を横並びborder-radiusで写真の角丸position:absoluteで吹き出しを配置object-fitで画像サイズを調整transitionを使った画像アニメーション見た目だけでは分からない細かな調整もたくさん行いました。✔ 吹き出しを画像として重ねる今回のデザインでは吹き出しの形が特殊だったため、HTMLでは画像を配置し、CSSのposition: absolute;を利用して写真の上に重ねています。吹き出しの位置も何度も微調整しながら、デザインカンプに近づけました。✔ カードデザインも調整店舗の特徴を伝えるカードも制作しました。アイコンサイズ文字位置行間背景

配色の基本ルールについて学習しました！こんにちは🌸本日は色彩検定の学習で「配色の基本ルール」について勉強しました。ホームページやバナーを制作する中で、「なんとなく色を選ぶ」のではなく、「なぜその配色が良いのか」を説明できることはとても大切です。配色とは？配色とは、2色以上の色を組み合わせて新たな効果を生み出すことです。配色のルールを知ることで、感覚だけではなく客観的に色を判断できるようになります。その結果、目的に応じて色を使い分けられるようになり、より効果的なデザインにつながります。---配色の基本ルール配色を調和させるためには、**「統一」または「変化」**のどちらかを意識することが基本になります。 統一感を重視した配色色相に共通性がある配色です。* 同一色相配色* 隣接色相配色* 類似色相配色これらは全体にまとまりが生まれやすく、落ち着いた印象になります。---統一でも対照でもない配色色相にやや違いがある配色です。* 中差色相配色統一感と変化のバランスを取りやすい配色といえます。---変化を重視した配色色相に対照性がある配色です。* 対照色相配色* 補色色相配色コントラストが強くなり、目を引きやすい配色になります。バナーや広告など、注目を集めたい場面でよく使われます。色相差について色相を基準に配色を考えるときは、使う色同士の「色相差」に注目します。PCCSの色相環では、色相番号24と色相番号1は隣同士として考えるため、最大の色相差は12となります。また、色相差は* 時計回り* 反時計回りどちらで数えても問題ありません。配色を考えるときのポイント色相を基準に配色を考える場合、

今日は、現在制作中のデモサイトのファーストビュー（FV）の写真を変更しました✨今回は、“暮らしの心地よさ”や“余白感”が伝わるような住宅イメージの写真に調整しています！写真が変わるだけでも、サイト全体の空気感や印象がかなり変わるので、FVは特にこだわりながら制作しています☺️また、このデモサイトは写真や文章を差し替えることで、さまざまな業種向けにアレンジできる構成になっています！そして本日の色彩検定では、「視細胞の種類」について学習しました👀人の目には、光を感じ取るための視細胞があり、明るい場所で働く「錐体（すいたい）」暗い場所で働く「杆体（かんたい）」の2種類があります。さらに錐体は、どの波長の光を主に感じるかによって3種類に分けることができます！S錐体短波長の青い光を感じるM錐体中波長の緑の光を感じるL錐体長波長の赤い光を感じる視細胞の分布視細胞には「錐体細胞」と「杆体細胞」の2種類があり、網膜上での分布にも偏りがあります。錐体は中心窩にピークがあり、そこから10°付近まで密集しています。そのため、色や細かい形を見ることに適しています！一方で杆体は、錐体よりも数が多く、中心窩から20°付近に分布のピークがあります。杆体は暗い場所でも働くため、夜間や暗所での視覚に重要な役割を持っています👀人の目って、普段当たり前に使っているけど、かなり精密な仕組みになっていて面白いですね✨

本日のココナラブログは、色彩検定の学習内容です✨今日は「照明」について勉強しました💡① 白熱ランプ（白熱電球・ハロゲン電球）白熱ランプは、色温度約2800Kの黄み〜赤みがかった暖かい光が特徴です。光の量を自由に調整できる「調光」が可能で、・白色塗料が塗られたタイプ→ やわらかい光・透明なガラス球タイプ→ キラキラした装飾的な光など、種類によって見え方が変わることを学びました！また、ハロゲン電球は白熱電球の一種で、・より明るい・寿命が長い・演色性が高いという特徴があり、宝飾品・衣料品・食品などの商業照明にも使われているそうです✨② 蛍光ランプ蛍光ランプは、光色の種類が豊富で、白熱ランプより効率が良く寿命も長い照明です！さらに、消費電力が小さく経済性にも優れているとのこと☺️JISでは演色性によって3つに分類されているそうで、・普通型→ 価格が安い・高演色型→ 美術館や博物館などに使用・3波長域発光型→ 省エネルギーと演色性を両立した現在主流のタイプなど、用途によって使い分けられていることを学びました🌸普段何気なく見ている照明にも、色の見え方や印象に関わる工夫がたくさんあることを知れて面白かったです✨続きはまた明日学習していきます☺️

本日のココナラブログは、色彩検定の学習内容の続きです✨今日は「減法混色」について学習しました！減法混色とは、フィルターなどを重ねた時に、元の色より暗い別の色に見える混色のことです。これは、光がフィルターを通過する際に、特定の波長の光が吸収されることで起こるそうです！また、私たちが普段見ているスマホやPCの画面の色は、RGB（赤・緑・青）の3色の光の強さを変えることで表現されています📱✨テレビやモニターを拡大すると、RGBの小さな点が並んでいるそうで、・赤く見える部分 → Rが強く発光・黄色く見える部分 → RとGが強く発光・白く見える部分 → RGBすべてが強く発光しているとのこと！逆に、RGBが発光していない部分は黒く見えるそうです。さらに、雑誌やポスターなどのカラー印刷には、「減法混色」と「併置加法混色」の両方の原理が使われていることも学びました🌈普段当たり前に見ている色にも、たくさんの仕組みが隠れていて面白いです☺️

前回は、オストワルトの色彩調和論について学びました。オストワルトは、「調和は秩序に等しい」という考え方を示していました。では、「美しい配色」をもっと客観的に判断することはできないのでしょうか？今回取り上げるのが、ムーン＆スペンサー（Moon & Spencer）の色彩調和論です。色の組み合わせを「なんとなくきれい」で終わらせず、色同士の関係から調和・不調和を考え、さらに配色の美しさを数値で表そうとしたところが興味深い理論です。ムーン＆スペンサーとは？ムーンとスペンサーは、1940年代に色彩調和について研究したアメリカの研究者です。彼らは、マンセル表色系をもとに色同士の関係を考え、色相・明度・彩度それぞれの差によって、調和する組み合わせと不調和になる組み合わせを分類しました。ポイントになるのが、「色同士がどれくらい離れているか」という考え方です。色が近ければ必ず調和する、遠ければ必ず不調和になる、という単純なものではありません。その「差」によって、調和する領域と不調和になりやすい領域が存在すると考えました。「調和」と「不調和」の領域ムーン＆スペンサーは、色同士の差を大きく、同一（Identity）類似（Similarity）対比（Contrast）という調和する関係と、その間に存在する**曖昧な関係（Ambiguity）**に分けて考えました。ここが重要なポイントです。① 同一（Identity）色同士の差がほとんどない関係です。非常に近い色なので、自然なまとまりが生まれやすくなります。例えば、「ほぼ同じ明るさの青」「わずかに違うグレー」など。変化は小さいものの、統一感を

今回は色彩検定1級の学習から、**「オストワルトの色彩調和論」**についてまとめます。配色を考えていると、「この2色はなんとなくまとまって見える」「色はきれいなのに、組み合わせると少し違和感がある」と感じることがあります。では、そもそも**「調和する色」にはルールがあるのでしょうか？**この色彩調和について、一定の秩序や法則から説明しようとしたのが、ドイツの化学者ヴィルヘルム・オストワルトです。オストワルトってどんな人？ヴィルヘルム・オストワルトは、ドイツで活躍した化学者です。化学の分野で大きな功績を残した人物ですが、色についても研究を行い、独自のオストワルト表色系を考案しました。そして色彩調和について、「調和は秩序に等しい」という考え方を示しました。つまり、ただ感覚的に「きれいな色を組み合わせれば調和する」のではなく、一定の規則性を持った色同士には調和が生まれると考えたのです。まず知っておきたい「オストワルト表色系」色彩調和論を理解するには、オストワルト表色系について少し知っておく必要があります。オストワルトは色を大きく、純色（F）＋白（W）＋黒（B）の混合によって考えました。そして、F ＋ W ＋ B ＝ 100％となるように色を表します。例えば同じ赤系の色でも、純色の割合が多ければ鮮やかな赤。白の割合が増えれば淡い赤。黒の割合が増えれば暗い赤。というように考えることができます。ここで重要になるのが、白と黒がどのくらい含まれているかです。オストワルトの色彩調和オストワルトは、自身の表色系の中にある規則的な位置関係の色を選ぶことで、調和する配色が得られると考えました。代表的な

本日も色彩検定の学習を進めました。今回はインテリアの配色構成について学びました。インテリアでは家具や壁、床など、さまざまな要素（エレメント）の色をバランスよく組み合わせることが大切です。インテリアエレメントとは？インテリアには、壁・床・天井・家具・カーテン・クッション・小物など、多くの要素があります。これらを**「インテリアエレメント」**と呼び、面積の大きさによって3つに分類します。🏠 ベースカラー空間の大部分を占める色。壁床天井など、部屋全体の印象を決める重要な色です。🛋️ アソートカラーベースカラーを引き立てる色。ソファカーテンテーブルラグなど、インテリア全体の統一感をつくる役割があります。🌿 アクセントカラー空間にメリハリや個性を与える色。クッション観葉植物アート小物など、小さな面積で空間の印象を引き締めます。色を決める順番インテリアの配色は、面積の大きいものから決めるのが基本です。ベースカラーアソートカラーアクセントカラーこの順番で考えることで、まとまりのある空間を作ることができます。ベースカラーは特に重要部屋全体の雰囲気はベースカラーで決まります。壁や床などは一度施工すると簡単には変更できないため、慎重に色を選ぶことが大切です。住宅では、R系（赤みのある色）YR系（黄みのある赤）Y系（黄色系）のオフホワイトや、落ち着いた低明度色が多く使われています。また、これらの色はマンセル表色系を用いて表現されます。今日の学びインテリアの色選びは、好きな色を自由に組み合わせるだけではなく、面積配色の順番空間全体のバランスを意識することが大切だと学びました。今後Webデザインでも、

本日は色彩検定の学習で、インテリアのカラーコーディネーションについて学びました。普段何気なく見ているお部屋も、実は色だけでなく、さまざまな要素が組み合わさって空間がデザインされています。例えばインテリアには、木材石材金属プラスチックなど、さまざまな素材が使われています。さらに、同じ木材でもツヤがある仕上げやマットな仕上げなど、**テクスチャー（質感）**によって空間の印象は大きく変わります。インテリアデザインを考える際のチェックポイント今回学んだ中で特に大切だと感じたポイントはこちらです。✅ 空間の使用目的✅ 空間の広さ・形態・スタイル✅ インテリアイメージの方向性✅ 色彩イメージの方向性と配色✅ 素材・テクスチャー・仕上げ方法✅ 照明の方法✅ 他の空間との調和これらを総合的に考えながらデザインすることで、統一感のある心地よい空間が生まれることを学びました。Webデザインにも共通する考え方今回勉強していて、「これはWebデザインにもそのまま活かせる」と感じました。ホームページ制作でも、誰に向けたデザインなのかサイト全体のイメージ色の組み合わせ写真や素材の雰囲気他のページとの統一感などを考えながら制作しています。インテリアもWebデザインも、「見た目がきれい」だけではなく、目的に合わせて全体のバランスを整えることが大切なのだと改めて実感しました。これからも色彩の知識を深めながら、より見やすく、心地よいデザインを制作できるよう頑張っていきます！

本日は、トップページが完成したデモサイトの全体イメージをご紹介します！これまでブログでは各セクションごとの制作過程を掲載していましたが、サイト全体のスクリーンショットはまだ掲載していなかったので、今回はまとめてご紹介してみました。今回のデモサイトは、ファーストビューABOUTNEWSSERVICECOMPANYCONTACTなどを1ページにまとめた構成となっています。また、写真や文章を差し替えることで、業種を問わずオリジナルサイトとして活用できるよう設計しています。「こんな雰囲気のホームページが欲しい」というイメージづくりの参考にもなれば嬉しいです✨トップページ完成↓↓色彩検定の勉強記録本日は「明順応」と「暗順応」について学習しました。順応とは、周囲の明るさに目が慣れることをいいます。明順応暗い場所から明るい場所へ移動した際に起こる現象です。比較的早く進み、数秒ほどで完了するといわれています。暗順応明るい場所から暗い場所へ移動した際に起こる現象です。暗順応には10〜15分ほどかかり、完全に順応するには約30分程度必要とされています。ロドプシンとの関係杆体（かんたい）に含まれる視物質「ロドプシン」は、光が当たると分解されます。そのため明るい場所ではロドプシンがほとんど存在しない状態になっています。そこから急に暗い場所へ移動すると、ロドプシンが再び合成されるまで時間が必要になるため、すぐには周囲を見ることができません。暗順応に時間がかかる理由は、このロドプシンの再合成が関係しているんですね。本日はここまで！

本日のブログは色彩検定の学習内容の続きです✨今日は・加法混色の三原色・混色でできる色・補色・併置加法混色・継時加法混色について学習しました！加法混色では、色を混ぜるほど明るくなっていくという特徴があります。長波長・中波長・短波長の光がすべて揃うと、無彩色の「白（W）」になるそうです✨また、R（赤）とC（シアン）のように、混ぜることで無彩色になる関係の色を「補色」と呼ぶことも学びました！さらに、小さな色点を高密度で並べることで、離れて見ると別の色に見える「併置加法混色」についても勉強しました🌈これは、ヨーロッパのモザイク画や、新印象派のスーラなどに代表される点描画にも使われているそうです！そして、色を塗り分けた円盤を高速回転させることで、別の色に見える「継時加法混色（回転混色）」についても学習しました✨短時間で切り替わる色の変化を、目が識別できなくなることで起こる現象とのことで、色彩の仕組みの奥深さを感じました☺️

本日は色彩検定はお休みして、LINEスタンプ制作を進めていました！今回は暑い日に使える「あづ〜い！」スタンプを作成してみました！最初は温度計やイラスト素材を使ったデザインも考えていたのですが、試行錯誤を重ねた結果、猫を大きく見せる文字を見やすくする暑そうな雰囲気が伝わるようにするという方向で調整していきました。汗マークや文字の位置など細かい部分も何度も修正しながら、ようやく納得のいく形になったと思います😊スタンプ制作はホームページ制作とはまた違った楽しさがあり、「どうすれば一瞬で意味が伝わるか」を考える良い勉強にもなりました。まだまだ制作途中ですが、おはようおつかれさまごはんまだ？さむいなど、日常で使いやすいスタンプも増やしていきたいと思っています✨完成したら実際に販売もしてみたいですね♪↓↓