[HYBRID THEORY] の世界観を「源界明朝」で表現してみる
この記事は約 7 分で読めます。
源界明朝と言うフォントに
出会った瞬間に思い浮かんだのは、
「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日に
ワーナー・ブラザース・レコードより
リリースされた。
ラウドロックにヒップホップ、
ハードコア、インダストリアル、
エレクトニックなど
様々な音楽要素を融合させた、
ヘビィでハードなサウンドをバックに
激しいシャウトやラップ、
スクラッチなどが乱れ舞う、
ニュー・メタルやミクスチャー・ロックの
先駆けとなった。

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 の文字、
四隅にだけ囲み枠があります。
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を擬似要素で
隠す感じです。

注意点
背景が単色でない場合、
この方法は使用できません。
結果
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;
}
参考
https://codepen.io/ThiemelJiri/post/3-css-border-in-corners-techniques
最後に
源界明朝の作者、
LINKIN PARK に敬意を。
世界中の LINKIN PARK
ファンに感謝を。
LINKIN PARK のボーカリスト
Chester Bennington に哀悼の意を表します。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません