こんにちは、さおり(@iropon30)です。
前回はLPをデザインし、そのデザインの添削を行いました。
今回はそのランディングページをコーディングするワークです。
個人的には最初から完璧にする必要はなくて（いや、必要だけど…今回は）、とりあえず本を読んだり、CRI BOOT CAMPさんのページを参考にコーディングしてみてください。
コーディングもデザインも慣れではありますが、基本を身に着けてからの慣れが必要だと思います。
コーディングは1〜2冊、基礎がきちんと書いてある本を読むのがおすすめです。
今でいうとこれだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ] は読みやすかったです。これだけだと基本なので、CSS設計などを知る場合は CSS設計完全ガイド 〜詳細解説＋実践的モジュール集 [ 半田 惇志 ] がおすすめです。難しいですが。
ここで大切なのは、フィードバックをもらえるところまで、荒くてもいいから仕上げてみるというのが大切かなと思います。
まずは見せられるものをつくることを意識
最初からセマンティックなコーディングや、設計を考えられたCSSをかければ言うことありませんが、
こういうことって体験しないと必要かどうかわからないと思っていて。
自分が仕上げたコーディングに対して「ここを修正して！」と言われた時に「もっとこう書いておけばよかった…」となってはじめて、必要な理由がわかって、勉強したい！と思うのかなと。
英語を話せるようになりたい！と思っているのと、好きな人が英語しかしゃべれないから是が非でも英語を覚えたい！のとでは、習得スピードも違いますし、やることの鮮明さも違ってくるはずで、それと同じだと思っています。
今回コーディングするランディングページは広告運用のためなので、そこまで厳密にコーディングしなくても大丈夫。その代わり、スピードを求められるかもしれない、といった案件によっても求められることは様々です。
ですから、今回はいったん参考書や参考サイトを見ながら人に見せレビューをしてもらえるところまでもっていってください。
フィードバックのもらい方も意識して
このあとに、フィードバックをもらうんだ！という意識を持ってコーディングするのも大切です。
なれて来ると、もうそのままクライアントチェックになりますが、今回は公開する前にフィードバックをお願いすることを想定しています。信頼できる人をみつけておくと良いと思います。MENTAもオススメです。
1行1行これはどうする？と聞ける人がいればいいですが、聞かれる方もそれはとても酷だと思うので、
まずは上から下までやってみる。
わからないところは書き出しておき、なぜわからないのか、どういうところが実装できないかを書き出しておく。
その先にあることを意識して、実践してみるといいと思います。
（というのを、ポートフォリオに書いたりできますしね）
プラスアルファをやってみる
mogaBlog さんでは「デザイン練習のためのワイヤーフレーム」として、配布されていますが、
今回は一連の流れを体感するため、コーディングのワークも入れてみました。
初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説しているブログ
問い合わせて、ご紹介したり、添削記事を投稿しても良いかを聞いたら、快くOKしてくださいました。感謝です。
誰かと一緒にデザインをして、その後デザインを交換してコーディングをする…なんていうのも
面白いかもしれませんね。お互いフィードバックができますし、お互いメンターがいればフィードバックも2倍もらえる。
のように、どうやって自分のできることや吸収することを増やすように勉強していくというのも
大事かなと思っています。
あとは実際にお問い合わせフォームをつくってみたり。
（いちから自分でもありですが、難しいので…WordPressのプラグインをいれてやってみるとか、コチラのサイトのphpファイルを組み込んでみたりとか）
サーバーにあげてみて、公開してみたり。
仕事に関わりそうなことをどんどんプラスしてみて、勉強していくといいかなと思います。
まとめ
ひとりひとりのデザインは違いますし、以前つくったデザインを「ここはこうしたら…」とコーディングをひとつひとつ解説していくのも違うかな…と思い、どういう事を考えながらコーディングをすべき？や、どういう風に勉強の幅を広げる？という部分に焦点を置いて書いてみました。
次回は「改めてバナーをつくってみよう」を書いてみようと思います。
