「目に入った瞬間に記憶に残る」デザイン
ポートフォリオサイトに求められるのは「洗練」や「上品さ」だけではありません。ストリートポスター、パンクのフライヤー、スケートブランドのルックブック。これらに共通するのは「一瞬で目と脳に焼き付く大胆さ」です。
無料HTMLテンプレート『BOLD（ボールド）』は、その名の通り「太い」「大胆な」デザインに振り切ったテンプレートです。パソコンで閲覧すると画面四辺を太い黒枠が囲み、ヘッダーの名前は画面幅いっぱいに巨大なArchivo Black書体で表示される。画像にマウスを乗せるとモノクロに変換されてイエローのオーバーレイが掛かり、「VIEW PROJECT」の白文字が浮かぶ。すべてが攻撃的で、すべてが印象的です。
デザインの特徴とこだわり
ページフレーム ― 画面そのものを「額縁」にする
パソコン画面には、上下左右に太い黒い枠が表示されます。これは画面をポスターに見立てた「額縁」の演出。中に収まるすべてのコンテンツが、街角に貼り出されたポスターのように見えてくる仕掛けです。スマートフォンでは自動的にこの枠が消え、限られた画面幅を活かす設計に切り替わります。
名前は「壁一面の落書き」サイズ
ヘッダーに表示される名前は、パソコンでは約10remという圧倒的なサイズで表示されます。これはフォントサイズとしてはほぼ最大級。画面の下から勢いよくスライドアップして現れるアニメーションも加わり、まるでシャッターに描かれた巨大なストリートアートのような迫力です。
ボックスシャドウ ― 影で「浮かせる」カード
ギャラリーの各カードには、右下に8pxオフセットした真っ黒な影がベタ塗りで付いています。一般的な柔らかいドロップシャドウではなく、ハードなベタ影。これは「ネオブルータリズム」と呼ばれる最近のデザインスタイルの代表的手法で、レトロな手書き感覚とモダンなデジタル感覚が共存する独特のテイストを生み出しています。
ホバーするとカード本体が左上に移動して影との距離が広がり、まるでカードが「宙に浮いた」かのような動きに。この立体的なインタラクションが、フラットなデザインに奥行きを与えています。
こんな方・こんな用途におすすめ
グラフィックデザイナー・イラストレーター
太い線と強い配色は、ロゴデザインやイラストレーションの世界観と直結します。ギャラリーのイエローオーバーレイが、作品のパンチ力をさらに引き立ててくれます。モノクロ変換によって作品全体の構図が見えやすくなるため、デザイン的な実力がストレートに伝わるのも利点です。
ストリートブランド・スケートショップ
ブランドサイトの仮設版や、新コレクションのルックブックサイトとして即戦力になります。「PORTFOLIO v.1.1」と傾いて配置されたバッジは、限定版のステッカーのようなカジュアルさがあり、ブランドの「ストリート感」を自然に演出しています。
バンド・ミュージシャンのプロフィールサイト
太いフォント、黒枠、イエロー。パンクやハードコアのフライヤーに通じるビジュアルは、音楽アーティストの個性を最大限に引き出します。ライブ写真やジャケットアートをギャラリーに並べれば、サイトそのものがファンへのメッセージになるでしょう。
カスタマイズのヒント
アクセントカラーの変更
デフォルトのイエローは設定エリアで自由に変更可能です。ネオンピンクにすると「ポップアート」の世界、赤にすると「危険信号的な切迫感」のあるデザインに変化します。どの色を選んでも、太い黒枠との組み合わせで強いコントラストが保たれます。
パソコン時の外枠（ページフレーム）の太さ調整
外枠のサイズは10pxですが、これを太くすればより「ポスター感」が強まり、細くすれば「Web感」が残ります。完全に非表示にすることも可能です。
「↓ SCROLL」のバウンスアニメーション
ヘッダー下部で上下にバウンドする「↓ SCROLL」の文字は、訪問者の視線を自然に下へ誘導します。この文字も自由に変更可能なので、「SEE MORE」や「CHECK IT OUT」など、自分のトーンに合った言葉に置き換えられます。
まとめ ― 控えめなデザインに飽きた人へ
『BOLD』は、名前の通り「大胆」以外の何者でもないテンプレートです。太い線、重い影、巨大な文字、強い色。すべてが「もっと見て」と叫んでいる。繊細で控えめなポートフォリオの世界に、ストリートの力強さを持ち込みたい方へ。
