【コーディング】はじめてのLP模写"(-""-)"
Webデザインの勉強を始めてはやくも４週目を迎えました。
そして１１月ももうすぐ終わります。衝撃。。
早く慣れるために、コーディングもやらなきゃと思い、LP模写に挑戦しました。
最初はWebサイト模写を、と思いましたが
普通にハードル高すぎて無理でした(:_;)
なので、色々検索してみて、初心者にはLP模写がいいよ！このサイトは優しいよ！という記事を見つけたので以下のサイトを選んでみました。
こちらのサイトを選んだ理由は、
・かわいい（やる気につながるとのこと）
・仕組みがシンプル
・初心者には基礎が学べていいですよ★
と、紹介されていたので選んでみました。（主観ほぼゼロ(笑)）
でも、実際に組んでみると
・仕組みがシンプル
⇒見た目がシンプルなだけやん・・・(*_*)
・初心者には基礎が学べていいですよ★
⇒３カラム？並べるとかレスポンシブは基礎ですかそうですか(*_*)
・かわいい
⇒せ、せやな・・・（）
といった感じに超初心者には結局難しかったです★
すべて実現するのは不可能だと察したので、今の技術（検索力と気力含む）でできるところまでやってみようとがんばりました。
ある程度完成させて、スクールの先生にもちょこちょこ聞いて、ひとまず完成したレスポンシブ対応×のサイトがこちらです(笑)
※検証ででてくる範囲指定の青色がついてる・・・
制作時間：おおよそ２～３日間
できたこと：
・画像を画面いっぱい・右揃え・中央などに背景固定
・２、３カラムを並べて表示
・アプリDLボタン（GoogleMapと同じような要領でした）
・ヘッダー、フッターの設定
・ディベロッパーツールからフルスクリーンショット
・ディベロッパーツールから背景画像の拝借
（スクールの先生の操作を盗み見て学びました）
できたけど理解しきれてないこと：
・親要素、子要素の関係
・インライン要素、ブロック要素の性質
・flexboxの仕組み
（何回もあちこちつけたり外したりして完成させた感）
・フッター：インスタアイコンだけを右寄せ
できなかったこと：
・フォントの変更（なぜか実装できず；；）
・レスポンシブ対応
・モバイルサイズでだけ出現するアプリ紹介の箱
・検証ツール使いこなすこと
次にチャレンジしたいこと：
・header main section nav footerなど多様なタグを使いこなす
（divだらけにしない）
・インライン要素かブロック要素か理解しながら作る
・flexboxを理解しながら進める
・fontの大きさpxを気にする
・余白の感覚をつかむ
ちなみにLPレビュー
・かわいくてシンプルでおしゃれなデザインが、家をかわいいお花でスッキリと飾りたい女子（ターゲットの予想）に響く
・シンプルだけどページを開いた瞬間に文字が浮いて出てくる 動きがある（未実装）
・アプリへの誘導がPCでは２回、モバイルでは３回と端末ごとに変動
・色味は全体的に淡く、くすみ系のカラーで統一されている
（ネイルでもくすみ系カラーは人気）
・ジャンプ率は低めで落ち着いた印象
・一輪のお花代が０円！（送料別）ということは不要なお花の有効活用？素敵なビジネスだと思います
感想
苦労したものの（したからこそ？）達成感ありでした＾＾
中学時代にHTMLのみでWebサイトを作り上げた経験も生きてます。
平成から令和へと受け継がれました。
あと、画像はフリー素材を使っていましたが、検証ツールからDLできることを知ったので、そのまま使わせていただきました。
かわいいサイトはかわいい画像でできているといっても過言ではない。
写真、画像が違うだけで、配置が同じでも全く違うサイトのように見えます。フォントもしかりですね。
細かいところまでしっかりこだわって、見る人に正しく伝わるデザインを作れるようにがんばりたいです。
最近、Webデザイン勉強しててーという話を積極的に周りにしてると、不思議とそこからひろがっていくことが多いです。噂には聞いていましたが、本当の話なのですね。引き寄せの法則？
先日予約したマッサージのマダムがデザイナーで、話がはずみ、応援してもらいました(笑)
そして、制作物を見てコメントをくれる皆様の存在はとても大きいです。
「今はここを意識したらいいよ！」
「これはこうすると便利だよ！こうすれば分かるよ！」
「上手だね～！」
なんて言ってもらえるとモチベーションUPします♡
自分の居心地の良い場で学ぶことは本当に大切。
学ぶこともだけど、自分の居心地の良い場で生きていきたい。自発的にがんばりたいけど、無理にがんばりたくない(笑)
デザインもコーディングも楽しい！
時間がすぐすぎちゃう！！
そのぶん肩がしんでる(´_ゝ｀)、、
背伸びは必須です。
では、またnoteが書けるようにたくさんチャレンジします！
この記事が気に入ったらサポートをしてみませんか？