Skip to main content

Raw_image

飾らないことが、最大の個性になる

2020年代のWebデザインは豪華です。アニメーション、グラデーション、カスタムフォント、パララックス。でも、それらすべてを取り去った先に、もう一つのデザインの地平が広がっています。外部フォントなし。アニメーションなし。角丸なし。ブラウザが「素」の状態で表示する、最もプリミティブなWebページ。

無料HTMLテンプレート『RAW(ロウ)』は、その「素」のHTML体験を意図的に選択したテンプレートです。フォントはTimes New Roman。リンクの色は青。テーブルの枠線は黒。画像はモノクロで表示される。1990年代のWebページを知っている人には「あの頃だ」と感じる懐かしさが、知らない人には「こんなにシンプルでも成立するのか」という驚きがあります。

EYANCA(無料テンプレート)の詳細

 

デザインの特徴とこだわり

外部リソースゼロ ― ブラウザだけで完結する

『RAW』の最大の特異性は、外部のフォントやライブラリを一切読み込まないことです。Google Fontsもanime.jsもThree.jsも使いません。ブラウザが最初から持っているTimes New Romanフォントだけで画面を構成する。これは軽量さの究極形であり、読み込み速度は事実上ゼロに等しいレベルです。

テーブルに格納されたプロフィール

名前、肩書き、自己紹介は、HTML標準のテーブル(表組み)で表示されます。左列に「ROLE」「BIO」「STATUS」というラベル、右列に内容。データベースの管理画面を彷彿とさせるこの表示方法は、「情報を最短距離で伝える」という目的に対して最も合理的なフォーマットです。

「Index of /works」― ファイルサーバーの一覧画面

ギャラリーのタイトルは「Index of /works」。これはWebサーバーがディレクトリの中身を自動的に一覧表示する画面の文言そのものです。各作品カードの上部には「FILE_01.JPG」というモノスペースフォントのファイル名が表示され、「このサイトは装飾された作品集ではなく、ファイルサーバーの公開フォルダを見ている」という設定を徹底しています。

イエローホバー ― 唯一の「色」

背景は薄いグレー、テキストは黒、枠線も黒。すべてが無彩色のこのテンプレートで唯一の「色」が、ホバー時のイエロー背景です。作品カードにマウスを乗せるとイエローに変わり、モノクロだった画像がカラーに切り替わる。この瞬間だけ「素のHTML」が一瞬だけ現代のWebに戻る。その意外性が、記憶に残ります。

「素のHTML」に見えて、読みやすさのためにこっそり手を入れている

RAWは「ブラウザが素の状態で表示するHTML」を売りにしていますが、実は本当に何もしていないわけではありません。正真正銘”素のまま”のHTMLは、想像以上に読みにくいものです。行と行の間隔が詰まりすぎ、文章が画面の端から端まで伸びて、目が迷子になります。

そこでRAWでは、”素に見えるギリギリ”の範囲で、読みやすさに直結する部分だけをそっと整えています。行間を少しだけ広げ、本文の横幅が広がりすぎないよう上限を設け、表組みの線が二重にならないように整理する。どれも見た目には「手を加えた感」が出ない調整ばかりです。

これがまさに「シンプルと手抜きは違う」の実例です。何もしないのではなく、”何もしていないように見せるために、必要な最小限だけ手を入れる”。引き算のデザインほど、引き際の見極めにこそ技術が要ります。

 

こんな方・こんな用途におすすめ

ライター

プログラマー・テックライター

コードの美学は「余分なものを書かない」こと。『RAW』のデザインは、その哲学をそのまま視覚化しています。GitHubのプロフィールリンクとして使えば、「この人はコードと同じようにサイトも書くんだな」という印象を与えます。

アーティスト・コンセプチュアルアート

「装飾しないこと」を意図的に選ぶ行為は、それ自体がコンセプチュアルアートです。作品が前衛的であればあるほど、展示空間が「素」であることの効果が際立ちます。

表示速度を最優先にしたいサイト

外部リソースを一切読み込まないため、表示速度は最速クラス。通信環境が不安定な状況(海外、屋外、低速回線)でも確実に表示されるポートフォリオとして信頼できます。

これは”主張”のテンプレートです。万人向けではありません。

RAWは、「飾らないことを、あえて選ぶ」という強い意思表示そのものです。だからこそ意図が伝わる相手にはこの上なく刺さりますが、そうでない場面では「未完成」「作りかけ」と誤解されるリスクもあります。ブランドの世界観を演出したい人や、デザインにあまり馴染みのないクライアントに見せる場合、この潔さが”そっけなさ”や”手抜き”と受け取られることもあります。コンセプトを理解してくれる相手に向けて使うのが大前提です。

ぴったりなのは、コードの美学を共有するエンジニアやテックライター、装飾を削ぐこと自体が表現になるコンセプチュアルアート系、そして表示速度を最優先したい人です。

もし「無駄のなさは好きだけど、もう少しだけ整えて”きちんと設計された”印象にしたい」なら、余白を効かせた SIMPLE が候補です。「この情報を羅列する感じは好きだけど、もっと洗練させたい」なら、リスト表示を美しく見せる INDEX のほうが噛み合うかもしれません。自分が出したい”素っ気なさの度合い”に合わせて選んでみてください。

 

カスタマイズのヒント

リンクカラーの変更

デフォルトのリンクカラーは「#0000ff」、つまり純粋な青。これはHTMLの初期設定値を完璧に踏襲しています。変更することもできますが、あえてそのまま残すのも一つのデザイン判断です。

テキストセクションでHTMLの表現力を発揮

フリーテキストエリアではHTMLタグが使用可能です。太字や段落分けなど、テキストだけで豊かな表現ができます。装飾のないテンプレートだからこそ、テキストの力が際立ちます。

青いリンクも黄色いホバーも、”あえて素朴なまま”

RAWの色は、リンクの青、ホバーの黄色、黒い文字と枠線。どれもWebがもともと持っている、いちばん素朴な色をあえてそのまま使っています。凝った配色にしないこと自体が、このテンプレートの主張です。

もちろん設定で色は変えられます。ただしRAWに関しては少し特殊で——色を整えれば整えるほど、「素のHTML」という持ち味から離れていきます。個人的には、色はいじらず素朴なまま使うのが、いちばんRAWらしいと考えています。

もし「この素っ気なさは好きだけど、もう少し色や余白で”作り込んだ”印象が欲しい」と感じたら、それはもうRAWではなく別のミニマル系テンプレの出番かもしれません。AIに頼むときも、ここは「あえて触らない」という選択肢があることを覚えておいてください。

 

まとめ ― 何も足さない。何も引かない。

『RAW』は、「すべてのテンプレートの出発点」であり、同時に「すべてのテンプレートの到達点」です。Times New Romanの文字、黒い枠線、青いリンク。それだけで十分に美しいWebページが成立することを、このテンプレートは証明しています。

装飾の先にあるのも美であるなら、装飾の手前にあるのもまた美。飾る前の「素」の力を信じるクリエイターに。

→ デモサイトのプレビューはこちら

 

【AI×HTMLでWeb制作を効率化】無料Webテンプレート「EYANCA」は、商用・個人を問わず自由にご利用いただけます。デザインのベース構築や、AIを用いたコーディング学習の素材として、ぜひお役立てください。また、本記事の内容に共感いただけましたら、SNS等でのシェアやWebサイトでのご紹介も大歓迎です。

EYANCA(無料テンプレート)の詳細


トミナガハルキ

グラフィックデザイナー/AMIX 代表。独学でデザインを学び、パッケージメーカー→美容系ベンチャー→家庭用品メーカーでのデザイン・広報運営を経て独立。現在は小さな事務所を拠点にASOBOAD等のサービスを運営し、ロゴ・パッケージ・広告物を中心に制作しています。著書『#ズボラPhotoshop 知識いらずの絶品3分デザイン』は各カテゴリでベストセラーを獲得。2020年Adobe Creative Residency選出。ブログでは、10年以上の実務から学んだことや働き方のヒントを等身大の視点で発信しています。