Advertisement

titan-featured

 

ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。

 

今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。

 

Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめ

 

無料HTML/CSSテンプレート Titan について

Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。

 

じっくりと検討された優れたUXを採用しており、分かりやすい解説ドキュメントも用意されており、トレンド性たっぷりなウェブサイトを簡単に作成することができます。

 

全体プレビューは以下よりどうぞ、デモページとして9種類のテンプレートが公開されており、どれもすっきりとしたシンプルなデザインに、CSS3を使った滑らかなアニメーションが実装されています。

 

titan-temlates

 

動作確認できるデモページもすべて用意されています。

 

このHTMLテンプレートの特長は以下の通り。もともと$19(およそ2,100円)で販売されていたプレミアムテーマで、さまざまな機能が実装されているのが分かります。

  • 90ページを超えるHTML5/CSS3テンプレートを収録
  • 業種に応じて9種類のトップページを用意
  • レスポンシブ対応のドロップダウン付きグローバルナビゲーションを採用
  • ランディングページ向けナビメニュー対応
  • 10種類のヘッダースタイル
  • Masonry と lightbox をつかったレイアウト
  • Bootstrap をベースとしたカスタマイズ
  • オンラインショップ用レイアウト対応
  • ブログ用レイアウト対応
  • ポートフォリオ用レイアウト対応
  • PHPお問い合わせフォーム実装済み
  • SCSSファイルによるカスタマイズが可能
  • カスタムGoogleマップ
  • カウントダウンタイマー機能実装
  • 詳しく解説されたドキュメンテーションも同時収録

 

以下はメイン用デモページ。ビデオ動画をつかったヘッダースタイルに、ポートフォリオ向けスライダーやリスト形式、ブログレイアウトなどが揃います。

 

titan-templates-index

 

 

モバイルアプリ向けランディング用デモページ。フルスクリーンで表示される画像イメージに、淡いグラデーションカラーを重ねたヘッダースタイルが特長で、余白スペースをたっぷり利用したミニマルデザイン。

 

titan-templates-landing-page

 

 

 

これまで公開のHTMLテンプレート素材まとめ

 

今回紹介したHTMLテンプレート Titan を公開している Theme Wagon では、この他にもさまざまなHTML5/CSS3テンプレートを無料公開しています。どれもフレームワークにはBootstrapを利用し、統一感のあるミニマルデザインが揃います。

 

Template Collection 2017

100種類の独立したHTML/CSSテンプレートをまとめてパックにした、超太っ腹な素材集。メールアドレスを入力すれば、直接受信箱にダウンロードリンクが届く仕組み。

100-template-collection-2017

 

 

Massively

シンプルでスッキリとしたレイアウトが特長のブログ向けHTML/CSSテンプレートパック。

massivvvely-featured-image

 

 

Nova

ランディングページの作成を想定したシングルページ完結型レイアウトで、Bootstrapフレームワークを利用したカスタマイズ性に優れたテンプレート。

nova-bootstrap-html-template

 

 

Foodee

レストランやカフェなどのレシピやメニューなどをうまく魅せることができるレイアウトが特長で、飲食向けのUIコンポーネントが揃います。

restaurant-website-template-online-ordering-feature-image

 

 

Men’s Hair Salon

ヘアーサロンを想定したページレイアウトで、お問い合わせや紹介ページなどが各種揃った、レスポンシブ対応のHTML5/CSSテンプレート集。

mans-hair-salon

 

 

Tasty

こちらも飲食店向けランディングページを想定したテンプレートで、Bootstrapを使ったカスタマイズの良さだけでなく、スタイリッシュなページレイアウトを手軽に作成できます。

tasy-free-bootstrap-templates-featured-image

 

海外デザインブログTutorialzineで公開された「12 Time-Saving Bootstrap Examples」の著者より許可をもらい日本語抄訳していま
[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not

 

参照元リンク : Titan – One page / Multi page Multipurpose Template made with HTML5 & Bootstrap – Themewagon