動機

筆者は困っていた。屋号を名乗り始め、独自ドメインも取ったはいいが、肝心のサイトは半年経ってもできていなかった。
そこへイベント登壇の話が舞い込む。ヤバい。確実に名刺を配るはずだが記載されているURLは403だ。
果たしてイベントに間に合うのか？！

結論：できた

Project Prozium

概要

デザインカンプを作成し（配色と文言だけ決めてあまり内容は作り込まない）、index.htmlに落とし込む。

デザインカンプの作成

デザイン方針

デザイン方針は以下の通り。

• マテリアルデザインにしたい → しよう
• 複数ページ作る余裕はない → 1ビュー1セクションのペライチの縦長ページにしよう

Illustratorでデザインカンプを作る

デザインカンプの作成にIllustratorを用いたのは、以下の理由による。

ある程度Illustratorに慣れてくると、

- 矩形オブジェクトを大量に作っても管理しやすい
- どうせアイコンやイラストはIllustratorで作る
- スウォッチウィンドウでカラーフォルダが使える

という理由から、Webページのカンプを作成する際にPhotoshopでなくIllustratorを使うことが多くなった。
特に、Illustratorとマテリアルデザインの親和性はとても気持ちがいい。

フレームワークのCSSで用いられているカラーをスウォッチに登録する - Qiita

縦長ページのデザインカンプの作り方

縦長ページのデザインカンプって、Illustratorではどうやって作るのが正解なのだろうか。
この辺り完全に独学なのでよく知らない。

今回は「1ビュー1セクション」なので1ビュー分のアートボードをセクションの数だけ作り、アートボード間の距離をゼロにした。
なお、アートボード1枚につきレイヤー1枚、レイヤー名は実際にマークアップする際のidに対応している。

Illustratorでオブジェクトにドロップシャドウ効果をつける

「マテリアルデザインといえばドロップシャドウ」というくらい重要なドロップシャドウ。
Illustratorの場合は「効果」＞「スタイライズ」＞「ドロップシャドウ」を用いる。
矩形オブジェクトについては、こんな感じに設定するとマテリアルデザインっぽくなる。

実装する

実装方針

実装方針は以下の通り。

• もうCSS書いてる時間ない！ → フレームワーク使おう
• ビルドとかしたくない！新しいタグ使うために学習コスト使いたくない！ → PolymerじゃなくてMaterialize使おう

Materialize関連でめちゃくちゃ参考になったサイト＆自分で書いた記事

しかしこのMaterialize、殺意を覚えるレベルで公式ドキュメントがドキュメントの形になっていない。
そうなると、「実際に使用しているページを見る」か、「ライブラリのCSSを読む」しか無い。

公式導入テンプレート

Starter Template - Materialize

不親切な公式も導入用のテンプレートは用意してくれているので、遠慮なくソースをコピペした。

Gaggle Mail

Gaggle Mail - Group Email Made Simple

公式サイトには登録制のショーケースがあって、その中でも自分のデザイン方針に近かったサイト。
デザインの段階から参考にさせてもらった。

CSSを読んだ結果

MaterializeのCard周りのクラス名について - Qiita

今回のデザインはCardコンポーネントを多用するため、Card周りのクラス名を理解する必要があった。
Facebookで「わかりやすい」と言ってもらえたので多分他のコンポーネントについても今後書くと思う。

縦長ページにするときに参考になったページ

背景画像を全画面表示にする

[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス

カンプを見ての通り、<nav />と<header />でファーストビューを使っている。
そのため、背景画像を `いっぱいに貼りこむ必要があった。
正直「よくこれ知らなくてコーダー名乗ってるな」と自分でも思った。

<header />と<section />の高さをウィンドウサイズに合わせる

画面サイズに合わせて高さを指定する3つの方法｜Webpark

各タグのheightをウィンドウサイズに合わせないと上のCSSは効かない。
ということでjQueryでheightを指定する処理を入れた。
正直「昔何度も書いたコードなのに忘れるもんだなぁ」と思った。

爆速でLPを作る方法

今回機能学習もしながらなのになんだかんだ公開がイベント開始4時間前に間に合ったのは、以下の要素が大きいと思う。

• 変に自動化しようと思わない
• 参考ソースを読むのをめんどうくさがらない
• 構想だけなら半年前からあった

2つ目、3つめはともかく、「データをJSONに入れて半・動的にエレメント生成する方が早いのでは」という考えを早々に捨て去ったのが今回の勝因だと思う。
このページはいずれDrupalなりWordPressなりに置き換わる可能性もあるから、複雑なJavaScriptを書いてテスト＆バグ潰しをするだけ無駄だ。

「最優先事項は何か」を常に意識しておくことが、爆速で、ひとりでサイトを作るときのポイントかもしれない。