ホラー映画は厳密な配色ルールによって視覚的に観客の感情を支配しています。
「暗闇」だけで怖がらせない！眩い光までもが恐怖に変わる！！
色彩設計が冴え渡っている伝説のホラー映画、集めてみました。

Lv.1【ミッドサマー】監督：アリ・アスター

ホラー映画の常識を覆す色彩設計で表現する「白い狂気」

カラー・ルール
「白」＝「白夜」という舞台装置。
「黄」＝「死」や「狂気」の象徴。「本能的な警戒アラート」を観客に投げかけている
「青」＝「共同体」や「服従」の象徴
「鮮やかな原色の花々」＝現実感の喪失の象徴

配色テクニック
スウェーデン旅行中訪れた「ホルガ村」の「夏至祭」に参加。白夜を舞台に、「狂気の村」の風習に巻き込まれていきます。
この映画は、ホラー映画の常識を覆す「過剰なまでの明るさ（画面全体の輝度（明るさ）がとても高い）」と「不自然なほどの色鮮やかさ」による色彩設計で、「恐怖（狂気）」が美しく表現された作品です。
常に明るい「白夜」の空は、「全てが白日の元に晒され、逃げることができない」という心理効果をもたらし、登場人物の役割やその運命に合わせてそれぞれの衣装に「色」が反映されています。

• 主人公：暗い色 ➔ 白 ➔ 鮮やかな原色（村との完全な一体化）
• 主人公の恋人：曖昧な色 ➔ 意志のない白 ➔ 濁った黄色（生贄）
• 友人たち：そのまま➔外の世界の色を脱ぎ捨てない（異物としての排除）

純白な画面に観客は常に眩しさを感じ、白い背景に広がる一筋の「赤色」は生々しく、美しく牧歌的な風景が逆に登場人物たちの狂気と絶望を際立たせる。その秀逸なコントラストが印象的です。
因みに、アリ・アスター監督はこの映画を「ホラーの皮をかぶった失恋映画である」と公言しています。

Lv.2【ヴィレッジ】監督:M・ナイト・シャマラン

「赤 vs 黄」画面の配色だけで観客を支配するカラー心理効果

カラー・ルール
「赤」＝【禁忌・怪物の色】（恐怖、興奮、侵入者）
「黄」＝【安全・防衛の色】（平穏、境界線）

配色テクニック
この映画には「2つの絶対的な色彩ルール」が存在します。
森に囲まれた隔離された村が舞台。村人たちは怪物に襲われないよう、境界線に黄色（安全・防衛）の染料を塗り、黄色のフードを被って生活していますが、逆に赤色（禁忌・怪物の色）は怪物を刺激する色として、村の中から徹底的に排除されています。

19世紀末の開拓地という設定を利用し、画面全体の彩度を極限まで落とし、「無彩色」な世界を展開。
その中に「パキッとした黄色」や「鮮烈な赤」が登場した瞬間、視覚的インパクトを数倍に跳ね上げてい流のです。
そして、画面に一瞬でも「赤」が映り込んだ瞬間、観客はセリフがなくても「あ、怪物が来る」「ルールが破られた」と直感することができるという意味を持った配色ルールで恐怖をコントロールしています。

さらに最大の配色の引き算として、主人公は全盲であるということ。また、主人公だけが見えている特別な色があること。
この配色テクニックには、「見えている者が盲目であり、見えない者こそが本質を見ている」という強烈なメッセージが隠れていると受け取ることもできます。

Lv.3【グリーンルーム】監督:ジェレミー・ソルニエ

「限られた色」がストーリーの状況変化と直結する、機能的で高精度な配色設計。

カラー・ルール
「緑(オリーブグリーン)」＝閉塞感・脱出不可能な停滞
「赤」＝生存本能を刺激する警戒標識
「黄色・オレンジ」＝突発的な暴力・事件の発生

配色テクニック
ネオナチの巣窟（ライブハウス）に閉じ込められたパンクバンドの脱出劇を描いたシチュエーション・スリラーです。
タイトル通り、舞台となる楽屋（グリーンルーム）や廊下は、不気味で汚らしい「緑」の壁や照明で表現されています。緑は本来リラックスさせる色ですが、ここでは「カビや病気、腐敗」を連想させる色として使われています。
そして、登場人物たちが「逃げられるかもしれない」と焦る瞬間や、凄惨な暴力が振るわれる瞬間だけ、不自然な「黄色（電球の生々しい光）」が画面を刺すように照らす。そのカラー対比がスリルや恐怖として観客に効果的に印象付けられます。

Lv.4 【シックス・センス】 監督:M・ナイト・シャマラン

「赤」が告げる死者たちのサイン

カラー・ルール
「赤」＝霊界からの干渉

配色テクニック
「1回目ではわからなかった伏線を確認するため、2回観てしまう」という現象が起きた有名な映画です。現実世界と霊的世界を視覚的に区別するため、徹底した色彩設計が施されています。
まず、全体的な色彩は冷たく、青やグレーを基調としたダークな色合いで統一。
その映像の中にパッと現れるわずかな「赤」が際立ち、観客に違和感と恐怖を感じさせる効果を生み出しています。
さらに、映像内には自然発生的な赤い色は登場せず、死者が関わるシーンには必ず「赤」が配置されており、「赤＝死者・あの世との境界線」という色彩設定が、特定の現象や危険のサイン・予兆になっています。
視覚に対して色味が明確に設計されている仕掛けが満載の映画です。

Lv.5【シャイニング】監督:スタンリー・キューブリック

完璧にコントロールされた美術館のような原色の恐怖

カラー・ルール
「赤」＝警告・血・そして『逃げ場のない興奮状態』
「黄」＝警戒・精神的異常・『忍び寄る狂気』
「白」＝孤立・無感覚・『死の静寂』

配色テクニック
二つ目の予告動画は、「シンメトリーな均衡の取れた画面に流動的な血の海が画面いっぱいに広がっていく」という、最も印象的でセンセーショナルな予告動画です。

真冬のホテルに閉じ込められた家族の狂気と恐怖。
全体は「黒」「中間色」を排除し、赤・黄・青などの原色をメインに据えています。
暗闇というホラーらしい色を消し、登場人物の衣装には原色を使い、背景色に対して人物たちが際立つ。
そして、色彩が映画の「構造」そのものとして機能していて、その鮮烈な色を恐怖と共に観客の網膜に焼き付けることに成功しています。
配色の他にも、左右対称（シンメトリー）の構図と、幾何学模様や原色（特に赤と緑）を緻密に計算して配置した配色ルールが、じわじわと異常な圧迫感と狂気を感じさせる映画です。

まとめ

かかでしたか？ホラー映画、観てみたくなりませんか？？
次にホラー映画を観るときは、「一時停止」して画面の『色』を数えてみてください。
新たな発見に出会えるかもしれません。

日々楽しいデザインライフを！

The post 配色デザインが冴え渡る！伝説のホラー映画を集めてみた。 first appeared on FHWノート.

こんにちは( ・∇・)
デザイン課のさいちゃんです！

前回の記事では、2000年代初頭のカルチャーをリバイバルした「Y2K（Year 2000）」デザインのWEBサイトをご紹介しました。
懐かしさと新しさが融合したごちゃ混ぜ感がとっても魅力的でした！
こちらの記事「Y2K」デザインのWEBサイト集めてみた！

そして今回は、前回のラストで少しだけ触れた、今注目の次世代トレンド「Y3K（Year 3000）」をテーマにお届けします！

「3000年代って…未来…ってコト？！」と思った方も多いはず。
今回も「Y3K」とは何かという解説と、参考になるWEBサイトをご紹介します！

「Y3K」について

Y3K（ワイスリーケー）とは

Y3Kとは、「西暦3000年代」の未来都市や世界観をイメージした、非常に未来的（フューチャリスティック）なファッション、デザイン、音楽などのカルチャーを指す言葉です。
2000年代のレトロポップな未来感を描いた「Y2K」に対し、Y3Kは「よりリアルで洗練された、どこかAIやメタバース空間を彷彿とさせる未来感」が特徴です。

なぜ今「Y3K」がきているの？

Z世代を中心に、AIの進化やメタバース、Web3といった最先端テクノロジーが身近になったことが背景にあります。
「かつて夢見た未来（Y2K）」から、「今まさに突入しつつある近未来（Y3K）」へ、若者の関心がシフトしていると言われています。
K-POPアイドルのMVやアパレルブランドのファッションでも、このSF映画のような世界観が爆発的な人気を集めています。

Y3Kデザインの「5つの特徴」

「Y3K」を表現するとき、どのようなビジュアル要素が必要になるのでしょうか？
フューチャリスティックな世界観を作るための5つのポイントをまとめました！
おすすめWEBサイトも一緒にご紹介します٩( ‘ω’ )و

1.メタリック・クローム・有機的な3D質感

Y2Kの「プラスチックのようなチープな立体感」とは異なり、
Y3Kでは液体金属のようなヌルヌルとしたメタリックな質感や、鋭利で洗練されたクローム（鏡面）素材が多用されます。
変形3Dオブジェクトや、鈍く光る金属質のグラフィックが特徴です。

参考サイト

https://venusbelt.com/

https://hypebae.com/2023/10/xg-x-pop-girl-group-music-interviews

2. ネオンカラー＆ダークサイバー（光と暗闇の対比）

ベースカラーには漆黒やダークグレー、あるいは無機質なシルバーが使われることが多いです。
そこに鮮烈な蛍光ブルー、サイバーグリーン、ネオンパープルなどの光を走らせます。
まるで夜のネオ未来都市や、暗黒の宇宙空間に浮かぶデジタルホログラムのような、高いコントラストが視覚的なインパクトを与えます。

参考サイト

https://xgroup.co.jp/

https://www.funtech.inc/ja

3.アバター・AI・アンドロイド的な無機質さ

人間らしさをあえて排除し、「AIやアンドロイド、仮想空間のアバター」を感じさせるグラフィックが特徴です。
無表情で完璧なプロポーションのバーチャルモデルを起用したり、ゲームのコックピット画面のようなインターフェースデザインを組み合わせることで、非現実的な没入感を演出します。

参考サイト

https://school.dhw.co.jp/p/honka_reframe/

https://jp.nothing.tech/products/phone-3a-lite?Colour=White&Capacity=8%2B128GB

4.グリッド・データ・近未来的UIエフェクト

画面全体に張り巡らされた細いグリッド線（方眼）、空間を表現するワイヤーフレーム、デジタルコードや数値の羅列など、
「データ空間そのもの」を可視化したような演出が使われることが多いです。
文字がパラパラと切り替わるタイピングエフェクトや、チカチカとしたノイズエフェクトを効果的に使うことで、テック感を高めます。

参考サイト

https://www.kobe-tech.ac.jp/illust/

https://www.tech-flag.co.jp/

5.透明感とフローティング（浮遊感）

Y3Kの世界では、物質が重力に従っていません。あらゆる要素が空間にふわふわと浮いているようなレイアウトや、
半透明なガラス越しに光が透けるような質感が好まれます。 これにより、スタイリッシュなSF感をスマートに表現できます。

参考サイト

https://jiii-atelier.com/

https://styleport.co.jp/

これからのWebトレンドを掴むために

前回の「Y2K」が持っていた、ノスタルジックでダサ可愛い平成レトロ感とは打って変わり、今回の「Y3K」は圧倒的にクールでスタイリッシュ、そしてSF映画の主人公になったような没入感が魅力です。
アパレル、コスメ、エンタメ、クリエイティブ分野を中心に、このY3Kデザインを取り入れるトレンドが広がっています。
時代の一歩先を行く「Y3K」のエッセンスを、ぜひこれからのクリエイティブやマーケティングのアイデアに活かしてみてはいかがでしょうか？

余談ですが、Y3Kの世界観をコンセプトにしている大好きなK-POPグループaespa（エスパ）にも少し触れさせてください！
彼女たちは、メタバースやAI、近未来を感じさせる洗練されたビジュアル、まさにY3Kの世界観をデビュー当時からコンセプトとして掲げ、シーンを牽引し続けています。
Y3Kの世界観が気に入った方はぜひ、aespaのミュージックビデオもご覧になってみてくださいね( ◠‿◠ )♪

特にY3Kな洗練されたMV「Whiplash」

https://youtu.be/jWQx2f-CErU?si=eqZKXGTFOswUXNaD

それでは、次回の更新もお楽しみに！

The post Y2Kのその先へ！「Y3K」デザインのWEBサイト集めてみた！ first appeared on FHWノート.

こんにちは！デザイン課のしーです。

FHWは数多くのwebサイト制作に携わってきましたが、webサイトでのゴールになる事が多いお問い合わせフォームについては、色々なお悩みがあったりします。

・お問い合わせ件数を増やしたい…

・新しく採用や資料請求のフォームを作りたい

・いたずらスパムメールばかりが来る…

などなど、大切なものだからこそお悩みも尽きません。弊社でもお客様にとって最適なフォームをご提供できるように、日々議論を重ねて知見のアップデートを図っております。

そこで今回は色々なフォームを分析して、便利！素敵！面白い！フォームをいくつかご紹介させていただこうと思います！ぜひ、CONTACT・お問い合わせページをクリックしてみてご自分でもチェックしてみてくださいね！

素敵なお問い合わせフォームを5つに分類してみた！

問題解決サポート型

困った、どうしよう…お問い合わせするか…となった時に、ちょっと待って！ここを読むと解決するよ！と誘導してくれる親切な誘導タイプ。解決もスムーズで、お客様も企業も助かる形態ですね。毎日たくさんのお問い合わせが来ていそうな、大きな企業さんに多い気がします。

▼パナソニック

https://panasonic.jp/

「冷蔵庫が冷えない」と試しに打ってみるとポップアップで、ここ読んだ？どう？と確認してくれるので問題解決への近道が示されて安心できますね。

対話型

お問い合わせフォームってなんか事務的…そんな印象を覆すような、まるでお話をしているような対話型のフォームもあります！

▼土とデジタル

https://bitnb.io/

▼Untold

https://untold.site/en

入力エリアに淡々と情報をいれていくというより、まるでメールを書くように入力していくタイプです。完結でわかりやすく、必須項目を埋めると送信のテキストが変わる小技が効いていて面白いです。

▼株式会社ren

https://reninc.jp/

さりげない表現ですが、『お問い合わせ種別』って聞かれるより『いまの気持ち』って聞かれると

「こんなこと問い合わせても大丈夫かな…」みたいな不安が和らぐ気がしませんか？グローバルナビゲーションの『相談する』にカーソルを合わせるとテキストが変わるのも温かくて好きです。

世界観重視型

他のページはガッツリとデザインされているけど、お問い合わせページはシンプルになりがちなもの。こちらはお問い合わせページでも世界観を崩さず、サイトとして統一感を持たせています

▼合同会社レンズ

https://lens-llc.co.jp/

黒で引き締まったとってもクールなサイトですね。

タイトルの下に秒数が表示されるのもちょっと焦りますが個性的で面白いですね。

左下のパーセンテージでスクロール具合がわかるので、あとどれくらいページが続いてるのかわかるのもフォームとしてちょっと便利そうです。

メニュー・ポップアップ型

ページに遷移するよりその場でハンバーガーメニューのように開くフォームもあります。シームレスにお問い合わせに移れてスマートですね。

▼株式会社スタジオディテイルズ

https://www.details.co.jp/

▼株式会社フレーム

https://frame-d.jp/

今見ているページから、すぐにパッとお問い合わせが開いてスピーディーですね。お問い合わせをしたいと思い立ってすぐ行動に移せるのは魅力的です。

信頼感・プロフェッショナル感アピール型

昨今増えてきている、『顔の見える安心感』。生産者の顔が見える野菜のようにフォームにもそんな時代が来ているのでしょうか。

プロフェッショナルが解決してくれそうな安心感を感じられます。導入実績も見えることで企業への信頼感も高まりますね

▼Liny

https://line-sm.com/

2カラムレイアウトを有効活用したフォームですね。左側にプロフェッショナルたちの顔と導入実績を並べ安心感や信頼感を感じさせます。

右側の入力欄も必要最小限のスペースでコンパクトに纏め、必須項目のみの入力でお問い合わせへのハードルを下げているように思います。

まとめ

優しく柔らかい表現でお問い合わせしやすくしたり、世界観や信頼感を表現するページとしても機能しているお問い合わせページが見られてとても勉強になりました！

お問い合わせをしていただくことが目的・目標であるフォームですが、シンプルであることのみが正解ではないのかもしれません。

これからも日々お問い合わせフォームについて分析して、よりよいサービスを提供できるように頑張っていきたいですね。

The post お問い合わせフォームを色々集めてみた！ first appeared on FHWノート.

最近話題になっている「ChatGPT image2.0」。SNSでも、検証結果やプロンプトを公開しているユーザーさんをよく目にします。どの検証結果も、驚くほど素敵なものばかりです。

こうしたAI画像生成は実際に自分でやってみると、見本のようにはうまくいかず、がっかりしてしまうこともあります。実務ではなかなか使いづらいと感じる場面もありました。

本当にこんなにうまくいくものなのか気になったので、自分でも試してみました。

バナー作成

まずは、ワイヤーフレームからバナーを生成してみました。
今回は架空のスクールを想定しています。

【プロンプト】
こちらのワイヤーフレームを元にバナーを作成してください。
テイストを変えて3パターンお願いします。
サイズは横300px、縦250px。

短いプロンプトでここまでのものができるのは、すごいと思いました。
テキストも画像から読み取って反映しているようです。

ただ、サイズを指定したものの、比率は同じでしたが、実際にはかなり大きいサイズで生成されました。今回は横1374px、縦1145pxでした。

また、ワイヤーフレーム内のテキストの位置に、ある程度依存するのかなと感じたので、別パターンのワイヤーフレームでも同じプロンプトを試してみました。

やはり配置には依存するようです。
そのため、文字や要素の配置は、ワイヤーフレームを作成する段階である程度考えておいた方が良さそうです。

ブランドボード作成

次に、以前のブログで作成したキャラクターのフィギュア画像を元に、ブランドボードを生成してみました。

以前のブログはこちら
「SNSで話題の『Nano Banana』で私もフィギュア画像を作成してみたい！」

【プロンプト】
こちらのキャラクターを元に、ロゴ、広告バナー、SNSビジュアル、グッズなどを展開したブランドボードを作成してください。
キャラクターの名前は「クマ伯爵」です。

かわいいブランドボードが生成されました！なんだか嬉しいです。
そのまま実務で使うのは難しそうですが、たたき台やアイデア出しとしては良いのかなと思いました。

LINEスタンプ作成

次は、LINEスタンプを生成してみました。

昔、LINEスタンプを何度か作成したことがあるのですが、当時は1枚1枚に入れる文字を考えたり、イラストを描いたりする必要があり、完成まで何日もかかってかなり苦労しました。

今回は、一度に生成できる画像が最大10枚までだったので、LINEスタンプを申請できる最低枚数の8枚を生成しました。

【プロンプト】
LINEスタンプ用の画像を作成してください。普段使いできるものが良いです。
キャラクター：三毛猫
テイスト：手描き風
個数：まずは8個
入れる文字：「おはよう」「ありがとう」「了解！」「おつかれさま」など
背景：透過する
画像サイズ：LINE向けを意識して作成

一見、良い感じに生成できたように見えました。
ただ、見た目だけは透過風で、実際には市松模様の背景が入った不透明なPNG画像でした。

その後、「申請できる画像にして」とお願いしたところ対応してくれたので、背景が本当に透過されている画像かどうかは注意が必要です。

まとめ

今回は3つのパターンで試してみましたが、いかがだったでしょうか？

今回掲載している画像は、すべてプロンプトを入力して1回目に生成されたものです。
試してみて、AI画像生成でできることの幅が、また広がったように感じました。
そのまま実務で使うには調整が必要ですが、ゼロからイチを作るためのアイデア出しには、とても役立ちそうです。

「そのまま実務で使うには調整が必要」という感覚は、Web制作の現場でも同じです。AIとどう向き合うかについて、もう少し掘り下げた記事もあるので、よければあわせてご覧ください。→ AIで作れる時代に、なぜ制作会社に相談する意味があるのか

最後まで読んでいただき、ありがとうございました！

The post 話題のChatGPT image2.0を検証してみた！ first appeared on FHWノート.

はじめに

第一弾から影響を受けて続く記事も早三弾！

初夏も近づきひんやりした空気が心地よいこの頃。
バイオハザード新作で心臓を凍らせたくない気持ちからお送りするのは「ARG」特集です。
インドアで過ごしたい皆様にうってつけな企画をお送りします。

ARGって？

代替現実ゲーム＝ARG、と聞いても何ぞや？　と思う方もいらっしゃることでしょう。
物語が現実に侵食してくるかのような、
自分の日常に物語が混ざる体験が味わえるのが「ARG」です。

第二弾でご紹介した第四境界の「かがみの特殊少年更生施設」を例にしまして、自ら参加して探索していく能動的な体験が味わえるのがポイントです！

この初夏おススメしたい三選

Vtuber失踪案件

作者ページ：https://note.com/sim/n/n9ccec3c0a871
探索先：https://phos.jp/

「かがみの特殊少年更生施設」にインスパイアされたという本作は、Webサイトの「裏側」を覗き見ているような背徳感と、現実が塗り替えられていくようなARGの醍醐味を存分に味わえる一作です。
検索窓に、見つけてしまった『あの言葉』を打ち込んだ瞬間、画面の向こう側の世界がガラリと変貌します……。
深追いしすぎにご用心！

ゆうひ不動産

作者ページ：https://shintoworks.itch.io/yuhi-real-estate
探索先：https://shintoworks.jp/yuhifudosan/

見ていくと「おや……？」と違和感が積み重なり、じっとりとした怖さが迫ってくる作品です。
知りたい欲求と、いや後戻りしたいという心がせめぎ合い、最後までやった結果……

筆者は癒される猫画像を探しに旅たちました。

猫ちゃん……！

裏路地のbarから始まる物語

作者ページ：https://margine.earth/news/unbar/
探索先：https://margine.earth/unbar/

サイト上で行える、3Dかつ直感的な操作で楽しめる作品です。
webサイトで出来ることの幅って広い！

第二弾より #謎ミステリーブートキャンプ　のなかで面白かったもの

「#謎ミステリーブートキャンプ 成果発表会場」の中から特に面白い体験ができたものをご紹介します。

ひもろぎ村へようこそ

作者ページ：https://note.com/himorogimura/n/nd379e467ee3f
探索先：https://www.argserver.shop/himorogimura/index.html

サイト内を巡回し「おや…？」と感じたキーワードを検索してみましょう。
因習村ものが好きな方におすすめしたい作品です（匂わしネタバレ…！？）

web探索型ミステリーゲーム 「I AM NOT あるいは二階堂玲の場合」

作者ページ：https://note.com/yoryormary/n/n86fcc595ab84
探索先：https://www.yoryormary.com/iamnot.html

本作は、大きな音で驚かせるようなホラーではありません。
ひとりの女性の散らばった日記、写真、SNSのログから彼女のアイデンティティを探し当てていきます。
淡々と、しかし確実に積み重なるテキストを読み解き、パスワードを推測していく中で「真実に辿り着きたい」という欲求が、いつの間にか「彼女を理解したい」という願いに変わっていく。
ぜひ、静かな夜に一人でプレイしてほしい作品です。

ARGってweb制作との親和性が抜群！

検索機能や動き、ビジュアルに富んでいたりといった工夫で、深みをある体験を生み出せるWebサイトが作れるということに感動しました……！

そして新たな物語への可能性も楽しみにして、この先も「ARG」作品に着目していきたいと思います！

The post 第三弾！仕掛けのあるWebサイト集めてみました～ARGって？～ first appeared on FHWノート.

こんにちは、あるいはこんばんは。デザイナーのOです。
色彩検定の2級・3級・UC級に続いて、昨年1級に合格しました！

色彩検定1級は、他の級と比べてちょっとハードルがあがります。

• 合格率が41.8%と検定にしてはやや低め
• 検定料が15,000円でプレッシャー
• 試験が年1回でさらにプレッシャー
• 筆記試験と実技試験の2種類がある

今回はそんな試験や勉強のコツをまとめた受験レポをお送りします。

※文中の画像や色はイメージです

1級の試験方法はクセつよ

1次の筆記試験は、2級・3級・UC級と同じくほぼ選択問題となります。
今までの2級・3級で学んできたことをさらに深めつつ、測色や心理評価法、XYZ表色系などそれなりに新しい分野もこなす必要があります。
ただし、他の級と同じく出題範囲は公式テキストのみです。しっかり読み込めば理解できる内容なので、1次試験はそこまで難しくありませんでした。

本番は2次の実技試験！

実技といっても回答用紙にカラーチップを切って貼るというだけで、他は語群や選択中心の筆記問題です。
主に1級と2級・3級のテキストから出題がありますが、2級・3級の配色問題がメインとなります。色彩調和やイメージ別配色法、JIS（日本産業規格）の慣用色名などを使用して配色する内容です。
ただし、この配色問題がなかなかクセつよで注意が必要！

ざっくり言うと、問題文は「論理パズル」のようになっており、自由に配色できるわけではないのです。答えは基本的に1色です。大問となっているため、パズルを間違うと数問まとめてミスに！
またJIS慣用色名は覚える量もボリューミー。120色もの色名・色名の由来、そして公式テキストにないPCCSのトーン記号（色の値）を「調べて」覚える必要があるのです（トーン記号はテキスト上にはない）。

そのため、ここに勉強時間の大半を注ぎ込みましたわ……

実践した学習方法とコツ

1次試験

公式テキストを読み込む
他の級と同じく、公式テキストだけで十分学習できます。私は1回目ではさらっと目を通して、2回目ではしっかりと読み込みました。問題集を解いてから改めてその項目を読むと理解が深まります。

重要なフレーズは単語帳を作る
日常生活ではなかなか耳にしない専門用語が多いため、思い出す練習が必要ですね。

2次試験

こちらもやっぱり単語帳
一番難関な慣用色名ですが、2級・3級のテキストをカラーコピーして切り、大きめの単語帳に貼りました。
色名の由来などの説明文から色名を答える（その逆も）、色からトーン記号を答える、そして覚えられない色名だけ何度も復習、といった学習ができるのでピッタリでした！
ただ120色を単語帳化するとかさばるのが欠点……（まとめるリングもバングル並みにでかくなる）

とにかく公式問題集を解く
論理パズルに慣れるため、問題集を何度も解くことが超重要です。試験当日も焦らずとにかくよーーーく問題文を確認することをおすすめします！

振り返って寂

合格すると他の級と同じように合格証と「色彩コーディネーター」という称号がもらえます。
また、色彩検定が主催するセミナーの講師を目指せる講座が紹介されます。

私は色彩検定1級・2級・3級・UC級と順番に取ってきたので、今回で終わりなのが少しさみしいですねー。

色彩検定の学習内容は、デザイン設計で活用することはそこまで多くありません。
しかし、お客様に色彩の原理から設計の意図をご説明したり、公共性の高いウェブサイトにおける色の使い方を注意したりと、細かな点でその知識が行かされているかなと個人的に感じます。

色彩検定に興味が出てきた方は、まず色彩の基本や色覚障害などを学べるUC級がオススメです！
試験内容も比較的簡単で検定料も比較的安価。自分の周囲にこんな方がいるんだ、または高齢者になるとこんな風に見えるんだ、と多様化する現代ではもはや一般教養といえる知識を学ぶことができます。

私はまた新しいことに挑戦していきたいと思います！
最後まで読んでくださってありがとうございました。

The post ウェブデザイナーが色彩検定1級受験してみた first appeared on FHWノート.

1. 黄金の3要素：これだけで回答が激変する

プロンプトをダラダラ書く必要はありません。以下の3点を意識するだけで、AIの精度は劇的に向上します。

• 背景（Context）： 「なぜこのタスクが必要か」を1秒で伝えます。
  例：「明日の会議で上司を説得したいので……」
• タスク（Task）： 「何を」してほしいのかを明確にします。
  例：「この企画の懸念点を3つ挙げてください」
• 形式（Format）： 「どんな見た目」で出力してほしいか指定します。
  例：「比較表にして」「箇条書きで」「300文字以内で」

2. 2026年流「脱・おまじない」のコツ

かつては「あなたはプロの編集者です」といった役割設定（ロール）が必須とされてきましたが、最新のAI（Gemini 3や最新のGPT等）では、役割設定よりも「具体的な手順」と「例示」の方が重要視されています。

① 「ステップバイステップで」と添える

複雑な依頼をするときは、最後に「ステップバイステップで、深く考えてから回答してください」と一言添えてみましょう。これだけで、AIが内部で思考を整理し、論理的なミス（ハルシネーション）を大幅に減らすことができます。

② 具体例（Few-Shot）を1つ見せる

「いい感じに書いて」と頼むより、「例えば、以前書いたこの文章（コピペ）のようなトーンで」と1つでも実例を見せるのが最強の近道です。

3. 実践！すぐに使える万能テンプレート

迷ったら、以下の構造をコピーして使ってみてください。

# 背景
[20代女性向けのスキンケア商品のキャッチコピーを考えています。]

# 依頼内容
[ターゲットの心に刺さるキャッチコピーを5案提案してください。]

# 制約条件
・1案20文字以内
・専門用語は使わず、親しみやすい言葉で

# 最後に一言

プロンプトを工夫して対話を重ねても、最終的に「何を作るべきか」を判断するのは人です。Web制作におけるその判断については、AIで作れる時代に、なぜ制作会社に相談する意味があるのかでも詳しく考えています。

The post 【おすすめ】AIに質問する際のプロンプトの書き方 first appeared on FHWノート.

あけましておめでとうございます。

デザイナーのOです。
元日から2週間経っておりますが、断固としてお慶び申し上げる所存でございます。

本年のお正月のメールマガジンのイラストを担当させていただきました。
上部に入れたテキストをごらんになりましたか？

「we are WORKhorses」のWorkhorsesは本来、使役馬や馬車馬を指しますが、
転じて働き者という意味を持つそうです。
本年も泥くさく力強く駆けまわり、皆さまのお役に立てるよう願いを込めました。

本年もフライング・ハイ・ワークスをどうぞよろしくお願いいたします。

お年玉（おまけ）

Chat GPTに2026年にどのような出来事が起こるか、予想してもらいました！

1月
夢の内容を要約するAIが登場

2月
月面滞在用ホテルの予約開始（月の土地の権利書に続いて…）

3月
AIが法的人格を限定的に取得（!?）

4月
空を泳ぐクジラ型輸送ドローン実用化

5月
老化速度を測る検査が一般化

6月
人の感情を読む街灯が実証開始（マイノリティリポート感）

7月
脳波で文字入力する端末が普及

8月
自然由来の異常信号が宇宙で確認

9月
個人用デジタル分身が公認職業化（人類総Vtuber化）

10月
絶滅言語を話すAIが学校導入（??）

11月
死後メッセージ保管制度が法制化

12月
人類は進化を選ぶ存在と呼ばれる（若干のAKIRA感）

人類は次のステップ移行を期待されているようですが、
本年もAIの進化から目が離せなくなりそうですね……

The post 【2026年】あけましておめでとうございます！【おまけつき】 first appeared on FHWノート.

市区町村や公共団体のホームページは、住民にとって「最初に調べる窓口」としての役割を担います。
手続きやイベント情報、防災や緊急時の発信など、日常生活に密着した情報を正確に、そしてわかりやすく提供することが求められます。
しかし、情報量の多さや更新の煩雑さから「必要な情報が探しにくい」「古い情報が残っている」といった課題を抱えるケースも少なくありません。
ここでは、自治体・公共団体サイトの特徴や課題を整理し、成果につながる制作ポイントを解説します。

自治体・公共団体サイトとは？特徴と役割

自治体・公共団体サイトは、住民が安心して生活するための情報基盤です。
主な役割は以下のとおりです。

• 行政手続きや窓口サービスの案内
• イベントや地域活動の告知
• 防災・緊急時の情報発信
• 高齢者・子育て世帯など住民属性ごとの情報提供
• 多言語対応による外国人住民への支援
• 公共性を重視したアクセシビリティ対応

よくある課題と改善案

【課題】情報量が膨大で探しにくい

複数の部署から情報が発信されるため、内容が整理されず住民が迷いやすくなります。

改善案と効果

• 【改善案】利用者視点での情報分類とナビゲーション設計
• 【効果】検索機能や目的別導線の充実で、必要情報にすぐアクセス可能に

【課題】更新が滞り古い情報が残っている

担当部署が多いと更新が難しく、誤解を招く古い情報が残りがちです。

改善案と効果

• 【改善案】CMS導入で各部署が簡単に更新可能に
• 【効果】更新フローをシンプル化し、常に最新情報を提供

【課題】スマホ対応が不十分

住民の大半がスマホで利用しており、見にくさや操作性の悪さが離脱につながります。

改善案と効果

• 【改善案】レスポンシブデザインでスマホ最適化
• 【効果】タップしやすいUIで誰でも安心して利用可能に

【課題】災害・緊急情報の発信が弱い

災害時に重要情報をすぐに見つけられないと、住民の不安が増大します。

改善案と効果

• 【改善案】レスポンシブデザインでスマホ最適化
• 【効果】タップしやすいUIで誰でも安心して利用可能に

【課題】アクセシビリティへの未対応

公共サイトとして、誰でも利用できる設計が求められます。

改善案と効果

• 【改善案】JIS X 8341-3（ウェブアクセシビリティ指針）への準拠
• 【効果】色覚バリアフリーや読み上げ対応を実現

【課題】SEO・AI検索への対応不足

「地域名＋行政サービス」「〇〇市＋手続き」などの検索で上位表示されない場合があります。

改善案と効果

• 【改善案】地域名を意識したSEO設計で流入を拡大
• 【効果】FAQや用語解説を整備し、Google AI OverviewやChatGPT検索からも引用されやすくする（LLMO対応）

自治体・公共団体サイト制作のポイント

情報設計の徹底

住民が「誰にでもわかる」情報設計で迷わず目的にたどり着けるようにします。

更新性と運用フロー

担当部署ごとに更新しやすいCMSを導入し、日常的に最新情報を維持できる体制を構築します。

デザインとユーザビリティ

清潔感・安心感を重視し、誰でも迷わず使えるデザインを提供します。

防災・緊急対応

災害や緊急時の情報発信に強いサイト設計を導入します。

SEOとLLMO（生成AI時代の最適化）

SEO基本設計に加え、FAQや用語集を整備し、AI検索からも正しく引用されやすい仕組みを導入します。

フライング・ハイ・ワークスの強み

デザインもできるWebシステム制作会社

システム構築力とデザイン力を兼ね備え、公共性とユーザビリティを両立させたサイト制作が可能です。

多様な公共系サイト実績

地方自治体、地域団体、公共施設などのサイト制作を多数手掛け、公共特有の課題を理解しています。

安心の運用体制

プライバシーマークを取得し、セキュリティやバックアップ体制も整備。公開後も改善提案を行い、長期的な安心運用をサポートします。

FAQ

Q：自治体サイトの制作期間はどれくらいですか？

一概にはお答えできないのですが、自治体運営サイトで小さいものあれば、全体リニューアルで規模が大きいものもあるかと存じます。 年度予算に合わせて納期が決まっていることが多いので納期優先で対応しています。

Q：CMS導入で各部署ごとに更新できますか？

はい。各部署ごとに担当ページの更新をしていただけます。うっかり削除、違うページを変更してしまった！などの運用ミスが内容に、ユーザーごとに編集可能ページ制限することも可能です。

Q：災害時の緊急情報発信に対応できますか？

はい。CMSを入れることで対応できます。運用時のことを想定して設計いたします。特に情報提供がない時は非表示にする、タイマー設定をし、公開する非公開にする日時を設定するなども可能です。

Q：アクセシビリティ（JIS X 8341-3）準拠は可能ですか？

はい。動画など入っている場合は、字幕を入れるなど音声以外の方法で情報取得できるようにする必要があるので、どこまで準拠させたいかによって工数が変わります。

Q：公開後の保守・運用も依頼できますか？

はい。可能です。使い方がわからない、こんな機能を追加したいなどご相談いただけます。

まとめ

自治体・公共団体のホームページは、住民にとって生活に直結する最も重要な情報基盤です。
フライング・ハイ・ワークスでは、企画からデザイン、CMS導入、アクセシビリティ対応、公開後の改善までワンストップで対応し、安心と信頼のサイト運営をサポートします。
「住民にわかりやすく、安心して利用できる公共サイトを作りたい」とお考えでしたら、ぜひお気軽にご相談ください。

The post 自治体・公共団体サイト制作｜住民に寄り添う情報発信と安心のWeb設計 first appeared on FHWノート.

こんにちは( ・∇・)
デザイン課のさいちゃんです！

いきなりですが「Y2K」という言葉をご存知でしょうか？

.｡〇（なにかを略したアルファベット…だなぁ…）

なんてちょっと苦手意識を持ってしまう方も多いかもしれません。
今回は説明を交えながら、「Y2K」デザインのWEBサイトをご紹介したいと思います！

「Y2K」について

Y2K（ワイツーケー）とは

Y2K（ワイツーケー）とは、2000年代のはじめにブームとなったファッションやデザイン、音楽などのカルチャーをまとめて表す言葉です。
「Year 2000（西暦2000年）」が由来で、Yは「Year」、Kは1000を示す“キロ”のことで、2Kで2000を意味します。

Y2Kってもともと

1990年代後半〜2000年代初頭にかけてコンピューターの年数処理における誤作動による不具合が懸念された「2000年問題」をきっかけに、「Y2K」という言葉が広く知られるようになりました。当時、Y2Kは未来やテクノロジーへの期待感を象徴する言葉として、様々なカルチャーシーンで使用されました。

現代における「Y2K」の流行

Z世代（1990年代後半〜2010年代前半生まれの世代）を中心にY2Kがリバイバルしています。
2000年代初頭の「平成レトロ」なデザインは逆に新鮮さを感じられ、魅力的に映ったことが流行の理由といわれています。
単に過去のスタイルをそのまま再現するのではなく、現代の要素を加えながら新しく解釈されている点が魅力で、さまざまなスタイルが生まれています。
SNSによって世界中のトレンドが共有されるようになり、Y2Kの人気はますます広がっています。
ミレニアル世代（1981年〜1996年生まれ）の私からすると、懐かしさの中に新しい解釈がプラスされてオシャレに進化したY2Kの流行はうれしい限りです( ＾∇＾)

Y2KデザインのWEBサイトをご紹介！

お待たせしました！
Y2Kデザインの特徴を5つにまとめておすすめWEBサイトをご紹介します！

1.ポップで鮮やかな配色・ネオンカラー＆グラデーション

Y2Kの象徴といえる要素。鮮やかで明るい色、ネオンや蛍光っぽいトーン、メタリックや透明感のあるグラデーションを組み合わせた配色が特徴です。
未来に対する期待が高まっていた2000年代特有の、未来感やサイバー感を表現しています。

参考サイト

https://www.meidensha.co.jp/knowledge/takingaction/anatanotonari/

https://mememe-official.jp/

2. 「古いネット感」の表現

ドット絵やピクセル文字、粗い画像やデジタル的なエフェクトなど、“インターネット黎明期” や “初期のデジタル文化” を思わせる要素をあえて取り入れるのもY2Kらしさです。
今のきれいすぎるデザインとは違うチープさやノスタルジーが楽しめる表現ですね。

参考サイト

https://timemachine.kayac.com/

https://www.404shibuya.tokyo/

3.サイケデリック・サイバーポップな世界観

サイケデリックな要素はY2Kから更にさかのぼり、1960年代のカウンターカルチャーを背景に発展しました。
虹色風の強烈な色彩、抽象的で流動的なパターンや、画像を雑にコラージュしたようなシュールで超現実的なイメージなど、幻覚体験を表現したようなクセ強いビジュアルが特徴です。

参考サイト

https://tote.design/

https://lbb-official.com/

4.反復・対比・ごちゃっとした大胆な演出

同じモチーフの繰り返し、色や形の強い対比、平面と立体、古さと未来感の組み合わせ……といった“ごちゃ混ぜ“な演出が多用されています。
整理されすぎず、あえて詰め込みすぎることでインパクトを出すことがY2Kの醍醐味です。

参考サイト

https://miraken.lamm.tokyo/

https://hikky.co.jp/

5.メタリック・ぷっくり・3Dエフェクト

文字を立体的に見せるベベル加工、ゲル状に見せるバブルテキスト、反射や光沢をつけたメタリックな表現がよく使われます。
更に、サイバー空間を思わせるグリッド背景、ワイヤーフレームの立体図形などテクノロジーを象徴するモチーフが特徴です。このような未来的テックモチーフは当時のSF映画やゲームの世界観を感じさせますね。

参考サイト

https://3d-lab.funtech.inc/

https://hamaokamekki.co.jp/

次は「Y3K」？！

Y2K（2000年代）の進化形「Y3K（3000年代）」がきているそうです。ﾐｯ未来？！
次回は「Y3K」についてのブログを更新予定です！お楽しみに〜！

移り変わりの早いZ世代の流行ですが、これからのトレンドを作っていくZ世代の価値観を理解し、マーケティングにも生かしていけるといいですね！

The post 「Y2K」デザインのWEBサイト集めてみた！ first appeared on FHWノート.