DAY21の課題は「モデルを決めて、実在するお店のLPを作ってみよう①」になります。
HTMLテンプレートを使った自作ポートフォリオの公開が終わり、次は実在するお店のLPを作ってみるというお題です。
まずはHTMLテンプレートを作成してLP製作を「販売する」ことができることが目標ですから、今回はポートフォリオサイトを作成した時とは異なるHTMLテンプレートを使って作成することになります。
モデルのお店決定
これは自分にとっては簡単でした。
なぜなら前々から自分が一番最初に作りたいと思っていたお店があったからです。
それは、親友が自営でやっているお店。
チャラいところはあるものの、仕事に対する情熱がすごいので、会うたびに刺激をもらってます。
そんな親友のお店のサイトを作りたいと思ってたので、良い機会と思い親友にサイトを作ることの了承を得るために連絡すると、二つ返事でOKをもらえました。
「完成を楽しみにしてるよ」という言葉をプレッシャーに感じながらも第一関門はクリアです。
HTMLテンプレートの決定
DAY21向けの記事では5つのHTMLテンプレートが紹介されています。
- 汎用性が高い万能テンプレ：Canvas
- 汎用性と豊富なデモでイメージが湧きやすい：POLO
- 余白が綺麗な：Foundry
- クリエイティブな：POFO
- クリエイティブ＋エモさ(エモいという感覚は自分にはよくわかりませんが)：RHYTHM
この中から汎用性が高い「Canvas」or「POLO」のいずれかとクリエイティブ系の「Foundry」「POFO」「RHYTHM」のうちのいずれかを購入すると作成の幅が広がるということでおすすめされています。
自分はとりあえずテンプレートの数が多い「Canvas」のみを購入しました。
「Canvas」だけで850以上のテンプレートが入ってるなんてすごいですよね。ただ1サイト1ライセンスのようなので、新たにサイトを立ち上げるたびに購入しないといけないってこころが注意点ですかね。
まぁ2000円足らずで850以上のテンプレートを一生使い放題っていうおいしい話しはないですよね。
テンプレートの多さに困惑
「Canvas」のサイトで購入の手続き後にファイルをダウンロード。そしてダウンロードされたzipファイルを解凍するとそこに待っていたのはhtmlファイルの山・・・。
ポートフォリオサイトを作成した時に使用したKerriのようなイメージをしてましたが、全く違いましたね。
一気になにから手をつけていったら良いか分からなくなりました。
とか言ってても何も始まらないので、とりあえずindex.htmlを探し出してブラウザで見てみると普通にオシャレなテンプレートが実装されている感じでした。
そして色々と見て言ってるなかで、ナビゲーションメニューから色んなテンプレートにとべることを発見。
よく見ると山ほどあるhtmlファイルもheader-XXXX.hmtlなどと、どんなhtmlかっていうのがファイル名で分かるようになっているみたいで、実際にブラウザで表示を見て、デベロッパーツールやVSCodeなどでコードを見て必要な部分を切った貼ったして作っていくんだなってことが分かりました。
でも、これだけテンプレートが多いとイメージ通りのものを探すのにも一苦労ですね・・・。
何を書いたら良いかわからず手が止まる
開発のイメージは掴めたとして、実際のレイアウトを考えようとしたんですが、親友がやってる業界の知識が全くないのでポートフォリオサイトを作ったときよりも何を書いたら良いかさっぱりです。
まずはレイアウトを考えよう → いや、そんなことよりテンプレートを一通りみてとりあえず作ってみよう → いやいや、やっぱりレイアウトはちゃんと考えないとダメだろ → レイアウト考えたところでテンプレートに沿ってなかったら意味ないじゃん
みたいなのをぐるぐる考えてしまって全然作業が進ませんでした。
結果的にはテンプレートを一通り見て、他のお店のサイトを実際に見て、書く内容を箇条書きにしたところでDAY21は終了となりました・・・。
テンプレートからのサイト作成も数をこなしていくともっと、スッとレイアウトもイメージできるのかなと思うので、ひたすら実践するべしってとこですね。
まとめ
- テンプレートは数が多い分、どんなものがあるか把握するのが難しい
- どんなテンプレートか見ていくぐらいだったら、一から作った方が早くね？とか思っってしまう
- でもテンプレートを使ったほうがアニメーションとかも簡単につけれるから結果的には早い(上級者だったら違うのかな)
- 作成するお店の業界を知らないと何も書けない
- 同業のお店のサイトを片っ端からみて参考にする
