コーディングの勉強第2弾！
前回の予告通り、実践編に取り組んでいます(^^)/
今回はスクロールスナップ！の実践練習です。
カスタマイズしたサイトをすぐに見る！
今回作成したサイトは以下のバナーをクリックで！
ブラウザの戻るボタンでこのブログに帰って来てくださいね！！
画面が変になるかも…未熟者で申し訳ございません！！
できれば以降の記事も読んでいってくださいませ～( ;∀;)
使用している本
「ほんの一手間で劇的に変わる HTML & CSSとWebデザイン実践講座」
前回と同じく、
webcreatorboxを運営されているManaさんの本で学習してます！
この本のCHAPTER2を学習し、
用意されているデモサイトをベースに
カスタマイズにチャレンジしました！
CHAPTER2で学習できた事
ざっくり書き出すと以下のような事が学習できました！
- シングルカラムのレイアウトのポイント
- GoogleFontの使い方
- フォントの組み合わせ例
- アイコンフォントの使い方(FontAwesome)
- レスポンシブデザインの対応
- CSSスクロールスナップの使い方
前回の基礎編にあたる
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」
で、大体の内容はあったと思うので復習メインだったかな？
それでも本の内容を完全に覚えられていないので、
復習しながら少しづつ新しい点を取り入れて解説してくれる流れは
有難いです(#^^#)
新しいポイント：スクロールスナップ
画面をスクロールさせた時に、
CSSで設定したポイントにピタッ！
と吸い付くような表示ができるというワザでした。
こういった動きが出てくるとワクワクしてきますね(^^)/
練習問題でトレーニングし、
大体の感触をつかんでから
いよいよ最後のカスタマイズにチャレンジです。
カスタマイズチャレンジ
WEBサイトのテーマを決める
母の日シーズンなので…
本にある花屋さんのお題に、母の日特集をプラスしたページにします！
20代後半～30代前半の女性をターゲットにしたフラワーショップ。
すっきりとした大人可愛い雰囲気で。
母の日のプレゼント特集ページ。
プレゼントのオンライン予約を取りたい！
コンテンツの内容を変更
用意されているデモのランディングページを元に
初めてデザインカンプを作りました！
使用ツール：Photoshop
※XDで！と行きたいところですが、
フォトショでのコツが掴めてからにします(^-^;
ちなみにワイヤーフレームと言われる物も作りましたが、
紙のノートに書きなぐった物ですので
公開は止めておきます(^^;
デザインカンプを作ってみる
デザインのサイズで困る
出だしでまず躓きました。
デザインのサイズは？(*_*;
サイズの設定をどうすればいいの！？
結局フォトショの新規作成画面のWEBフォーマットで、
中サイズを元に作ることにしてみました。
※このサイズの決め方、今のスタンダードサイズはこれ！
とかあるんですかね？💦
プロの方が見たら「はあ～！？」って
溜息つかれちゃいそう(^^;
検索で見つけた参考記事↓
記事にあるように幅960～1000pxでデザインするべきだったでしょうか(-_-;)
また、スマホの方はiPhoneの最新機種を基にするべし！
といった感じだったのですが、古い機種をどこまでカバーするべきなのか
迷走してしまいました(*_*;
今回はiPhone 12の画面サイズで作成しました。
(※Retinaの考慮はしていないです)
初めてなんでとりあえず完成出来ることを目標に💦
デザインの内容 PC版
４つの画像がそれぞれ画面いっぱいに広がって、
スクロールスナップで上部にピタっと止まる予定です！
一番上のサイトのトップページ：
お店の名前よりもMOTHER’SDAYを大きく打ち出し、
母の日プレゼントメニューが見れるサイトと思ってもらうように。
トップページ下にアレジメント、ブーケのページを用意します。
それぞれ3品づつ選べる形にしたのですが
値段設定はスルーしちゃってます(^^;
デザインのこだわりとして、
アレジメントとブーケで写真の配置を
左右を入れ替えて動きを出してみました。
→後でスマホのデザインどーすんだこりゃ！問題勃発しました。( ;∀;)
デザインは自由気ままにできてしまうけど、
後の事考えてないとダメですね…
デザインの内容 モバイル版
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
画面の幅がかなり変わるため、PC版と異なる構成にしました。
背景の写真が中央付近に来るようにしたので、
タイトルの色を白に変更！
アレジメント、ブーケのページは３品の写真を別ページにしました。
これもデザインは好き勝手したんですけど
ホントに後が大変でした💦
デザインカンプから画像アセットで書き出し
今回のカスタマイズで一番苦戦したのは
このデザインカンプ作成からの、
コーディングまでの繋ぎの部分(-_-;)
デザインカンプはフォトショでのデザインの要領で
何となく作れました。が…
その先どうすれば！？( ;∀;)
ネットで調査し、以下の手順を踏んでいくことにしました。
参考にさせて頂いた記事↓
①画像アセットで画像を書き出し
②文字ツール等からコーディングに必要な値を取る
（※便利なプラグインがあるみたいだけど今回は手動で）
HTML、CSSをデモサイトベースで変更してみる
本のデモサイトのファイルをベースに
大苦戦しながら変更していきました。
慣れていない為、動作確認する度に
「あれ～？なんか違う？どうすればいいんだろ！？」
状態でした。
私の今回のコードは以降で公開するカスタマイズサイトで
確認可能だと思いますので、
笑ってやってください(^^;
尚、デザインとカンペキに合わせこむのは途中で諦めました…
これから鍛錬したらできるようになるだろうか…(+o+)
大変だったこと、心残りな点
一番時間がかかったのはスクロールスナップではなく、
レスポンシブ対応でした。
そして、やりきれておりません(*_*;
スマホで見てもらった場合
レイアウトが崩れてしまう事が多発しそうです💦
iPhone5だと表示がデザイン
と大分異なってしまうと思います。
iPhone5の方や、他にも表示が変になってしまった方
申し訳ございません<(_ _)>
そして、私はGooglechromeを普段使用しているのですが、
他のブラウザでも動作確認してみました。
結果、
MicrosoftEdge：〇
firefox：△
※スマホサイズまでブラウザを縮めた時に２ページ目の
テキストが画面からはみ出していた💦なんでだ～…（諦め）
今回は一連の作業の流れを体験できたのが一番の収穫でした。
分からない事が沢山ありすぎる事も分かりました(-_-;)
カスタマイズ・デモサイトの完成
そんなこんなでやっと完成しました！
完成というか、見切りをつけた感じなんですが…
是非デモサイトでスクロールしてみて下さい！！
スクロールスナップは出来ていると思います。
※変な表示になったらごめんなさい！(m´・ω・｀)m ｺﾞﾒﾝ…
↑のサイトからは、
ブラウザの戻るボタンで帰って来てくださいね!(^^)!
twitterに#WCBカスタマイズチャレンジのハッシュタグで投稿する予定です！
インスタにも動画作って投稿しまーす！
以上になります。ご訪問ありがとうございました(^^)/
コメント