見出し画像

【WEBデザイン学習日記-58】 ポケットWiFiバナーのレビューが返ってきました

8/6(日)~8/7(月)の学習記録です。

☆★☆ ☆★☆ ☆★☆

2023年8月6日(日) ポケットWiFiバナー修正1回目:30分&コーディング(CSS)復習:2時間半

昨日は用事と副業があったため学習ができなかったため、今日は1日たっぷりWEB学習に充てたいと思います。CSSの学習に入ってからなかなか学習内容を消化しきれていなかったため、今日はTorikumuの学習動画を最初から見返して復習をしました。display(Block, inline, inline-block)の箇所の理解が難しい。また、class(分類名)をつけてCSSでスタイルを変えるところはhtmlのどこの部分にclassをつけるのがいいのかがまだうまくつかめない💦

(今日学んだこと)
・ポケットWiFiのバナー1回目の修正→再提出
・コーディングの復習(CSS)→TorikumuのCSSの項目を再度復習

☆★☆ ☆★☆ ☆★☆

2023年8月7日(月) ポケットWiFiバナー修正2回目:20分&コーディング(CSS)復習:1時間25分

以前提出したポケットWiFiバナーのFBが返ってきたので、2回目の修正をしてみました。

オリジナル版

ポケットWiFiバナーオリジナル版
(工夫したところ) 海外と日本を行き来していた頃、よくポケットWifiをレンタル利用していた時のことを思い出し、3つのキーワード(一時帰国に、入院中に、旅行中に)をピックアップ、0円の視認性を上げること
(難しかったところ) 配色、文字の配置、WiFi機器の写真切り抜き

オリジナル版のFB
→全体的にバランスも良く分かりやすいバナー。数字の扱い方、円のバランスも良い。内容も分かりやすくまとめられ、WiFi部分が分かりやすい。
アドバイスは人物写真の扱いが少し勿体ないので切り抜いて、合成したり背景の色を差をつけると人物が目立ち更に分かりやすい。

修正1回目:

ポケットWiFiバナー修正1回目
写真を切り抜き大きめに扱ってみた。人物を切り抜いたバージョン、左右の配置を変えたものの合計4パターン作成

修正1回目のFB
WiFiをイメージしやすいようにもう少しタブレット部分まで入れるとわかりやすい。目線の向きに合わせて文字やパーツの位置を決めるとまとまり感が出て視線を誘導できる

修正2回目

ポケットWiFiバナー修正1回目
写真をタブレットまで入れて切り抜きし直し。各レイアウトに合わせてパーツや文字の配置を調整

コーディングの復習は苦手なCSSのDisplayの箇所(Block, inline, inline-block, flex)。ゆっくり動画を見ながら何度も巻き戻し再生して自分の手も動かしていると以前より理解できるようになった気がします。

☆★☆ ☆★☆ ☆★☆


<8/5(土)~8/11(金)の学習目標> 

  • ポケットWifiの修正版の作成&提出

  • CSSの復習(DAY1-2, 3-4, 5-6, 7, 8-10, 11-12, 13, 14-15)

  • パーツコーディングで練習(DAY1-2, 3-4, 5-6, 7, 8-10)

  • コーディング授業の復習

<8月末までの目標>

  • 毎週の授業の予習&復習をしっかりする

  • 制作物(少なくとも3つはレビューに出す)→あと1つ!

  • 個人制作のコンセプト作り



#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#サイトトレース

この記事が気に入ったらサポートをしてみませんか?