プログラミング学習記録 学生生活

【LP模写】プログラミング1ヶ月半独学しながらisaraの模写をやってみた

更新日:

スポンサーリンク

【LP模写】プログラミング1ヶ月半独学しながらisaraの模写をやってみた

✅ 最初の1歩を踏み出せた

 プログラミングを独学で始めて、はや1カ月半が経ちました。

 その中で、LP案件を受注するためにサイト模写をisara[イサラ]のホームページでやってみました。

 様々なサイトでこのサイトの模写をおすすめしていましたが、かなり難しかったという感想です。

 ですが、やっているうちに段々と慣れて、このレベルのサイトだとおそらく半分以下の時間で今なら作れそうです(アニメーションとかはよくわからぬ)。

 そこでこれから模写コーディングを始める方にもぜひこのサイトをおすすめしたいので、完成品と、製作についてのノウハウを簡単にご紹介します。

✅ 完成品キャプチャ

模写サイト名
isara[イサラ]│バンコクのノマドエンジニア育成講座:http://isara.life/

 PC版

isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

 スマホ版


isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

isara.life模写制作LP

スポンサーリンク

製作時間

✅ざっと30時間

 始めた当初は、最初の頭の部分を作って1日終わりました(笑)

 ですが、途中からは少し悩んで止まるくらいで、サクサク進めることができました。

 おそらく、詰まってしまうポイントさえわかっていれば、こんなに時間はかからなかったと思うので、準備とコツの紹介をしていきます。

スポンサーリンク

製作準備

✅ まずは勉強

  • 使った知識
    ドットインストールの「ウェブサイトを作れるようになろう」①~③
    「Bootstrap4入門」
  • 書籍2冊(以下を参考に)

・ドットインストール-3分動画でマスターする初心者向けプログラミング学習サイト:http://dotinstall.com/lessons

 この程度の知識で挑むと詰みます(体験談)。

 自信満々で製作にとりかかりましたが、全く進みませんでした。

 ドットインストールも、もう少し先の④~⑤を勉強した方がよさそうです(結局やりませんでしたが)。

 一番役に立ったのが、最近発売した1番目にある書籍でして、非常にわかりやすくウェブサイト制作について学ぶことができます(これをちゃんと勉強すれば7割作れる)。

 2番目の書籍はまだ全然読んでいません。後述しますが、少しだけお世話になります。

✅ フレームワークの用意

  • Bootstrap4
    ⇒全然使いません(使えません)でした
     手打ちの方が早くてやりやすい気がする(勉強不足なので)
  • jQuery
    ⇒テキストの格納と、サイトの一番上に戻るボタンのみ
  • fontawesome
    ⇒アイコンは全てこれ

 Bootstrapは私の手に負えませんでした。ある程度ウェブサイトに慣れてから勉強した方が良さげです。

 jQueryの実装では、先ほど紹介した書籍に加え、グーグル先生にお世話になれば大丈夫です。

 fontawesomeは、アイコンを使用するために必要です。HTMLの中にコードを追加することで、アイコンを追加することができます。

 Bootstrapでもアイコンを使えるそうですが、よくわからなかったため、そちらを使いました。

✅ 素材の入手

  • ChromeのImage Downloaderを使う
    ⇒全ての画像は入手できない
  • Chromeのディベロッパーツールを使う
    ⇒ディベロッパーツールを開く
    ⇒Sourcesを選択
    ⇒wp-content→themes→imgで画像が見れる
    ⇒右クリックでダウンロード

 Image DownloaderはChromeの拡張機能です。詳しくは以下のサイトを参考にして下さい。

Chrome拡張のImage Downloaderでウェブページ上にある画像を一括ダウンロードhttp://www.pc-weblog.com/image-downloader/

 結局はディベロッパーツールを使わないと必要な素材は入手できませんので、注意しましょう。

スポンサーリンク

製作するうえでのコツ

 ここからは、少しだけ勉強したことがある人向けです。

 していない人も、ざっくり理解していただければ大丈夫です。

✅ Flexboxとgridの知識

 例えば、要素を横に並べる時に使う方法は色々あります。

 blockやfloatなどなど。ですがFlexboxとgridのみで十分です。

 また、今最も人気があるレイアウトを組む方法です。

 ですが、Flexboxでは要素を並べる割合を指定できないため、gridを用いて割合を変えます。

 参考(gridレイアウトの例)


isara.life模写制作LP

 画像とテキストが1:2で配置されています。

 この場合だと、画像サイズがバラバラで、揃えて配置するためにgridレイアウトを使いました。

✅ jQueryのほんの少しの知識

 先ほども述べましたが、テキストの格納とサイトの一番上に戻るボタンのみに用います。

 以下の記事で詳しいやり方が述べられているため、参考にしてください(上は私の記事です)。

✅ 見本を鵜呑みにしない

 よく模写を解説するサイトで、「わからなかったらディベロッパーツールでソースコードを見る」とありますが、isaraの模写ではおすすめしません。

 なぜなら、逆に混乱する可能性があるからです。慣れないうちに見ても理解できませんし、Bootstrapが多く使われているため難しいです。

 ですが、CSSはかなり参考になるため、デザインのやり方がわからないときはさっさと見ましょう。

 また、isaraのサイトで、一番下の方にあるお問い合わせフォームはコピペで大丈夫です(難しいので)。

✅ その他のコツ

  • max-width:100%にしておけば、だいたい崩れない
  • bodyにmin-width:1024pxで、レスポンシブの謎の余白を消す
  • display:noneで要素を消滅させる
    ⇒HTMLにクラス指定
    ⇒PCサイズでは消滅させるようにする
    ⇒スマホのみにクラスを適用させることができる
  • background-img:url(画像の場所)を指定し、
    background-size:coverで画像を背面配置
    位置はbackground-position:で調整
  • 困ったらググる

スポンサーリンク

まとめ

✅ まだ基礎中の基礎

 あとサイトを2つ模写して、ポートフォリオサイトを作ってみたら、LP案件の受注に挑戦してみようかなと思います。

 まだ複雑なアニメーションも作れませんし、jQueryも全然扱えないため、その辺りの知識を深めていきたいと思います。

 目標を「来月末までに1万円稼ぐこと」にしているため、それ向かいスキルを高めていきたいと思います。

-プログラミング学習記録, 学生生活

Copyright© katoooblog , 2020 All Rights Reserved Powered by STINGER.