[HYBRID THEORY] の世界観を「源界明朝」で表現してみる

2021年2月21日2021年2月22日

この記事は約 7 分で読めます。

4.5

源界明朝げんかいみんちょうと言うフォントに
出会った瞬間に思い浮かんだのは、
「LINKIN PARK」の 1stアルバム
[HYBRID THEORY] 。

LINKIN PARK

源界明朝

[ HYBRID THEORY ]

↑ このアルバムカバーの世界観を
表現してみたいと思いました。

※ フォントが反映されない場合
ブラウザキャッシュをクリアして下さい。

はじめに

何だか分からない方のために
軽く説明します。

源界明朝げんかいみんちょう

源界明朝は
「源ノ明朝 (Source Han Serif)」の
派生フォントで書体コンセプトは
読める限界ギリギリまで破壊された
世界観の見出し向け明朝体。

LINKIN PARK

LINKIN PARK は、アメリカのロックバンド。
2000年10月、ドン・ギルモアのプロデュースで
1stフルアルバム [HYBRID THEORY] を
リリースしてメジャーしてデビュー。
ウォール・ストリート・ジャーナル
『史上最も人気のある100のロックバンド』12位。

HYBRID THEORY

[HYBRID THEORY] は、
リンキン・パークの1stアルバム。
2000年10月24日に
ワーナー・ブラザース・レコードより
リリースされた。

ラウドロックにヒップホップ、
ハードコア、インダストリアル、
エレクトニックなど
様々な音楽要素を融合させた、
ヘビィでハードなサウンドをバックに
激しいシャウトやラップ、
スクラッチなどが乱れ舞う、
ニュー・メタルやミクスチャー・ロックの
先駆けとなった。

Linkin Park performing in Berlin in October 2010.

20th anniversary edition

『ハイブリッド・セオリー：20周年記念盤』
を2020年10月9日にリリース。
同時に未発表のデモ曲
「She Couldn’t」も発表。
オリジナル収録曲をはじめ、
リミックスアルバム [REANIMATION] 、
『Hybrid Theory EP』、
そしてシングル曲の各種B面、
デモ曲、ライブ録音、リミックスを収録。

[HYBRID THEORY] の世界観

上記、
「源界明朝」、「LINKIN PARK」、
[HYBRID THEORY] の
基本情報はご理解頂けたと思います。

BORDER ONLY IN CORNERS

この
LINKIN PARK の1stアルバムの
世界感と言う事で、

LINKIN PARK

上記 LINKIN PARK の文字、
四隅にだけ囲み枠があります。
Album Cover と比べて頂けると
分かるかと思います。

「何だよ！そんな事かよ！」
なのですが、
Webデザインの観点から
四隅にだけ囲み枠は
「」(括弧)
のような訳にはいかないのです。

BLOOD-COLORED SOLDIER

Album Cover センターの
Soldier (兵士) の色は
朱殷しゅあん/Shuan/#740A00/
で表現しました。

朱殷 (しゅあん) とは、時間がたった血のような暗い朱色のことです。
血の色や血染めの色など、
凄惨 (せいさん) な様子を表現する色として使われてきました。

CREATE OUT OF IMAGES

様々な要素を融合させた、
革新的なサウンド理論は
読める限界ギリギリまで破壊された
世界観の「源界明朝」と、
朱殷しゅあんと言う凄惨せいさんな様子を
表現する色によって
[HYBRID THEORY] の
世界観が生まれました。

あくまでも
個人的主観と言う事を
付け加えさせて頂きます。

[HIBRID THEORY] LOGO GENERATOR

LINKIN PARKは現在、
[HYBRID THEORY] 風の
Logoを作成できる
「Hybrid Theory Logo Generator」
を公開しています。
これは [HYBRID THEORY] の
ジャケットの
LINKIN PARK Logoを、
好きな文字で作成できると言うもの。
例えば、「FOUR 4to6」で作成する
と、この画像のようになる。

四隅にだけ囲み枠をつけるCSS

上記でもお話しましたが、
四隅にだけ囲み枠は、
「」(括弧) のように
簡単に表示出来る訳ではなく、
情報も少ないのが現状です。

擬似要素

イメージとしては、
borderを擬似要素で
隠す感じです。

注意点

背景が単色でない場合、
この方法は使用できません。

結果

LINKIN PARK

HTML

<div class="corners-border">
  <span>LINKIN PARK</span>
</div>

CSS

.corners-border {
  font-size: 2.6rem;
  font-family: GenkaiMincho, serif;
  width: 9em;
  padding: 0.1em;
  border: solid 2.5px black;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.corners-border::before, .corners-border::after {
  content: "";
  display: block;
  position: absolute;
  background: #fff;
}

.corners-border::before {
  top: -0.1em;
  bottom: -0.1em;
  left: 0.2em;
  right: 0.2em;
}

.corners-border::after {
  left: -0.1em;
  right: -0.1em;
  top: 0.2em;
  bottom: 0.2em;
}

.corners-border span {
  color: #740a00;
  position: relative;
  z-index: 1;
}

SVG data URI border-image

この記事のヒーローイメージに
採用しているテクニックです。
背景も単色に限定されないので
背景画像も使用できます。

CSS

.linkin-park {
  padding: 0.3em;
  border-style: solid;
  border-width: 0.3em;
  border-image-source: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox=%220 0 48 48%22%3E%3Crect x=%223%22 y=%223%22 width=%2242%22 height=%2242%22 fill=%22transparent%22 stroke=%22%23333%22 stroke-width=%226%22 %2F%3E%3C%2Fsvg%3E");
  border-image-slice: 50%;
  border-image-width: 0.5em;
  align-items: center;
  display: flex;
  justify-content: center;
}