【Webデザインスクール体験談#20】個人制作発表!クリエイターズファクトリー(CF)

Webデザインスクール体験談_クリエイターズファクトリー_CF_20

当サイトの記事には広告として、アフィリエイトプログラムが使用されています。
アフィリエイトによって得られた収益は、読者の皆様に還元するために当サイトの運営費に充てています。

当サイトの円滑な運営のため、読者の皆様にはご理解とご協力をよろしくお願いします。

いよいよ個人制作の発表当日。
他の受講生のサイトを見るのは発表会が初の人もいるので、どんなサイトになっているか楽しみです。
自分はというと、結局9ページ中4ページしか完成しませんでした。

個人制作に入る前に先生が言っていた個人制作は2ヶ月ほしいと言っていた意味がわかりました。
1ヶ月半じゃ間に合わん。コーディングで躓くと2,3時間が秒で溶ける。

今週の授業内容
  • 個人制作の発表会

無料説明会参加で1万円割引

20回目の授業までにやったこと

授業までに下記を取り組みました。

・初めての方へページのコーディング
・サービスページのコーディング

初めての方へページのコーディング

下層ページの初めての方へを作成しました。
ヘッダーとフッター、お問い合わせは使い回しなのでコードは省略しています。

初めての方へページのHTML

HTMLで要素を追加していきます。

<!-- 悩み訴求 -->
<div class="appeal">
    <div class="appeal_container">
        <p class="appeal_read">アクアリウムを始めてみたいけど<br>こんな不安はありませんか?</p>
        <div class="trouble_area flex jc_sb">
            <div class="trouble_item">
                <p>必要なものは?</p>
                <img class="trouble_img mg_top_30" src="../img/beginner/need.jpg" alt="金魚鉢でメダカが泳いでいる">
            </div>
            <div class="trouble_item">
                <p>費用は?</p>
                <img class="trouble_img mg_top_30" src="../img/beginner/Costs.jpg" alt="家計簿と電卓とボールペンが机の上に置かれている">
            </div>
            <div class="trouble_item">
                <p>お世話は大変?</p>
                <img class="trouble_img mg_top_30" src="../img/beginner/Care.jpg" alt="プロホースで水槽の汚れを吸い取っている">
            </div>
        </div>
        <div class="appeal_sentence">
            <div class="appeal_text_1">
                <p>アクアリウムは幻想的な空間を気軽にご自宅へ取り入れることができます。<br>また、水槽内の美しい景色や魚たちの優雅な泳ぎはストレス解消にも効果的でリラックスできます。<br>ですが、導入費用が高かったり、日常のお世話が大変だと逆にストレスを感じてしまうことも・・・
                </p>
            </div>
            <div class="appeal_text_2">
                <p>そんなアクアリウムに興味があるけど始めるか迷っているあなたへ<br>気になる初期費用やお魚のお世話のお悩みを解決していきます!</p>
            </div>
        </div>
    </div>
</div>

<!-- 導入時に必要なアクアリウム用品 -->
<section class="goods">
    <div class="goods_container pd_top_150">
        <div class="goods_inner">
            <h2 class="goods_h2 common_h-center font">導入時に必要なアクアリウム用品</h2>
            <div class="goods_area flex jc_sb mg_top_40">
                <div class="goods_img">
                    <img src="../img/beginner/aquarium_supplies.jpg" alt="アクアリウム用品が一式揃っている水槽">
                </div>
                <div class="goods_introduction">
                    <p class="goods_introduction_text">
                        標準サイズである60cm水槽(W60×D30×H36cm)の場合だと下記のアクアリウム用品が必要となります。</p>
                    <div class="goods_list flex jc_sb mg_top_30">
                        <div>
                            <p class="goods_item">水槽</p>
                            <p class="goods_item">水槽マット</p>
                            <p class="goods_item">水槽台</p>
                            <p class="goods_item">ろ過装置</p>
                            <p class="goods_item">照明</p>
                            <p class="goods_item">エアレーション</p>
                        </div>
                        <div>
                            <p class="goods_item">ヒーター</p>
                            <p class="goods_item">水温計</p>
                            <p class="goods_item">砂</p>
                            <p class="goods_item">餌</p>
                            <p class="goods_item">カルキ抜き</p>
                            <p class="goods_item">掃除用品</p>
                        </div>
                    </div>
                </div>
            </div>
            <p class="goods_cost mg_top_40">上記一式揃えると費用は約3万円~4万円です。</p>
        </div>
        <div class="goods_text mg_top_30">
            <p>もう少し費用を抑えて始めたい方は、水槽セットが販売されているので<br>必要最低限だけ揃えて少しずつ買い足していく楽しみ方もできます。</p>
            <p class="mg_top_20">必要最低限だと約1万円~2万円です。</p>
        </div>
    </div>
</section>

<!-- 毎日のお世話 -->
<section class="care">
    <div class="care_container wraper_1400 pd_top_150">
        <h2 class="beginner_h2 common_h2 common_h-center font">毎日のお世話</h2>
        <div class="care_inner flex jc_sb mg_top_40">
            <div class="care_area flex jc_sb">
                <div class="care_img">
                    <img src="../img/beginner/feeding.jpg" alt="瓶の中に熱帯魚のエサが入っている">
                </div>
                <div class="care_explanation flex">
                    <div>
                        <h3 class="care_title">エサやり</h3>
                        <p class="common_text mg_top_20">エサは1日2回に分け、水槽内の熱帯魚が2~3分程度で食べきれる量を与えます。</p>
                        <p class="care_explanation_mg common_text">
                            飼育環境にもよりますが、ほとんどのお魚は1週間程度エサがなくても問題ないため、旅行などで長期間家を空ける場合でも心配ありません。</p>
                    </div>
                    <div>
                        <p class="care_band">気をつける点</p>
                        <p class="common_text mg_top_20">餌をあげすぎると食べきれなかった餌が水槽を汚すので注意が必要です。</p>
                    </div>
                </div>
            </div>
            <div class="care_area flex jc_sb">
                <div class="care_img">
                    <img src="../img/beginner/water_change.jpg" alt="バケツで水槽に水を入れている">
                </div>
                <div class="care_explanation flex">
                    <div>
                        <h3 class="care_title">水換え</h3>
                        <p class="common_text mg_top_20">頻度は1週間に1回程度です。<br>換える水の量は全部ではなく、全体の30%程度です。</p>
                    </div>
                    <div>
                        <p class="care_band">気をつける点</p>
                        <p class="common_text mg_top_20">
                            水換え用の水と水槽の水の温度を合わせる必要があります。また、水道水にはカルキ(塩素)が含まれているのでカルキ抜きを使用します。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- おすすめ -->
<div class="reco">
    <p>アクアリウムに興味がでてきたけど・・・</p>
    <div class="mg_top_30">
        <p>「水槽を置くスペースがない」</p>
        <p class="mg_top_10">「もう少し費用を抑えたい」</p>
    </div>
    <p class="reco_text">そんな方には<span class="reco_emphasis">小型水槽</span>が<span class="reco_emphasis">おすすめ!</span></p>
</div>

<!-- 場所を取らずインテリアにもなる小型水槽 -->

<section class="interior">
    <div class="interior_container flex">
        <div class="interior_explanation">
            <h2 class="interior_title font">場所を取らずインテリアにもなる小型水槽</h2>
            <p class="interior_text mg_top_40">
                水槽の大きさは20~30cm程度なので机の上など、ちょっとした空きスペースに気軽に置けます。また、水槽が小さい分、水換えの量も少ないのでお掃除の手間もありません。標準的な水槽と比べるとお値段もコンパクトなので手軽にアクアリウムを始めたい方におすすめです。
            </p>
        </div>
        <div class="interior_img_1">
            <img src="../img/beginner/small_aquarium_1.jpg" alt="水草が水槽全体に生い茂った水草水槽">
        </div>
        <div class="interior_img_2">
            <img src="../img/beginner/small_aquarium_2.jpg" alt="熱帯魚の大群が泳ぎ回っている">
        </div>
        <div class="interior_img_3">
            <img src="../img/beginner/small_aquarium_3.jpg" alt="一匹のネオンテトラが流木をくぐり抜けている">
        </div>
    </div>
</section>

<!-- 水草だけの水槽で癒やされる -->
<section class="Healing">
    <div class="Healing_container flex">
        <div class="Healing_img_1">
            <img src="../img/beginner/Aquatic_plants_aquarium_1.jpg" alt="照明の光で幻想的に輝く水草水槽">
        </div>
        <div class="Healing_img_2">
            <img src="../img/beginner/Aquatic_plants_aquarium_2.jpg" alt="流木が水草で覆い尽くされた水槽">
        </div>
        <div class="Healing_img_3">
            <img src="../img/beginner/Aquatic_plants_aquarium_3.jpg" alt="水草だけの小型水槽">
        </div>
        <div class="Healing_explanation">
            <h2 class="Healing_title font">水草だけの水槽で癒やされる</h2>
            <p class="Healing_text mg_top_40">
                静かな水音、ゆらぐ水草。家にいながら自然を感じることができる水草水槽。お魚のお世話をする自信がない、生き物が死んでしまうのがツライといった方には水草だけの水槽がおすすめです。お魚を飼うことによる毎日のエサやりや、死んだときのことを考える必要もありません。
            </p>
        </div>
    </div>
</section>

<!-- サポート -->
<section class="support">
    <div class="support_container wraper_1080 pd_top_150">
        <h2 class="beginner_h2 common_h2 common_h-center font">私たちがサポートします</h2>
        <div class="support_img mg_top_40">
            <img src="../img/beginner/support.jpg" alt="アクアファクトリーのスタッフ一同が笑顔でお店の前に立っている">
        </div>
        <div class="support_text_area mg_top_20">
            <p class="common_text">アクアリウムに関するお困りごとやお悩みをサポートします。<br>お世話の方法や水槽導入時に気をつけること、おすすめのお魚などお気軽にご相談ください。</p>
            <p class="support_text_1 mg_top_20">他にも、水族館のような水槽をお家にも置いてみたい方は出張レイアウトサービスも承っております。</p>
            <p class="support_text_2 mg_top_30">お客様の日々の疲れを癒やすサポートをさせていただきます!</p>
        </div>
        <div class="btn_area btn_center">
            <a class="service_link_btn" href="../service/#layout">出張サービスの詳細はこちら</a>
        </div>
    </div>
</section>

上記で記載したHTMLをブラウザで表示した結果がこちらです。

アクアリウムショップ_初めての方へ_html

初めての方へページのCSS

CSSで見た目を整えます。

/* 悩み訴求 */
.appeal_container {
    max-width: 930px;
    width: 98%;
    margin: 0 auto;
    padding-top: 60px;
}

.appeal_read {
    font-size: 36px;
    font-weight: 500;
    line-height: 170%;
    text-align: center;
}

.trouble_area {
    margin-top: 60px;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.trouble_item {
    width: 27%;
}

.trouble_img {
    border-radius: 50%;
}

.appeal_sentence {
    margin-top: 80px;
    text-align: center;
    font-weight: 400;
    line-height: 170%;
}

.appeal_text_1 {
    font-size: 14px;
}

.appeal_text_2 {
    font-size: 22px;
    font-weight: 500;
    margin-top: 50px;
    line-height: 170%;
}

/* 導入時に必要なアクアリウム用品 */
.goods_container {
    max-width: 1260px;
    width: 98%;
    margin: 0 auto;
}

.goods_inner {
    background-color: #C4E6E4;
    border-radius: 6px;
    padding: 40px 7%;
}

.goods_h2 {
    font-size: 32px;
    font-weight: 500;
    color: #80553C;
}

.goods_area {
    max-width: 1080px;
}

.goods_img {
    width: 45%;
}

.goods_introduction {
    width: 41%;

}

.goods_introduction_text {
    font-size: 14px;
    line-height: 170%;
}

.goods_list {
    width: 75%;
    font-size: 18px;
}

.goods_item:nth-child(n+2) {
    margin-top: 24px;
}

.goods_item::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #009B92;
    border-radius: 50%;
    margin-right: 6px;
}

.goods_cost {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.goods_text {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 170%;
}

/* 毎日のお世話 */
.care_area {
    width: 48%;
}

.care_img {
    width: 44%;
}

.care_explanation {
    width: 54%;
    flex-direction: column;
    justify-content: space-between;
}

.care_explanation_mg {
    margin-top: 10px;
}

.care_title {
    font-size: 24px;
    font-weight: 500;
}

.care_band {
    padding: 7px 39px;
    display: inline-block;
    background-color: #72B4BD;
    border-radius: 50px;
    color: #FFF;
}

/* おすすめ */
.reco {
    padding-top: 100px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.reco_text {
    margin-top: 50px;
    font-size: 24px;
    font-weight: 500;
}

.reco_emphasis {
    font-size: 36px;
    color: #BD7272;
}

/* 場所を取らずインテリアにもなる小型水槽 */
.interior_container {
    padding: 100px 0 130px;
    flex-direction: row-reverse;
    position: relative;
    margin-right: 1.4%;
}

.interior_explanation {
    position: absolute;
    max-width: 722px;
    padding: 60px 5.5%;
    background-color: rgba(143, 184, 184, 0.8);
    top: 130px;
    left: 7%;
}

.interior_title {
    font-size: 24px;
    font-weight: 500;
    color: #003838;
}

.interior_text {
    font-size: 16px;
    line-height: 190%;
}

.interior_img_1 {
    width: 50%;
}

.interior_img_2 {
    width: 21%;
    position: absolute;
    top: 408px;
    left: 18%;
}

.interior_img_3 {
    width: 24.5%;
    position: absolute;
    top: 510px;
    left: 34%;
}

/* 水草だけの水槽で癒やされる */

.Healing_container {
    padding-top: 188px;
    position: relative;
    margin-left: 1.4%;
}

.Healing_explanation {
    position: absolute;
    max-width: 722px;
    padding: 60px 5.5%;
    background-color: rgba(118, 170, 132, 0.8);
    bottom: 30px;
    right: 6%;
}

.Healing_title {
    font-size: 24px;
    font-weight: 500;
    color: #003838;
}

.Healing_text {
    font-size: 16px;
    line-height: 190%;
}

.Healing_img_1 {
    width: 50%;
}

.Healing_img_2 {
    width: 25%;
    position: absolute;
    top: 158px;
    right: 2%;
    z-index: 2;
}

.Healing_img_3 {
    width: 20%;
    position: absolute;
    top: 112px;
    right: 22%;
    z-index: 1;
}

/* サポート */
.support_text_area {
    text-align: center;
}

.support_text_1 {
    font-size: 14px;
}

.support_text_2 {
    font-size: 18px;
    font-weight: 700;
    color: #BD7272;
}

.service_link_btn {
    display: inline-block;
    padding: 18px 70px;
    border-radius: 50px;
    position: relative;
    transition: .8s;
    font-size: 24px;
    background-color: #64B47A;
    color: #F4EFEB;
}

.service_link_btn:hover {
    background-color: #72B4BD;
}

.service_link_btn::after {
    content: "";
    display: inline-block;
    border-bottom: 1px solid #F4EFEB;
    width: 20px;
    height: 6px;
    border-right: 1px solid #F4EFEB;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: skew(45deg) translateY(-50%);
    transition: .8s;
}

.service_link_btn:hover::after {
    width: 30px;
    right: 15px;
}

上記で記載したCSSをブラウザで表示した結果がこちらです。

アクアリウムショップ_初めての方へ_css

これで初めての方へのページが完成。
このページで掛かった時間がこちら。

HTML:2.0h
CSS:4.0h

初めての方へのページも流用で作成したので他のページと比較すると早く完成しました。

サービスページのコーディング

サービスページも作成しました。
ヘッダーとフッター、お問い合わせは使い回しなのでコードは省略しています。

サービスページのHTML

HTMLで要素を追加していきます。

<!-- 内部リンク -->
<section class="link">
    <div class="link_container font flex wraper_1400">
        <a class="link_btn bg_layout" href="#layout">出張レイアウト</a>
        <a class="link_btn bg_maintenance" href="#maintenance">出張メンテナンス</a>
    </div>
</section>

<!-- 出張レイアウト -->

<section id="layout" class="layout">
    <div class="layout_container">
        <div class="wraper_1400">
            <h2 class="common_h2 common_h-center font">出張レイアウト</h2>
            <div class="layout_inner">
                <div class="flex jc_sb ai_c mg_top_40">
                    <div class="layout_img_1">
                        <img class="round_c" src="../img/service/layout_1.jpg"
                            alt="アーチ状の流木と生い茂った水草の水槽にたくさんの熱帯魚が泳いでいる">
                    </div>
                    <div class="layout_explan common_text">
                        <h3 class="service_h3 font">プロが水槽のレイアウトをご提案</h3>
                        <p class="mg_top_20">
                            綺麗なレイアウトが組めない。<br>でも、水族館のように幻想的な水槽をお家でも楽しみたい。
                        </p>
                        <p class="mg_top_20">そんな水槽のレイアウトでお困りの方におすすめのサービスです。</p>
                        <p class="mg_top_20">コンテストでも上位入賞を果たしたプロが心を込めて対応させていただきます。</p>
                    </div>
                </div>
                <div class="layout_img_2">
                    <img src="../img/service/layout_2.jpg" alt="水草の上を泳いでいるネオンテトラ">
                </div>
                <div class="layout_img_3">
                    <img src="../img/service/layout_3.jpg" alt="光合成をして気泡がでているキューバパールグラス">
                </div>
                <div class="layout_img_4">
                    <img src="../img/service/layout_4.jpg" alt="赤と白の色味がきれいなハーフムーンのベタ">
                </div>
                <div class="layout_img_5">
                    <img src="../img/service/layout_5.jpg" alt="真っ白いエンジェルフィッシュ">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 出張レイアウトお客様の声 -->
<section class="voice">
    <div class="voice_container pd_top_150">
        <h3 class="service_h3 common_h-center font">お客様の声</h3>
        <div class="voice_inner flex jc_sb mg_top_40">
            <div class="voice_explan voice_layout_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/layout_voice_1.jpg" alt="色鮮やかな水草水槽と緑一色の水草水槽">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">幻想的な景色を見ると疲れがスッと抜けるような感じです。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">3ヶ月</span></p>
                            <p>30代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    一人暮らしだと、家に帰ると真っ暗でいつも寂しかったのですが、水槽を置いてから寂しさがなくなりました。水槽のところだけ光に包まれているのでとても幻想的で、疲れがスッと抜けるような感じがします。また、レイアウトをお店の方と一緒に決めていくのですが、とても親身に考えてくださいました。部屋のレイアウトにも合うような提案もしていただき、毎日見ても全然飽きない完璧なレイアウトをしていただきました。出張レイアウトサービスを頼んで本当に良かったと感じています。
                </p>
            </div>
            <div class="voice_explan voice_layout_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/layout_voice_2.jpg" alt="照明の光で幻想的に輝く水草水槽">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">親身になってレイアウトを一緒に考えてくれました。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">9ヶ月</span></p>
                            <p>20代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    前からアクアリウムに興味がありましたが、きとんとお世話をする自信がないので諦めていました。そんなときに水草水槽を見つけて、これなら毎日のエサやりもしなくていいから私でもできそうだなと思いました。でも、初めてだからレイアウトなんてわからないし、それならプロにお任せしようとこのサービスを利用しました。とても親身になってレイアウトを一緒に考えてくれました。結果は大満足。今は水槽をみながらまったりするのがお気に入りの時間です。
                </p>
            </div>
            <div class="voice_explan voice_layout_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/layout_voice_3.jpg" alt="カラフルな熱帯魚と巨大な流木がレイアウトされている大型水槽">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">要望をちゃんと再現してくれました。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">4年</span></p>
                            <p>30代<span class="voice_mgl">男性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    水族館にあるような水槽に憧れてこのサービスを利用しました。最初は不安でしたが、ヒアリングの内容がとても細かく、自分の要望をちゃんと再現してくれました。さすがコンテスト入賞者の方が作る水槽だなと改めて感動しました。水槽を増やすときはまたリピートしたいと思います。
                </p>
            </div>
            <div class="voice_explan voice_layout_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/layout_voice_4.jpg" alt="3匹のコリドラスが正面を見ている">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">熱帯魚のかわいらしい姿に癒やされています。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">1ヶ月</span></p>
                            <p>40代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    写真の子たちが一生懸命、砂をモフモフしたり、ちょこんと立ち止まる姿に一目惚れして水槽の導入を決意しました。せっかくならこの子たちが快適に暮らせるレイアウトにしてもらおうと出張レイアウトをお願いしました。この子たちも泳ぎやすいのか、あちこちを元気に泳ぎ回っています。1匹が泳ぎだすと次々に追いかけて泳ぐ姿が和やかで可愛らしいです。
                </p>
            </div>
        </div>
</section>

<!-- 納品までの流れ -->
<section class="delivery">
    <div class="delivery_container">
        <h3 class="service_h3 common_h-center font">納品までの流れ</h3>
        <div class="delivery_inner">
            <div class="delivery_inner_up flex jc_sb">
                <div class="delivery_area_up">
                    <div class="delivery_img_up">
                        <img src="../img/service/delivery_1.jpg" alt="3人の女声が楽しそうに打ち合わせをしている">
                    </div>
                    <div class="delivery_text">
                        <div class="delivery_heading mg_top_20">
                            <p>Step 01</p>
                            <p class="mg_top_10">ヒアリング(1~2時間)</p>
                        </div>
                        <p class="common_text mg_top_20">お客様の求める水槽の種類、レイアウト、熱帯魚の種類、費用感などを詳しくヒアリングします。</p>
                    </div>
                </div>
                <div class="arrow_img_up">
                    <img class="arrow_img_1" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト">
                </div>
                <div class="delivery_area_up">
                    <div class="delivery_img_up">
                        <img src="../img/service/delivery_2.jpg" alt="テーブルの上に設計図を広げてペンで書いている">
                    </div>
                    <div class="delivery_text">
                        <div class="delivery_heading mg_top_20">
                            <p>Step 02</p>
                            <p class="mg_top_10">設計(1~3日)</p>
                        </div>
                        <p class="common_text mg_top_20">ヒアリング結果をもとに水槽のレイアウトや熱帯魚の選定を行います。</p>
                    </div>
                </div>
                <div class="arrow_img_up">
                    <img class="arrow_img_2" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト">
                </div>
                <div class="delivery_area_up">
                    <div class="delivery_img_up">
                        <img src="../img/service/delivery_3.jpg" alt="石と水草のボトルアクアリウムの中でメダカが2匹泳いでいる">
                    </div>
                    <div class="delivery_text">
                        <div class="delivery_heading mg_top_20">
                            <p>Step 03</p>
                            <p class="mg_top_10">レイアウトの調整</p>
                        </div>
                        <p class="common_text mg_top_20">
                            実際に店舗で作成してお客様に写真を送付します。<br>レイアウトに問題なければ水槽設置の日程を調整させていただきます。<br>大幅な変更は別途料金をいただく場合があります。
                        </p>
                    </div>
                </div>
                <div class="arrow_img_up">
                    <img class="arrow_img_3" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト">
                </div>
            </div>
            <div class="delivery_inner_low flex mg_top_40">
                <div class="arrow_img_low">
                    <img class="arrow_img_4" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト">
                </div>
                <div class="delivery_area_low">
                    <div class="delivery_img_low">
                        <img src="../img/service/delivery_4.jpg" alt="バケツで水槽に水を入れている">
                    </div>
                    <div class="delivery_text">
                        <div class="delivery_heading mg_top_20">
                            <p>Step 04</p>
                            <p class="mg_top_10">水槽の設置(1日)</p>
                        </div>
                        <p class="common_text mg_top_20">お客様のご自宅まで伺い水槽の設置をさせていただきます。水槽のサイズが大きいと早朝から深夜の作業となる場合があります。
                        </p>
                    </div>
                </div>
                <div class="arrow_img_low">
                    <img class="arrow_img_5" src="../img/service/arrow.svg" alt="エンジェルフィッシュのイラスト">
                </div>
                <div class="delivery_area_low">
                    <div class="delivery_img_low">
                        <img src="../img/service/delivery_5.jpg" alt="二人のスタッフがお店の前に笑顔で立っている">
                    </div>
                    <div class="delivery_text">
                        <div class="delivery_heading mg_top_20">
                            <p>Step 05</p>
                            <p class="mg_top_10">アフターケア</p>
                        </div>
                        <p class="common_text mg_top_20">1週間以内に水槽に関する不具合がでましたら無料で対応いたします。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 出張レイアウト料金 -->
<section class="layout_cost">
    <div class="layout_cost_container">
        <h3 class="service_h3 common_h-center font">出張レイアウト料金</h3>
        <div class="layout_cost_table mg_top_40">
            <div class="layout_cost_line layout_cost_line_color flex">
                <p class="layout_aquarium_column_1">小型(30cm~)</p>
                <p class="layout_cost_column_1">1万円~</p>
            </div>
            <div class="layout_cost_line layout_cost_line_color flex">
                <p class="layout_aquarium_column_2">標準(60cm~)</p>
                <p class="layout_cost_column_2">5万円~</p>
            </div>
            <div class="layout_cost_line layout_cost_line_color flex">
                <p class="layout_aquarium_column_3">大型(120cm~)</p>
                <p class="layout_cost_column_3">15万円~</p>
            </div>
        </div>
    </div>
</section>

<!-- 出張レイアウトお問い合わせ -->
<section class="contact">
    <div class="contact_container">
        <div class="contact_inner layout_contact_bg">
            <div class="contact_wraper">
                <p class="contact_read">出張レイアウトに関する質問など<br>お気軽にお問い合わせください。</p>
                <div class="mg_top_40 flex jc_sb">
                    <div class="contact_area layout_contact_area_bg">
                        <p class="contact_title font">
                            電話</p>
                        <p class="contact_tel font">
                            03-1234-5678
                        </p>
                        <div class="contact_time common_text flex jc_sb">
                            <p>営業時間</p>
                            <p>平日 :13:00~23:00<br>土日祝:11:00~21:00
                            </p>
                        </div>
                    </div>
                    <div class="contact_area layout_contact_area_bg">
                        <p class="contact_title font">
                            メール</p>
                        <div class="contact_btn_area btn_center">
                            <a class="contact_btn" href="">お問い合わせ</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 出張メンテナンス -->

<section id="maintenance" class="maintenance">
    <div class="maintenance_container pd_top_150">
        <div class="wraper_1400">
            <h2 class="common_h2 common_h-center font">出張メンテナンス</h2>
            <div class="maintenance_inner">
                <div class="flex jc_sb ai_c mg_top_40">
                    <div class="maintenance_img_1">
                        <img class="round_c" src="../img/service/maintenance_1.jpg" alt="プロホースで水槽の汚れを吸い取っている">
                    </div>
                    <div class="maintenance_explan common_text">
                        <h3 class="service_h3 font">毎日のお世話がラクになる</h3>
                        <p class="mg_top_20">
                            いつでも水槽がきれいな状態を保つためには日々のメンテナンスが欠かせません。<br>ですが、癒やしを求めているのに、忙しい日々の合間にお世話を続けて疲弊するのは元も子もありません。
                        </p>
                        <p class="mg_top_20">そんなお世話が難しいときは私たちをご活用ください。</p>
                        <p class="mg_top_20">水質の調整、フィルターの清掃、水槽内の清掃、水草の剪定、熱帯魚の健康チェックなど、あらゆる水槽のメンテナンスを承ります。</p>
                        <p class="mg_top_30">私たちがあなたの癒やしをサポートします。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 出張メンテナンスお客様の声 -->
<section class="voice">
    <div class="voice_container pd_top_150">
        <h3 class="service_h3 common_h-center font">お客様の声</h3>
        <div class="voice_inner flex jc_sb mg_top_40">
            <div class="voice_explan voice_maintenance_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/maintenance_voice_1.jpg" alt="両端に石が山の形のように積まれて真ん中にソイルが敷かれた水槽">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">どのスタッフの方もとても丁寧で優しい方ばかりなので安心。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">2年</span></p>
                            <p>30代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    仕事やプライベートで忙しくなる度に利用させてもらっています。コケだらけだった水槽が水槽立ち上げ時のように綺麗になるので毎回感動してしまいます。一度別のショップのメンテナンスサービスを利用しましたが、そちらはスタッフによって対応が異なっていたり、雑だったりしました。ですが、アクアファクトリーさんは、どのスタッフの方もとても丁寧で優しい方ばかりなので安心して任せられます。また、リピートさせていただきます。
                </p>
            </div>
            <div class="voice_explan voice_maintenance_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/maintenance_voice_2.jpg" alt="熱帯魚がたくさん泳いでいる水草水槽が2つ">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">アクアリウムの話しができる唯一の存在です。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">3年</span></p>
                            <p>40代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    出張メンテナンスサービスを頼んでから、水槽のお手入れがラクになりました。お世話がラクになる方法やオススメのアクアリウムグッズなど、プロの観点からお話を聞けてとても勉強になります。また、周りにアクアリウムの話をできる人がいないので話し相手になってくれるのもありがたいです。
                </p>
            </div>
            <div class="voice_explan voice_maintenance_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/maintenance_voice_3.jpg" alt="立ち上げたばかりで水草が成長途中の小型水槽">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">女性のスタッフさんを指名できるので一人暮らしでも安心。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">2ヶ月</span></p>
                            <p>20代<span class="voice_mgl">女性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    一人暮らしなので男性のスタッフさんが家に入るのに抵抗がありましたが、お店に相談すると女性のスタッフさんを指名できるとのことでサービスを利用してみました。お店だとなかなか店員さんに話しかけられないのでこういった機会に色々話が聞けてとても楽しかったです。
                </p>
            </div>
            <div class="voice_explan voice_maintenance_bg round_c">
                <div class="voice_overview flex">
                    <div class="voice_img">
                        <img src="../img/service/maintenance_voice_4.jpg" alt="木に見立てた水草の前でコイベタが泳いでる">
                    </div>
                    <div class="voice_text_innner flex">
                        <div>
                            <p class="voice_title">水槽の掃除で丸1日潰れていたのが、今は2,3時間で終わるようになりました。</p>
                        </div>
                        <div class="voice_memo_area">
                            <p class="voice_history">アクアリウム歴<span class="voice_mgl">2ヶ月</span></p>
                            <p>50代<span class="voice_mgl">男性</span></p>
                        </div>
                    </div>
                </div>
                <p class="voice_text common_text">
                    水槽の数が多く、掃除をすると丸1日潰れてしまうのでこちらのサービスを利用しています。とても手際がよく毎回2,3時間ほどで終わります。今まで頑張って掃除していたのが馬鹿らしくなり、なんでもっと早く利用しなかったんだと後悔しています。余った時間でゆったりと水槽を眺めながら読書をするのが何よりも至福の時間です。
                </p>
            </div>
        </div>
    </div>
</section>

<!-- 出張メンテナンス料金 -->
<section class="maintenance_cost">
    <div class="maintenance_cost_container">
        <h3 class="service_h3 common_h-center font">出張メンテナンス料金</h3>
        <div class="maintenance_cost_table mg_top_40">
            <div class="maintenance_cost_line maintenance_cost_line_color flex">
                <p class="maintenance_aquarium_column_1">小型(30cm~)</p>
                <p class="maintenance_cost_column_1">1万円~/回</p>
            </div>
            <div class="maintenance_cost_line maintenance_cost_line_color flex">
                <p class="maintenance_aquarium_column_2">標準(60cm~)</p>
                <p class="maintenance_cost_column_2">2万円~/回</p>
            </div>
            <div class="maintenance_cost_line maintenance_cost_line_color flex">
                <p class="maintenance_aquarium_column_3">大型(120cm~)</p>
                <p class="maintenance_cost_column_3">3万円~/回</p>
            </div>
        </div>
        <p class="maintenance_notes mg_top_10">出張レイアウトをご利用していないお客様も対応させていただきます。</p>
    </div>
</section>

上記で記載したHTMLをブラウザで表示した結果がこちらです。

アクアリウムショップ_サービス_html

サービスページのCSS

CSSで見た目を整えます。

/* サービス共通 */
.service_h3 {
    font-size: 32px;
    font-weight: 500;
}

/* 内部リンク */
.link_container {
    padding-top: 100px;
    justify-content: space-evenly;
}

.link_btn {
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    color: #F4EFEB;
    position: relative;
    transition: .8s;
}

.link_btn:hover {
    opacity: .5;
}

.link_btn::after {
    content: "";
    position: absolute;
    border-top: 17.3px solid #F4EFEB;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    top: 39%;
    right: 7%;
}

.bg_layout {
    background-image: url(../../img/service/layout_button.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px 105px;
}

.bg_maintenance {
    background-image: url(../../img/service/maintenance_button.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px 90px;
}

/* 出張レイアウト */
.layout_container {
    padding: 100px 0 105px;
    overflow: hidden;
}

.layout_inner {
    max-width: 1264px;
    margin-left: 1.4%;
    position: relative;
}

.layout_img_1 {
    width: 55.4%;
}

.layout_explan {
    width: 40%;
}

.layout_img_2 {
    position: absolute;
    width: 41%;
    clip-path: circle(17% at 44% 54%);
    top: -167px;
    right: 6%;
}

.layout_img_3 {
    position: absolute;
    width: 22%;
    clip-path: circle(37% at 59% 47%);
    top: 77px;
    right: -15%;
}

.layout_img_4 {
    position: absolute;
    width: 12%;
    clip-path: circle(35% at 46% 52%);
    top: 294px;
    right: 7%;
}

.layout_img_5 {
    position: absolute;
    width: 33%;
    clip-path: circle(28% at 49% 47%);
    top: 340px;
    right: 17%;
}

/* 出張レイアウトお客様の声 */
.voice_container {
    max-width: 1360px;
    width: 98%;
    margin: 0 auto;
}

.voice_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 40px 3%;
}

.voice_explan {
    padding: 40px;
    width: 100%;
}

.voice_layout_bg {
    background-color: #C7E6C4;
}

.voice_overview {
    justify-content: space-between;
}

.voice_img {
    width: 52%;
}

.voice_text_innner {
    width: 42%;
    flex-direction: column;
    justify-content: space-between;
}

.voice_category {
    font-size: 14px;
}

.voice_title {
    font-size: 24px;
    font-weight: 500;
    font-feature-settings: 'palt' 1;
    line-height: 130%;
}

.voice_memo_area {
    font-size: 18px;
    font-weight: 500;
}

.voice_mgl {
    margin-left: 15px;
}

.voice_text {
    margin-top: 20px;
}

/* 納品までの流れ */
.delivery_container {
    background-image: url(../../img/service/wave_background.svg);
    background-repeat: repeat-x;
    background-size: cover;
    margin-top: 100px;
    padding: 150px 0 100px;
}

.delivery_inner {
    max-width: 1300px;
    margin: 40px auto 0;
}

.delivery_inner_up {
    padding-left: 2%;
}

.delivery_area_up {
    width: 26.2%;
}

.delivery_img_up {
    width: 82.6%;
    margin: 0 auto;
}

.arrow_img_up {
    margin-top: 8.4%;
}

.delivery_inner_low {
    justify-content: center;
    padding-right: 7.1%;
}

.delivery_area_low {
    width: 28.1%;
    margin-right: 1.62%;
}

.delivery_img_low {
    width: 82.6%;
    margin: 0 auto;
}

.arrow_img_low {
    margin-top: 8.96%;
    margin-right: 1.62%;
}

.delivery_heading {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

/* 出張レイアウト料金 */
.layout_cost_container {
    max-width: 600px;
    width: 98%;
    margin: 0 auto;
    padding-top: 100px;
}

.layout_cost_line:nth-child(n+2) {
    margin-top: 5px;
}

.layout_cost_line_color:nth-child(2n+1) {
    background-color: #64B47A;
}

.layout_cost_line_color:nth-child(2n) {
    background-color: #C7E6C4;
}

.layout_aquarium_column_1,
.layout_aquarium_column_2 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 50px 24px 67px;
}

.layout_aquarium_column_3 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 41px 24px 60px;
}

.layout_cost_column_1,
.layout_cost_column_2,
.layout_cost_column_3 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 0;
    text-align: center;
}

/* 出張レイアウトお問い合わせ */
.layout_contact_bg {
    background-color: #C4E6E4;
}

.layout_contact_area_bg {
    background-color: #72B4BD;
}

/* 出張メンテナンス */
.maintenance_inner {
    max-width: 1349px;
    margin-left: 1.4%;
}

.maintenance_img_1 {
    width: 52%;
}

.maintenance_explan {
    width: 42.8%;
}

/* 出張メンテナンスお客様の声 */
.voice_maintenance_bg {
    background-color: #C4E6E4;
}

/* 出張メンテナンス料金 */
.maintenance_cost_container {
    max-width: 600px;
    width: 98%;
    margin: 0 auto;
    padding-top: 100px;
}

.maintenance_cost_line:nth-child(n+2) {
    margin-top: 5px;
}

.maintenance_cost_line_color:nth-child(2n+1) {
    background-color: #72B4BD;
}

.maintenance_cost_line_color:nth-child(2n) {
    background-color: #C4E6E4;
}

.maintenance_aquarium_column_1,
.maintenance_aquarium_column_2 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 50px 24px 67px;
}

.maintenance_aquarium_column_3 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 41px 24px 60px;
}

.maintenance_cost_column_1,
.maintenance_cost_column_2,
.maintenance_cost_column_3 {
    width: 300px;
    font-size: 24px;
    font-weight: 500;
    padding: 24px 0;
    text-align: center;
}

.maintenance_notes {
    font-size: 14px;
    font-weight: 500;
}

上記で記載したCSSをブラウザで表示した結果がこちらです。

アクアリウムショップ_サービス_css

これでサービスページも完成。
このページで掛かった時間がこちら。

HTML:2.0h
CSS:9.5h

時間が掛かったのは「出張レイアウト」と「納品の流れ」のセクション。

出張レイアウトは、丸い画像を使わず、CSSで四角い画像を丸に切り抜いた感じにしたので、切り抜く場所や画像の大きさの調整に時間が掛かりました。

納品までの流れは、魚の矢印の調整に時間が掛かりました。
最初はpositionにしていましたが、それだと画面幅を縮めたときに隠れてしまうので全部やり直しに・・・

結局positionなしでそのまま要素同士を並べる形になりました。
ただ、その影響でmarginなどで単純に中央揃えができなくなった(魚の要素も入れて中央揃えされるのでバランスが悪くなる)ので位置調整にも時間が掛かりました。

時間もないのでこの内容で個人制作の発表をします。

個人制作発表会

個人制作の発表者は自分含めて7人。
入学当初は17人いたのに10人も離脱してしまうとは。
働きながら通うのはやっぱり生半可なものではないと改めて感じます。

個人制作の発表はカッチリしたものではなく、現時点までの状態を発表するだけでよいというもの。
なので、TOPデザインだけだったり、ワイヤーフレームだけでもOK。発表資料も作成してもしなくてもOK。

自分はメモ帳に簡単なカンペを作って発表したのですが、みんなは発表資料をちゃんと作ってました。
ツメが甘かった・・・

発表開始

持ち時間は1人10分。
自分は6番目の発表となりました。

各受講生が作成したサイトを簡単に説明します。
画像は用意できないのでご了承ください。

1人目・・・動物保護や譲渡のサイト

TOP画面に淡い緑を使ったグラデーションでやさしい雰囲気がでていました。
個人的には好きな色使いでした。

2人目・・・自身が運営しているYoutubeの紹介サイト

Youtubeの紹介サイトというのを見たことがないので新鮮でした。
サイトとしてどう魅力的にみせるか難しそうだなと感じました。

動画を知ってもらうのはYoutube内で完結しそうだし、ネット検索も動画が引っかかってきそうだしで、どうサイトから視聴者を増やすのかめちゃくちゃ難しそう。
自分だったらどうするだろうと考えてみましたが、いいアイデアは浮かばなかった・・・

3人目・・・赤ちゃんとママ向けのフォトスタジオサイト

デザインはシンプルで色味も落ち着いているので安心して任せられる感じがしました。
人気のプランはページ上部に置くなどページ構成も考えられていてすごかった。

色使いやあしらいが女性だなとしみじみ感じました。(今のご時世この言い方はダメだと思いますが・・・)
男の自分が同じようなものを作ってもなんか微妙に違うなと感じるので、自分にはない引き出しを持っているのは正直羨ましい。

4人目・・・沖縄にあるカフェのサイト

くすんだ緑っぽい色味とベージュを使っていて落ち着いた雰囲気が感じられるおしゃれなサイト。
やっぱり女性の方が作ると違うんだよなぁ。

5人目・・・スイーツ店のサイト

サイトカラーはくすんだピンクとグレージュの2色。
構成もシンプルですが、シンプルにした分高級感も増してる感があります。

CSSで所々アニメーションを付けていて心のなかで思わず「おおっ」と驚いてしまいました。
自分のサイトでも使えそうな演出があったので参考にしようと思いました。

6人目・・・自分

内容は後述。

7人目・・・エステのサイト

まず発表資料が会社の提案書みたいでした。単純にすごかった。
サイトカラーはベースがベージュでメインがティファニーブルーをくすませた色で落ち着いた雰囲気。
フォントは細くて小さめで、構成もシンプル。エステサイトに合ってるなと感じました。

6人ともテイストは違いますがどれもお客さんのことを考えた素敵なサイトだなと思いました。

発表者7人のうち5人の方が実際にクライアントがいるサイトを作成していました。
身内の方だったり、友達の知り合いだったりと身近な人ではありますが、クライアントがいるのといないのとでは天地の差だなと感じています。

ドキドキの発表

いよいよ自分の発表順。
ゆるい感じの発表だとは思っていてもやっぱり緊張するものは緊張する。

現時点で作成したサイトを動画にまとめてみました。
動画はページごとに分割しています。

TOPページ

Galleryページ

初めての方へページ

サービスページ

発表は無事に終了。
完成はしていないのでこれからもコツコツ作業をしていきます。

発表までに掛かった期間

要件定義~発表までに掛かった期間は9/27~11/16の「41日」。約1ヶ月半でした。
できない日もあったので実際の日数よりも少ないです。

各工程に掛かった時間はこんな感じ。

要件定義5日(10.5h)
ワイヤーフレーム5日(14.25h)
素材探し1日(6.25h)
デザイン参考探し1日(1.75h)
デザイン(TOP)3日(12.75h)
デザイン(Gallery)2日(3.25h)
デザイン(初めての方へ)2日(4.5h)
デザイン(サービス)3日(8.5h)
デザイン(店舗情報)1日(2.0h)
デザインFB3日(3.5h)
コーディング(TOP)11日(39.5h)
コーディング(Gallery)2日(6.25h)
コーディング(初めての方へ)2日(6.0h)
コーディング(サービス)2日(11.5h)
発表カンペ作成1日(1.0h)
合計44日(131.5h)

※その他ページのデザインはサービスと店舗情報の時間に含まれているはず。時間計測を分けるの忘れていました。

実際にこの時間で掛かり過ぎなのかどうかはわかりませんが、サイト制作は大変だということが身に沁みてわかりました。

個人制作で地味に大変だったこと

まだ完成はしていませんが、個人制作で地味に大変だったこと(デザイン、コーディング含めて)をTOP3を発表。
要件定義を考えるとかデザインを考えるなど大きいところではなく、思いもしなかった地味なところに焦点を当てています。

3位 素材集め(デザイン部門)

第3位は素材集め。
熱帯魚の画像なのですぐ集まるだろうと思いましたがそんなことはありませんでした。
でてくる画像が海水魚や水族館の画像ばかり。

いいと思ってもボケていたり暗かったりと加工が必須なものも多かったので大変でした。

2位 クラス名とalt属性(コーディング部門)

第2位はクラス名とalt属性。
クラス名は1つのセクションに要素がいくつもあるとareaとかtextとかよく使う名称が枯渇します。
どうしても思いつかない場合は、◯◯_text_1、◯◯_text_2とか無理やり増やしていました。

alt属性は目が見えない人が音声で理解するためにも利用されるので魚のイラストとか単純には付けられない点が大変でした。
例えば水槽のalt属性だと「アーチ状の流木と生い茂った水草の水槽にたくさんの熱帯魚が泳いでいる」みたいな感じで付けていました。

しんどかったです。

1位 文章(デザイン部門)

栄えある第1位はサービス説明などの文章です。
alt属性の比ではないぐらい大変でした。

しかも架空なので自分で考えないといけない。お客様なんていないのにお客様の声も考えないといけない。
めちゃくちゃ大変でした。まじで。

今流行のchatGPTを使ったとて。ですよ。

まぁchatGPTにはめちゃくちゃ助けられましたけど。

次回の授業までに

個人制作は終わったので次回までに絶対やることはありません。
来週から始まるチーム制作まで休息です。

チーム制作の題材は、講師の方がクライアントから受注した案件を流用したものなので実際の案件とほぼ変わらないみたい。
講師の方がクライアントになってヒアリングから始まります。

チームはまだ決まっていないので誰と組むのかちょっとドキドキです。

無料説明会参加で1万円割引