Advertisement

15landingpage_top

 

せっかく力を入れて企画、制作した商品やサービス、イベントも、ユーザーに知ってもらわなければ意味がありません。

ユーザーに興味を持ってもらう要素のひとつとして、デザイン性があります。

 

 

海外デザインブログWebdesigntut+で、さまざまなジャンルの情報を伝えるときに便利な、ランディングページ用HMTLテンプレート素材を15個まとめたエントリー「Great Landing Page Templates From ThemeForest」が公開されていたので、今回はご紹介します。

 

 

どのテンプレートも、カスタマイズをすることを前提に作成されており、使い勝手がとても良い印象を受けました。

有料アイテムとなりますが、$8(約640円)ほどとなっており、制作予算、時間の短縮になるのではないでしょうか。

 

 

 

詳細は以下から。

 

 

 

情報をスッキリレイアウト可能、高機能HTMLテンプレート素材まとめ

 

Convesion

用途に応じて切り替え可能な5種類のHTMLファイルが収録された、すっきりとレイアウトされたテンプレート素材。

配色なども自由に変更でき、一緒にデザインPSD素材もダウンロード可能。

01_Conversion_Premium_Landing_Page.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/conversion-premium-landing-page/full_screen_preview/145085″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/conversion-premium-landing-page/145085?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Promo – Landing Page for Digital Product Sales

灰色とホワイトの2色展開でレイアウトされた、ミニマルデザインのHTMLテンプレート素材。

グリッドレイアウトやボタン、Lightboxなど、基本的機能をまとめてスタイリングしています。

01_Preview.__large_preview(2)(3)(4)

[button_square color=”green” url=”http://themeforest.net/item/promo-landing-page-for-digital-product-sales/full_screen_preview/157207″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/promo-landing-page-for-digital-product-sales/157207?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Autopilot Landing Page (3 Themes)

エレガントな印象を与えてくれる、フルスクリーンのぼかしイメージ素材を使ったHTMLテンプレート素材。

3種類のデザインテーマから選択可能となっており、シンプルで分かりやすいレイアウトが◎。

01_Preview.__large_preview(2)(3)(4)(5)

[button_square color=”green” url=”http://themeforest.net/item/autopilot-landing-page-3-themes/full_screen_preview/144243″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/autopilot-landing-page-3-themes/144243?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Revolver Premium Landing Page

今回ご紹介するアイテムの中でも、特に質感の高いデザインが印象的だったHTMLテンプレート素材。

ボタンやアイコンなど、随所にこだわりを感じる、12種類のHTMLファイルが収録。

preview-01.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/revolver-premium-landing-page-template/full_screen_preview/697971″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/revolver-premium-landing-page-template/697971?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Lista Landing Page

5色の落ち着いた色使いが印象的な、HTMLテンプレート素材。

動画の埋め込み、イメージスライダーなども実装されており、実用的な作りとなっています。

01_a.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/lista-landing-page/full_screen_preview/233986″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/lista-landing-page/233986?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

TheLanding Landing Page 

動画のレイアウト方法を2タイプ用意し、効果的にコンテンツを表現できる、HTMLテンプレート素材。

かわいいアイコン素材などもスタイリングされており、クラス名を入力するだけで利用可能。

01_the_landing.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/conversion-premium-landing-page/full_screen_preview/145085″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/thelanding-landing-page/139813?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Clickr Landing Page

シンプルに商品だけを販売したいときなどに、便利なランディングHTML素材。

こちらも3種類のレイアウトをまとめてダウンロード可能となっています。

01_preview.__large_preview(2)

[button_square color=”green” url=”http://themeforest.net/item/clickr-landing-page/full_screen_preview/148535″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/clickr-landing-page/148535?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

X-Tech Landing Page Preview

淡いグラデーションテクスチャを背景に利用した、8色展開のHTMLテンプレート素材。

グリッドレイアウトや余白スペースを利用し、イメージスライダーなど3タイプのファイルを収録。

01_preview.__large_preview(2)(3)

[button_square color=”green” url=”http://themeforest.net/item/xtech-landing-page/full_screen_preview/195400″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/xtech-landing-page/195400?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Unveiled – Ultimate Product Focused Landing Page

商品販売に特化してレイアウトされた、HTMLテンプレート素材で4種類のカラーリングを収録しています。

アニメーションをふんだんに使った、スプラッシュページを作成したいときにいかがでしょう。

01_PreviewImage.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/unveiled-ultimate-product-focused-landing-page/full_screen_preview/162581″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/unveiled-ultimate-product-focused-landing-page/162581?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Ambiento Premium Landing Page

キラキラと輝いたボケ(英: Bokeh)デザイン4種類を、背景に利用した、HTMLテンプレート素材。

コンテンツスライダーなども実装されており、組み合わせ次第で64種類のたのしみ方があるそうです。

01_item_page_featured_image.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/ambiento-premium-landing-page/full_screen_preview/154041″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/ambiento-premium-landing-page/154041?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Oceanic

ソフトウェアやiPhoneアプリなどの販売用サイトとして、利用したいHTMLテンプレート素材。

企業用サイトにも応用することができる、シンプルで、分かりやすいUIデザインが魅力的。

1_Preview.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/oceanic-landing-page/full_screen_preview/139807″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/oceanic-landing-page/139807?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Kando – Landing Page

黒をベースにデザインされた、ダーク系HTMLテンプレート素材のひとつ。

主要ソーシャルメディアなどにも対応しており、バッジなどのデザインパーツが目を惹きます。

01_index.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/kando-4-variations-landing-page-minisite/full_screen_preview/151372″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/kando-4-variations-landing-page-minisite/151372?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Klix Landing Page

ダイナミックなイメージスライダーを2種類用意した、動きのあるHTMLテンプレート素材。

グリッドレイアウト、アイコンなどで分かりやすく、情報をまとめています。

01_preview.__large_preview(2)(3)(4)(5)(6)

[button_square color=”green” url=”http://themeforest.net/item/klix-landing-page/full_screen_preview/723918″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/klix-landing-page/723918?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Eventmanagers Event Landing Page

カウントダウンタイマーを実装した、イベントなどの告知、チケット販売などに使えるHTMLテンプレート素材。

情報量に応じて、切り替え可能なレイアウト設計が参考になりました。

promo.__large_preview

[button_square color=”green” url=”http://themeforest.net/item/eventmanagers-event-landing-page/full_screen_preview/148526″] デモページ [/button_square]  [button_square color=”blue” url=”http://themeforest.net/item/eventmanagers-event-landing-page/148526?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

オシャレに表現するHPデザインテンプレート、PSD素材29個まとめ

レイアウトだけ参考にして、コーディングが自分でしたいという方は、PSD素材のみの販売もあります。

 

[fancy_box]

素材購入方法について

今回ご紹介したアイテムは、どれも素材販売サイト「ThemeForest」よりセレクトされています。

英語サイトとなりますが、購入方法については以下のサイトが参考になりました。

 

無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 – Gigazine

[/fancy_box]

 

[参照元 : Great Landing Page Templates From ThemeForest – Webdesigntuts+]