「重厚」でも「無機質」でもない、第三の選択肢
ポートフォリオサイトのデザインを選ぶとき、多くの人が「ダークテーマかライトテーマか」で悩みます。黒背景は格好いいけれど重い印象になりがち。白背景はクリーンだけど少し味気ない。そんな二者択一の先にある、第三の世界観を提案するテンプレートがあります。
無料HTMLテンプレート『GLASS（グラス）』は、すりガラスのような半透明パネルと、パステルカラーのグラデーション背景を組み合わせた「グラスモーフィズム」デザインのテンプレートです。コンテンツが載っているカードは半透明で、背景がぼんやりと透けて見える。まるで曇りガラスの窓辺から景色を眺めているような、穏やかで心地よい世界が画面の中に広がります。
デザインの特徴とこだわり
背景のグラデーションボール ― 透ける景色を作る
画面の奥に配置された2つの巨大な色の球があります。ひとつはピンク系、もうひとつはブルー系。この球は強くブラー（ぼかし）がかかっているため、はっきりとした形は見えません。
水彩画の具が水の中で溶けていくような、ふわっとした色の移ろいだけが感じられます。そしてこの色の変化が、前面に重ねたすりガラスカードを通して透けて見える。ガラスカードの「透けている感」を最大限に引き出す、巧みな背景設計です。
ガラスカードのやさしい存在感
プロフィールやギャラリーを載せるカードは、すべて半透明の白で統一されています。カードの境界線も白く、大きな角丸で柔らかい印象に。影は極めて薄く、「紙が浮いている」のではなく「ガラスの板が空気の中に漂っている」ような軽さです。
プロフィールカードの中央には丸くトリミングされたアイコン写真が配置され、その下に名前、肩書き、自己紹介が続きます。リンクボタンはピルシェイプ（カプセル型）で、ホバーすると少し浮き上がって白く光る。すべてがやさしく、すべてが丸い。このテンプレートに「角」はありません。
ギャラリーのホバーエフェクト ― ガラスの曇りが晴れるように
正方形にトリミングされたギャラリー画像にマウスを乗せると、画像が静かにズームアップ。同時に、すりガラス風のオーバーレイが表面に浮かび、作品名が中央に現れます。画像をクリックすると、角丸のモーダルが画面中心にぽんっとバウンドするように現れるアニメーションも気持ちよく設計されています。
こんな方・こんな用途におすすめ
イラストレーター・ハンドメイド作家
やわらかいデザインは、手描きのイラストやハンドメイド作品との相性が抜群です。黒背景では作品が浮きすぎ、白背景では溶け込みすぎる。パステルグラデーションの中にガラスカードで展示するこの構成なら、作品を「やさしく包む」ように見せることができます。
パーソナルブランディング・自己紹介サイト
SNSのリンクをまとめた「リンクインバイオ」的な使い方にも最適です。プロフィール写真、自己紹介、各SNSへのボタン、そして作品ギャラリーがひとつのページに綺麗にまとまります。
ウェディング・イベントの招待ページ
やわらかいピンク×ブルーの配色と角丸のデザインは、ウェディングの招待状ページやパーティの告知サイトにもマッチします。背景のグラデーション色を変えるだけで、季節やテーマに合わせたアレンジが可能です。
カスタマイズのヒント
背景のグラデーションボールの色を変える
デフォルトのピンク×ブルーは万能ですが、グリーン×イエローに変えると「春の庭」のような雰囲気に、パープル×ピンクに変えると「宇宙的なファンタジー」のトーンになります。設定エリアの2行を書き換えるだけで、サイト全体の空気が変わります。
フリーコンテンツエリアの活用
プロフィールカードの下に追加できるテキストコンテンツエリアがあります。経歴の詳細や制作への想いなど、プロフィール欄では書ききれない情報をここに載せましょう。同じガラスカードのスタイルが適用されるので、デザインの統一感は保たれます。
まとめ ― やさしさは、弱さではない
『GLASS』は、力強さやインパクトではなく、「心地よさ」と「親しみやすさ」で訪問者の心を掴むテンプレートです。すりガラスの奥に透ける色彩と、丸く柔らかなカードの佇まいが、「この人のことをもっと知りたい」という気持ちを自然に引き出してくれます。
デザインのアプローチは異なっても、目的は同じ。記憶に残ること。やさしさという武器で、それを実現するテンプレートです。
