CODE

初心者でもオシャレなサイトが作れる!サイト制作に最適なHTMLテンプレート紹介

こんにちは!フリーランスWebディレクターのショーへーです。

この記事は、『HTML/CSSの基礎を終えたレベルで月数万の副業収入を得るための裏技』の続編記事です。

魔法じゃないので努力は必要ですが、HTML/CSS/Bootstrapの基礎を終えたレベルの初心者の方が副業収入を得るための方法をまとめています。

なお

  • 「もっと基礎からしっかり学びたい」
  • 「Web制作会社に転職したい」
  • 「フリーランスに挑戦したい」

など、より高い目標をお持ちの方は、オンラインスクールも運営してますので、よかったら見てみてください( ^ω^ )

運営しているオンラインWebスクール

30日で身につけるWEBスキル『デイトラ』

それでは本題をどうぞ!

初心者でもオシャレなサイトが作れるテンプレート紹介

それでは、コーディング初心者でもサイト制作に使えるオシャレなテンプレートを紹介していきます。

✔︎このテンプレートを有効活用するのに必要なレベル感

HTML5/CSS3/Bootstrap4を使い、シンプルな構成の1ページサイトなら、見本を見つつゼロからコーディングできる

↑これくらいのコーディングスキルがある方なら、紹介するテンプレートを有効活用できるはず。

HTMLテンプレートとは何か、それを使うと何が良いのかは

  1. HTML/CSSの基礎を終えたレベルで月数万の副業収入を得るための裏技
  2. 【HTMLテンプレートから学ぶ】初心者に最適なコーディングの勉強方法【独学可能】

をご覧ください。

canvas:汎用性が高い万能テンプレ

canvas
16$(約1800円)

850以上のHTMLテンプレートが入っており、汎用性が高いです。

これまでで39000回以上購入されている、実績のあるテンプレートでもあります。

850パターンあれば、どんな業種のサイトを作る際にもだいたい対応できますね。

 

POLO:汎用性+豊富なデモでイメージが湧きやすい

POLO
18$(約2000円)

POLOも600以上のHTMLテンプレートが入っており、汎用性が高いです。

「建築会社」「レストラン」「デザインスタジオ」など、様々なジャンルのデモサイトが完成形で200以上含まれているので、デザインイメージが湧きやすいです。

パターンが豊富なのでパーツを組み合わせて使うのもいいですね。

 

Foundry:余白が綺麗なテンプレート

Foundry
18$(約2000円)

上で紹介した2つよりもデザインに凝ったテンプレートです。

余白の使い方が上手で、奇抜すぎず、でもオシャレというバランスのいいテンプレですね。

余白の使い方のお手本としてもいいテーマです。

 

POFO:クリエイティブなサイトを作るならコレ

POFO
17$(約1900円)

こちらはクリエイティブなデザインに特化したテンプレート。

200以上のファイルが含まれてますが、とにかくどれもオシャレです。

デザイナーやカメラマンの方向けのサイトなど、クリエイティブ関連はこれで作るのがいいかも。

 

RHYTHM:クリエイティブにエモさもプラス

RHYTHM
17$(約1900円)

POFOにエモさを足したようなテンプレートです。クリエイティブかつエモい。

アンティークなお店のサイトにはこういう雰囲気が合いそうですね。

 

実践:モデルを決めて、実在するお店のLPを作ってみよう

以上、サイト制作に役立つ実践的なHTMLテンプレートを紹介でした。

初めて知ったという方は、ぜひいくつか購入して実際にLPを作ってみましょう!実際に使えば、その便利さが身にしみて分かるはずです👍

当然、全部買う必要はありませんが、

canvas or POLO + 他の3つから1

という感じで「汎用テンプレ+クリエイティブ系テンプレ」と2つ用意しとくと、作れるLPの幅が広がります。

 

LPのモデルにするのは、身の回りにある飲食店や美容室など、実店舗がオススメです。

どうしても作らせてもらえそうな実店舗が見つからないという方は

  • 知っている企業のサイト
  • 好きなYouTubeの公式サイト(のイメージ)
  • 趣味のサークルのサイト

など、好きなテーマでOK。

ただ、貴重な成果物になるので本気で作ってくださいね!!

『LPにどんな情報を書けばいいか分からない』という方は、テンプレートのデモサイトを参考にしたり、Pinterest『調べたいジャンル名 ランディングページ』で検索してみてください。

以下は「レストラン ランディングページ」で検索した例ですが、いろんなLPが出てくるので、どんな内容が書いてあるか参考にするにはもってこいです。

Pinterest

デザインを再現するのはデザインツールの知識もなければ難しいので、まずは構成や文章を参考にすればOK。

もし余裕があれば、気に入ったデザインを見つけて部分的にでも再現にトライしてみてください👍

 

制作したサイトを実績として公開したい方は、事前にモデルのお店に

「練習用にサイト作らせて欲しいんですけど、題材にしてもいいですか?」

と許可をもらっておきましょう!

また、素材利用のOKがもらえたら、ちょっと勇気は入りますが

「もし気に入ってくださったら、いくらでもいいので買ってください」

とお願いしてみましょう!初の副業案件ゲットのチャンス😀‼️

作るモチベーションも上がりますよねw

売ろう売ろうとゴリ押しするのはダメですが、副業がしたければまず1円でも稼いでスタート地点にたつことが大切です。

「自信がないので、もう少し勉強してから…」といつまでも勉強を続けてしまう方が多いですが、自信の付け方が逆です。

100回の練習より、たった1回の本番をこなす方がどれだけ自信になることか

プログラミング学習で、Progate→挫折→久しぶりにProgate復活→また挫折→・・・みたいなところでループしてる方をよく見ますが、いつまでも練習しててもダレるだけですし、ステータスはずっと『勉強中』のままです。

自信と実績、その両方を手に入れるには、勇気を出して本番にトライするしかありません。

1度本番にトライできれば、2度目はもっと気が楽になります。

実績にもなりますし、作った後にフィードバックをもらえば、お客様の声として掲載できますよね。

勉強から『実践』の壁を踏み越えるときは今です!ぜひ勇気を出して実践してみてください。

それではまた👍