イベント・ブログイベント・ブログ

2021.10.05イベント・キャンペーン

【第7回】デジハリ京都のスタッフ(Webデザイン未経験者)が、デジハリのWebデザイナー専攻の勉強をしたらどうなるか?

こんにちは。 スタッフのフジワラです。
早いもので、第7回目です。
今回は引き続きコーディングパートです。 前回よりWebデザイナーの現場経験として本格的な内容となっております。
では、はりきって参りましょうー(棒)

~コーディングパート第二回目で難易度上昇した~

目次

  • 講義
  • 課題
  • 課題完了の感想
  • 最後に
  • 講義

    グラフィック課題の時と同様、カフェサイトの次は企業サイトのコーディングです。
    前回との違いは、1ページで完結していたいわゆるLP(ランディングページ)から、通常のWebページなどでよく見られる複数ページの コーディングとなります。
    とはいえ、そこまで大きく異なることはなく、勉強とは繰り返しの連続です。。 決定的に異なる点は、ヘッダーとフッターといわれる、一番先頭にくるものと一番下に鎮座しているものはどのページに移動しても 変わることがないので、一度作ってしまえば、次のページを作る際にはコピーして流用することが可能である点は楽ですね。
    しかし、40を超えたオジサマは気づけさえすればどうってことのないミスを犯しました。。
    途中で、ファビコンが表示されなくなったのです!
    ファビコンとは、特にPCでWebサイトを閲覧しているとよく目につくものなのですがブラウザの上に表示されるアイコンの事です。

    デジハリスタッフwebデザイン勉強ブログ

    < デジハリ京都のファビコン >

    製作途中で気づいたのですが、リンクが切れてしまったのかはたまた、ファビコンファイルを別の所に置いてしまったのか全く分からなかったのでトレーナーに相談しました。 まずは、ブラウザの変更をしてみました。動画授業では、世界で一番使用率の高いGoogleChomeで動作の確認をしているのですが、MicrosoftのEdgeに変更しても表示されません。 ところが、MozillaのFirefoxで試してみたところ何故か表示されました。。 このことから考えられるのは、PCが普段保存しているキャッシュに何か影響があるのかなぁ?という仮説を立てましたが、トレーナーさんによくよく調べてみて貰うと、なんとソースコードで言語をしている箇所が全角スペースになっておりました!

    デジハリスタッフwebデザイン勉強ブログ

    < DWで言語指定の箇所(全角の拡大)>

    自分ではそんなことをした記憶が全く無く、ただただ自分の間抜けさに呆れてしまいました。。 でも、実はこういった特に全角スペースの罠にはまることは、初心者は勿論、普段コーディングをバリバリしていらっしゃるプロでもはまりうる、いわゆる「あるあるネタ」なんだそうです。 対策としてスタジオ京都の複数のトレーナーにアンケートを取ってみました。

    • ・AdobeのDreamweaverを使わず、全角半角のスペースの分かるエディターを使用する。

    • ・検索窓を開けて全角スペースを検索する。

    • ・コードを書き終えた後に複数のエディターを使用してエラーチェックをする。

    、、、何とも回答にバラつきがありますね。 動画教材で使用しているDreamweaverはとても便利なコードエディターではあるのですが、そういったあるある対策はイマイチなんだそうです(トレーナー談)。

    一つおりこうさんになりながら完成した企業ページ(の一部)です。。

    デジハリスタッフwebデザイン勉強ブログ

    < 完成した企業ページ >

    課題

    さて今回の課題ですが、課題で実施したサービスページの改良バージョンを作ってみよう!です。 今回はコーディングの課題ですので、既にデザインは完成されており、そのデザイン通りにコーディングするといった、現場に即した課題内容となっております。
    課題のデザインはこんな感じです。

    デジハリスタッフwebデザイン勉強ブログ

    < 課題のデザイン >

    勘のいい方ならお気づきになるかもしれませんが、これって現状講義で制作したものの組み合わせを変更するだけなんですよね。 なので、課題スタートから、約40分位で大まかにまず形を作ることが出来ます。
    が、問題はここからで、大まかに制作したものをデザイン通り形にすることが大変なのです。 例えば、商品の並んだ真下にある動画なのですが、そのまま置いてしまうと変なスペースが出来てしまいます。 動画データはinlineとして存在するので、それが悪影響を及ぼし5px程の変なスペースが出来ます。 大体5pxなら、そこを考慮したらええやんと思いますが、あくまでも「大体」なので初心者の目分量は当てにしてはいけません。 答えは、block化してあげると解決します!(勿論散々いじって分からなかったので、トレーナーに質問して教えていただきました。。) 他にも似たような現象としては、こちらが挙げられます。

    デジハリスタッフwebデザイン勉強ブログ

    < 文字サイズの問題発生 >

    これは、ぱっと見た感じ問題ないように感じますが、余白が狙い通り取れていない状態です。 原因は、全体を制御しているcommon.cssのh2値が青色のサイズ領域ですが、課題ページのcssで個別にh2のサイズを変更したことで起こる現象の様です。 こちらも、なんとかかんとか解決させました。。

    課題完了の感想

    何とか、課題を完成させた作品がこちら。

    デジハリスタッフwebデザイン勉強ブログ

    < 課題完成 >

    今回ご指導いただいたのは、伊與木トレーナーです。
    伊與木トレーナーは前回ご紹介した平井トレーナー同様、お子様を育てながらフリーランスとしてご活躍されています。 以前主婦ママコースのバナーを作成していただいたことがあるのですが、流石子育て世代の方だけあってニーズに寄り添った素敵な作品を作ってくださいました。
    そんな伊與木トレーナーからの評価は、「基本的にOK」をいただいたのですが、、、 ひとつ気になる点があるとのことでした。

    デジハリスタッフwebデザイン勉強ブログ

    < レスポンシブ改善点 ここが・・・ >

    上の画像の部分が、画面の幅を変えると下の画像のように表示されてしまうところがイマイチとのことです。

    デジハリスタッフwebデザイン勉強ブログ

    < レスポンシブ改善点 こうなる >

    今回の学習動画の挙動が決して悪いわけではなく、お仕事としてとらえるなら2行目のコンテンツは、左側に寄せるが正解だそうです。。 または、1つだけを移動させるのではなく2行になる場合は、いっそのこと2つ一気に改行させる方が見栄えがいいのでそういう気づかいが出来ればなお良いですよ、とアドバイスをいただきました。
    ですがこちらは今後の課題といたしまして、今回は時間の都合上割愛させていただきまーす(逃げ)。

    最後に

    いかがでしたか?業界未経験者がサービスページを完成させました!
    少しでも楽しそう!実際にソフトを触ってみたい!と思った方は、ぜひ体験会で実際にやってみましょう!

    受講体験会の様子はこちら


    なんやかんやで、ようやくHTML/CSSの課題が完了しました。
    次はいよいよ、Javascript・JQueryの学習ですね。 ボリューム自体は少なそうですが、今までのコーディングとは毛色の変わった内容となりますので引き続き気を引き締めて頑張ります!
    ではまた。

    未経験から6ヶ月でプロのクリエイターに!

    スクール説明会のご予約はこちら

    オンライン説明会や受講体験会も開催中!

    STUDIO京都では、無料スクール説明会を実施しています!平日・土日ともに10時~20時まで開催していますので、お気軽にご参加ください。
    ZOOMでのオンライン対応もしておりますので、ご自宅からでもご参加いただけます。

    →スクール説明会って何するの?

    ※お申し込み/お問い合わせは、WEB・お電話・メールにて承っております。
    Tel:0120-696-810 Mail:kyoto@dhw.co.jp