こんにちは！あさぎです。
2021年の4月からwebデザインの勉強を始めて5か月が経ちました！
この記事では、備忘録も兼ねて5か月目に取り組んだデザインの課題や所感をまとめています。
8月は、コーディングの勉強、XDとデザインの試験、LP制作に取り組みました！
[say img=”https://drive.google.com/uc?id=1VxGHTj5nBRuGxYL9xpAlIT6rkRG-lBwO” name=”あさぎ” from=”right”]初めてのLP制作にとまどい、完成するのに2週間程かかりました！[/say]
\ 今ならCucuaは入学金無料キャンペーン開催中 /
▶webスキル受け放題のCucuaを知りたい方はこちらをタップ
コーディング講座を始めました！
webデザインの仕事をする上で、コードの知識があるとないとでは全然違います。
PhotoshopやXDで制作したデザインは、コーダーさんにコーディングしてもらってから、やっとＨＰ公開ができます。
コーディングしにくいデザインを制作してしまうと、修正が増えたり、そもそも採用されない、なんて事になりかねません。
8月はこの講座に取り組みました！
[list class=”li-check”]
- コーディング講座初級編#1～6
- ホームページを作ろう♯1～8
[/list]
最初はホントにさっぱりでしたが、とりあえず動画の真似をして入力する、に努めました！
真似して入力しているつもりでも、入力が1文字がずれているとＨＰに反映されません。
1回の動画だけで理解するのは難しいと思ったので、さらーっと一回流して一通り終わらせました！
Webデザイン試験の課題に取り組む
webデザイン講座の試験の課題にも取り組みました。
XDワイヤーフレームの試験は金メダル
試験の課題は、架空カフェのホームページのワイヤーフレーム制作です。
提出形式はXDファイル。
ターゲットは、【ノマドのクリエイターやフルリモートで活動するクリエイターが集まるカフェ】。
作業の流れはこのような感じです。
①HPがオシャレなカフェをひたすらリサーチする
②3つ位に絞る
③よいところをそれぞれ取り入れて、ラフ画を手書きする
④XDで制作する
[say img=”https://drive.google.com/uc?id=1VxGHTj5nBRuGxYL9xpAlIT6rkRG-lBwO” name=”あさぎ” from=”right”]①と③でかなり時間を使いました！後で迷いがでないよう、リサーチはとても大切です。[/say]
制作したワイヤーフレームはこちらです。
XDの試験結果は金メダルでした！
デザインの試験は銅メダル→修正して提出
次に先ほど作ったワイヤーフレームにデザインを入れる、という試験です。
これが結構苦戦しました…！
結果は銅メダルでした。
銅メダルだった理由としては…
[list class=”li-check”]
- 全体の横幅が揃っていない
- ヘッダーの要素の上下が揃っていない
- セクションごとの上下のマージンが揃っていない
- フォントの太さが揃っていない
[/list]
などなど。
こちらが提出したHPです。
ファーストビューの印象もイマイチだったので、見た人がスクロールしたくなるような画像を選びましょう！
とアドバイスを受けました。
フィードバックをもらって修正したのち、再度提出しました。
LP試験(コーヒー豆のランディングページ制作)
LPの試験課題にも取り組みました！
架空コーヒー豆のランディングページ制作です。
LPを自分から構成を考えて作るのは初めてだったので、とても時間がかかりました‼
作業の流れです。
- 参考にするコーヒー豆のLPを探す
- 伝えたいこと・情報や価値を書きだす
- 文章やキャッチコピーを考える
- どんな順番で伝えるか並べる
- XDでワイヤーフレームを制作
- デザインを入れる
最初はどんな構成にしてよいのか分からず、いろんなLPをリサーチしまくりました。
次に情報や価値を書きだします。
そのままコピペするのはNGなので、３つ位LPを参考にしてメッセージを言い換えたり、伝えたい事をブラッシュアップ。
リサーチの結果、ファーストビューの次に、「お客様の声」や「商品を利用した素敵な未来」があるとよい事が分かりました。
マニュアルを読んだり、LPの講義動画を読んでいたのですが、いざ実践となるとアウトプットできないものです！
構成や文章が決まってからは、順調に制作を進めることができました。
途中で迷わないよう、しっかりリサーチして、構成を考えることが大切ですね。
【まとめ】学習は区切りがつくまで一気にやる
５か月目は、デザインの学習に加えて、コーディングも始めました。
そして、学習内容を時間で区切ってしまうと、集中力が途切れて効率が悪くなる事に気が付きました！
コーディング講座の今日はここまで、デザインはLPの構成を終えるまで、と目処がつくまで
やると集中して取り組めます。
コーディング講座は、時間が空くと忘れてしまうので、復習しながら進めていきたいです。
最後まで読んでいただき、ありがとうございました！
\ 今ならCucuaは入学金無料キャンペーン開催中 /
▶webスキル受け放題のCucuaを知りたい方はこちらをタップ
コメント