「引き算のデザイン」の完成形
色を減らすと、かえって多くのことが見えてくる。写真の世界ではモノクロの表現力が何十年も変わらず愛されてきましたが、同じことがWebデザインにも言えます。不要な装飾を一切排し、黒い背景と白い文字だけで構成されたサイトには、どんなカラフルなサイトにも真似のできない緊張感と品格が宿ります。
無料HTMLテンプレート『MONO（モノ）』は、その名の通りモノトーンに徹したポートフォリオテンプレートです。パソコンで閲覧すると左側35%にプロフィール情報が固定表示され、右側65%のエリアを上下にスクロールして作品を見ていく。雑誌でいえば「左ページに目次、右ページに写真」のような、直感的で迷いのない構造です。
デザインの特徴とこだわり
固定サイドバー ― 常にそこにある「自分の名前」
パソコンで表示した場合、左サイドバーは画面に固定されてスクロールしません。つまり、訪問者がどれだけ作品を下にスクロールしても、あなたの名前と肩書き、連絡先リンクは常に視界の左端に存在し続けます。
これは単なるレイアウトの工夫を超えた、ブランディング上の重要な戦略です。「この作品を作った人」が常に明示されることで、作品のクオリティがそのままあなた個人の評価として蓄積されていきます。
サイドバーとメインコンテンツの間には細い線が一本。この境界線だけが、シンプルな画面に構造の「骨格」を与えています。
スクロールで現れる作品 ― anime.js のなめらかな動き
右側のメインコンテンツでは、スクロールに応じて作品が下から浮かび上がるように表示されます。このアニメーションにはanime.jsというライブラリが使われており、動きの緩急（イージング）が丁寧に設計されています。
各作品は横幅いっぱいの大きな画像で表示され、その下にタイトルとカテゴリーが細い線で仕切られて並ぶ。ホバーすると画像が微かに明るくなりながらわずかにズームする。「派手ではないけれど、触ると反応がある」この控えめなインタラクションが、ミニマルデザインの品位を保っています。
モーダルの映画的な開閉
作品をクリックすると、画面全体がほぼ完全な黒で覆われ、中央に拡大画像とタイトルが表示されます。この開閉アニメーションもanime.jsで制御されており、背景の暗転→画像のズームイン→テキストのスライドアップが時間差で連鎖する、映画のエンドクレジットのような演出です。
左の”表紙”は動かない。固定サイドバーという見せ方
パソコンで見ると、画面は左右に分かれています。左側の約3分の1には名前や肩書き、ナビゲーションが置かれ、スクロールしても動かず常に表示されたまま。右側の3分の2だけが、作品を追ってスクロールしていきます。
これは、一冊の作品集を開いているような構造です。左の固定エリアが「表紙」や「背表紙」のように常にそこにあり、右側のページだけをめくっていく。どれだけ下までスクロールしても、あなたの名前と連絡先が視界から消えないので、「これは誰の作品なのか」が最後まで伝わり続けます。静かなデザインの中で、自己紹介を切らさないための設計です。
画面が狭いスマートフォンでは、この左右分割は成立しません。固定サイドバーを出すと、ただでさえ狭い画面をさらに圧迫してしまうからです。そこでスマホでは、サイドバーの内容が自動的に画面上部の見出しへと移動し、その下に作品が一列で続く形に切り替わります。
こんな方・こんな用途におすすめ
フォトグラファー・ビジュアルアーティスト
作品が「白い壁の美術館に一点だけ展示されている」ような感覚で見てもらえます。モノトーンの背景は写真の色味を一切邪魔しないため、作品そのものの印象を最大限に引き出せます。
グラフィックデザイナーの実績サイト
サイドバーのコンパクトなプロフィールと、大きな作品画像の組み合わせは、採用担当者やクライアントが「さっと全体を把握して、気になったものだけ拡大して見る」という閲覧フローに最適化されています。
映像クリエイターのスチル集
動画のサムネイルやスチル写真を横幅いっぱいで並べると、映像制作の「画作り」のセンスが一目で伝わります。黒い背景が映画のスクリーンのように機能してくれます。
カスタマイズのヒント
テキストカラーの微調整
デフォルトのメインテキストは純白、サブテキストはグレーです。純白をわずかにグレー寄りにするだけで、目への負担が減り、長時間の閲覧でも目が疲れにくくなります。逆にサブテキストをもう少し明るくすると、情報の視認性が上がります。
自動リスト機能の活用
設定エリアで定義した作品数を超えた画像ファイルも、フォルダに入れておくだけで自動的にリストに追加されます。最大18枚まで対応しているため、頻繁に更新するポートフォリオでも管理が楽です。
サイドバーの固定表示を活かしたブランディング
パソコン表示では常に画面左にサイドバーが固定されるため、SNSリンクやメールアドレスを載せておけば、訪問者がどの作品を見ている最中でもすぐにアクセスできます。営業ツールとしてのポートフォリオにおいて、この「常時表示」は見落とされがちですが非常に重要な導線設計です。
背景は”真っ黒”ではない。目の負担への小さな配慮
MONOの背景は黒に見えますが、実は完全な真っ黒（#000000）ではなく、ほんの少しだけ明るい黒（#111111）を使っています。これには理由があります。純粋な黒の上に純粋な白い文字を置くと、コントラストが強すぎて、文字の輪郭がチカチカと振動して見え、長時間読むと目が疲れてしまいます。背景をわずかに持ち上げるだけで、このギラつきが和らぎ、黒い画面の格好良さはそのままに、ずっと読みやすくなります。
補足情報のグレー文字も、白一色にせず明るさを落とすことで、色を足さずに情報の主役・脇役を区別しています。モノクロの制約の中で読みやすさを保つ、細やかな調整です。
カスタマイズで色を変えるときは、この「ほんの少しだけ外す」感覚を残すのがおすすめです。真っ黒・真っ白にきっちり振るより、少しだけ和らげたほうが上品で目に優しくなります。もし差し色を入れたいなら、1色だけ、ごく控えめに。AIに頼むなら「背景の黒はそのまま、リンクだけ深い赤の差し色にして」と伝えると、ミニマルさを保ったまま個性を足せます。
まとめ ― 余白こそが、最大の表現
『MONO』は、色も装飾も削ぎ落とした先にある「余白の力」を信じるデザイナーのためのテンプレートです。黒い画面の中で白い文字が静かに佇み、作品だけが淡々と語る。その潔さが、結果的に最も記憶に残る体験を作り出します。
