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

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ノート.

はじめに

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

初夏も近づきひんやりした空気が心地よいこの頃。
バイオハザード新作で心臓を凍らせたくない気持ちからお送りするのは「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週間経っておりますが、断固としてお慶び申し上げる所存でございます。

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

「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ノート.

熱中症警戒アラートの出過ぎた夏、暑さ残る秋……いかがお過ごしでしょうか。
背中に氷を入れられたような、はたまた芯から冷えていくじわじわとしたホラー体験でもしまして、涼をとりませんか。

日中ならまだ大丈夫！怖くない！
“青鬼Ver3.0”からホラーゲームを始めた筆者によりお送りします。

※リンク先のサイトは日常に侵食するタイプの作品がございます。
　突然音がでるものも含まれますので、ご注意ください。

LEVEL1｜DYPING

https://unityroom.com/games/typinglesson

プレイ時間10分でできるお手軽さ！
ダウンロード不要のタイピングゲームです。

なら怖くないや。、
いきなりの驚かしがなければ平気！と思った方……油断していますね。

サムネイル画像は実際のプレイ画面です。
“こちら側”に話しかけてくるスタイルに嫌な予感のした方、安心してください。間違っていません。

何を入力させられるのか……とぞわりとする体験が味わえます。

今年新作も出るようですので、本体験をして待つのもいいかもしれませんね。

LEVEL2｜時解

http://tokitoki-haikyo.com/pc/quiz.html

第一段でもご紹介した「株式会社闇」のブラウザゲームです。

廃墟ビルに閉じ込められた状況のなか、謎を解き脱出する「リアル脱出ゲーム」のような体験を自宅で味わえるWebサイトです。

筆者は解きながらクリックするのが嫌になりそうでした……。

LEVEL3｜かがみの特殊少年更生施設

https://kagamino-jrep.net/

なんだかんだとびっくり型じゃないか、もう少し落ち着きたいよという方におススメ！
毛色変わりまして、探索型Webサイトです。

少年院のWebサイト……？
疑問符を浮かべつつも、まずは一通り探索してみてください。

見ていくうちにあなたは“違和感”に気づくはずです。
サイト内を巡回し、隠された「謎」を解いていくと少年院の裏側に立ち入ることでしょう。

サイト内検索機能がフル活用された新しい体験型ゲームです。
「第四協会」制作のフィクションとしって安心したのはここだけの話。

LEVEL4｜事故物件監視協会

https://jp-stigmatized-property.com/

何も知らないでみるとびっくりするWebサイト。
そして実在しない団体で良かった、とホッとしたのつかの間。

steamからダウンロードできる「ホラーゲーム」の紹介サイトです。

シンプルなサイトながら見ているだけでぞわりとする内容に筆者はゲームプレイを諦めました。

LEVEL0｜謎ミステリーブートキャンプ

https://note.com/sim/n/n93ae95643e34

ここまで体験してくると新しいゲームもやってみたい！けれども怖かったのでゆるりとしたものがやりたい！
そんな気持ちになってくださった方に、インディーズゲーム集を紹介します。

noteへ投稿された「#謎ミステリーブートキャンプ 成果発表会場」にはWebミステリーゲームが豊富にそろっています。
本記事投稿段階ではアップデートされ続けていました。

番外編｜ドキドキ文芸部

https://store.steampowered.com/app/698780/Doki_Doki_Literature_Club/?l=japanese

最後に番外編としてこの作品を挙げておきます。
2010年代にリリースされた、シミュレーションゲームの皮をかぶった侵食型ゲーム「ドキドキ文芸部」です。
ビジュアルノベルゲームは安心できるジャンルじゃなかったのか……と思わせてくれた作品。

もとはインディーズとして海外で制作され、熱意のあるファンにより日本語パッチが作られ、Youtubeに存在が知らしめられていったタイミングに体験しました。
現在は「ドキドキ文芸部プラス！」として各家庭用ゲーム機でも遊べるように。

仕掛けのある“Webサイト”の括りとは違うじゃないか、というツッコミがされていそうですが……（汗）
ゲームの最後に自分のPC（新作では仮想デスクトップ）にて行う「ある作業」にてシステムへ介入できてしまう仕組みに驚きを隠せなかったので載せてみました。

終わりに

いかがでしたでしょうか。
家庭用ゲーム機が進化する一方で、ブラウザ体験も幅が広がってきましたね。

時間が無い、ゲーム機を持っていない、という方でも楽しめるいい時代になりました。
引き続き追いかけていきたい分野です。
皆さまもぜひお楽しみください。

第一弾はこちら
技術とクオリティが詰まってる！おすすめホラーサイト集めました。

The post 第二弾！仕掛けのあるミステリー＆ホラーサイト集めてみました。 first appeared on FHWノート.

配色って、
本当に難しい。

はい、デザイナーのOです。

突然ですが、Webサイトの配色って難しいですよね？
配色を紹介するサイトは世の中にたっくさんあります。主に3色や4色の配色だけ集めたサイトが主流ですが、なかなか使うのが難しいなといつも感じています。

グラフィックとして美しい配色と、Webサイトの実用的なUIの配色って結構違う。
この配色きれいだな！って思っても、使えるか？と考えるとうーん。LPとかだったら良さそうですが。
またWebサイトはメインカラーが決まっていることも多いので、そうなるとさらに使うのが難しくなっちゃいます。

ということで、今回はWebデザイナーのぼくが、
個人的に使える！と思う配色サイトを6つに絞り込んでご紹介します。

とりあえずPinterestだ！

さあ配色サイト！と、その前にぼくが見ているのはPinterestです！
いまさら説明も必要ないかと思いますが、色の組み合わせも無限に考えられるし、何より「色の使い方」が参考になります。

カラーパレットを決める

まずは使用する色相を決めたい、使う色数を決めたいという段階で使えるサイトです。

Palette Maker

https://palettemaker.com/app

使える度：★★★

おすすめポイント

• 任意の数で色を検討できる（最大5色）
• 実際に選んだ配色の参考イメージを見られる
• 参考イメージの種類が豊富

惜しい？ポイント

• 配色の順番が調整しにくい。順番を交換できないので、数値をコピーして入れ替える必要がある
• ベースカラーやサブカラーの割合があまり現実的ではない（均一すぎる）

ぼくが一番使っているサイトです。
色がかなり自由に選べ、かつここまで多くの参考イメージがあるサイトは珍しいのでは？
他にもツールがあるようなので、時間がある時にもっと調べてみたいです。

Color Picker

https://old.colorsupplyyy.com/app

使える度：★★☆

おすすめポイント

• 色相の原則に基づいた設計
• リアルタイムで例を見られる
• Ad◯beにも似たシステムがあるが、こっちの方がわかりやすい（と思う）

惜しい？ポイント

• 有彩色のみ
• アイコンしか例がない
• 用意されたトーンしか見られない

いきなり使える度がダウンしてしまいましたが、それもPalette Makerが優秀すぎるせい。
ゼロから組み合わせを考えるならColor Picker、検証するならPalette Maker、という感じでしょうか？

Happy Hues

https://www.happyhues.co

使える度：★☆☆

おすすめポイント

• 簡単に配色イメージを見られる
• サイト自体がオシャレ

惜しい？ポイント

• 配色数が少ない
• 色が調整できない

Palette Makerを使用する前に使っていました。
サイトのタイトルはHappy Few（シェイクスピアの戯曲の有名な一節）とかけているのかな……？

トーンを決める

使う色合いをだいたい決めたら、カラーパレットを細かく考えていきます。

Colorbase

https://colorbase.app/ja

使える度：★★★

おすすめポイント

• 色の情報を一気に得られる
• ジェネレーターも参考になる
• 色の組み合わせを考えることもできる

惜しい？ポイント

• トーンの数の調整ができない
• 各情報の詳細が別ページで開く

詳細を調べようとすると、ページを行ったり来たりしなければならないところが玉にキズ。
アコーディオンやアンカーリンクなどで開くと嬉しいのですが……

Scale

https://hihayk.github.io/scale

使える度：★★★

おすすめポイント

• トーンの数を任意で調整できる
• 明度や彩度の変化も調整できる

惜しい？ポイント

• 操作に難。初心者は難しいかも
• 細かく調整していると途中で固まる

自由にトーンの数やティントやシェードの彩度・明度を決められるので、最後の調整にはかかせません。
ただ色を調整していると途中で固まって、リロードさせられるのでそこだけが辛い。

Tailwind CSS Color Generator

https://uicolors.app/generate

使える度：★★☆

おすすめポイント

• 11のトーンを作成できる
• トーンオントーンの簡易なUIも見られる

惜しい？ポイント

• トーンの数が決まっている
• 課金すればさらにセカンダリーカラーも指定できる模様

Tailwind CSSというフレームワーク用に設計されているのですが、それ以外でも使えます。
ただトーン数や彩度・明度の変更はできません。
課金すれば色々なツールが使用可能なようです。

最後に

あなたの使える！配色サイトはありましたか？

ぼくの設計フローをまとめると、
Pinterestでイメージを広げて→Palette Makerで検証→実際のデザインに落として調整→Scaleで微調整して設計完了という流れです。
ただWebは常に進化中。
このAI時代のはじまりに、もっともっと便利な配色サイトが出てくるのを楽しみにしています。

それでは、また次の記事でお会いしましょう！！

The post 【本当に使える!!】Webデザイナーが業務で使っている配色サイト6選 first appeared on FHWノート.

モーションデザインってつい見入ってしまいますよね。
デバイスや生成AI、ネットワークの進化で高画質な動画が簡単に撮影、制作、閲覧が可能になりました。いい時代ですね！

ただ動くだけじゃない。
美しく動き、見るものを惹きつける。
そんなアイデアが詰まったサイト、集めてみました。

Happy Holidays | PARCO – パルコ –

https://parco.jp/happy-holidays

開いた瞬間広がる音楽、展開されるカラフルな曼荼羅コラージュ。
さらに強烈な個性が爆発しています。
開業55周年記念の一環で作られており、三人のアーティストを起用し生成AIで作られた「HAPPY HOLIDAYSキャンペーン」特設サイト。
ぜひ音楽をONにしてでお楽しみください。

Youtubeに一つ前に公開された広告動画もありますのでぜひご確認ください。

動画を見る

「画像生成AIを駆使し、実際のモデル撮影は行わず、人物から背景まで、グラフィック・ムービー・ナレーション・音楽をすべて生成AIで作成したもの」だそうです。

この圧巻のメインビジュアル。
コレをAIで作ったとは。。。すごい！！
また、つるっとしたお人形さんっぽい人物がパルコっぽい。

B.Y　ポータルサイト

https://crossbackyard.com

Eコマース（電子商取引）のバックヤードに注目し、そこで働く人たちを徹底取材した記事を伝えているポータルサイト。

サイトを開くと同時に動画が始まるメインビジュアル。
画面を左右に分割した「スプリットスクリーン」というデザインを使い、各記事への動きも左右にスライドしながら分かりやすく誘導しています。記事内の赤いラインや画像にカーソルを当てると、注釈や動画が現れる面白い仕掛けがあり、隅々までみたくなるサイトです。

Tote.design

https://tote.design

ど迫力にして超ポップ！デザインスタジオのポートフォリオサイト。
移動しながら制作実績を紹介する流れですが、迷子になりそうなサイケデリックデザインに目が奪われます。そしてハンバーガーメニューにはハンバーガーが組み上がります。
開いた途端、音量大で始まるので要注意。

安倍元総理”襲撃の記憶”

https://www.mbs.jp/news/abe0708/graphics

事件当時を三つの視点から再現した「75秒の記憶」を伝えたサイト。
2023年に公開されたサイトですが、緊迫感と印象的なビジュアル、記憶を検索するような動きと映像が衝撃的です。
WEBサイトでユーザーにここまで伝えることができるということを再認識させてくれる。そんなサイトです。

The Search for Work Happiness

https://www.findworkhappiness.com

書籍の各章の要約を紹介しています。
ページ内のイラストの中を移動しながら、見て触って楽しい絵本のようなサイト。
英語表記のままで見た方がデザインの良さを楽しめます。
チャプターを選んだり、ページ遷移の動きなど、アイデアの参考になります。

Fluffy Hugs

https://nft.fluffyhugs.io

ふわふわと動き、マウスオーバーで拡大したりと、動物好きにはたまらない！
かわいいが渋滞しているサイトです。
ページ隅にぶら下がるネコをクリックすると、次のページに遷移したりと遊び心満載。
猫吸い状態の（犬やパンダ、コアラもいる！）イラストが作れるNFTアートギャラリー。
洋服、背景、吸い付き動物などを選び絞り込んで、好みの一枚を探し出せます。（別サイトに移動し、購入も可）

Nittoニトムズ colocolo5656　特設ページ

https://colocolo.nitoms.com/special/colocolo5656

いつからコロコロってこんなにオシャレで機能的に進化していたのか。。。
メインビジュアルでコロコロを使った可能性が次々展開されていく動画に釘付けです。

[静的エリア途中にgif画像がちょこっと入っており、「商品の伝えたいところ」に目が留まります。
画面スクロール後は通常ヘッダーメニューが多いと思いますが、こちらはフッターメニューと共に出てくる「5656」の丸アイコンが出現。
フッターを掃除しているイメージなのか、メニューを避けてフッターエリアを掃除してくれるコロコロがキャッチーです！

Shupatto

https://www.shupatto.com

ショート動画のように再生速度を高速にしたコマドリ動画で、商品の特徴と魅力をコミカルに余すところなく伝えてるサイト。
折り紙をヒントに制作されたというデザインバック「Shupatto」。
個人的にはNHKの「デザインあ」を見ているようでワクワクしてきます。
若い世代には長尺の動画よりショート動画の方が好まれる傾向にあるので、対象世代によって動画を使い分けるというアイデアの参考になりそうです。
下層の商品ラインナップ箇所でも、商品の側面と正面の画像を使い、デザインや形が効果的に表現されているところに、技術と企画力を感じました。
サイトを眺めていると…どれにしようかな？と考えてしまう自分がいました。

ASH&D Corporation

ash-d.info

大胆なフォントと動きで所属アーティスト紹介しているインパクトのあるサイト「アッシュ・アンド・ディ・コーポレーション」。
モバイルがメインターゲットのようです。
色々大胆に動いていそうなのに、よく見るとそうでもない。
少ない動きでダイナミックに見せるアイデアで見る人にインパクトを与えています。
気づけはじっくり見入ってしまうタイポグラフィーがおしゃれ。

かまぼこの部屋

https://bokoko33.me

動くサイトで有名、かまぼこさんのポートフォリオサイト。
スルスルと動く小気味よさが気持ちいい！
パステルカラーのお部屋の中のあちらこちあらに動きが。。。
いつまでも滞在してしまう魅力的なサイトです。

みさとと。島根県美郷町魅力再発見プロジェクト

https://www.town.shimane-misato.lg.jp/misatoto/

島根県を訪ね歩くように味のあるイラストマップの中を移動する、滑らかな動きが気持ちいい。
ダイナミックな動きと各所の魅力を伝えるイラストで、下層ページへとスムーズにユーザーの興味を誘導しているサイトです。

福岡県立バーチャル美術館

https://virtualmuseum.fukuoka-kenbi.jp

様々な美術の世界にタイムトリップしていく、目が眩むようなオープニングが圧巻。
各美術展ページはそれぞれのテイストに合わせた見せ方で絵画を紹介しています。
とにかく全部クリックして回ってみたくなる。そんなサイトです。

スピッカート| 書き初め2025

https://spicato.com/kakizome2025

大阪のブランディングデザイン会社の2025お正月特設サイト。
オフィス内をクリックして社員の「書き初め」を探していくのが楽しいです。
また、デザイン会社だけあって、絵本のようなイラストも可愛い！
スムーズな動きと、「探す」という仕掛けにハマります。
残り一枚、見つけられず。。。

dream-machine

https://lumalabs.ai/dream-machine

「dream-machine」という動画や画像を作成するサービス紹介サイト。
「頭の中に描くイメージを形にできる」ということが視覚的に表現されている。
画面スクロールで動くコンテンツの動きにも躍動感があり、ページ内の動きはどれも滑らかで美しい。

Sephora Pinball

https://pinball.cosmicshelter.com

ピンボールゲームが遊べる3Dグラフィックスのウェブサイト。
よく見るとコスメ製品がピンとして設置されているキュートなピンボール！
表示まで少し重い感じですが、動きは滑らかで一見の価値ありです。

Immersive Garden

https://immersive-g.com

マウスで触れた部分が浮き出たり、歪んだりする画像エフェクトがすごい！
コンテンツ各所にある動く画像やテキストの滑らかな動きも秀逸。
シンプルなのに随所に技術力が光っているサイトです。

Brightest Stars

https://brighteststars.org/en/explore

複雑で希少な遺伝性疾患の画期的な研究を行うニューヨークの機関がリリースした特設ページ。
宇宙船の打ち上げから始まり、宇宙探査を行いながら、希少な疾患について学ぶ体験型サイトだそうです。
少し読み込みに時間がかかりますが、オープニングのカウントダウンからの打ち上げからの音声、船内コントール画面など細かいところまで作り込まれており、圧巻のクオリティ。
残念ながら英語とスペイン語しかないので疾患については理解できませんでしたが、宇宙船のクルーになった気分を味わいつつ、十字キー操作で惑星にフォーカスしたりと滑らかな動きが楽しいサイトです。

うおみこども園

https://uomi.jp

鹿児島のこども園のサイト。
子供たちの切り抜き画像と可愛いイラストがぽこぽこ出てくる元気いっぱいな雰囲気です。
どのページもスクロールするたびにちょこちょこっと動いており、少しの動きをアクセントに、サイト全体を楽しく表現しています。これらの動きを参考にして、雰囲気作りの手法として取り入れていきたいですね。

CATCH THAT SANTA

https://santa.tote.co.jp

24年のクリスマス特設サイト（
音量に注意！）
一昨年のサイトですが、クリスマスソングと共にスクロールで高速移動していく画面にグギ付！
何度もスクロールしてしまいます。
また、背景のベルなどのイラストをマウスオーバーすると様々な音がする仕掛けも楽しい。

おしまい

いかがでしたか？
動きを取り入れたデザインは、人の記憶に残りやすく拡散性も高い、静止画のみのサイトより多くの情報を視覚的に伝えることができます。
例えばファッションなら、モデルさんが着用したGIFアニメーションを活用していたり、商品であれば様々な角度からの撮影でその魅力を細部まで表現できるのです。

一方で、動画を使い過ぎてしまうと情報過多になり、一瞬興味を惹きつけることはできても煩雑で見にくくなってしまうということがあります。
必要な情報がわかりにくいと本末転倒になってしまうため、静止部分と動く部分のバランスがとっても大切なのですね。

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

The post 魅力的でド迫力！美しく動くサイト集めてみました。 first appeared on FHWノート.

このページを開いたキミ！
エラーページ、工夫してる？

404ページからの回遊動線、重要ですよね。
「神は細部に宿る」なんて言いますが、
その存在感は最小限にして、ユーザビリティの意識が反映されたページであることが大切だと思います。

希望のページに辿り着けなかった時現れる404ページ。
残念な気分にならない、むしろ見れてよかったと思わせるような404ページを集めてみました！

【なんだかほっこり。癒し系404】

amazon（海外サイト）

Amazonで飼っているワンちゃんがリロードするたびに出てきます。
ワンちゃん好きにはたまらない仕掛けです。
インコ好きな私としてはインコバージョンも作って欲しい。

evernote

「接続エラーが発生しました」のメッセージとともに現れる立体的なイラスト。
よく見ると接続が切れています。
仕掛けも何もないのですが、何となく隅々まで眺めてしまうそんなページです。

spotify

404タイトルのレコードが回って止まる。
可愛いデザインでほっこりします。

ahamo

何だろ？何のキャラクターなんだろう？？
何だか今にも泣きそう。。。そしてものすごく申し訳なさそう。。。
大丈夫だよ、泣かないで！

ikea

宇宙船に家具が吸い込まれていくアニメにほっこり。
きっと探していたページも吸い込まれてしまったに違いない。
気を取り直して検索しなおそう！

lancers

お城への道がなくなっちゃった！
可愛いアニメが展開。
勇者と残念な気持ちを共有し、新たな検索の旅へ出かけよう。

【世界観、貫きます。納得の404】

chelmsfordlibrar

この図書館には希望の本がありません！
そうゆうこと。

one-piece

アニメならではのイメージインパクトが面白い。
こんなリアクションしそうだよね。

analogue foundation

アナログの価値を広めるための「アナログファウンデーション」サイト。
トップページの世界観を壊さない美しい404ページです。

WWFジャパン

いや、なんかもう。。。シュール。。。
豆知識が得られるコンテンツリンクがあり回遊に繋げています。

ringo-dou/林檎堂

キャッチーな404ページ。
下層ページのひとつとしての存在感があります。
りんご飴って物凄く進化しているんですね～
渋谷に店舗が来たら、是非食べてみたいです。

【回遊率を上げる工夫が光ってる404】

ZOZOTOWN

オブジェやお皿などの商品を使って「Not Found」を表示。
実際に売られている商品を使って表現されているのですが、商品訴求にもなってサイト回遊につながりそう。

nikko

コーディネートイメージ画像からクリックで商品詳細画面が出てきます。
他の商品訴求からさりげなく回遊につなげている構成がおしゃれです。
お好みの商品は見つかりましたか？

桜クレパス

昔のパッケージとこどもたち。
「見たことないページ」と「見たことないパッケージ」でかけてるのかな？
クレパス情報へのリンクもり、パッケージについての好奇心を刺激しつつ回遊させる構成が光ってます。

Unsplash

テキストがチカチカしていてちょっと怖い。。。
マウスクリックに合わせ明かりで背景が浮かび上がる「探している」という趣向が面白怖い。
リロードするたびに背景が変わるので、何度もリロードしてしまいます。
日本語サイトは日本語翻訳が適応されてしまうため、ページ全体の雰囲気はUSサイトの方が完成されたデザインに見えます。
魅せる仕掛けで写真の魅力を伝え、再検索に繋げている404ページです。

dribbble

色分けされたさまざまなデザインサムネイルによってつくられた「404」。
下のスライダーでインタラクティブに色味が変えられ、サムネイルからそのクリエイターのデザインを見ることができ、回遊性が追求されています。

【滞在時間が長くなる！？楽しませる系404】

kuronekoyamato/クロネコヤマト

超有名！猫を探そう！！
もう大好きなんです、このページ。
ゲームだけじゃなく、次の検索へと繋げるサポート力のあるページ構成も勉強になります。

squarespace

上から落ちてくるテキストをマウスでクリックすると跳ね回ります。
なんとなく何回もクリックしてしまう自分がいます。

figma

404テキストのアンカーポイントを動かして、好きな形に変えることができます。
figmaならではの機能を活かした404ページです。
もし、変形によってものスゴい大作を爆誕させた方は、是非ご一報ください。

platinumgames

さすがゲーム会社！楽しい。
懐かしゲームでどこまでやれるかちょっとハマります。

taito

懐かしのスペースインベーダー404、迎撃せよ！
やはりゲーム会社はゲームですね。
ついついリトライしてしまいます。

redbull

「見る」ボタンから様々な障害物に挑むアスリートの動画がみれます。
徐々に成功していく姿に釘付けです。
404ページが一番滞在時間が長いかもしれない。。。

note

こちらも超有名なnote404美術館
さまざまな作品が見られるので、ついついリロードしてしまいます。
掲載作品も募集しているので絵心のある方は応募してみては？

＃404美術館
https://note.com/contest/404%E7%BE%8E%E8%A1%93%E9%A4%A8

まとめ

いかがでしたか？
あまり見ることのない404ページ集めてみました。
残念な気持ちになるユーザーへの気遣いを色々工夫されているサイトが沢山あります。
気になるサイトの404ページ、探してみませんか？

The post 地味にすごい！webサイトのアイデア溢れるおすすめ404、集めました。 first appeared on FHWノート.

見て聴いて触ってドッキリドキドキ。
ホラーサイトは怖いだけじゃない！
技術だってビジュアルだってハイクオリティ！

秋の夜長にさまざまな仕掛けと共に作り込まれたホラーな世界観を覗いてみませんか？

※リンク先のサイトは過激だったり気持ちわるかったり、突然音が出たりしますのでご注意ください。

LEVEL1｜973-EHT-namuh-973

https://www.973-eht-namuh-973.com/

海外の謎サイト。どことなくビジュアルがオシャレ。
怖くはありませんが、謎解きをしつつ先に進むと奇妙なイラストが。。。日本語翻訳を使っても意味不明です。

LEVEL2｜白死蝶さんのプロフィール

http://shock.jpn.org/

ガラケー風個人サイトのプロフィールに綴られたホラー小説。
特別な仕掛けはありませんが、淡々と綴られた衝撃告白文に引き込まれ。。。怖いです。
あなたは友達を売りますか？

LEVEL3｜Fallen Angel 10th

http://www.cocobongo.tv/fallen_angel_10/

「Fallen Angel」のホラー映像作品の特設サイト
イントロ後にはじまる３D映像が不気味。

真っ暗闇の森の中を赤外線カメラを通して見渡すことができます。
草木を掠める音やセリフ、カメラのズーム音など、まるでその場にいるような臨場感。
360度スクロールしながらヒントを手がかりにある場所をスペースキーでズームすると。。。

びっくりするような仕掛けはありませんが
まるでホラーゲームのようなリッチコンテンツが楽しめます。
スマホビューではVR対応なので、よりリアルな臨場感を体感できるコンテンツです。

LEVEL4｜りんなの女優デビューブログ

https://www.fujitv.co.jp/kimyo/rinna_blog/

LINE公式チャットボット女子高生「りんな」が女優デビューしたというブログ
スクロールして読んでいくといつの間にか恐怖ブログに変貌。
次々と現れるギミックと音声、変わり果てたブログデザインにも注目！

【おまけ】
「なぞなぞはじめました」

https://sai-zen-sen.jp/works/fictions/gamekids2013/01/01.html

りんなちゃんと同じホラーブログです。
こちらも恐怖ブログに変わりますが、画像加工が怖いです。

LEVEL5｜深夜廻-しんよまわり

https://nippon1.jp/consumer/shin_yomawari/top.html

ゲームのプロモーションサイト
メインビジュアルの中がミニゲームになっており、
ゲームの雰囲気が楽しめます。
時々出てる「モジャモジャ目玉」が可愛い！

うーん。。。ゲーム買っちゃお！

LEVEL6｜最恐ホラーゲーム「コープスパーティー」公式サイト

http://corpse.jp/br/

ビジュアルデザインのクオリティ高く、不気味感満載。
「最後まで読んではいけない」から始まる禁断のスクロールサイト
ゲームの世界観を表現した公式サイト

LEVEL7｜脱毛人形｜脱毛デレラ

https://datumou-derella.jp/yami-doll/

ビジュアルデザインのクオリティ高く、ギミックも秀逸。
音とともにテキストが動いたり、ライトに照らし出されたりする画面演出がすごい！
主人公の運命は！？
ドラマティックホラーストーリーです。

【おまけ】
誘導先の「脱毛デレラ」

https://datumou-derella.jp/

こちらは脱毛全般に関する面白コンテンツサイト。
怖かった人はこちらのサイトで楽しんでください。
別の方向でクオリティ高く突き抜けたサイトです。
フッターのミニゲーム。。。好きです。w

LEVEL8｜【リゾートバイトの怖い話】サクヤサマ

https://sakuyasama.resortbaito-dive.com/

スクロールとタップで画面が進む、ハイクオリティホラーサイト。
次々に発動する仕掛けにドキドキ。
音量大きめでスマホで見ることをお勧めいたします。

LEVEL9｜「INSIDIOUS」のプロモーションサイト

https://portfolio.oblio.io/insidious/

アメリカのホラー映画のプロモーションサイト。
ゲームのような美しいビジュアルの中、効果音と共にミニホラーゲームを体感できます。
サイトを見るだけで、映画へ興味が湧いてくる美しいサイト。
作り込まれた世界観に引き込まれます。

LEVEL10｜株式会社闇

バージョン1

http://v1.death.co.jp/

バージョン2

https://death.co.jp/ja/pc/

言わずと知れたホラテク集団「株式会社闇」。
バージョン2はスマホで見ることに特化しており、スクロールするたびに繰り出されるギミックが作り込まれたビジュアル、音声と相まって、恐怖心を刺激する秀逸サイトです。
闇カスタムモードで友達にも送りつけられちゃう悪戯モードあり。
紹介してきたサイトのいくつかはこちらの会社が作っているサイトでした。

【おまけ】つぐのひ　昭和からの呼び声

https://www.gamemaga.jp/browser_play/tsugunohi_shouwa_a/

ImCyan（アイムシアン）
ブラウザーでできちゃうホラーミニゲーム
おばあちゃんのお家に遊びに来ただけなのに。。。あなたは無事に家に帰れますか？
ざらつく質感のビジュアルと昭和な小物、背景にチラチラ見え隠れする仕掛けにドキッとします。
他にも無料ゲームを公開しているので、ご興味のある方はぜひ。

いかがでしたか？
秋の夜長に、ハイクオリティなホラーサイト
ぜひお楽しみください。

続編はこちら

第二弾！仕掛けのあるミステリー＆ホラーサイト集めてみました。

The post 技術とクオリティが詰まってる！おすすめホラーサイト集めました。 first appeared on FHWノート.

近年、NetflixやAmazon Prime Videoなど配信サービスのおかげで、気軽に映画鑑賞できるようになりました。フライング・ハイ・ワークスでも、趣味が映画鑑賞の社員が多く、映画の話題で盛り上がることも (*’ω’*)

さて今回は、そんな映画好きディレクターが、作品の公式サイトを調べてみました！
また、紹介する映画は、筆者鑑賞済みのおすすめ作品なので、この機会に是非ご鑑賞ください！

目次

1. きみの瞳が問いかけている
2. ワンダー　君は太陽
3. RUN
4. MINAMATA-ミナマタ
5. トップガン　マーヴェリック
6. ジュラシック・ワールド　新たなる支配者

おわりに

きみの瞳が問いかけている

https://gaga.ne.jp/kiminome/

2020年公開の恋愛映画「きみの瞳が問いかけている」の公式サイトです。

MOVIE

交通事故で失明した女性と、心身ともにボロボロの男性が恋に落ちる純愛物語です。明かされる過去と二人の運命に涙しました。この映画は、2011年公開の韓国映画「ただ君だけ」のリメイク作品です。筆者は先に韓国映画の方を観ていたのでストーリーは知っていたのですが、それでも俳優陣の演技力に引き込まれ、ボロ泣きしました(;_;)

WEB SITE

そんな「きみの瞳が問いかけている」の公式サイトですが、サイトはシンプルながら、映画の世界観を表現したデザインが特徴的です。このサイトでは写真が多く使用されていますが、どの写真も光を巧みに使っています。サイト制作にあたって、写真は重要な要素の一つです。費用はかかりますが、プロカメラマンに撮影してもらったり、有償素材を使用したりと、写真の質にもこだわりたいところです。

ワンダー　君は太陽

http://wonder-movie.jp/

天才子役ジェイコブ・トレンブレイ君主演、2018年公開のドラマ映画「ワンダー 君は太陽」の公式サイトです。

MOVIE

遺伝子疾患で生まれつき人と違う顔を持つ主人公オギー。そんな彼が学校に通い始めることに！差別や偏見にあいながらも、友情や家族の愛を通して成長していく様子が描かれています。主人公の強さと人の優しさに心癒されました。是非、ご家族と一緒に観ていただきたい作品です！

WEB SITE

そんな「ワンダー　君は太陽」の公式サイトですが、鮮やかなブルーと手書きで描いたような星が特徴的ですね！STORYのページでは、カーソルに沿って星が動くという見る者を楽しませる工夫も施されています。また、ファーストビューでは動画が流れており、予告編を観にいかなくても、映画の世界観が伝わります。ファーストビューに動画を使用することで、視覚的にブランドイメージを表現でき、ユーザーの関心度を高めることができるので、多くのサイトで取り入れられています (*’ω’*)

RUN

https://run-movie.jp/

2021年公開のサスペンス・スリラー映画「RUN」の公式サイトです。

MOVIE

足が不自由で車椅子生活を余儀なくされている少女と、献身的に支える母親の物語です。それだけ聞くと、感動作品か？と思いますが、そんな話ではございません。この母親何だかおかしい、、と映画を見る中で気づくはずです。結末は、映画を見るまでのお楽しみ！

WEB SITE

そんなハラハラドキドキする映画「RUN」の公式サイトですが、映画を見ていなくてもサイトから恐怖を感じます。文字や画像の上にカーソルを当ててみてください！あるタイトルは上下に揺れ、ある文字は前後に動き、、、予測不能な動きに不気味さを感じる人も多いのではないでしょうか。

MINAMATA-ミナマタ

https://longride.jp/minamata/

2021年公開のドラマ映画「MINAMATA-ミナマタ」の公式サイトです。

MOIVE

写真家ウィリアム・ユージン・スミスが撮影した水俣病の患者やその被害を収めた写真集「ミナマタ」をもとに、ジョニー・デップ主演で映画化された作品です。水俣公害問題の知られざる真実に胸が締め付けられました。映画を通して現在進行形の社会問題を知る良い機会になります。

WEB SITE

そんな「MINAMATA-ミナマタ」の公式サイトですが、スマホ版での見せ方が工夫されています。ファーストビューの予告動画に注目です。PC版とは違い、スマホ版ではすべての動画にリンクできるようになっています。動画を閲覧してもらうことで、映画に対する関心度を高める意味合いがあるのではないでしょうか。今はスマホユーザーがとても多いので、フライング・ハイ・ワークスもPC版・スマホ版両方を考慮した設計を心掛けております (‘ω’)ノ

トップガン　マーヴェリック

https://topgunmovie.jp/

36年ぶりに帰ってきた！　2022年公開のアクション映画「トップガン　マーヴェリック」の公式サイトです。

MOVIE

米海軍のエリートパイロット達に課せられた高難易度なミッション。果たしてミッション成功なるのか！？筆者は今作を観るために、1986年公開の「トップガン」も鑑賞しました。今作は前作から繋がる部分も多く、36年前の作品といえど「トップガン」は今作を観る前に鑑賞することをおすすめします。

WEB SITE

そんな「トップガン　マーヴェリック」の公式サイトですが、斜め切りで動きを出し、画面幅いっぱいに文字を配置することによって、空中戦の強い迫力を表現しています！また「共に飛ぶ」というキャッチコピーは簡潔ながら、前作から続く主人公の意思を強く感じます (゜゜)～

ジュラシック・ワールド　新たなる支配者

https://www.jurassicworld.jp/

言わずと知れた「ジュラシック・パーク」シリーズ最新作、2022年公開のSFアクション映画「ジュラシック・ワールド　新たなる支配者」の公式サイトです。

MOVIE

人類よ、過去の失敗からそろそろ学んでくれー！と毎回思う「ジュラシック・パーク」シリーズ。恐竜に太古のロマンを感じながらも、テクノロジーの発展で徐々に進化していくストーリーも見所です！公開は終了していますが、映画館で迫力を味わいながら観てほしい作品の一つです。

WEB SITE

そんな「ジュラシック・ワールド」のサイトですが、恐竜好き必見の仕掛けがあります。ページ下部の「ディノトラッカー」ボタンをクリック！なんと、世界中で恐竜の目撃情報が報告されているではありませんか。サイトの作り込みに感服です。（恐竜好き筆者もテンション爆上げ！）

おわりに

いかがでしたでしょうか？
映画などのエンタメ系は、作品の世界観を表現するためにも、ユニークなサイトが多いですね！
今回、映画の内容も踏まえてサイトを見てみたい！という想いから、鑑賞済みの映画に限定してサイトを探していたため、サイト探しに苦労しました (;O;)
でも、好きなジャンルに絞ってサイトを見ていくのは楽しく、映画を調べてるのかサイトを調べてるのか分からなくなるほど没頭しておりました ( *´艸｀)
気になるサイト・映画が見つかりましたら幸いです！

The post 映画好き必見！公式サイトを調べてみた！イケてるおすすめ映画サイト6選 first appeared on FHWノート.

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

タイトル通り季節は春…なんならもう暑いくらいになってきましたね。
季節の巡りを年々早く感じ、ついていけなくなってきました。
まだ！お花見を楽しみたいんだ！はやすぎるよ〜〜（；；）というあなたへ、
花がテーマのWEBサイトをご紹介します！

六角館さくら堂KYOTO

OPERA リップティント春に揺れる花びらのカラー

POLA すべてのお母さんにありがとう

母の日に公開された、POLAのメッセージ広告のWEBサイトです。
スクロールするとお花とメッセージが次々と流れていくようなアニメーションで構成されています。
特にECサイトに飛ばせるようなコンバージョンボタンも設置されておらず、
POLAの感謝を伝えたいという気持ちが伝わってきます。お花のアニメーションが圧巻です。
ただただ、すごい。

キリン 月見で一杯 花見で一杯

キリン一番搾りとレストラン「市場小路」と京都市立芸術大学のコラボ企画のWebサイトです。
桜は夜桜もいいですよね。夜のお花見を彷彿とさせる和風なデザインが美しいです。
タイトルのアニメーションや所々に散りばめられたふわふわとしたアニメーションも素敵です。
まったりとお酒を飲みたくなりますね。

いかがでしたか？
ほとんど桜になってしまいました( ◠ ‿ ◠ )
デザイナーの方は特にLPなど作成するときに春らしいデザインで！というリクエストもあると思います。
そういう時にぜひ参考にしたいすてきなサイトばかりでした！
デザイナー以外の方も、Webサイトなら年中お花見することができるのでたくさん見てくださいね！
ご覧いただきありがとうございました！( ・∇・)ﾏﾀﾈ〜

The post 春ですよ〜！花がテーマのおすすめWEBサイト集 first appeared on FHWノート.