LP模写練２｜本格的な模写に取り組む前に超基礎練習問題をやっておこう。
最近はLPの模写のことで頭がいっぱい。
検索してみると、模写して勉強しましたって人結構いるみたい。
その中でも
イサラさんのLPは模写するのにとっても良いサイトみたいで、いろんなサイトさんで紹介されている模様。
だが、しかし！
構造はシンプルなんだけど、コーディングすることが結構たくさんあるらしく、最初から挑戦すると挫折するかもとの意見を発見。
そうか、身の丈に合った学習をしないとな。
（正直、イサラさんのサイトwordpressでできてるって気付いて（今時当たり前なんだけど・・・）ちょっと不安になっていたところであった・・・。）
最初にワンクッション挟みましょ！
基礎の勉強になりそうなサイトないかな〜と色々探していたところ、noteで良き記事を発見。
初心者向け練習用のサンプルコードなるもの。
これならできそう！
よし。今日はこれをやってみる。
- コーディングエディタどうする？DreamweaverかSublime Textか
- デスクトップに練習用のフォルダを作る
- DWでサイト作成第一歩！
- DWでhtmlとcssのフォルダを作る
- それではさっそくHTMLを書いていく！
- まとめ
コーディングエディタどうする？DreamweaverかSublime Textか
そうと決まれば話は早い。
まずはコーディングするエディタをどうするか。
前にコーダーの方々がSublime Textが良いよ！と勧めてくれたことがある。
プロが言うんだからきっと良いに違いないと、早速ダウンロード！
と思ったら。。。
Mac OS X（10.7以降）じゃないと使用できないそうな。
私のMacは中古品なので10.6.8
作動できませんっ！！！！！！！（涙）
10.7にアップロードするには２千円くらいのお金と、時間がかかる。
10.9だったら無料ですぐできるっぽいけど、やり方を調べてもいまいちわからない。
ええい、めんどくさいから諦める。
私はアップデートしたいのではなくコーディングがしたいのだ。しかも今すぐに。
独身時代５年ローンを組んでまとめ買いしたアドビシリーズ、Dreamweaverをとりあえず使おう。
教えてくれたコーダーの先輩方、本当に申し訳ない。
デスクトップに練習用のフォルダを作る
名前はsample-projectで。
同じ名前にしておかないと後で分からなくなりそうだから。
この中にindex.htmlとstyle.cssとimagesの３つのファイルが入っているようにしたい。
画像はまとめてダウンロードして、
imagesフォルダを作って放り込み
sample-projectフォルダに入れといた。
DWでサイト作成第一歩！
DWを開いたら、
右のファイルタブ下あたりにある▼マークをクリックするとサイトの管理が出てくるのでこいつをクリック。
新規サイトをクリック
サイト名をsample-projectとする。
ローカルサイトフォルダーは右のフォルダマークをクリック
さきほどデスクトップに作ったファイルをとりあえず指定しておく。
（ちなみにこの方法で良いのかは謎。DW詳しい人がいたら教えてください）
サイトができた。
完了ボタンを押してOK！
DWでhtmlとcssのフォルダを作る
command+Nのショートカットキーを押すと新規ドキュメントが作成できる。
ページタイプはHTML、レイアウトは<なし>、ドキュメントタイプはHTML5を選んで作成ボタンをクリックする。
CSSファイルの作り方も同じ要領で、cmmand+N→ページタイプCSS→作成でファイルが作れる。
どちらも最初に名前を付けて保存した。
名前はindex.html（cssはstyle.css）場所は先ほど作ったsample-projectファイルに設定して保存。
そしたらこんな感じになった。
それではさっそくHTMLを書いていく！
まずはCSSのリンク設定から
こんな感じで左側に参考HTML、右側にエディタを配置。
ひとまず、titleをsampleに変更して、cssファイルのリンクを設定する。
<link href・・・まで書くと自動的に参照が表示されるのでクリック。
参照先から（sample-projectのフォルダ内にあるかチェック）style.cssを選んで開く。
つづき、rel="stylesheet" type="text/css">と書く
これでcssのリンク設定はOK。
bodyタグの下はサイト全体を囲むdivを指定
headタグの次にbodyタグ。
参考サイトによると、まずウェブページ全体を囲むdivタグを作るそうな。
名前がpage。
idを使っているということは、このid名「page」１回しか使えないということだな。
classは同じページ内で何度でも使えるので、一括で同じ設定をしたい時に便利だったはず。
忘れないうちに終了タグも頭揃えて書いておく。
headerの設定
そのあとheaderタグ。
書いたらすぐ終了タグを書く。
それからheader内もdivで囲む。
名前はheader_inner。こちらもid
サイトのロゴを配置。
ロゴはロゴで別に囲んでおくらしい。id名はheader_logo。
ロゴはimagesフォルダに予め「ligo.png」と名前を付けて保存してあるので、imagesの中にあるlogo.pngですよと指定する感じで。
するとこうなる。
今度は右側の問合せ関連情報について。
お問い合わせボタンは、名前をheader_contactにして個別に囲む。
aタグなのでリンクを飛ばす（urlないのでひとまず＃で代用）
お問い合わせの文字をさらにheader_contact_innerという名前で囲む。たぶんボタンのデザインとかを設定するのかな。
それからさらに電話番号と営業時間について。
電場番号と営業時間もheader_textという名前で囲む。
文章なので普通にpタグで書く。番号と時間の間は<br>で改行。
するとこうなる。
全体通してみるとこんな感じ。
メイン画像の設定
次にメイン画像の設定。
divタグでmain_imageと名前をつけて、さらにその内側にmain_image_innerと名前つけその中にキャッチコピーを書く。
main_imageは文字通り画像の枠で、main_image_innerはキャッチコピーの枠と認識。
メイン画像はCSSで背景として設定する模様。
メイン画像下のテキストとナビゲーションの設定
そしてお次は、メイン画像下のテキスト部分とナビゲーション。
まずは<main>タグで全体を囲んでおく。
その下に<section id="section01"> sectionタグを書いてさらに囲んでおく。
メイン画像下のテキストはdivでscrollと名前をつける。
おや、こちらはclassだわ。
テキストは<h2>で記載。
丸いかたちのナビゲーションはulタグにmai_navと名前をつけて、ilタグでリストに。
それぞれ#div01,02,03と名前をつけて、クリックしたら同じページ内の各々の詳細部分に飛ぶようにaタグを設定する。
３つのナビゲーションの詳細
ナビゲーションの飛んだ先の詳細部分について。
アイコン1の内容は、
まずdivでcontentsと名前を付ける。こちらはclass。アイコン２と３も同じデザイン設定にするから多分classなんじゃなかろうか。
そのあとidも設定。こちらはナビゲーションをクリックした時に飛ぶ宛先になっているので、アイコン１と同じdiv01と設定する。
アイコン２も要領は一緒だけど、テキストと画像は左右逆なので名前を付けるときleftとrightに気をつける。
アイコン３はアイコン１と同じ。
見た目はこんな感じになる。
下部問合せ部分の作成
そして問合せ部分の作成。
グレーの背景を指定するためdivでmain_contactと名前を付ける。classである。
問合せの左側は電話番号と受付時間なので、divでcontacit_left_innerと名前を付けて囲み文字情報はpタグで囲む。
あとでCSSで受付時間部分の文字を小さく設定するため、受付部分だけspanタグで囲む。
問合せの右側はボタンになるので、まず全体をcontact_right main_contact_innerと名前をつけて囲み、問合せボタン自体にcontact_right_innerで囲む。
問合せボタンはpタグで囲む。
ここまでがmainの内容。
フッターの設定
最後フッターは
footerタグで囲んでpタグでコピーを書くだけ。
</div>は最初に予め囲んだpageの終了タグのこと
この時点で出来たものは下記のとおり。
めちゃ初期のホームページみたい。
まとめ
HTMLを久しぶりに書いたが、自分が思っていた以上にdivタグで囲みまくっていることに驚きを隠せない。
sectionタグっていまいち意味が分からないな。（あとで調べるとする）
次はcssでデザインを付けて行こう。
LP模写練１｜画像の保存からlink,metaの概念、titleタグまで見てみた。
LPを模写する上で、ひとまず画像をダウンロードしようと準備を開始。
右クリック
カチッ！
あれ？
画像の保存ができない。。。
目次
- 右クリックで画像が保存できない場合どうやって画像をダウンロードするか
- 最初はHTMLから。最初<head>からつまづくグラフィックデザイナーであった
- WEBフレームワークについてとBootstrapとは
- Font-awesomeはアイコンをいじれるやつ
- CSSファイルをリンク
- <link rel="shortcut icon" href="URL">はファビコン設定する方法
- <meta charset="utf-8">は文字コードの指定
- <meta http-equiv="X-UA-Compatible" content="IE=edge">はInternet Explorer用の対策
- <meta name="viewport" content="width=device-width, initial-scale=1">でレスポンジブ対応できるサイトに
- <title>サイトのタイトル</title>はその名の通り。
- まとめ
右クリックで画像が保存できない場合どうやって画像をダウンロードするか
Googleクロムを使っている方しか多分使えない方法だと思うが、、、
まず画像を手に入れたいサイトを開いて、右クリック（Macの場合はcontrolキーを押しながらクリック）
検証をクリックする。
するといっぱいコードが書かれたページが表示される。
右上の方にあるSourcesタブをクリック。
フォルダマークがいっぱい出てくるので、左にもれなくついている▶マークをクリックしていけば、どこかにimgフォルダがある（はず）
imgを開くとずらっと画像が。
まとめてダウンロードできまいかやってみたけど出来なかった。
面倒だけど１つ１つクリックドラックドロップで、とりあえずデスクトップに保存していく。
とりあえず画像準備問題は解決。
最初はHTMLから。最初<head>からつまづくグラフィックデザイナーであった
まずはHTMLから書いていく。
引き続きGoogleクロムの検証から、Elementsタブをクリックすると使用されているタブが表示されるので、のぞいてみる。
んんんん？？？
<head>タグの中にいっぱいリンクがあるのってなんでだっけ？？
早くも壁にぶち当たる。
という訳で「head内にあるlinkは何」で検索
するとこちらの素敵なサイトがヒット。
サルワカさんによると、<head>内に入れる要素は、metaタグとlinkタグの二つ。
metaタグは文字コードの指定やブラウザでの表示のさせ方、検索エンジンでの掲載有無を指定できるそうな。
linkタグはcssファイルの読み込み指定やページ同士の関係性を検索エンジンに伝える役割があるとな。
WEBフレームワークについてとBootstrapとは
以上を踏まえて上から順番に見て行く。
<link href="https://サイトのアドレス/wp-content/themes/ファイルの名前/bootstrap/css/bootstrap.min.css" rel="stylesheet">
このサイトの中にある、wp-contentの中のthemes/ファイル名というファイルの中に、bootstrap・・・・・・
bootstrap!?
って何ですか。
早速ググる。
このサイトがヒット。
Samurai Blogさんによると、
BootstrapとはHTMLやCSS、JavaScriptからなる最も有名なWEBフレームワーク
なんだそう。
いや待て。
WEBフレームワークて何。
テンプレート的なやつ？
今度はWEBフレームワークについてググる。
このサイトさんが分かりやすかった。
WEBフレームワークとは、
様々なシステム開発をサポートしてくれる機能たちのこと
を言うらしい。
システム開発する上で必要な機能がセットになってるって感じなのかな。
そのおかげで速くプログラムが作れ、コストを減らし、個人差の無い開発ができるからバグも出にくいというメリットがあるそうな。
でも、WEBワイヤーフレームを使いこなすにはそれ専用のコードを覚えないとダメらしい。
Webサイトやアプリケーションのレイアウトに使える機能がたくさんあるんだそう。
なるほど！
で、今はとりあえずbootstrapが何者か分かれば良しとして、今後こいつを使いこなそうとする場合、勉強が必要になりそう。
大丈夫！ ドットインストールで勉強できるってよ！
次！
Font-awesomeはアイコンをいじれるやつ
<link rel="stylresheet" href=href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
次もスタイルシート。
maxcdn.bootstrapcdn.com
またbootstrapと書いてあるので、Webフレームワーク関係の話かな。
そのあとのfont-awesomeとはなんぞや。
例のごとくググルと
このサイトによると、
アイコンを文字として扱うことを可能にしたツール
のことを言うそうな。
フェイスブックのロゴとか、ホームボタンの家マークのアイコンとか、それらを全部文字として認識してくれるので大きさや色を自由に変更できたり、回転させられたり、画像と重ねて配置できるんだって。
ほいで、
Bootstrapでもバージョン４からFont awesomeを使えるようになったんだとか。（それまでは違うツールでもっとアイコン数が少なかったんだってさ）
使い方は後で確認するとして、ひとまず、Bootstrap（WEBフレームワーク）内にあるアイコンをいじれるヤツぐらいにぼやっと覚えておこう。
次！！！
CSSファイルをリンク
<link rel="stylesheet" type="text/css" href="https://サイト名/wp-content/themes/ファイル名/style.css">
これは所謂CSSファイルをリンクしてる状態っぽい。
style.cssってあるし。
次！！！！
<link rel="shortcut icon" href="URL">はファビコン設定する方法
<link rel="shortcut icon" href="https://サイト名/wp-content/uploads/2018/10/favicon.ico">
このタグが出てきたら、ファビコンの設定ができるそうな。
あのー、お気に入りやブックマークに表示される小さいアイコンみたいなヤツのことです。
オッケー、了解！ここまで理解。
<meta charset="utf-8">は文字コードの指定
そしてここからがmetaタグ。
おなじみのutf-8は、日本語サイトなら絶対書かないといけないやつ。
<meta http-equiv="X-UA-Compatible" content="IE=edge">はInternet Explorer用の対策
Internet Explorerって古いバージョンで開く場合があるそうな。
そうなるとデザインが崩れるので、このタグで常に標準モードで表示されるように設定するらしい。
<meta name="viewport" content="width=device-width, initial-scale=1">でレスポンジブ対応できるサイトに
<meta name="viewport" content="width=device-width, initial-scale=1">はタブレットやスマホでも見られるように設定するタグらしい。
<title>サイトのタイトル</title>はその名の通り。
タイトルタグはその名のとおり、サイトのタイトル。
検索結果の表示やブラウザのタブに表示されるとな。
これも必ず書いとく項目なので、要チェック！
今日はひとまずここまで！
まとめ
bootstrapなるWebフレームワークや、font-awesomeなんてもの知らんかった〜！
そんな便利な物があったのかと思う反面使いこなせる気がしないぞ。。。
いやいや、今はとりあえずサラッと、サラッと分かっとけばよいということにして、詳細はおいおいやっていこう。
次回、OGP設定から見ていくぞ！
グラフィックデザイナーだけどLP作れるようになりたい。何から始めたら良いのか調べてみた。
グラフィックデザイナーとはいわゆる紙のデザイナーである。
ポストに投函されてる住宅のチラシや、お客さんからもらう初めましての名刺、料理屋さんにあるメニューブックや心躍る映画のポスター、美味しそうなお菓子のパッケージなんかもグラフィックデザイナーの仕事である。
が、しかし。
これはグラフィックデザイナーあるあるだと思うのだが、
「あなたは何のデザイナーさん？」
「グラフィックデザイナーです。紙が専門です。」
「そうか〜、紙もののデザインは無くならないだろうけど、衰退していく一方だよね！（これからはWEBでしょ！）」
特にWEB関係の仕事をされている人から
お前はもう死んでいる！宣告をされるのが我々の仕事。
その死亡宣告に多くのグラフィックデザイナーは、
アタタタタタタタタタタタタタタッ！！！！！！！！
（痛たたたたたたたたたたたたたたた！！！！！！）
と心を痛めているに違いない。
だって、思うもん。
私、佐●可士和じゃねーし。
佐●研二郎でもねーし。
つーかパクったところで誰にも気付かれないくらいデザイナーの超はしくれだし！！！
これからAIが発達してくると、ますます有名なデザイナーさんだけ生き残っていくのかな。
その人のブランド力というか。
我々のような弱小デザイナーはどうすればよいのでしょうか。
▶諦めてグラフィックデザイナー１本でいく
▶新しい事業を展開する
▶自分にできる範囲のWEBデザインに挑戦する
▶LP作れるようになる
など、私も色々考えた。
フリーランスになってみて、色んな会社さんから
「ねえねえ、お宅LP作らへんの？」
というお問い合わせを頂くことが多い。
ということは、今それなりに案件があるということなのではないか？
そのうちAIが発展してくるとLP制作も無くなりそうだけど（またそれ）、とりあえず今はランサーズなどのクラウドソーシングでもたくさんの案件があるように必要とされているのでは。
というわけで、なんとかLPを作れるようになりたい私は、勉強開始を期にブログを始めるのである。
LPって何？
ここで、WEBデザイン知らないよって人のために、LPとは何なのか簡潔にまとめたいと思う。
LPとはランディングページのこと。
よく、ダイエット商品の広告サイトで表示される一枚ものの長いWEBサイトの事を言う。
多分目で見てもらった方がピンと来やすいと思うので、ランディングページのデザインサイトをまとめておく。
LP勉強の始め方
LP作れるようになりたいな〜とYoutubeで色々検索していたところ見つけた
ふるさんのこの動画。
模写するのが良いらしい
私WEBの勉強するのに本を買って、紙で勉強することに疑問を抱いていた。
（グラフィックなら良いんだよ。印刷の感じとかサイズ感とか本の方が分かりやすいし）
そこで今回のLP勉強は全てWEBでできまいかと（そして動画で教えてくれないか）検索した結果引っかかったこの動画。
実は私、これまでにWEB制作系のスクールに通ったり、勉強会やセミナーに参加したり、本を買って勉強したり（してるやん）、コーダーやエンジニアの知り合いに教えてもらったりと何度もWEB制作に挑戦している。
そしてことごとく壁にぶつかり、諦めできた。
何度も挑戦したので、ひとまずHTMLとCSSの基礎知識と概念、jqueryとは何なのかくらいの知識は身についた。（使いこなせはしないが）
そんなわけで、ぼやっと知っているHTMLとCSSの知識プラスjqueryをさらに勉強する勢いで、LPの模写コーディングをするというのが楽しく勉強できる方法なのではないかと考えたわけだ。
ラ・カンパネラおじさんをご存知だろうか？
いやいや、基礎からやらんとダメでしょ。
と、真面目な私が言っている。
スクールに通っていたのももうずいぶん前で、だいぶ変わってきていると思う。
でもたぶん、基礎から始めたらまた挫折しそうだなと思うのだ。（挫折というかめんどくさくなるやつ）
そこでまたYoutubeの動画で発見した「ラカンパネラおじさん」
ラカンパネラとは、リスト作曲の超絶技巧曲。
動画を見たらお分かりのとおり、ものすごく音が飛びまくる難曲なのである。
このおやじさん、佐賀かどっかの漁師さんで、ギャンブルで大負けし（ギャンブルをやめる方法を考える最中）ラカンパネラに出会って、たまたま奥さんがピアノの先生で自宅にピアノがあったからピアノを始め、弾けるようになったという強者 。
もちろん初心者で譜面も読めない。
私は３歳からピアノをやってたけど、結局弾けなかった。
というのもピアノの練習ってつまらない。
自分が弾きたい曲は弾かせてもらえない。なんとか練習曲とか指が回るようになる練習をひたすらやるわけで（それはもちろん必要なことなんだけど）子どもの私にとっては好きな曲じゃなかったのでつまならかった。
このおじさんも、いきなりラカンパネラを練習し始めたから弾けるようになったんだと思う。
基礎練習ばっかだと、たぶん楽しくなくてまたギャンブルやってたんじゃないかな。
そういうわけで、私もLPの模写から始めたいと思う。
楽しくないと続かないし、分からないことは随時調べれば良いのだ。
忘れちまったとことはドットインストールで解決
LP模写していくうちに、「あっこれは完全に忘れてら」ってことはドットインストールなる素晴らしいWEB勉強動画サイトで復習しようと思う。
あと分からんことは随時Google先生に聞く。
検索力が大事とホリエモンも言っていた。
まとめ
というわけで、グラフィックデザイナーによるLP勉強開始宣言は以上である。
なるべく多くのサイトを模写したいと思っているが、欲張らずに確実にまずはふるさんがおすすめしているiSara[イサラ]｜バンコクのノマドエンジニア育成講座のLPを模写することから開始する。
経過は随時こちらのブログで報告！
まずは１つ完成させるぞ！！
