「誰にでも好かれるデザイン」を、あえて捨てる
万人に好まれるデザインは、裏を返せば「誰の記憶にも残らないデザイン」になりかねません。もし、たった1人の「ぴったりの人」に深く刺さることを目指すなら、デザインの常識を疑うところから始める必要があります。
無料HTMLテンプレート『AVANTGARDE（アヴァンギャルド）』は、その名の通り「前衛」を志向するテンプレートです。ほぼ完全な黒の背景、画面全体に薄く重ねられたフィルムノイズ、マウスに追従する白いカスタムカーソル。通常のWebデザインにおける「見やすさ」の基準を意識的に外し、訪問者を「異世界に引き込む」ことに全振りした設計です。
デザインの特徴とこだわり
カスタムカーソルが作る「触れている感覚」
『AVANTGARDE』を開くと、まずブラウザ標準のマウスカーソルが消えていることに気づきます。代わりに現れるのは、白い小さなドットと、それを追いかけるようにゆっくり動く白い円。この2つの要素がマウスの動きに連動することで、「画面に手で触れている」ような独特の操作感が生まれます。
リンクやクリック可能な要素にカーソルを重ねると、外側の円がフワッと大きくなり、半透明に変化。「ここを押せますよ」という合図を、従来のポインターアイコンではなく、アニメーションで伝えてくれるのです。デジタルの操作なのに、手触りのような体験を設計している。この発想が、テンプレート名に込められた「前衛」の意味なのでしょう。
モノクロからカラーへ ― ギャラリーの演出
Selected Works セクションでは、すべての画像がモノクロ（白黒）の状態で表示されます。しかし、マウスを乗せた瞬間にカラーに切り替わる。この演出はシンプルですが、驚くほど効果的です。
白黒の状態では「落ち着いた美術書のページ」のような空気ですが、カラーになった瞬間にその作品だけが画面の中で「呼吸を始める」かのよう。画像が偶数番目と奇数番目で意図的にずらして配置されている不均一なグリッドレイアウトも、印刷物のエディトリアルデザインを彷彿とさせます。
フィルムノイズが纏わせる「作品性」
画面全体に薄く重ねられたSVGノイズテクスチャは、古いフィルム写真のようなざらつきを再現しています。このノイズがあることで、デジタル画面特有の「無機質なツルツル感」が薄まり、サイト全体にアナログの温もりが宿ります。
写真展のDMや、オートクチュールのルックブックに通じる「紙の質感」をスクリーン上で感じられるのは、この微細なテクスチャのおかげです。
こんな方・こんな用途におすすめ
前衛的なアーティスト・クリエイターのポートフォリオ
ファッションデザイナー、実験映像作家、コンセプチュアルアーティストなど、自分の作品世界そのものがブランドである人に最も適しています。サイトを訪れた瞬間から「この人は、何か違う」と感じさせる力があります。
ハイエンドファッション・ラグジュアリーブランド
全面ダークの世界観は、ラグジュアリーブランドの空気とも親和性が高いです。モノクロギャラリーでルックブックを見せ、カーソルを乗せた時だけカラーが現れる。この「見たいものだけが色づく」体験は、高級感の演出に寄与します。
デジタルエージェンシーのブランドサイト
カスタムカーソルやインタラクティブな演出そのものが「技術力の証明」になるため、Web制作会社やデジタルエージェンシーの名刺サイトとしても理想的です。
カスタマイズのヒント
モノクロ効果のON/OFF
ギャラリー画像のモノクロ効果を外して最初からカラーで表示したい場合は、設定エリアから簡単に変更できます。ポップな作品が多いポートフォリオでは、あえてカラーのまま見せる選択もアリでしょう。
ノイズテクスチャの濃度調整
フィルムノイズの濃さは背景のテクスチャ設定で調節可能です。濃くすれば「古い映画のような粗さ」が際立ち、薄くすれば「現代的なマットな質感」になります。0にすれば完全にクリーンなダークテーマとしても使えます。
まとめ ― 闇の中から、手を差し伸べるように
『AVANTGARDE』は、多くの人に「使いやすい」と思ってもらうことを目的に作られたテンプレートではありません。その暗闇と静寂の中に「自分の居場所を見つけた」と感じる人だけに、深く、強く響くことを狙った設計です。
前衛とは、先頭に立つこと。その覚悟がある方に、このテンプレートを捧げます。
