テンプレートエンジンpugを使って、LP用テンプレートを作った話

pugとは、何?

pugとは、htmlを出力するためのテンプレートエンジンです。

pugを使うには、gulpのインストールとgulp pugの設定が必要になります。

なぜ、テンプレートを作ろうと思ったか?

特にECモールのLP用のコーディングは、ほぼどのページでも共通のパーツが多いです。

少しでも早く作業を効率化するために、作成しました。

テンプレート作る際に適している「extends」

まず、ベースとなるpugを作成します。

gista55b486fc929988c50f398b83a4ffeb6

ファイルごとに違うコンテンツを入れたいものには、[block 名前]で書きます。

ベースとは異なるpugを作成します。 そこに、▽を書きます。

gistb65941748e4de39e7043d84fc3535b31

※pugを書く際は、インデントが正しくないと、コンパイルできませんので、注意してください。

[参考]私がpugを勉強する際に見ているサイト

ゴリラでもわかるJade改めPug入門

→こちらのサイトは分かりやすくて、いつも、分からなくなったら、見ています。

そもそも、なぜ、pugを使うようになったのか?

今働いている会社が、pugでコーディングが必須です。htmlはダメです。

pugの方が、プログラマーの人たちがやりやすいらしいです。

私がデザインする時に参考にするサイト集

どうやって参考のデザイン探しているの?

とよく聞かれます。

今回は、私が、デザインする時に、参考になるページやデザインのイメージなどを探す時に必ず見るサイトを紹介します。

ランディングページのみのギャラリーサイト

http://rdlp.jp/

こちらは、リューキデザインさんが運営しているサイトになります。

楽天・ヤフーのページ作成するときに必ず見るサイトです。

ピンタレストで、「ページ 高級」などで検索してみる

https://www.pinterest.jp/tsuboin/banner/

https://www.pinterest.jp/tsuboin/page/

ピンタレストで、いいと思ったページとバナーをボードで分けて集めています。

いいと思ったバナーのどこがいいのかを考えながら、日々集めています。

T-mall(中国)のページを集めたサイト

http://huaban.com/from/skii.tmall.com/

http://huaban.com/from/tsubaki.tmall.com/

http://huaban.com/from/luxgf.tmall.com/

http://huaban.com/from/lecreuset.tmall.com/

前職で、化粧品のLPを作る際に、イメージが見つかったのが、こちらのサイトでした。

以降、こちらも見るようにしています。

[気になっているサイト!]あえてのトップページではなく2ページめを集めたサイト

http://2nds.watapopo.com/

ツイッターで流れてきて、あえての2ページめを選んでいるのが、面白くていいなと感じました。

見た感じ、すぐ参考に出来そうなので、今後、サイト制作とかする機会ありましたら、参考にしようと思います!

snapmartさんのアプリのここが分かりにくいから自分なりに考えてみた。

まず、他社さんのアプリに関して、物申すことに、大変恐縮いたします。

snapmartを使おうと思った理由

前々から気になっていたサービスで、ちょうど、良さげな写真があったので、登録してみることにしました。 アプリでの使いにくい点や分かりにくい点をまずあげて、自分なりに考えてみました。

下にあるアイコンが分かりにくい

企業リクエストも大事ですが、私は、カテゴリーにどういう写真があるのか見たかったです。

下にあるアイコンも、何の意味があるアイコンなのか、押して見ないと分からず、ストレスを感じました。

f:id:momonotsubo:20170721001804j:plain

出品する際の分かりにくさ

出品する→写真をアップロードすると、すぐに販売中ってなるので、その前に確認と編集がしたい。

f:id:momonotsubo:20170721002056j:plain

タグ追加が、キーワード入力する→タグ追加押すという操作が最初マジで分かりませんでした。

よく使ってるキーワードとかは、みんなが使ってるキーワードが出るかと思いました。

f:id:momonotsubo:20170721001946j:plain

>マークではなく、編集とかの文言の方が分かりやすい。

f:id:momonotsubo:20170721002158j:plain

アプリ開くと企業リクエストがデフォルト

企業リクエストと公式が一緒になってて、分かりづらいので、企業リクエストからと公式を分けた方が良い。

HOTや新着や終了したやつは、並び替えで表示した方が良い。

f:id:momonotsubo:20170721001804j:plain

カテゴリーページの中に入ると写真だけ出てくる

企業リクエストと一緒ですが、新着・売れている順で、並び替えをしたい。

[アプリUIデザイン提案!]勝手に考えてみた!

私が感じた3つの問題点を、自分なりに勝手に考えてみて、snapmartさんのアプリUIを考えてみました。

今回、作成したみたのは、企業リクエストの画面だけ考えてみました。

f:id:momonotsubo:20170723014858p:plain

Webデザインを4年ほどやっていますが、UIデザインとsketchは、初心者的な感じですが、 自分自身の勉強にもなるため、恐縮ですが、書かせていただきました。

今回私でUI考えたsketchファイルはこちらになります

※応募数180枚(リアルタイムで更新)に対して、当選は1枚とかの表記がおもしろいかなと思いました。

↓こちらは、デザインしたsketchファイルとアイコンなどに使用しているUI kitになります

http://firestorage.jp/download/b17045ab3f14f74b1658e3c607fe2e4ea2df832a

http://firestorage.jp/download/c5eb8805c862003e09334c55edf640d681840e51

率直に言うと、自分で考えると言って、全部のデザインを考えようと思いましたが、いざデザインすると良い例があまりなくて、難しかったです。。

snapmartさんのサービスは、すごくいいアイディアだと思うので、ぜひ、みなさん使ってみてください!

https://snapmart.jp/

sketchの勉強もしたいので、引き続きアプリUIを考えながら、sketchをマスターしていこうと思います。

楽天のページはなんで、縦に長いの?

普段どこのECサイトで買ってますか?

普段どこのECサイトで買ってますか?と聞かれると、多分、多くの人がAmazonと言うと思います。

若い人とかでは、楽天を使ってるは、あまり聞きませんからね…。

楽天を使わない理由として、Amazonより、ページが長く見にくいということがあると思います。

なんで、楽天のページは、あんなに縦に長いの?とよく聞かれます

私の予測で書かせていただきますが…

楽天には、楽天大学というものがあり、出店者だけが通える学校があります。

楽天大学に通った時に誰かが、「商品ページにはストーリーが重要です!物語です!!」と熱弁していました。

だから、「商品ページにストーリーが大事だから、ページ長くなってもいいから、いっぱい語らないと!!」と思うようになったんだと思います。実際、この私も、その人の本読んで、いっぱい書かないと思い、当時ページを作ってました。

一部しか紹介できていませんが、こういうのが、俗に楽天メソッドと言われています。

楽天メソッドって何?

簡単にまとめるとこの2つが重要なポイントです

・ひとけ(いっぱいのお客さんが買っているよ!アピールの演出)

・商品を使うであろうユーザーの悩みや物語や歴史やこだわりを書いて、商品の背景にあるストーリーを描く

長いページ作成時の悩み

RMS楽天管理画面)の使えないタグ多すぎ

RMS楽天管理画面)の文字数制限オーバー

長い商品ページだと、文字数オーバーになっちゃうんだけど?

運用代行会社で働いていた時に学んだことですが、これらを解決するために、タグ壊しという技を使います。

通常の使えないタグは、こういう風に書きます

通常のタグ壊し

そして、特殊なJSやCSSを商品のページに読み込ませるには、この=""を繰り返し書きます

JSとCSSのタグ壊し

この、タグ壊しを使うことで、通常はできないスマホでのiframeも可能になります。

PCもスマホも通用する、便利な技なので、覚えていただけたら嬉しいです。

[応用編]ページが長いから、アンカーリンク貼りたいんだけど?

楽天の商品ページでは、iframeにすると、アンカーリンクができなくなります。

アンカーリンク

↑こちらのタグをRMS(iframe置いた場所と同じ場所)に貼り、iframeの中のHTMLに、通常のa hrefを、コーディングの際に指定してください

iframeは、楽天FTP(ゴールドサーバー)に置きます

なにかとECモールは使いにくいですが、こういう技もあるんだということを頭に置いていただければ幸いです

自己紹介

自己紹介

26歳の都内で、WEBデザイン・UIデザイン・コーディングをさせてもらっているカルボナーラつぼちーです。

四国のECショップで3年間EC運営・都内でEC業界のWEBデザイン・UIデザインを2年程度やらせていただいております。

この業界に入った理由

私は、16歳で高校入学から5ヶ月で、経済的な理由で、高校中退をしています。俗にいう、文化祭なども経験していません。

そこから社会人として、飲食店で5年ほど働きました。

17歳の時、「働きながら高卒認定の資格勉強しよ」と思い、高卒認定を独学で勉強してから3年後ギリギリ20歳の時に受かることができました。

そこから、「デスクワークがしたい」と思い、パソコンの職業訓練に通い、3ヶ月後就職しようと思っても、どこも高卒認定だけでは、就職することが出来ませんでした。

その時、学歴不問で受けれることができるのは、webデザイナーでした。

なので、WEBデザインの職業訓練に通いました。

初めて就職したのは、四国のネットショップのデザイナー

四国のど田舎で、未経験で学歴が高校中退の私は、雇ってくれるところがありませんでした。そこで、タウンワークを見ていて、見つけた、某ネットショップのデザイナーとして、働き出しました。

働いて1年目は、商品の切り抜きや簡単な作業ばかりでした。

2年目から、ネットショップ運営全般と言える作業をほぼ全般やるようになりました。商品ページのデザイン・バナーのデザイン・広告運用・ セール企画提案…etc

ただのバイトが、粗利や利益を考えて、セール企画していき、結果がでないと怒られるそれが日常でした。売り上げ目標額が、目標に達した3年目の春に、東京で働いてみたいと思い、辞めました。

一番楽しかったのは、たくさんの大人たちと話せるところでした。

私自身、人と関わるのが疲れていた時期がありました。そんな私を暖かく受け入れてくて、毎日が楽しかったです。

上京したのは大手EC支援会社に採用されたから

よく名前を聞いていた大手EC支援会社に採用されたのは、今から1年前半前くらいです。ま、受かるかどうか分からないけど、受けてみようと思い、受けました。そしたら、一発で受かりました。正直、嬉しくて嬉しくてたまらなかったです。初めて、デザインしたのは、某有名ケーキ屋さん。結論、私には、スピードと基礎と納期に対する危機感と努力が足りなかったと思います。でも、ここで働いていなかったら、ガイド・写真の加工・Photoshopの基本操作を学ぶことは出来なかったので、大変感謝しています。私なりには、頑張ってはいましたが、その頑張りが足りず、1年3ヶ月働いたのちに、やめました。その経験があったからこそ、今でも、自分でデザインチェックリスト作ったり、バナー模写したりしています。

前職辞める時にタイミングよく入った会社が今の会社

前職を辞めるときに、ちょうどタイミング良く声かけいただいて、今の会社に入社しました。今の会社では、EC業者向けに、人工知能でデータ分析するシステムを作っています。今の会社は、システムの管理画面のUIデザインから受託で受けているデザインまで諸々やっています。今の会社でも、まだまだ自分が納得できるデザインは出来ませんが、頑張っています!

ここで急に黒歴史おさらい

16歳で高校中退→役者目指し、初めて上京

当時、今より30kg細く、五反田の劇団に通ってました。

17歳でアコギ習う→都内の某フェスに刺激されて

YUIのチェリーをアコギ弾いて歌ってた。

18歳で美術学校通う→四コマ漫画家目指す

同時に小説家も目指す。