デイトラ 初級 DAY18-24 をやってみた
妊娠8ヶ月目突入で準備 & 本業であるエディトリアルデザインのカタログ撮影準備などで、勉強に集中できずでしたが5日ぶりに再開。
[ DAY 18-24 ]
課題：モデルを決めて、実在するお店のLPを作ってみよう
" 勉強する人』から『作る人』になりましょう！ "
まだcssを打つスピードがおばあちゃん状態なのに…？
でも、このままだと膨大な情報量に溺れてしまうweb制作。htmlとcssの違いすらわからなかった一ヶ月半前てすが、コツコツ時間かけてもいいから作ってみます。
1. そもそも「LP」って何？
→ 1ページ完結型 webサイト
あえてリンクなどは貼らず、離脱されないようにユーザーのアクションを1ページに留めていく必要がある、とのこと。
(参考：https://conversion-labo.jp/report/lp_design/4685/ )
ユーザーである自分も流れがわかりやすいのは嬉しい。
上記の「WEBサイトデザインとランディングページデザインの違いを考える」を参考に制作前に重要事項をpick。
☑︎ 縦長の1ページ完結型のため、下までスクロールしてもらいたい
☑︎ 流れをゆるめる仕掛けが必要(デザイン)
☑︎ 購入・来店など目的にたどり着く流れに
2. テーマとテンプレートはどうしよう
実在 or 架空どちらもOK。
好きなテーマでいいということで、映画に出てくるカフェをモチーフにしている学習性の方もいました。(可愛かったです)
わたしは、テンプレート使用なしでコーディングも試したかったので、架空2つ+実際1つと欲張ることに。
① [ お腹痛い人.com ]
・テンプレート使用
・コンセプト：お腹痛いのを緩和したい時の簡易的駆け込み寺
コンセプトを書き出し、「HTMLテンプレート」テーマを探します。
シンプルな構成で、操作性もよさそうな Foundry から選択。
10個程使えそうなテンプレート入りで2000円でした。
② [ フィットネスジム ]
・初めてゼロからコーディング
・Googlemapとフォームの知識学ぶ
・レスポンシブも制作
・コンセプト：リラックスできる印象のジム&キャンペーン開催中を伝える
③ 子育てサロンのLP
通っている助産院が、先月から子育てサロンを別家に設立。
ドキドキしながら「webサイト作らせてもらえませんか？」と連絡。
無事OK頂けました(やったー！)
打ち合わせは今月中に行い、初 外部案件として進めることに。
3. コンセプトを決めて、素材作り+カンプ制作
☑︎ お店のコンセプト
☑︎ LPの目的
☑︎ 全体の流れ
☑︎ デザイン(ターゲット層・目的)
☑︎ 制作に必要な素材
簡潔に書き出して明確化。コーディングに戸惑う分スムーズに。
テンプレートから画像差し替えだけでもカタチにはなるけれど、薄っぺらくなる印象だったので文章内容も固めました。いつかのクライアントや面接官にも説明できるように。
素材作り素材は、IllustratorとPhotoshopで制作。
テンプレートの全体キャプチャーを下地に軽くカンプも。
4. コーディング
ハイ、戸惑う！テンプレートのcssファイルが多すぎて、変えるだけにもセレクタを検索して試して…と時間がかかる。①②共に18時間づつ…。
ゼロからコーディングした②のLPの方が「cssの使い方」は勉強になりました。テンプレートからの完全カスタマイズは知識積んでからでないと厳しそう。
でも、運営側の言う通り「プロのコードを見れる」のは価値大でした。
コンテンツごとは<section>で括るんだな〜など全体がなんとなく掴めます。
途中崩れて、デイトラのslackでメンターの方に4回質問。
翌日までに返答してくれるので進みやすかったです。
↑フォローなしでは悲惨な事に…。
5. 完成！
① [ お腹痛い人.com ]
② [ フィットネスジム ]
色々と甘いな〜〜〜ということが伝わります。思うようにレイアウトできないもどかしさも伝わる完成度。
でも、メンターの方に「デザインうまくて、本当にお腹痛い.com調べちゃいました！」と返信頂けて嬉しかったです。
▼ 反省と今後の課題。
☑︎ cssが効かない事が多々→基本ルールを学ぶ
☑︎ サイズの把握・バランス
☑︎ メリハリがなく、流れてしまう
☑︎ 画像に頼りすぎなのでcssで飾り付ける
☑︎ レスポンシブdisplay:block→column以外もレイアウトできるように
☑︎ Adobe XDを学ぶ
Progateとgoogle検索だけでは、基本が理解できないままで無駄に遠回りしてしまったので、サルワカ&書籍も読みつつ進めたいと思います。
見てくれる先輩がいない人、独学にオススメとのこと。家でひとり作業していると、ほんとにあっという間で。持続させれるように、つまづく回数を減らすことからだな〜。
２つとも制作楽しかったです。