無料で30枚!スマホ対応HTMLテンプレート 初心者に優しいシングルページばかりを集めました

2016年9月14日
カテゴリー ホームページ作成 人気の記事ベスト10

HTMLテンプレート

これっ! 太っ腹すぎて降参です。

こんなにクオリティの高いHTMLテンプレートを無料で放出するなんて。僕にはできん!

と感嘆の声をあげながら、レスポンンシブでスマホ対応可能なシングルページばかりを集めました。

一枚のhtmlファイルをメインに構成されてるので、初心者でもソースを理解しやすく、Web系じゃないフリーランスやクリエイターのヒトもポートフォリオやプロフィールページの作成に活用できると思います。

ランディングページとして新商品やアプリのキャンペーンに利用してもいいかも。

ちなみにHTMLテンプレートより、もっと簡単にホームページを作成できるサービスも過去に特集してます。

目次

1. まずは「HTMLテンプレートとは?」をおさらい

counter

HTMLテンプレートは、Webサイトを制作するのに必要なHTML、CSS、JavaScript、画像などのファイルが、あらかじめセットになったチョー便利なもの。

すでに用意されたデザインと機能を利用できるので、白紙から制作作業を始める必要がなく、初心者でも比較的容易に見ごたえのあるオシャレでカッコいいサイトを実現できます。

たとえば、以下のサンプルサイトは上のHTMLテンプレート「Counter」を利用したものです。本来、スライドショーやタイマーを実装するには、かなりのスキルが必要になりますが、テンプレートを利用したので文字と写真を入れ替えるだけで済みました。

サンプル

気付いた人もいると思いますが、上記のページはブラウザによって挙動がおかしなところがあります。求めているサイトに近いHTMLテンプレートを見つけられれば、確かに制作をグッとラクに進められます。けれど、もともとバグが備わっていることもあります。バグを自力で直すスキルがなければなおさらテンプレートを選ぶとき、複数のブラウザで挙動を確かめることが大切です。

2. HTMLテンプレート30枚!

それでは、お待ちかね! HTMLテンプレートを紹介していきます。

有料テンプレートと比較すると、機能やデザインが若干不足するのは否めませんが、なにせ無料です。

センス溢れるデザインを眺めているだけでも楽しいし、プロのスキルを盗んでやろうとソースを覗いてみるのもオモロイです。

商用可能かどうかは確かめたつもりですが、なかにはクレジットのリンクバックが必要なものもあるので、使用前に必ず配布先で権利を確かめてくださいね。

1. Studio

Studio

まずは「Black Tie」というサイトで配布されているhtmlテンプレートから。

twitterbootstrapをベースに異なるデザインコンセプトのものがたっくさん!必ずお気に入りの逸品を見つけられるはずです。

2. Marco

Marco

スタイリッシュなデザイン。フリーランスや個人事務所のプロフィールページに良さそうです。

3. Shield

Shield

画面いっぱいに広がる写真が印象的です。ギャラリーの写真の見せ方も良い感じです。

4. Flatty

Flatty

新商品やアプリを紹介するページに使えそうです。フラットなデザインが可愛いですね。

5. Bold

Bolt

シンプルだけど、余白のバランスやバッチリなので、きれいにまとまっています。編集しやすそう。

6. Link

Link

開くとスクリーンを覆いつくす写真がかっこいいですね。スクロールすると、スルリと這い上がってくる画像の動きも凝ってます。

7. Minimal

Minimal

ミニマルという名前の通り、無駄をそぎ落としたデザインです。ストイックでかっこいい。

8. Onassis

Onassis

横からスライドするメニューが良さげ。縦にあまり長くないのもいいですね。スマホ専用に使ってもいいかも。

9. Munter

Munter 20140515

ヘッダー固定のメニューがいい感じに動きを見せます。画面右下にある、ページをスクロールするためのコントローラーも良いです。

10. Kelvin

Kelvin

なんかナルシストなプロフィールページですなぁ。シンプルなので、編集しやすく、使える幅も広そうです。

11. Spot

Spot

マウスオンで傾きを見せるアニメーションが可愛いです。JavaScriptやcssが得意でなくても、こんな面白い効果を簡単に取り入れられるのが、テンプレートの強みです。

12. Grayscale

Grayscale

ダークな色調がかっこいいわ。全体のトーンに合わせたGoogleマップの感じも真似したいです。

13. stylish-portfolio

Stylish portfolio

パララックス効果がシンプルなデザインに刺激を与えてますね。企業サイトにいいんじゃないかな。

14. Freelancer

Freelancer

名前の通りフリーランサーのプロフィールページ向け。過去の作品をシンプルに並べ、お問い合わせフォームも備わってます。

15. Brushed

Brushed

写真だけでなく動画もギャラリーに埋め込めます。アート性の高いポートフォリオサイトが作成できそうです。

16. Fore

Fore

目に優しいフォントサイズと写真の使い方です。万人に受け入れてもらえるデザインですね。

17. Free-onepage-template

Free template

カスタマイズを前提にデザインされているので、すごく編集しやすいです。初心者さんは、ここから少しずつ慣れていけばいいんじゃないかな。

18. Woo

Woo

スクロールに合わせたアニメーションが心地いいです。料金比較表のデザインも見やすくていい感じです。

19. Ceevee

Ceevee

フリーランスのポートフォリオに向いてます。PhotoshopやWordPressのスキルをメーターで表すところなんて、ぜひ利用したいです。

20. Kreative

Kreative

シングルページだけど、ブログ記事のテンプレートも付属します。定期的に更新したいプロフィールサイトに良さそう。

21. Xeon

Xeon

商品・サービスのランディングページにばっちり。清潔感が溢れるデザインでどんな業種にもマッチします。

22. Evento

Evento

イベント告知用のテンプレートです。次のイベントまでのカウントダウン機能が楽しい。ミュージシャンやDJだけでなく、利用できる幅は広そう。

23. Elegance

Elegance

背景の動きが目に楽しく、ギャラリーにも面白い挙動効果を加えてあります。

24. Legend

Legend

鮮やかな黄色をメインにした配色が印象的です。画像に頼らなくても、見ばえよく作れそうな感じです。

25. Essentia

Essentia

編集を前提にした優しいテンプレート。料金表、ポートフォリオのエリアがすごく使い勝手が良さそうです。

26. Big-picture

Big picture

配布してるサイト「html5up」は、取り上げられているのをよく目にする有名どころ。それだけに信頼性が高くデザインも洗練されてます。

27. Tessellate

Tessellate

はぁあ〜、おしゃれだわー。丸くて優しい印象なのに、甘過ぎないのがセンスの良さを表しています。

28. Overflow

Overflow 20140515

シンプル イズ ザ ベストですなあ。差し替える素材の良し悪しで印象が変わりそうなところに注意ですね。

29. Prologue

Prologue

シングルページなのにサイドメニューがあるのが珍しいところ。ポートフォリオサイトに必要な機能はバッチリ揃ってます。

30. Parallelism

Parallelism

横スクロールが粋で珍しいですね。ギャラリーサイトとして見事な働きを期待できそうです。

3. HTMLテンプレートを利用するのに必要なもの

最後に、HTMLテンプレートを利用するのに役立つツールをいくつか紹介しておきます。僕が使っているオススメなやつら。

3-1. エディタ

Coda2

タイトルを変えたり、文字や画像を差し替えたり、HTMLファイルを編集するために使います。

おすすめはプレビュー機能がついているもの。リアルタイムに編集の結果を目で確認しながら進められるので、間違いを防ぎ素早くイメージに近づけられます。

色々なエディタを持ってますが、僕のメインはcoda2。動作が軽快で、ちょっとしたところで働く入力補助が嬉しいです。

3-2. 画像素材

123rf

差し替え用の画像を自前で撮影したり、描いたりできない人は、素材サイトで入手します。

最近は「ぱくたそ」さんのような、無料でも質の高い写真を配布するサイトが増えています。感謝!

無料サイトでイメージにあう画像を探しきれない場合は、有料サイトを。僕がよく使うのは123rfというところ。わりと安いので。

3-3. 画像編集ソフト

Gimp

画像を差し替える時に注意すべきは、画像のサイズ。差し替える前後で同じサイズに揃えた方がデザインを崩さずに済みます。

画像編集といえばPhotoshop。ですが、難は「お高い」ところ。手が出ないって人は、Photoshopとまではいかないけど、似たような機能を備えたフリーのソフトやWebサービスがあるので、そっちを使ってみては? 以下の記事で特集してます。

3-4. レンタルサーバー

レンタルサーバー

ウェブサイトをネット上で一般公開するには必須。無料で借りれるサーバーもありますが、広告が入ったり機能的に不都合な面もあります。小規模でシンプルなサイトなら、月額300円程度のレンタルサーバーでも十分に事足りるので、この際有料で借りてみるのも良いチャレンジです。

3-5. FTPソフト

Cyberduck

サーバーへデータをアップロードするためのソフトです。編集後のhtmlファイルやサイトで使用する画像をサーバーへ保存するために使います。

Mac/Winのどちらでも使えるcyberduckがオススメ。スクリーンを覆わないシンプルな画面がお気に入り。詳しい使い方は過去記事をどうぞ。

以上!

サンプルサイトをいれると全部で31枚でしたね。ぜひ、使ってください。

ほな、ごゆるりと〜

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top