以前に当サイトのテンプレートを探した際にも、記事を書かせていただいたが、それはwordpressのテンプレートでなおかつ、bootstrapで作られたものだった。
だが今回はポートフォリオを作る際に使うテンプレートなので、wordpressのテンプレートで無くてもよいので、選べるテンプレートの種類が増える。
今回私が作ろうとしているサイトはホームページのみで考えている。
そのほか付け加えたい機能として以下がある。
- 作品をフィルタリングする機能
- 一番初めに表示される画像をウィンドウサイズに合わせる
- パララックスを使う
- お問い合わせ機能
そこで参考にしたいポートフォリオサイト以下です。
yoshiko-pg.github.ioのサイトははパララックスがすごいと思いました。
株式会社タグラインのサイトは構成とかが僕が作ろうとしていたポートフォリオサイトと同じ感じだったのとデザインもいいと思いました。
最終的にはonzeレベルのポートフォリオを作りたいと考えています。
ただ制作の時間をあまりかけたくない、けどいいポートフォリオを作りたかったのでテンプレートから作ろうと思いました。
でさらに楽をするべくbootstrapで作られたテンプレートを選ぼうと思いました。
それを調べているときに少し気になったサイトがあったので１つ。
「Bootstrap テンプレートは使うべきではないと思う」
このサイトでは、boostsrapはCSS設計を理解するのに時間がかかり、逆に作業効率が悪いといってる。
だからもっとシンプルなCSSを使ったほうがいいとのこと。
それが以下である。
デザイナーありの時
Kube Web Framework
デザイナーなしの時
Bootflat
まあ今回はテンプレートを使うのでbootstrapでいいかなと思った。
ただ気になったのは「Material UI」
以前、webデザイナーの交流会に参加した時に、「今の時代フラットデザインではなく、エレメントデザインだ」と言っている人がいてエレメントデザインて何だと思って調べてもいまいちピンと来なかったので、うやむやのまま終わっていたのだが、Material UIを使えばエレメントデザインになるのではないのかと思った。
そこでエレメントデザインをポートフォリオサイトで使おう思った。
少し脱線したが、bootstrapで作られたテンプレートがまとめられたサイトを紹介する
Bootstrapで行こう！すごい無料HTMLテンプレート24個まとめ 2014年12月度
bootstrapzero
最近公開されたBootstrapの無料テンプレート 180本まとめ
ブックマークしておきたい、Bootstrapの商用利用無料のテーマがダウンロードできるサイトのまとめ
これらのサイトをすべて見て私の作りたいポートフォリオサイトに近いテンプレートが以下かと思った。
これにはフィルタリングの機能やパララックスの機能が元々あるので、それらの手間も省ける。
しかしサイト自体もポートフォリオなので、一応フィルタリングなどの機能も使いこなせるようになっておく必要がある。
そこでフィルタリングをのに、良さそうなjavascriptがあったので紹介しようと思う。
Isotope
使い方は「Masonry風プラグイン［jQuery Isotope］の使い方」を参照いただければと思います。
パララックスはskrollr.jsが使いやすかったです。
