スマートフォン用に北辞郎のアプリを作成したのでサイトで告知しようと思ったのだが、ただリンクを貼って「ダウンロードはこちら」というのも味気ない。DropboxのiPhone版のサイトのように今風のページを作ってサイトを訪れた人を誘導したい。
それで「適当な無料のテンプレートを拾ってきて改造しよう」と思い検索してみたのだが、テンプレートがなかなか見つからない。いや、検索すると初心者デザイナー必見！お勧めランディングページテンプレート１０選など色んなサイトがヒットするのだが、どれも有料なのである。うーむ、HTMLファイル1つにお金出すのも何だかなあ。55+ Beautiful Single Page WordPress Themes ShowcaseなどのようにWordpress用のテーマを引っ張ってくるのも手だが、アプリの告知にWordpressを立ち上げるのも何だか仰々しい。ほおづえをつきながらGoogleの検索結果を眺めていると、そのうちlanding page themes – WrapBootstrap: Themes for Twitter Bootstrapというページを見つけた。あ、そうかBootstrap使えばいいんだ。
ということで、私が超シンプルなアプリ用の案内ページを作ったときの手順をメモ。
- アプリのスクリーンショットを撮る
- iPhone Screenshot Makerではめ込み画像作成
- Bootstrapを落としてきてサーバにアップロード
- BootstrapのExamplesからHTMLを拝借
- HTMLを編集してアップ、作成完了
1. アプリのスクリーンショットを撮る
何はともあれアプリを紹介するためのスクリーンショットを撮る。アンドロイドはOSバージョン別！ Android携帯でスクリーンショットを撮影する方法 : ライフハッカー、iPhoneならiPhoneのスクリーンショットの撮り方を参照してカシャ。
2. iPhone Screenshot Makerではめ込み画像作成
1で撮影したスクリーンショットのままでもいいけど、ちょっと味気ないのでスマホのはめ込み画像を作成する。iPhone Screenshot Makerを使えば、先ほどをスクリーンショットをアップロードするだけでiPhoneやアンドロイドのはめ込み画像を作成することができる。できあがった画像は以下の通り。
3. Bootstrapを落としてきてサーバにアップロード
Getting Bootstrapで「compiled」の方をダウンロードし、解凍してできる「bootstrap」のフォルダをサーバにアップロードする。
4. BootstrapのExamplesからHTMLを拝借
BootstrapのExamplesからレイアウト例のHTMLをもらってくる。今回はこちらのテンプレートを使った。
5. HTMLを編集してアップ、作成完了
上述のテンプレートに色んなものを足したり引いたりした結果が以下。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>北辞郎 - スマートフォンアプリ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="中国語オンライン辞書">
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="shortcut icon" href="http://www.ctrans.org/favicon.ico">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
.jumbotron {
margin: 30px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
</style>
<SCRIPT language=JavaScript type=text/javascript>
function year() {var data = new Date(); var now_year = data.getFullYear(); document.write(now_year);}
</SCRIPT>
<link href="./bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="./bootstrap/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container-narrow">
<div class="jumbotron">
<img src="./img/app.png" />
<h1>てのひらに北辞郎</h1>
<p class="lead" style="text-align:left;">登録語数20万語超。北辞郎の豊富なコンテンツをスマートフォンでそのままご利用いただけます。中国語、ピンイン、日本語による検索で知りたい言葉をいつでもどこでも調べられます。</p>
<a class="btn btn-large btn-success" href="https://itunes.apple.com/jp/app/id489348600?mt=8&ls=1"><img src="./img/mobile.png" /> App Store</a> <a class="btn btn-large btn-info" href="https://play.google.com/store/apps/details?id=jp.karak.android.kitajiro"><img src="./img/mobile.png" /> Google Play</a>
</div>
<hr>
<div class="footer">
<p align="center">Copyright © 2005-<script language=JavaScript type=text/javascript>year();</script> 辞典幇.</p>
</div>
</div>
<script src="./bootstrap/js/jquery.js"></script>
</body>
</html>
このHTMLを先ほどサーバに上げたbootstrapのフォルダと同じところにアップロードして作業完了。下が完成版である。シンプルの極みだが私は気に入っている。なお、2つのボタンに使ったスマホのアイコンはbootstrapになかったので別に調達した。
以上で作業完了。私は試行錯誤しながらなので30分以上かかったが、上のHTMLなどをそのまま流用すればものの数分でアプリ用のページができあがる。興味のある向きは好きなように加工されたい。
関連：北辞郎 – スマートフォンアプリ（今回実際に作成したページ）
