Webデザイナー専攻 主婦・ママクラス6月生「中間課題デザイン＆コーディング講評会」レポート

こんにちは！デジタルハリウッドSTUDIO広島スタッフです。

Webデザイナー専攻 主婦・ママクラス6月生では、中間課題の「デザイン講評会」と「コーディング講評会」を実施しました。

今回は、デザインからコーディングへと進んだ受講生さんの制作の様子をご紹介します。

■ 土と緑を意識した、オーガニックなWebデザイン

一人目の受講生さんは、「土」と「緑」を意識したカラーや写真を取り入れ、自然やオーガニックな雰囲気を感じられるデザインに仕上げていました。

ユーザーの行動を促すボタンは、サイト全体の世界観を崩さないよう緑をメインカラーに。さらにシャドウを加え、自然に目に留まるよう工夫されていました。

このあと初めて本格的なコーディングに取り組むことも考え、装飾を複雑にしすぎず、実装しやすいデザインになるよう講師と一緒に調整していきました。

講師からは、

「サイトの雰囲気をつかんだり、フィードバックを受けて、それを自分のデザインに落とし込んでいくのが上手です」

とのコメントもありました。

さらに良くするポイントとして挙がったのが、「写真と文字の組み合わせ」です。

色の情報量が多い写真の上に文字を載せると、文字が読みづらくなることがあります。

「文字を載せることを前提に、余白のある写真を探してみる」「写真を使わない構成も考えてみる」など、見た目だけでなく読みやすさまで考えたアドバイスがありました。

■ デザインが完成したら、いよいよコーディングへ！

続いて行われたのが、コーディング講評会です。

まず講師から伝えられたのは、「検証ツールと仲良くなりましょう！」ということ。

コーディングでは、思った通りに表示されないこともあります。そんなときに検証ツールを使うと、どのCSSが反映されているのか、その場で確認することができます。

今回は、要素を横並びにするFlexboxの使い方や、「親要素」「子要素」の関係について、実際のコードを見ながら確認しました。

また、数ピクセルのズレや画像の見え方など、細かな部分もチェック。

PCとスマートフォンの両方で表示を確認しながら、余白や高さ、画像サイズを調整していきました。

講師からは最後に、

「全体的にきれいに作れていますね」

とのコメントも。

デザインの段階から、「このあと自分でコーディングすること」を意識していたことが、スムーズな実装にもつながっていました。

デザインで「どう見せるか」を考え、コーディングでそれを形にする。

両方を経験することで、Webサイトがどのようにできているのか、少しずつ理解が深まっていきます。

6月生さんも、いよいよ卒業制作に向けてラストスパートです。
今後の制作も楽しみです！