CODE

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

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

この記事は、『未経験からコーディングの副業で月5万を稼ぐためのステップ』の解説記事です。

魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能なコーディングカリキュラムをまとめています。

あわせて読みたい
【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ副業としてHTMLのコーディングで月5万を稼ぐためのステップを具体的に解説しています。魔法じゃないので努力は必要ですが、未経験の方でも30日間で達成可能です。...

これからコーディングを勉強してみようかな…と思われてる方は、ぜひこちらからどうぞ!

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

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

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

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

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

HTMLテンプレートとは何か、それを使うと何がいいのかは、【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ をご覧ください。

それでは、いってみましょう!

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テンプレートを紹介しました。

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

canvas or POLO + 他の3つから1

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

 

テンプレートを購入したら、次は実践です。

最初は5日ほどかけて大丈夫ですので、企業サイトでも、趣味のサークルのサイトでも、好きなテーマでOKです。

自分でテーマを決めて、そのテーマに沿ったLPを作ってみましょう!

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

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

いろんなLPが出てくるので、どんな内容が書いてあるか参考にするにはもってこいです。

Pinterest

Pinterestのデザインを再現はデザインツールの知識がなければ難しいので、まずは内容を参考にするだけでOK。

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

サイトを作るときの注意点として、行きつけのレストランだったり、友人の会社だったり、よく行く花屋さんだったり、自分の周りに実在し、かつホームページがないお店や会社をモデルにしましょう

 

制作前に

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

と許可をもらってくださいね。

また、ちょっと勇気は入りますが

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

とお願いしてみましょう。

(使ってもらえる場合は大丈夫ですが、練習素材としての許可だけの場合は、<meta name="robots" content="noindex">をつけて検索エンジンにインデックスされないようにしてください!)

売ろう売ろうと思わなくて大丈夫ですが、まず1円でも稼いで副業のスタート地点にたつことが大切です。

 

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

プログラミングだと、Progate→挫折→久しぶりにProgate復活→また挫折→・・・みたいなところでループしてる方が多い原因もこれ。

いつまでも練習しててもダレるだけですし、ステータスはずっと『勉強中』のままです。客観的にみたときの状況は何も変わりません。

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

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

 

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

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

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

それではまた👍