せっかく力を入れて企画、制作した商品やサービス、イベントも、ユーザーに知ってもらわなければ意味がありません。
ユーザーに興味を持ってもらう要素のひとつとして、デザイン性があります。
海外デザインブログWebdesigntut+で、さまざまなジャンルの情報を伝えるときに便利な、ランディングページ用HMTLテンプレート素材を15個まとめたエントリー「Great Landing Page Templates From ThemeForest」が公開されていたので、今回はご紹介します。
どのテンプレートも、カスタマイズをすることを前提に作成されており、使い勝手がとても良い印象を受けました。
有料アイテムとなりますが、$8（約640円）ほどとなっており、制作予算、時間の短縮になるのではないでしょうか。
詳細は以下から。
情報をスッキリレイアウト可能、高機能HTMLテンプレート素材まとめ
用途に応じて切り替え可能な5種類のHTMLファイルが収録された、すっきりとレイアウトされたテンプレート素材。
配色なども自由に変更でき、一緒にデザインPSD素材もダウンロード可能。
[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など、基本的機能をまとめてスタイリングしています。
[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種類のデザインテーマから選択可能となっており、シンプルで分かりやすいレイアウトが◎。
[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]
今回ご紹介するアイテムの中でも、特に質感の高いデザインが印象的だったHTMLテンプレート素材。
ボタンやアイコンなど、随所にこだわりを感じる、12種類のHTMLファイルが収録。
[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]
5色の落ち着いた色使いが印象的な、HTMLテンプレート素材。
動画の埋め込み、イメージスライダーなども実装されており、実用的な作りとなっています。
[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]
動画のレイアウト方法を2タイプ用意し、効果的にコンテンツを表現できる、HTMLテンプレート素材。
かわいいアイコン素材などもスタイリングされており、クラス名を入力するだけで利用可能。
[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]
シンプルに商品だけを販売したいときなどに、便利なランディングHTML素材。
こちらも3種類のレイアウトをまとめてダウンロード可能となっています。
[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]
淡いグラデーションテクスチャを背景に利用した、８色展開のHTMLテンプレート素材。
グリッドレイアウトや余白スペースを利用し、イメージスライダーなど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種類のカラーリングを収録しています。
アニメーションをふんだんに使った、スプラッシュページを作成したいときにいかがでしょう。
[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]
キラキラと輝いたボケ(英: Bokeh)デザイン4種類を、背景に利用した、HTMLテンプレート素材。
コンテンツスライダーなども実装されており、組み合わせ次第で64種類のたのしみ方があるそうです。
[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]
ソフトウェアやiPhoneアプリなどの販売用サイトとして、利用したいHTMLテンプレート素材。
企業用サイトにも応用することができる、シンプルで、分かりやすいUIデザインが魅力的。
[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]
黒をベースにデザインされた、ダーク系HTMLテンプレート素材のひとつ。
主要ソーシャルメディアなどにも対応しており、バッジなどのデザインパーツが目を惹きます。
[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]
ダイナミックなイメージスライダーを2種類用意した、動きのあるHTMLテンプレート素材。
グリッドレイアウト、アイコンなどで分かりやすく、情報をまとめています。
[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テンプレート素材。
情報量に応じて、切り替え可能なレイアウト設計が参考になりました。
[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+]
