だれもがスマホからウェブサイトを閲覧するようにになったいま、あらゆる端末からでも見やすいサイトづくりが当たり前になっています。
この時に必要になるのが、レスポンシブWebサイトの制作です。
しかし、デスクトップやタブレット、スマホ用のレイアウトを個別に調整するとなると、「Web制作に時間がかかってしまう」と悩んでしまうひとも多いかもしれません。
あらかじめデザインやレイアウトが施されたテンプレートを利用することで、Webサイト制作を効率的に進めることができます。
今回は、商用利用できて無料ダウンロードできるHTML・Figmaテンプレートを公開しているTemplates Jungleをご紹介します。
ライセンスについて
素材を公開しているTemplates Jungleでは、HTMLとFigma用でライセンスが異なるため、注意が必要です。
HTMLテンプレートは、フッターに表示してあるクレジットリンクを削除しない限り、個人および商業プロジェクトの両方で、自由に使用することができます。
Figmaテンプレートは、個人および商用プロジェクトの両方で自由に利用できます。
ライセンスの変更も考えられるので、テンプレートをダウンロードする前に一度、ライセンスページを確認するようにしましょう。
無料テンプレートでできること
- 個人および商用利用目的でテンプレートの利用
- お好みで自由なテンプレートのカスタマイズ、編集
- WordPressなどのCMS用にHTMLテンプレートを改変
無料テンプレートでしてはいけないこと
- フッター部分にあるコピーライト表記の削除はダメ
- テンプレートを再配布したり、販売、再販売、貸し出しはダメ
- HTMLテンプレートに関するテクニカルサポートなし
HTML/CSS無料テンプレート
Telly – Free Hotel And Resort Bootstrap 5 HTML Website Template
ホテルやモーテルなど宿泊ビジネス向けのHTMLランディングページ。ミニマルですっきりとした、オシャレデザインを目指すときに。
Foodmart – Free Bootstrap 5 eCommerce HTML Template
食料品や生鮮食品などのオンライン販売を目的とした、eコマース向けのWebテンプレート素材で、合計11ページが収録された有料級の充実度とクオリティ。
Vibez – Free Music Band HTML Website Template
アーティストやミュージシャンなどの音楽グループ、バンド向けの無料HTMLテンプレート。ツアー情報や最新リリース情報、メンバー紹介、お問い合わせフォームなど、合計8ページのHTMLファイルを網羅しています。
Stylish – Free eCommerce Shoe Store HTML Template
スニーカーなどの靴の販売サイト向けHTMLテンプレートで、特にユーザーの視線をうまく誘導するレイアウトやスライダー、カルーセルなどの機能は使い勝手も良く、カスタマイズしやすいでしょう。
Vaso – Interior Decor Free Bootstrap 5 eCommerce Website Template
インテリアや家具の販売向けHTMLテンプレートで、スライダーやカルーセルなどの他にも、心地よいアニメーションが随所に散りばめられたミニマルスタイル。
Archi: Free Architect Portfolio HTML Template
建築やインテリア向けポートフォリオを想定したHTML／CSSテンプレートは、全部で7ページ。スライドショーやお問い合わせなど、サイトに必要な機能が揃います。
Freebies – Free Resource Sharing Bootstrap 5 HTML CSS Website Template
デジタル商品を販売、公開することを目的としたWebサイトテンプレートで、もちろんレスポンシブデザイン対応で、トップページを含む３ページ分のHTMLファイルが収録されています。
Booksaw – Free HTML CSS Template for BookStore
書籍の販売に向いた、1ページ完結型のHTMLテンプレート。商品スライドショーや商品一覧、ニュースレターやブログなど、必要な要素が揃い、カスタマイズのしやすさにも注目です。
Carl – Free Bootstrap 5 HTML CSS Website Template for Portfolio
フリーランスなど個人向けポートフォリオサイトの作成を想定した、無料のHTML/CSSウェブテンプレート。拡張性の高い20を超えるデザインコンポーネントが揃います。
Capturer – Free Photography One Page Website Template
カメラマンや写真化向けの、画像に注目が集まるレイアウトが魅力的な、1ページ完結型HTMLテンプレート。たくさんの画像を表示することができる、ライトボックス対応のギャラリーを備えているので、画像を高品質���閲覧するのも簡単です。
Insove – Free Medical Health Care Bootstrap 5 Website Template
モダンで美しい医療向けHTMLテンプレートで、お問い合わせページを含む５つの異なるHTMLページを収録。20以上のデザイン要素と一緒なので、用途に合わせてカスタマイズも自在に行うことが可能。
Ultras – Free Clothing Store eCommerce Store HTML Website Template
ファッション関連のオンラインサイト制作向けHTMLテンプレートで、スタイリッシュなカード型レイアウトや、心地よいホバーアニメーションなど、思わずクリックしたくなる、にくい演出がおすすめ。
PlantLover – Free Bootstrap 5 HTML CSS Website Template
花屋やナーセリーなど、あらゆる植物の販売に適したeコマースウェブサイト用テンプレート。ガーデニングや造園、オンラインショッピングサイトなどにおすすめで、ホームページを含む４ページを収録しています。
Jesse – Free HTML CSS Website Template for Interior Designers Portfolio
インテリアデザイナー向けのポートフォリオサイトを想定したHTMLテンプレートで、ミニマルですっきりとしたレイアウトに、美しい配色も参考にしたいデザイン。
Void Tattoo – Free One-Page HTML Website Template for Tattoo Artists
タトゥーアーティスト向けに、すべての情報を1ページにまとめた完結型の無料HTMLポートフォリオウェブサイのテンプレート。
Cryptocode – Free Cryptocurrency Bootstrap 5 HTML Template
魅力的なグラデーションカラーに、「ぼかし」を加えた背景パターンを活用した、暗号通貨の取引に関するWebサイトの作成にいかがでしょう。
Frida – Free Bootstrap 5 HTML Blog Template
ファッション向けのブログサイトを構築できるBootsrtrapテンプレートで、ライフスタイルを中心としたコンテンツとの相性が良い、清潔感のあるミニマルな見た目が素敵なフリー素材。
NextGen – NFT Marketplace Free Bootstrap 5 Template
ダーク系デザインに美しいグラデーションが印象的な、NFTマーケットプレイス向けBootstrap 5テンプレート。カスタマイズを柔軟に行うことができる、シンプルで使い勝手の良いデザイン。
Portfo – Free Bootstrap 5 HTML CSS Portfolio Template
ローディングアニメーションや、画面いっぱいの背景に動画を利用するなど、クリエイティブなポートフォリオサイトを作成したいときに便利。合計6ページ分のHTMLテンプレートを収録。
Figma無料テンプレート
こここでは、デザインツールFigmaで利用できるWebテンプレート素材をまとめています。
Figmaの使い方が良くわからないという方は、以下の記事で詳しく紹介しているので、参考にしてみてはいかがでしょう。
👉 はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン
Waggy – Pet Shop Free eCommerce Figma Website Design
ペットグッズの販売を目的とした、eコマースストア向けのWebレイアウト。アイコンをつかった商品カテゴリや、商品一覧レイアウトなど、オンラインストアにあったらいいな、という機能がずらり揃います。
Ecom – Free Ecommerce Figma Web Design Template
無駄な要素を省いたミニマルなスタイルが魅力的な、ショッピングサイト向けのFigma用Webテンプレート。グリッドに揃ったレイアウトはカスタマイズし放題で、ショッピングサイトに必要な要素をしっかり詰め込んだデザイン。
Classi – Free Furniture Store Figma eCommerce Template
インテリア家具販売向けのFigma用Webテンプレート。12カラムグリッドを基本に、カード型レイアウトや商品一覧など、思わずユーザーがクリックしたくなる見せ方は、デザインの参考にも。
Will – Fashion Photographer Free Figma Web Design
ファッションをテーマにした、スタイリッシュでおしゃれなポートフォリオ向けWebテンプレート。左固定ナビゲーションや清潔感のあるデザインが印象的。
Flores – Skincare Products E-commerce Figma Website Template
スキンケアや美容、コスメティック関連のショッピングサイト向けWebテンプレート。やや丸みをもたせ、やわらかい印象のカード型レイアウトや、高級感を演出できる配色などどれも素敵。オーガニック系のウェブサイトにも。
Furnics – Furniture Store E-commerce Free Figma Web Design
余白スペースの取り方から配色、フォント選びなど、どれもおしゃれな雰囲気を演出できる要素が揃ったテンプレートで、細かくレイヤー分けされているので、カスタマイズしたいときにもオススメ。
Vaso – Decor eCommerce Website Free Figma Template
高級感のあるエレガントなデザインが素敵な、Figma用Webテンプレート。HTMLテンプレート版と一緒に利用したい素材のひとつ。
Codeo – Free Figma Website Design Template for Agencies
広告やマーケティング代理店や中小企業、スタートアップなどにおすすめしたい、シンプルでカスタマイズもしやすいFigmaテンプレート。
この他にも無料ダウンロードできるHTML／CSSテンプレートを集めているので、以下の記事も参考にしてみてはいかがでしょう。
その他の無料HTMLテンプレート
レスポンシブレイアウトを利用した参考Webサンプル例で学ぶ、以下の基本ガイドでは、デザインの要望やニーズに合わせたグリッドレイアウトの使い方を中心にまとめています。
