アフィリエイトと離れて制作に没頭した【アフィリエイトへの道 第8話】

どうも、アフィリエイトしていたつもりが気がついたらHTMLの設計者になっていましたフロントエンジニアザワです。設計中につまずいた箇所や不明点などありましたが、時間をかけて調査してすすめてモジュール一覧完了までこぎつけました。

前回までのアフィリエイトへの道のり

現場主体のWebデザイナーがアフィリエイトのスキルを習得するためアフィリエイト宣言をしました。アフィリエイトのサイトの制作フローを作成してアフィリエイトのジャンルも決定した。

サイト制作の上流工程を一旦終えてデザインに着手した。何度かのブラッシュアップを経て完成。スムーズにHTML・CSS設計に移行できるかと思いきや設計する設定で作業が止まったが、不屈のトライ&エラーで危機的状況を脱した。

ブレイクポイントってむつかしくね?

Web界隈ではレスポンシブ設計は当たり前ですが、どの部分でデザイン切り替えるか(ブレイクポイント)が毎度議論に上がるとこです。

ちょっと前まではタブレットサイズ(768px)とスマホサイズ(320px)で考えられていたが2019年現在ではさまざまなサイズのスマホやタブレットが発売されているため、768px、320pxでは対応しきれない。ネットで探してみると納得感のある記事を見つけた。

詳しくはこれを参考にした。

まあアフィリエイターであれば、WordPressのテーマ使えば全く気にしなくてよいところなんだけど、Webデザイナーである身としてはトレンドを捕まえてスキルにしていく必要がある。Web業界ってトレンドの流れが早すぎて困る。(当ブログでは何度もつぶやいていますが、、)

複雑な動きはJavascript?いいえCSSでもできますよ

自分的には極力Javascript(jQuery)を使いたくない。理由らJavascriptが苦手(もっか勉強中)な上に不具合が出た時に即座に対応できない。あー、Javascriptバリバリかける人生になりたかったなぁ。

Jsを必ず使うと思っていたドロワーメニューがなんとCSSで出来ることがわかった。もうね、今回の制作の中で一番びっくりしたというか衝撃的な学びだった。

(感動を!)共有しておきます。

解説は参照に任せるとしてお問い合わせフォームなどで使われる[ input ]のタグが表示・非表示の切り替えになるなんて、、発見した人天才!って思ってしまった。

これを元にCSSをカスタマイズして問題なくドロワーメニューができた。The感動!

あー、Javascriptも使いこなさなくては。

モジュール制作はたのしい(よね!?)

コーディングって最初はデザインパーツを新規で起こさなくてはいけないのでシンドイよね。

しかし、デザインパーツが出揃うと一気に作業が進む。このPSD上のデザインがHTML で再現されていくのが楽しい。楽しくない?

そのもっとも楽しいのがモジュール作りだ。そうだよね!?

ちなみにモジュール一覧は、サイトを運用する時にモジュール一覧があると誰でも簡単に新規のページが作れるので大規模なサイト制作時には必須なものになっている。

個人的にはデザインパーツがどんどんHTML上で再現される快感がたまらならいんだけども。

まとめ.ジェネラリストへの挑戦

プライベートな時間を使ってモジュール完成までかかった時間だいたい1ヶ月ですかね。この1ヶ月全てコーディングに費やしていたのでアフィリエイト記事を一つも書いてない。

記事を書かなくなると文章力という鈍ってしまうんですよね。

今回のアフィリエイトの挑戦は、ユーザー調査からデザイン、コーディング、そしてライティングまで全て1人でやろうと思っている。(これからやるアクセス解析も)まさにジェネラリストみたいなことをやっている。

現場では、デザイン・コーディングを行っているが、今回はジェネラリストへ挑戦をしている。

これでアフィリエイトの結果も出せたら自分やばいやん!!って思いながら頑張っている。

過去記事.アフィリエイトへの軌跡

Webデザイナーがプライドを持ってアフィリエイトに挑戦する様を軽い口調で語ったアフィリエイト挑戦コラム。特別なノウハウは書いてなくて、読んでる皆様が応援して頂く企画なのです。

シェアボタン

<div class="sns-area"> <!-- Twitter / hogehogeの部分を自分のアカウント名に変更してください。--> <a class="btn-twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=nishizm&tw_p=tweetbutton&related=nishizm" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> <!-- SNS Count CacheよりTwitterのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></span> </a> <!-- Facebook --> <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn-facebook"F> <i class="fa fa-facebook" aria-hidden="true"></i> <!-- SNS Count CacheよりFacebookのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></span> </a> <!-- Google+ --> <a class="btn-google" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i> <!-- SNS Count CacheよりGoogle+のシェア数を取得 --> <span><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></span> </a> <!-- はてなブックマーク --> <a class="btn-hatena" target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"> <i class="fa fa-hatena"></i> <!-- SNS Count Cacheよりはてなブックマークのシェア数を取得 --> <span><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></span> </a> </div>

おすすめ記事

関連記事