Advertisement

Phoenix-Startup-UI-Kit

 

サイトの特設ページやランディングページの作成がなかなか進まない。そんなときは、あらかじめデザインデザインや機能を実装したHTML/CSSテンプレート素材を利用することで、制作作業をよりスムーズに進めることができます。

 

 

Bootstrap を基準としているのでカスタマイズしやすく、同時にPSDファイルやSassファイルを収録したアイテムも増えているので、プロジェクトに合ったテンプレートを探してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

Bootstrap対応ですぐに使える、すごい無料HTMLテンプレート素材まとめ 2016年8月度

 

Rapture

ウェブ制作をよりスムーズに行う、プレミアムフレームワークのデモ用として、2種類のランディングページが用意されています。

BP2016-07-25_165238-1-1

 

 

Forty

複数のコンテンツを色分けし、滑らかなアニメーション付きページ遷移も同時に表現できるマルチページに対応。

forty

 

 

Rik

モバイルアプリ販売向けランディングページを想定したテンプレートで、フルスクリーン動画など3つのデモが用意されています。

rik

 

 

Avana

無駄を省いたミニマル系のポートフォリ作成に向いたHTMLテンプレート。

Avana-minimal-portfolio-template

 

 

Focus

たくさんのイメージ写真をまとめて公開したときに便利な、ギャラリー向けHTMLテンプレート。

focus_featured_img

 

 

Energy

あらゆるプロジェクトに対応できるマルチユースなテンプレートで、ドロップダウンメニューやオフキャンバス・スライドメニューなど、Sassによるカスタマイズも可能です。

energy_featured_img

 

 

Cache

必要なパーツのみ無駄を一切省いたミニマルデザインで、すぐにサイトを公開したいときにも。

cache_featured_img

 

 

Icon

鮮やかなグラデーションが印象的なテンプレートで、ポップアップで再生がはじまるYouTube動画、モバイル向けオフキャンバスメニューなど、多彩な機能もうれしいアイテム。

icon_featured_img

 

 

Estate

不動産サイトを想定したBoostrap製レイアウトですが、Sassも収録されているので、より自由なカスタマイズが可能です。

estate_featured_img

 

 

Lesser

デザイン事務所やフリーランス向けポートフォリオなどに適したテンプレートで、グリッドをベースにイメージ写真を多用したレイアウトが目白押し。

lesser_featured_img

 

 

Dsign

これまでの制作実績を簡単にまとめたいときに便利な、シンプルなポートフォリオ向けテンプレート。

Dsign-–-Minimal-Portfolio-Bootstrap-Template

 

 

Nantes

グリッドをベースにしたレイアウトに、イメージスライダーや数字カウンター、ギャラリー機能などを詰めこんだランディングページ。

Nantes-Free-Bootstrap-multipurpose-template

 

 

Orion

Bootstrapフレームワークをベースにしたレイアウトに、CSSアニメーションやパララックスエフェクトを追加したマルチ機能。

Orion-Bootstrap-Coming-Soon-Template

 

 

Folio

お問い合わせフォームまで完備した、ミニマルスタイルのBootstrap製テンプレート。スタイリッシュなナビメニューも特長。

Folio-Personal-Portfolio-Template

 

 

Aracadia

レスポンシブ対応のイメージカルーセルに、タイピング入力したような Typed.js などユニークな機能が盛りだくさんなミニマルテーマ。

Arcadia-Free-Bootstrap-Template

 

 

Floix

こちらもBootstrapフレームをベースに、スクロールに追従するナビメニューなど、よりユーザビリティを考慮したミニマルページ。

Floix-Onepage-Bootstrap-Resume-Template

 

 

Pixicon

イメージスライダーやYouTube動画などを背景に、3種類のデモを用意した、Bootstrap製ミニマルテンプレート。

Pixicon-Bootstrap-Coming-Soon-Page

 

 

Above Beneath

スクリーンを固定した状態でページ遷移される特集コンテンツ向けレイアウト。アイコンにカーソルを合わせるとプクプクと水泡が。

AboveBeneath_800x600

 

 

Item Reveal Animation with SVG

SVGアニメーションの可能性を感じる、ユニークなスライドエフェクトを実現したデモ3種類。

ItemRevealer_800x600

 

 

Simple Interactive Point Effect

Google マップをよりインタラクティブに活用したサンプルで、地図上のアイコンをクリックすると、フルスクリーンでコンテンツが表示されます。

InteractivePoints_800x600

 

 

Mult-Layer Page Reveal Effect

CSSアニメーションを利用した4種類のページ遷移エフェクト。

PageReveal_800x600

 

 

Clipped SVG Slider

イメージスライダーが切り替わるたびに、イメージ画像のシェイプをSVGを使って変化させるテクニック。

svg-clipped-slider-featured

 

 

Auto-Hiding Navigation

実践でも使うことの多いテクニックで、ヘッダーイメージと組み合わせたバージョンなど3種類が用意されています。

auto-hiding-navigation-featured

 

 

Rooky

モバイルアプリをより効果的に魅せることができるテンプレートで、スワイプ対応のイメージスライダーやスクロール対応のナビメニューなど、かゆい所に手の届く機能が充実。

Rooky-–-App-Landing-Page-Template

 

 

Twist

滑らかなアニメーションやレスポンシブ対応のイメージカルーセル、数字カウンターなど Bootsstrapフレームワークをよりパワーアップしています。

twist_featured_img

 

 

 

背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

アニメーションを利用したアイテムなど、知っておくと便利な実装テクニックを中心にまとめています。

background-snippet

 

 

 

コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ

最先端のウェブデザインを体感できるスニペットをまとめてご紹介しています、こちらも一緒にいかがでしょう。

latesthtml2016aug2

 

 

サムネイル@ : Phoenix Startup UI Kit: Free Sample by UI Market – Gumroad