プロジェクトの相談を申し込む プロジェクト紹介にスキップ

DOREMI ENTERTAINMENT · SINCE 2006ロゴの青緑色の台形は
プロジェクターからの光です

16 DRAMAS · 18 OSTその光でドラマ16編を照らし
OST18編を作りました

WEBSITE RENEWALもうホームページにも
火をつけた番です

DOREMI ENTERTAINMENT · WEBSITE RENEWAL PROPOSAL

ポスターを掛けた壁を、点灯する上映館に

DOREMI ENTERTAINMENTWebサイトリニューアル提案
SCENE＆SCORE・STORIES THAT STAY 2つの方向

上映を始める
S＃01 / OVERVIEW プロジェクトの概要

ドラマを作り、
その場面に音楽を塗る会社

DOREMI ENTERTAINMENTは2006年SBS〈帰ってきてスンエさん〉を皮切りにドラマを作ってきた製作会社です。これまでドラマ16編を直接制作し、ドラマOST18編を作りました。俳優マネジメントと作品マーケティングも一緒に務めています。

BlueCanvasは、同社のホームページを新たに設計する2つの方向を提案しました。映写機の光と音楽でシーンを開くSCENE＆SCORE、映画のような映像とディープティル・アンバー色で物語の余韻を盛り込んだSTORIES THAT STAYです。このページでは、2つの提案が出てくるまで、心配した内容とプロセスをまとめました。

CLIENT
DOREMI ENTERTAINMENT
DOREMI ENTERTAINMENT
SECTOR
ドラマ制作・OSTレコード
マネジメント・マーケティング
OUR ROLE
リサーチ、ブランド解析、情報構造、
UIデザイン、モーショングラフィック、ブランドフィルム
DELIVERABLE
メイン提案2種、ブランドフィルム2編、モバイル画面、カラー・書体ガイド
  • 2006初作品〈帰ってきて純愛さん〉
  • 16 自分で作ったドラマ
  • 18 作成したドラマOST
  • 4 ドラマ、OST、マネジメント、マーケティング
S＃02 / CHALLENGE 出発点

が

既存のメイン画面の構成
  1. 1メニューはHOME、ABOUT、WORK、PRの4つです。
  2. 2最初の画面には、作品ポスターが2行につながります。
  3. 3メニューの横にSNSショートカットボタンがあります。

FOUR QUESTIONS

リニューアルは
4つの質問で始まりました

  1. Q1
    最初の画面でこの会社が何をしているのかわかりますか？

    ドラマ、OST、マネジメント、マーケティングの4つのことをメイン画面の中で一シーンずつ見せることにしました。

  2. Q2
    ドラマと音楽を一緒に作るという強みが見えるでしょうか？

    作品ごとにドラマ制作なのかOST制作なのか役を一緒に書いて、OSTには別にシーンを出してくれました。

  3. Q3
    2006年から積み上げた作品を一目で見ることができますか？

    年度別作品をA案はフィルムストリップの上に、B案は沿革リストでまとめました。

  4. Q4
    携帯でも同じ雰囲気が伝わりますか？

    水平に流れるシーンは指でめくるように変え、縦画面に合わせて文字サイズとシーンの長さを再設定しました。

S＃03 / BRAND ブランドの解釈

名前とシンボルの中に
すでに答えがありました

新しいシンボルを作る前に、今のロゴをもう一度読みました。 3つの音節の名前、ターコイズ色の台形、そして2色だけのロゴから、ホームページ全体の物語を引き出しました。

01 · NAME

ド、レ、ミ

DO、RE、MI 3つの音節は3行に交互に積み重ねられています。界名の最初の3つの音であり、音楽が始まる音です。 3行を五線上に上げると、会社名がそのままメロディになります。

02 · SYMBOL

プロジェクターの光

REの前のターコイズ色の台形は会社のシンボルから来ました。シンボルでは、この図形はフィルムリールの2つの横に置かれ、プロジェクターの形をしています。台形はプロジェクターからスクリーンに伸びる光で、ロゴではリールの代わりにREがプロジェクターの席に立っています。

03 · SCENE & SCORE

光はシーン、音は音楽

光はスクリーンに結ぶシーンを、系名はそのシーンに流れる音楽を意味します。ドレミがする2つのことであるドラマとOSTが名前とシンボルに一緒に入っています。最初の提案の名前SCENE＆SCOREはこの解釈から来ました。

04 · TWO COLORS

モックとターコイズ

ロゴに使われている色は、食べ物に近い#231F20とターコイズ#81ADA8の2つだけです。どちらの提案のパレットも、このターコイズブルーから出発しました。

S＃04 / MOODBOARD ムードボード

単語をシーンで
最初に撮ってみました

ブランドの解釈からの言葉は、光、シーン、楽譜、ステージ、都市、フィルムでした。言葉ごとに似合うシーンをイメージにして、2つの提案の中の素材で書いた。俳優の写真がなくてもドラマ制作会社の雰囲気が伝わるようにするためです。

  1. プロジェクターから伸びた光です。すべてのシーンがここで始まります。
    01 LIGHTライトA案・初シーン
  2. カメラが帰るリビングルームのセットです。ドラマを作る事を示しています。
    02SET現場 A案・ドラマ
  3. 歩面台とマイクが待っているレコーディングルームです。 OSTの作成を示しています。
    03SCORE楽譜A案・OST
  4. 照明の下に置かれた空の椅子。次の主人公を探すオーディションシーンになります。
    04STAGEステージ A案・マネジメント
  5. 点灯した都市と大型電光板。作品を知らせるマーケティングを示しています。
    05CITY都市 A案・マーケティング
  6. 光を残したフィルムです。長く残る話を意味します。
    06FILMフィルム B案・最初のシーン
  7. 雨の降ったソウルの路地です。普通の一日から話が始まります。
    07SEOUL路地 B案・シーン切り替え
  8. 灯りがついた宮殿の夜です。ジャンルごとに光の温度を異なって捉えました。
    08GENRE劇 ジャンル実験
  9. 懐中電灯一つが照らす地下駐車場です。
    09GENREスリラージャンル実験
  10. 傘を一緒に書いた二人が歩く雨の路地です。
    10GENREロマンスジャンル実験
  11. 夕食に集まった家族。
    11GENRE家族劇 ジャンル実験
S＃05 / STRUCTURE 訪問者と情報構造

ホームページを開く人は
あなたのクラスでした

制作会社のホームページには視聴者だけでなく、一緒に働く人もよく訪ねます。訪れる人ごとに確認したい情報が異なり、それぞれが到着する場面を先に決めました。

  • 01放送会社・OTT・共同制作会社

    どの作品をどのチャンネルと作成したかを確認します。

    S#04 WORKS · S#06 HISTORY
  • 02俳優と新人志望生

    マネジメント方式とオーディションのニュースを探します。

    S#07 NEW FACE
  • 03作曲家・歌手・レコード会社

    どのドラマのOSTを作ったのか見てみましょう。

    S#05 OST
  • 04記者と視聴者

    作品のニュースやプレスリリース、壁紙を探します。

    S#08 PR ROOM

ホームページの構成を
スクリプトのように書きました

メニュー4つだった構造を9つのシーンに分けました。シーンごとに場所や時間、見せてくれる内容を台本のシーンリストのように少ない後にデザインを始めました。以下はA案SCENE＆SCOREのシーンリストです。

既存メニューHOME ABOUT WORK PR
新しいシーンS＃01 S＃02 S＃03 S＃04 S＃05 S＃06 S＃07 S＃08 S＃09
〈DOREMI ENTERTAINMENT〉 ホームページシーンリストA案 SCENE & SCORE ・9つのシーン
  1. S#01.
    THE BEAM領事室/夜

    映写機の光が点灯し、光が誤線になってド・レ・ミセ音が鳴ります。ロゴとともに SCENE & SCORE が表示されます。

    既存のHOME
  2. S#02.
    ABOUT紙上/昼

    2006年初作品からこれまでを数字4つにまとめ、会社紹介につながります。

    既存のABOUT
  3. S#03.
    BUSINESS撮影現場/夜

    ドラマ、OST、マネジメント、マーケティングを一シーンずつ渡して見せてくれます。

    既存のABOUT
  4. S#04.
    WORKS上映館/夜

    自分で作ったドラマ16本がフィルムのように水平に流れます。

    既存のWORK
  5. S#05.
    OST録音室/昼

    五線上の音符と波形の間にOST18編を紹介します。

    既存のWORK
  6. S#06.
    HISTORYフィルム保管室/夜

    2006年から2020年までの作品をフィルムストリップの上に載せます。

    既存のWORK
  7. S#07.
    NEW FACE空のステージ/夜

    ライトの下の空の椅子で次の主人公を探すオーディションのニュースにつながります。

    既存のPR
  8. S#08.
    PR ROOM資料室/昼

    プレスリリース、お知らせ、壁紙、ブランドフィルムを4枚のカードにまとめます。

    既存のPR
  9. S#09.
    ENDING CREDITSエンディング/ナイト

    会社情報とフィルモグラフィーがエンディングクレジットのように上がり、サイトが終了します。

    新しいシーン
S＃06 / COLOR カラーチャート

ターコイズブルーの1つ
2つのパレット

ロゴのターコイズ色＃81ADA8を基準に明るさと温度を移し、色を見つけました。光の方に明るくするとAの中のミントになり、フィルムの方に下げるとBの中のディープチルになります。 Bの中にはターコイズの反対側にあるタングステン照明の琥珀を加え、劇場の暖かさをのせました。

CI Teal#81ADA8ロゴの台形
  1. 光に向かって明るくBeam Mint#A6E3D9プロジェクターの光を受けたターコイズ・A案
  2. 日陰に向かって下げるShade Teal#3F6F69明るい背景の上のハイライト・A案
  3. フィルムベースまで下げるFilm Teal#0C292Aレコードとお問い合わせシーンの背景・B案
  4. 反対側の色Tungsten Amber#EFB563劇場照明の暖かい光・B案

A · SCENE & SCORE

領事室の闇と光

  • 忙しい・60％火が消えた領事室の色です。光と文字が最も鮮明に見えるように、背景のほとんどをこの色で塗ります。

  • スクリーン・26％光が当たったスクリーンの色です。会社紹介とOSTのように明るいシーンの背景と暗いシーンの文字に書き込みます。

  • ロゴの光・7％ロゴの台形からそのまま取り込んだターコイズです。ロゴと小さな強調にのみ書き込みます。

  • 点灯した光・4％ターコイズ色を光の方に照らした色です。タイムコード、シーン番号のように暗闇の中の小さな表示に書き込みます。

  • 日陰の光・3％ターコイズ色を色合い側に下げた色です。明るい背景の上のシーン番号とハイライト文字に書き込みます。

B · STORIES THAT STAY

フィルムとタングステン照明

  • 夜・46％青いオーラが回る黒です。映像と写真が置かれる背景です。

  • フィルムベース・22％ターコイズ色をフィルムベース深さまで下げた色です。レコードとドアのシーンの広い面に書き込みます。

  • 紙・22％作品ギャラリーと沿革の基盤です。劇場プログラムブックの紙を思い出しました。

  • 照明・7％ターコイズ色の反対側にあるタングステン照明の色です。タイトルの1つの単語とボタンにのみ配置します。

  • 暑い・3％補助文章とキャプションの色です。暗い背景でも読める明るさに合わせました。

色見本を押すと、HEX値がコピーされます。スウォッチ内の数字は、その上に上げる文字色との明度対比です。

S＃07 / TYPOGRAPHY フォント

アスペクト比のように
伸びる文字

Aの英語のタイトルは、文字幅を62から125まで変更できるArchivoで書かれています。下の見本のように幅を広げると、4:3画面がシネマスコープに広がる感じがします。タイムコードとシーン番号はJetBrains Mono、ハングルはPretendardに合わせました。 Bさんは映画ポスターのタイトルのように狭くて高いBarlow Condensedを選びました。

Archivo · Aのタイトル wdth 62

SCENE & SCORE

JetBrains Mono · タイムコードEP / HH:MM:SS:FF

EP.01 00:00:00:00

S#01 THE BEAM · S#02 ABOUT · S#03 BUSINESS

Barlow Condensed · B案タイトル 600

STORIES
THAT STAY.

Pretendard · ハングル本文 400 · 600 · 800

シーンが終わっても
音楽は残ります。

ドラマの感情を最も長く覚えさせるのは音楽です。

S＃08 / MOTION モーション原則

スクロールが
再生ボタンになります

どちらの提案も、スクロールをビデオの再生ヘッドのように扱いました。下がるとシーンが前に進み、上がると巻き戻します。訪問者がスピードを決めるので、長い話も退屈ではないように見えます。

A案最初のシーンのフレーム：プロジェクターの光が五線に変わる過程
01 · SCROLL = PLAYHEAD

スクロール再生ヘッド

Aの最初のシーンのプロジェクターライトは、180枚のフレームをスクロール位置に合わせて描きます。このカードを通り過ぎると、同じようにフレームが移動します。

02 · TIMECODE & S#

タイムコードとシーン番号

画面下のタイムコードとシーン番号が、今どのシーンを見ているかを知らせます。このページの下の目次バーも同じように移動します。

台形の光の形で開く撮影シーンのシーン
03 · LIGHT REVEAL

光で開く切り替え

A案の事業紹介シーンでは、写真がプロジェクターの光の形で開きます。新しいシーンが登場すると台形が広がり、画面を埋めます。

04 · SOUND ON DEMAND

音は訪問者の電源を入れます

B内のレコードシーンでは、ボタンを押すとアンビエントサウンドが再生されます。音は訪問者が直接オンにしたときにのみ出てきます。

A案案

SCENE＆SCOREすべてのシーンに音楽が流れます

プロジェクターの光と五線路で会社を紹介する方向です。最初の画面で光が誤線になり、ド・レ・ミセ音が点灯した後、ロゴが表示されます。画面下のタイムコードに沿って、9つのシーンが1つのドラマのように続きます。

  • プロジェクターの光が誤線になる最初のシーン（フレーム180枚をスクロールで再生）
  • 4つのことを1シーンずつ渡す固定ステージ
  • フィルムストリップの上に置かれた2006〜2020フィルモグラフィ
  • エンディングクレジットで終わる最後のシーン
Archivo · JetBrains Mono · Pretendard
DIRECTION NOTES

提案Ａのシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。

  1. S＃01・光が誤線になる

    映写機から出た光茎が五線に変わり、その上からド・レ・ミセ音が順番に点灯します。

  2. S#01・16と18

    フィルムがトンネルのように巻かれ、ドラマ16編とOST18編という数字が浮かび上がります。

  3. S＃03・4つのこと

    左の大きな文字と右のシーンが一緒に変わり、ビジネスエリアの4つを順番に紹介します。

  4. S#04 ・フィルムのように流れる作品

    スクロールすると、自分で作ったドラマ16本が上映館のフィルムのように水平に進みます。

  5. S#05・五線上のOST

    明るい紙の上に音符が流れ、その下の波形とともにOST 18編のリストが続きます。

  6. S#06 ・フィルムストリップ沿革

    年が変わるたびに大きな数字が一緒に進み、2006年からの作品を見せてくれます。

  7. S#07 ・空の舞台の椅子

    照明が照らされた空の椅子の上に新人俳優を探すオーディションの案内が置かれます。

  8. S#09 ・エンディングクレジット

    サイトの最後は映画のようにクレジットが上がり、フィルモグラフィーを再び示しています。

B案

STORIES THAT STAY話は終わっても、感情は続く

映画のような映像とディープティル・アンバー色で作品の余韻を込めた方向です。スクロールすると、10秒のブランド映像がその速度に合わせて再生され、ソウルの夜のシーンと水平に流れる作品ギャラリー、回転するレコードが順番に続きます。

  • スクロール速度に合わせて再生される10秒ブランド映像
  • 一言ずつ明るくなる紹介文と画面いっぱいに広がるソウルの夜
  • 横に流れる作品ギャラリーと作品詳細ウィンドウ
  • 回転するレコードと訪問者が直接オンにするアンビエントサウンド
Barlow Condensed · Pretendard
DIRECTION NOTES

B案のシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。

  1. 01 · STORIES THAT STAY

    光を放つフィルムの上に大きなタイトルが置かれます。スクロールすると、画像が前方に再生されます。

  2. 01・一言ずつ明るくなる文章

    会社が信じる物語の力を一文で書いて、読む速度に合わせて単語を一つずつ明らかにします。

  3. 02・ソウルの夜

    小さな窓のように見えるソウルの夜のシーンがスクロールに沿って画面いっぱいに広がります。

  4. 02・作品ギャラリー

    ポスターが水平に流れ、カードを押すと作品詳細ウィンドウが開きます。

  5. 03 · BEYOND THE FRAME

    ドラマ、音楽、マネジメント、マーケティングを大文字のアコーディオンに広げます。

  6. 04 · PRESS FEEL.

    回転するレコードの横にあるボタンを押すと、短いアンビエントサウンドが再生されます。

  7. 05 · SINCE 2006.

    沿革を上から下に下り、2020年から最初の作品までさかのぼります。

  8. 06 · WHAT’S YOUR STORY?

    最後のシーンでは、一緒に作る次の話を聞きます。

S＃11 / BRAND FILM ブランドフィルム

2つの提案のために
短いフィルムを2つ作成しました

ホームページ 最初の画面と紹介資料に使えるように提案ごとにブランドフィルムを作りました。 A眼フィルムにはシーンに合わせた短い音楽を一緒に着せ、B眼フィルムは最初の画面でスクロール速度に合わせて再生されます。

A · SCENE & SCORE · 0:15

映写機の光が五線になり、ド・レ・ミセ音がフィルムの中のシーンにつながったあとロゴで終わる映像です。

B · STORIES THAT STAY · 0:10

光を残したフィルムの上にカメラがゆっくり動いて照明が変わる映像です。音なしで繰り返し再生されます。

S＃12 / MOBILE モバイル

手の中でも
同じ上映館

オーディションのお知らせや作品のお知らせは、携帯で先に確認する人が多いです。水平に流れる作品ギャラリーは指でめくり、固定シーンは縦画面に合わせて長さと文字サイズを再設定しました。

A案・ファーストシーンモバイル画面
A・ファーストシーン
B案・ファーストスクリーンモバイル画面
B・第一画面
提案Ａ・４日のモバイル画面
A・4つのこと
B案・作品ギャラリーモバイル画面
B・作品ギャラリー
A案・OSTモバイル画面
A · OST
B案・レコードモバイル画面
B・レコード
A案・沿革モバイル画面
A・沿革
B案・沿革モバイル画面
B・沿革
COMPARE 2つの方向はどのように異なりますか

同じ会社を紹介する
2つの演出

両方の提案は同じ内容を含んでいますが、シーンを開く方法と雰囲気が異なります。会社が最初の画面で最初に伝えたい言葉が何であるかに応じて選ぶことができるように違いをまとめました。

区分A・SCENE & SCOREB・STORIES THAT STAY
最初の画面プロジェクターの光が誤線になるモーショングラフィックスクロール速度に合わせて再生される10秒のブランド映像
カラーブラック・アイボリー・ロゴのターコイズディープティール・アンバー・ペーパーカラー
フォントArchivo · JetBrains MonoBarlow Condensed
作品を見せる方法フィルムのように水平に流れるドラマ16編ポスターギャラリーと作品詳細ウィンドウ、DRAMA・OSTフィルター
音楽の表示方法五線上の音符と波形、OST 18編リスト回転するレコードとアンビエントサウンド
沿革フィルムストリップの上の年別作品SINCE 2006年革新リスト
ルート タイムコードとシーン番号（S＃01〜S＃09） トップメニューと進行状況バー
最後のシーンエンディングクレジットWHAT’S YOUR STORY?お問い合わせガイド
重い場所 会社の名前とシンボルを物語で解く作品が残す感情と雰囲気

WEBSITE RENEWAL PROPOSAL

Client
DOREMI ENTERTAINMENT
Project
Webサイトリニューアル提案・2026年10月
Research
会社紹介・作品・OST資料まとめ
Brand Reading
ロゴとシンボルの解釈、キーワードとムードボード
Structure
訪問者定義、シーンリストで書いた情報構造
Direction A
SCENE & SCORE・UIデザイン、モーショングラフィック、ブランドフィルム
Direction B
STORIES THAT STAY・UIデザイン、スクロール映像、アンビエントサウンド
Mobile
縦画面シーンの再構成と確認
Typefaces
Archivo · JetBrains Mono · Barlow Condensed · Pretendard
Studio
BlueCanvas

FILMOGRAPHY · 2006–2020

  • 戻ってきます。
  • キムチチーズスマイル
  • 刀雑巾
  • いたずらな愛
  • 内祖の女王
  • 雷のような文房具
  • 君の声が聞こえて
  • 無定都市
  • あなたの隣人の妻
  • サムナムサム
  • 純情に反する
  • 美しい私の花嫁
  • 超家族2017
  • 死ななければならない人
  • その日のコーヒー
  • 私生活

TO BE CONTINUED

THE NEXT SCENE

あなたの会社は
どのシーンとして記憶されますか？

ホームページは、一緒に働く人が会社に初めて会う場所です。
会社が持っている名前とシンボルから一緒に読み直します。

プロジェクトを話す他のポートフォリオを見る

その他のプロジェクト

    Contact

    まだ漠然としたアイデアでも構いません。
    プロジェクトを一緒に 整理しましょう

    現在の状況と目標をお聞かせください。 実現可能な範囲、進め方、概算費用をご案内します。

    DIRECT

    opci1004@gmail.com KakaoTalk @bluecvs

    質問4つ・約2分

    ご依頼内容

    どのような作業をご一緒しましょうか。

    複数選べます。まだ決まっていない場合は「その他」を選んでください。

    ご予算

    お考えのご予算はどのくらいですか。

    おおよその範囲でも、ご提案づくりに大いに役立ちます。

    プロジェクト説明

    今の状況をお聞かせください。

    整っていなくても大丈夫です。下の項目を押すと入力の枠が入ります。

    0

    RFPや参考資料を2点までアップロードできます。対応形式：PDF、PPT、Word、Excel、JPG、PNG、ZIP

    ご連絡先

    どちらへご返信しましょうか。

    このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー および 利用規約が適用されます。

    作業範囲・予算・プロジェクト内容・連絡先をご入力ください。