ここ３ヶ月あまりウェブサイト制作のお手伝いをしていたせいか、ねこやま猫道のウェブサイトもなんとかしたくなりリニューアルしました。リニューアルのポイントや使用ツールなどを覚書します。
リニューアルしたサイトはこちらです。
http://nekoyamanekomichi.com/
リニューアルのポイント
- １ページレイアウト
- レスポンシブデザイン
- トップに全画面表示の画像スライドを配置
1. １ページレイアウト
１ページのランディングページは流行りでもありますが、小さな団体の場合は、例えばCONTACTとか言っても書くことがあまりないわけで（笑）、であるならば、１ページにした方がよいと思いました。
2. レスポンシブデザイン
以前のサイトも一応レスポンシブにはなっていましたが、ページに必要なスタイルのみレスポンシブ対応していたので、新たに実現したいスタイルが出てくるたびに試行錯誤していました。
そこで、CSSフレームワークを試してみることに。とにかく一度使ってみたかっただけです。沢山あるのでどれを使おうか迷いましたが、お気にいりのエディタBracketsのサイトがFoundationベースであることがわかり、Foundationを試してみることに。が、使ってみたら、ここをこう変えたいという場合に多くのクラスを再定義しないとならず、!importantの嵐に一体何をやっているのだろうと思い使用を中止。
で、次に試したのがKubeでした。よくないという意見もあるものの（私も同意ですが）、デザイナーありのウェブサイト制作で使っているという人もいるようなので。割と快適に使えました。
3. 全画面表示の画像スライド
以前のサイトでは、なんとなくWORKSページなど設けましたが、実際作ってみるとそこまで主張する必要がない気がしていました。そこで、その代わりにトップ画像でこんな写真撮ってます的に紹介できたらよいと思い、スライドショーを使うことに。
また、以前のサイトのトップ画像の場合は、PCで表示された画像をスマホの場合に素直に縮小表示していたので、画像の中身がスマホでは小さくて見えにくいなどありました。最近ようやくbackground-size:cover;の存在を知り（今更で恥ずかしい…）、背景画像をスライドさせるツールを探し、最終的にMAXIMAGE2を使ってみました（注：jQueryのスライドショーを使用するとMacのSafariの場合にスライドの切り替わりの際にテキストがちらついて見える現象が起こり困りました。こちらのブログの解決法で対処しました）。
その他
最後の使用ツールにも書きましたが、他には、トップに戻るボタンの設置、ページ読み込み中のローディング表示、Twitterなどのアイコン作成ツールを使いました。
スライドショー、ページローディング表示についても、別途記事を書いておきます。
使用ツール
- Kube Web Framework（CSSフレームワーク）
http://imperavi.com/kube/ （バージョン5）
http://k1.imperavi.com/ （今回使ったバージョン4） - MAXIMAGE2（スライドショー）
http://www.aaronvanderzwan.com/maximage/ - BackToTop（トップに戻る）
http://www.jqueryscript.net/animation/Customizable-Back-To-Top-Button-with-jQuery-backTop.html - PACE（ページ読み込み中のローディング表示）
http://github.hubspot.com/pace/docs/welcome/ - Icomoon（アイコン作成）
https://icomoon.io/ - favicon.ico作成
http://ao-system.net/alphaicon/