読者です 読者をやめる 読者になる 読者になる

かじりアト

ややオタク寄り。平凡アラサーOLの独り言

キャンペーンサイトを作ってみました。

仕事 WEB制作・学習

仕事で急遽、今週末からとあるご招待キャンペーンを実施することに。

 

そのランディングページの手配を任されたのですが、制作会社に頼むには急すぎるし(お盆だし)、ページ内容はごくシンプル、かつペラ1ということで、私が制作を担当することになりました!

 

ちょうど実践で鍛えたいと思っていたのでナイスタイミング。

これは風が吹いている??

 

 

制作時間は約半日ちょい。

完全非公開の企画なので、ここにリンクを貼って紹介することはできませんが、WFは大体↓のような感じ。

 

 

f:id:a-kaji2:20150812214249p:plain

 

スマホから見ると、縦2列の部分が1列に並ぶ仕様です。

 

 

練習問題ではなく、一から自分で考えることで、見えてくるものもありました。

 

スマホの画面幅は案外広い

当初、Media Queriesの値を640pxで区切っていたのだけど、それではスマホiPhone5S)から見てもPCページのまま代わりなし。

最終的に1024pxでPCサイトとスマホサイトを分けました。

 

・いちいちフォントサイズで悩む

PCだとどのくらいのフォントサイズが良いのか、それがスマホだとどうなるか、都度実機で確認しながら微調整を重ねました。

個人的には、見出しは思いっきり大きく、それ以外はやや小さめが好み。

 

・デザインは凝らない方が格好いい

凝ろうと思えばどこまでも凝れるWEBの世界。

だけど色味は極力少なく、構成もシンプルにすることで、逆にセンスよく見えます。

凝って良いのは、センスに自信のある人だけだ。

 

 

 

そしてコーディング時に最も戸惑ったのが「応募する」ボタン。

ボタンは画像ではなく、テキストの周りに色を敷いてボタンのように見せる方法を取り入れたのだけど、テキスト以外の余白部分でリンクを活性化させる処理がどうにも上手くいかず。。

 

そんなときは、似たようなサイトを見ながら勉強です。

 

結果、<a>タグをブロック要素にし、width/heightをともに100%に設置。

すぐ上の親要素でサイズ指定をして、無事、リンク活性も実装できました。

 

 

作ったのはとてもシンプルなページ。

だけど、なんだか一丁前に達成感を味わってます*