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