合同web制作合宿作品「思い出記録アプリ/ぷれめも」

https://github.com/kenta66448284/seisakugassyuku

概要

専門学校合同web合宿で私のグループが作った作品のLPサイトです。テーマが「場所」ということで小さいころからの思い出を記録するアプリを制作することになり、私はそのアプリのLPサイトのコーディングを担当しました。

制作時期	2022年3月
製作期間	3日間
担当箇所	コーディング
制作人数	4人
公開URL	https://godoseisaku.sub.jp/2022/h/index.html

◆制作工程

コンセプトの決定
アプリデザイン＆LPサイトデザインの作成
コーディング作業
サーバーアップ後の細かい修正

◆初めてのグループ制作

初めてのグループの制作かつ初対面の人と制作するということもありとても緊張しましたが、グループのメンバーのおかげもありすぐ溶け込むことができお互い意見も出し合いながら協力して作品制作を行うことができました。

◆デザイナーの要望に応える

私が基本的にコーディングを行うこともあり、デザインが完成した時には自分一人で完成するのかとても不安になりましたが、メンバーの協力もあり乗り越えることができました。またBEMを意識してコーディングを行いほかの人から見ても見やすいようなコーディングを心がけて作品を制作しました。

◆スライドショーの追加

$('.slider').slick({
    fade: true,//切り替えをフェードで行う。初期値はfalse。
    autoplay: true,//自動的に動き出すか。初期値はfalse。
    autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間
    speed: 1000,//スライドの動きのスピード。初期値は300。
    infinite: true,//スライドをループさせるかどうか。初期値はtrue。
    slidesToShow: 1,//スライドを画面に3枚見せる
    slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
    arrows: true,//左右の矢印あり
    prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
    nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
    dots: true,//下部ドットナビゲーションの表示
    pauseOnFocus: false,//フォーカスで一時停止を無効
    pauseOnHover: false,//マウスホバーで一時停止を無効
    pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効
});

時間の都合上コードはほぼコピペになってしまったのですが時間がギリギリの中可能な限りデザインデータに近い形でのスライドショーを実装することができました。最初はうまく画像が表示しないことや画像の大きさが違ったり、ページネーション無しの予定なのに表示されていたりと大変でしたがCSSを利用して最終的にはデザインデータに近い形にすることができました。

作品を通して

プレゼンなどを他のメンバーがやってくれたり役割分担をきちんと話し合い決めて作品制作をすることができました。時間はぎりぎりでしたがお互い励ましあいながら協力して政策ができました。また自分自身も他人と協力して製作する大変さや、コーディングの経験を増やすことができとても良い経験になりました。