ランディングページを作る #04

　前回設計したワイヤーフレームを基に、サイトの頭となるランディングページをマークアップしていきます。

※ランディングページのワイヤーフレーム

HTML部分を作る

　さて、作るべきモノは決まっているので、ここは簡単です。必要そうな部品をちょいちょいと書いていきます。

HTMLの素組み

　「幸せは、毎日の中にある」という我ながらキャッチーなフレーズの下に、ログインボタンと新規登録ボタンを設置。その下に、アプリの特徴説明を三つ作ります。後ほど適切な画像に差し替えますが、とりあえずということで、どうぶつの森のモニカの画像を使っております。アハッ
　特徴２が二つあるという地味なミスは見なかったことにしましょう。

CSSでスタイリングする

　それでは、CSSでスタイリングを行っていきます。

　ざっとこのような感じになりました。
　ヘッダ部分の背景には、幸せの象徴とも呼べるクローバーの画像(フリー素材)を設定し、ボタンをそれらしくスタイリング。特徴説明も含め、中央配置を主体とした画面構成となっております。
　褒められる + ポジティブで「ほめティブ日記」という、我ながら破壊的なセンスのタイトルも設定しました。開発中にもっと良さそうなものを思いついたら、差し替えます。普通に。

・幸福を謳っているのに背景が暗い
・仮とはいえ、モニカの画像ではあまりにもしっくりこない
　という理由から、画像を差し替えます。

晴れやか

　ちょっとだけフリーゲームのタイトル画面っぽいですが、いい感じです。さらに、特徴説明の文章も設定しました。

特徴説明文

　この文章を書いている最中に、「自分は一体何様なんだ？」と我に返る場面もありましたが、気を大きく保ちます。誰かの心に刺さってくれるのなら、嬉しいです。
　ちなみに、○○には、このアプリの要となる美少女の名前が入ります。現在未定ということです。


　さて、あとは「ログイン」及び「新規登録」ボタンを押した時に、入力フォームのモーダルウインドウが現れるようにします。

シュイン

　jQueryを使用し、動きのあるウィンドウを作成しました。ボタンを押すとシュインという感じでウィンドウが拡大して現れます。


　あとは、PCからアクセスした際に適切な画面構成となるよう、メディアクエリを書いていきましょう。

上部分

下部分

　配置を少し変えただけなので、特別難しいことはありませんでした。


　さて、これにてランディングページのスタイリングは、一時完成となります。特徴説明の部分が少し寂しい感じがしますね。後ほど、画像を差し替える際、デザインの追加を検討します。

次回は、ログイン直後に表示されるホーム画面の作成を行います。