WEBページのモック作成テンプレート
2017年6月27日
WEBページのレスポンス時のレイアウトや動きなど静止画だけではイメージがつかみにくい事が多いので、最近ではモックをHTMLで作るケースがあります。そこで私が使うモック作成テンプレートをご紹介します。
ベースフレームワーク
基本のベースフレームワークにはbootstrap4を使っています。CSSを書く時間をカットしたいので、classだけででほぼある程度レイアウトが組めてコンポーネントが多いのも強力です。
4にアップデートされてからGridシステムがflexboxに変更されたのでレイアウト設計が昔に比べて楽だなと感じます。ちなみに4からjQueryのバージョンが3系になっています。
外部ライブラリ
bootstrap4だけでもある程度事足りるのですが、カルーセルやモーダルなどちょっとbootstrap4標準以外のライブラリを使いケースもあるので、CDNを利用してあらかじめ汎用性の高いものをセットしています。
カルーセル
カルーセルはslickというライブラリにしています。これはレスポンシブとの相性もよく便利です。Tickerのような使い方をしたい場合はbxSliderなんかも使います。
モーダル
bootstrap4にも標準でありますがfancyboxをよく利用します。こちらもバージョンが3になってすっきりしたデザインでレスポンシブの相性も良くなって使いやすいです。
WEBアイコン
モックで画像とかセットするのは面倒なのでアイコンはFont Awesomeを利用します。老舗なので種類も豊富です。
アニメーション
ちょっとしたアニメーションで都度コードを書くのは大変なのでアニメーションも外部ライブラリのAnimate.cssをセットしておきます。classだけでアニメーションをセット出来て便利です。
HTML
それ以外にも使いたいライブラリを都度ダウンロードしてくるのも大変なのでCDNからセットします。cdnjsはかなりの数のライブラリがあり検索できて便利です。上記で紹介しているものもすべてここのサイトにあります。
その他にもCSSやJSが書きたい時もあるので固有のファイルもセットします。ファイル構成はこんな感じです。
- index.html
- style.css
- config.js
index.htmlはこんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="noindex,follow" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>デモ名</title> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Bootstrap --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <!-- fancybox --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> <!-- font-awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- animate CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!-- slick --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <!-- 固有 --> <link rel="stylesheet" href="style.css"> <script src="config.js"></script> </head> <body> <!-- ここに内容--> </body> </html>
bootstrap4のチートシート
さらにbootstrap4の基本コードを書くときに便利なBootstrap 4 CheatSheetでスニペットをコピペしながらモックを作ります。
これでかなり高速にHTMLベースのモックを作る事が出来ます。