参考にしたいメンズファッションECサイトまとめ
アメリカから日本に帰国して頻繁に利用させていただいている楽天。
ジャムの心理学 vs 楽天の心理学
ジャムの心理学というのは、知っている方も多いかと思います。
ジャムを売る時に、２４種類のジャムを用意した場合と６種類のジャムを用意した場合とでどっちが売れるのかという実験をしたものです。
結果、２４種類のジャムを用意した場合、立ち止まってくれるお客さんは多いものの、買ってくれるお客さんは少ないという結果に。
６種類だけ用意した場合の方が購入率が高く売上がより上がったとのことです。つまり、選択肢を削ぎ落とし、お客さんが迷うわずにすることで、購入につながるという実験結果です。
この逆を行くのが楽天ですね。これでもかというほどの商品が楽天上にあり、迷ってしまいます。
この迷うというのが、「ネットショップ」の楽しいところなのかもしれませんね。ネットショップは、見ているだけで楽しいです。
参考にしているショップ
インターン先で、楽天のサイトを制作していることもあり、日々楽天のお店を見ています。その中で参考にしているショップをご紹介したいと思います。個人的にお気に入りというのもあります。
1. Jiggys Shop
どんなお店？
楽天メンズファッションで売り上げ１位を誇るお店です。
レビュー数９０００とかいう商品もあってすごいです。
どんな商品？
比較的安い商品が多いです。
Webデザイン的にはどう？
アコーディオン型のメニューが使いやすいと思います。
クリックするとスーッと細かいカテゴリが出現します。
アイコンもかわいいですね。
やはりカテゴリーにはアクセスしやすい方がお客さんとしては便利だと思います。
サイドとトップに固定のバナーが挿入されることが多いですが、個人的には邪魔です。しかし、ド派手なバナーが売り上げに直結しているということも考えられますので、派手で邪魔であっても「利益」ということを考えると必要なことなのかもしれないです。
2. MinoriTY
どんなお店？
安い価格帯の服が多く、学生をはじめとした若い方に人気のお店です。
私、自身もよく利用するのですが、特にFULL LIFEというMinoriTYのブランドは、
価格が安いわりに質も高くお気に入りです。
どんな商品？
シンプルできれいめな服が多いです。
Webデザイン的にはどう？
全体的に「わかりやすい」といった印象でしょうか。
シンプルではっきりしています。
こちらのサイドバーはあらかじめすべてのカテゴリを表示させていますね。
楽天っぽくないデザインのお店です。
白黒でシンプルで、かっこいい印象をうけます。
こういうデザインは、すこし高額なブランド力のある商品を売るのに適していると思われます。高級感みたいなものが、白と黒を基調にしたシンプルなデザインで表現されています。
Webデザインで大切なのは「インプット」です。
いろんなサイトを見て、良いデザイン吸収していくことです。
そうすることで、デザインの感覚が研ぎ澄まされていくのだと思います。
webデザイナーもGitを使おう！使ってみた感想
Githubとは、バージョン管理システムのことです。
最近、このGithubというやつを使ってみたのですが、すごい便利なのです！
Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール
- 作者: 塩谷啓,紫竹佑騎,原一成,平木聡
- 出版社/メーカー: インプレス
- 発売日: 2014/12/08
- メディア: Kindle版
- この商品を含むブログを見る
バージョン管理システムというだけあって、Gitはすべての編集履歴を記録してくれます。バックアップとしての機能も果たしてくれます。
Webページを作っていて、やっぱり元に戻したいなんて時に便利だと思います。また、バージョンごとにローカルでファイルを管理する必要もないので、ファイル管理が苦手な方にオススメですね。
基本的に、あるパーツを作ったら
$ git add .
$ git commit -m "message"
このコマンドを打つことになります。
commitすることで簡単なメモとともに編集を記録できます。
その後、$ git push -u origin master とすることで、
githubに反映されます。
こんな具合です。
私自身よくgitは見慣れていたのですが、「なんか難しそう」ということで避けてきましたが、実際やってみるとそんなに難しくありませんでした。はじめすこしてこずりますが、慣れですね！
また、branchやmergeといった機能もあります。まだ、ここらへんはよく理解できてないので、これからいじっていこうかと思います。
webデザイナーの方も、コードをgitで保存してみてはどうでしょうか？
CSSをもっと扱いやすく！Sass (SCSS)の基本を学ぶ
Sassとは、CSSをもっと扱いやすくした言語です。
基本的に、CSSでできることはSassで全てできると思います。
では、SassはCSSと何が違うのか。
１. コメントの仕方
CSSだと /*コメントここ*/ のように記述します。
これ、はっきり言って面倒です。
しかし、Saaaだと
//コメント
よく他のプログラミング言語でも使われているスラッシュを２回打つだけでコメントが書けます。何気にすごい便利です。便利というか、快適です！
２. 変数が使える！
これが、CSSとは機能面で大きく異なる点です。
例えば、私がよく使うグレーは、#f7f8f8なのですが、
$myColor: #f7f8f8;
div {
background-color: $myColor;
}
このように自分で定義した変数を使うことができます。
あの色なんだっけ？ってならずに済みます。
さらに、変数の中には、もっとCSSを入れることができます。
@mixin base {
background-color: #000;
color: #fff;
}
div {
@include footer-base;
}
こんな具合に@mixinと書くことで、その中にCSSを登録しておき、
＠includeで呼び出すことができるのです。
これで同じコードを書かなくて済みます。
さらに、関数みたいなこともできてしまう！
数学でいうf(x)みたいなものですね。
@mixin base($color) {
background-color: gray;
color: $color;
}
p {
@include base(blue);
}
3. ネストが使える！
例えば、こんなcss
.classname p {
color:#000
}
.classname p span {
color:#red
}
これが、scssだとこんな感じに書けてしまいます。
.classname {
p {
color:#000;
}
span {
color:red;
}
}
この他にもimportなどの便利な機能があったりします。
jadeやscssを導入することで記述量が減り、コードを書くスピードが上がります。
もちろん慣れるまで少し時間がかかりますが。
仕事としては、「面倒くさい」という感覚はあまり良くないかもしれませんが、
効率化するために「面倒くさい」という感覚を大切にしたいです。
jadeとscss使ってみてはどうですか？
1pxの差がデザインを決める
さて、ウェブサイトを制作したことがある人、これから始める人も、1pxのズレを気にしたことがありますか？
Photoshopやillustratorを使ったことのある人なら、1pxという細かいことも気にしている方の方が多いと思います。
つまり、デザインかはら入った人は1pxを気にするという感覚があるのです。
私のように、htmlやcssといったコーディングから入った人は、はじめのうちは1pxを気にするという感覚がないのです。
ですから、初めて自作のページを作ってみてもなんだかキレイなページにならない。そんなことを経験した人は少なくないはずです。
なぜキレイに見えないのか？それは、数ピクセルのズレが原因かもしれません。
改善策としては、
左右上下の余白を揃える。
横幅、高さを同じにする。
文字サイズを統一する。
色はあまり使いすぎない。
以上のことに注意を払うだけで、だいぶ印象が変わりキレイなページに近づくはずです。
自分がキレイだと思うサイトを良く見て見ましょう！そして、なぜそのページがキレイに見えるのか考えてみましょう。
それは、きっと
左右上下の余白を揃える。
横幅、高さを同じにする。
などの積み重ねによるものでしょう。
はじめのうちは、高機能なサイトを作るのは難しいです。
しかし、余白を揃えることや幅や高さを揃えることは、今すぐに意識するだけで実践できることなので是非意識してみてください。あなたのwebサイトもキレイに整って見えるはずです。
CSS, なるべく固定値は使わない！
最近、コーディングも早くなりバリバリコードを書いて調子に乗ってました。そう、自分はできる！と思いこんでいました。
しかし、先輩にコードを見てもらったところ全然ダメとのこと。
CSSに関しては、とりあえず固定値でなんとかpxとか指定しない方がいいとアドバイス頂きました。ですので、最近では、％で可能な限り記述しています。％の方がレスポンシブにするときに便利だし、効率的だと実感しました。
初心者でpx指定をしている方は、なるべく％で記述するようにしましょう。
この前までは、とりあえず見た目が良ければいいや程度にしか考えてなかったのですが、「修正しやすい」サイトを作ることが大切だと思うようになりました。
例えば、ここの余白をもう少し広くしたい。おそらく誰もが経験したとこがあるかと思いますが、例えば、margin:10px; と書いてるのにマージンが反映されない。何故だ？と困ったことがあると思います。これってかなりストレスなんですよね。やはり、そんなときすぐに修正を反映することができるコーディングをすることが大切です。そのように修正しやすいコーディングをしておけば、修正をストレスに感じることなく楽しくサイト制作に打ち込めると思います。また結果的に効率的でもあります。
Web制作は「修正」との戦いですから、この「修正」に負けないようにどのような工夫をするかが大切です。いかに効率良くコードを書けるか。どれだけ再利用可能なコードを書けるか。そんなことも意識しながらweb制作に取り組むと良いかもしれません。
私は、jadeとcassを取り入れ、さらにcssとhtmlの復習をすることにしました。
web制作を学び始めて、もうすぐで１年経ちます。実務期間は半年程になります。
日々勉強の毎日ですが、１年前の自分や半年前の自分とは明らかに違うということが実感できるので楽しいです。
本当に成長したと思います。最近なんかでは、jQueryさんの使い方がわかってきたところです！
それでは、今回はここまで！
htmlを生成してくれるjadeがすごい件
Webサイトのコーディングをするとなると、まずhtmlを書いてcssでデザインをするというのが一般的なフローかと思います。しかし、jadeを知ってしまったので、htmlは基本的に触らなくなりました。
jadeとは？
簡単に言うと、htmlを出力してくれるhtmlみたいなもの。プログラミング言語に近いイメージですかね？ですので、プログラミングに慣れ親しんでいる方は、jadeを取り入れると良いかもしれません。例えば、変数を定義したり、ループができてしまったりと、htmlだけではできないことができます！
Jadeさんの良いところ
1.先述の通り、プログラミング言語に近い。
個人的に、私がプログラミングに慣れているということもあり、配列やループなどの命令を書くことができるので、管理がしやすくなります。
例えば、配列にリンク先のURL、テキスト、画像URLなんかを格納しておけば、そこからデータを引っ張ってこればいいわけです。
2.記述量が減る
<div class="box"></div>
空のdivを書こうとするとhtmlではこうなりますが、
jadeだと
.box
はい、これだけ！
また、ループが使えるので、似たような繰り返しのコードを書く必要がありません。これにより、全体のコードが短くなり、ファイルの見通しが拡大によくなります。例えば、1000行のコードが100行程度に収まるなんてことも可能です。
悪いところ
プログラミングに近いのでコンパイルしなければなりません。つまり、エラーが出るとそのエラーを見つけ修正する必要があります。これがなかなか難しい。jadeの重要な要素としてインデントがあり、インデントによって要素を入れ込んだりします。このインデントをミスるとエラーが出ることが多々あります。これが少し厄介ではあります。
まとめ
jadeを使うとプログラミングのようにコーディングできる。それ故、必然的に保守性や管理性または再利用性に優れたコードを書くことができるので、生産性があがる。つまり、「めっちゃ効率的」だと思います！！！
Photoshopをはじめる。
Web製作をしていていつも困るのが画像などのデザイン。
私は、htmlやcssのコーィングは独学で勉強し、半年ほどで簡単なwebサイトなら作れるようになりました。
しかし、クラウドワークスなどをみてみると、コーディングだけのお仕事がなかなかありませんでした。私の目標はwebデザインで稼ぐこと。web designのお仕事をみてみるとwebサイトのデザインだけの案件が多いことを知りました。ですので、Photoshopを使いこなす必要があるのです！
これからwebデザインでお仕事をしたいと思っている方は、コーディングの知識よりもPhotoshopを使いこなせるようになることを優先されるのが良いかと思います。
Photoshopを使いこなすには、ショートカットキーを覚えるのがポイントだと思います。
⌘N で新規作成。
⌘O でファイルを開く。
ものすごい基本的なショートカットキーですが、すごい便利です！！
