デザインカンプからコーディングに挑戦してみよう！（画像付き）
こんにちは！Webデザイナーのいるそらです。
以前投稿した「デザインカンプからコーディングに挑戦してみよう」という以下の記事で、配布されているデザインカンプ内の画像もほしいというご要望をいただきました。
その時は販売できる画像ではなかったため、今回は雰囲気の似た別の画像を用意して、画像付きの内容として改めてご紹介させていただきます。
作成したのは最近流行りの背景は固定されたまま、中央のスマホ幅コンテンツだけスクロールされる「モバイルファーストなサイト」です。架空のシャンプーのLPを想定して作成してみました。
コーディングの練習をしたい・もっと経験を積みたい方や、自分でデザインを作るにあたって参考にいろんなデザインデータを見てたい！そんな方々に役立ててほしいと思っていますので、ぜひチェックしてください！
📖コーディングを学びたい方におすすめ
📖コーディングと合わせてFigmaも学びたい方におすすめ
✨こんな方におすすめ
・Progateを一通りやってみて、物足りない！もっとコーディングしたい！
・最近流行りのサイトの形のコーディングを練習してみたい！
・独学で勉強しているけれど新しいレイアウトのデザインをコーディングしてみたい！
・ポートフォリオを充実させたい！(コーディングスキルのアピール)
・デザイナーが制作したデザインデータを見て参考にしたい！
🖼️デザイン（完成図）
ダウンロードデータはFigmaのファイル（dummy_shampooLP.fig）になります。（URLでの共有ではなくローカルファイルとしてダウンロードしたものです）
※デザインの特性上、スマホサイズのデザインデータは含まれていません。スマホサイズはスクロールする真ん中部分のみが表示されるようコーディングしてください。
※データ内に画像は含まれておりますが、SNSアイコンは含まれておりません。
💻想定したサイトの動き
このWebデザインカンプは真ん中のエリアのみがスクロールするデザインを想定しています。以下の参考サイトを見ながらコーディングにチャレンジしてみてください！
■参考
❗️注意事項
・コーディングしたものをインターネット上にアップする際は、知らない人が見た時に勘違いされないようダミーサイト・架空の商品であることを必ず明記してください。(ファーストビュー内にテキストを追加するなど)また検索などで見つからないよう、noindexを設定する、basic認証などパスワードを設定するなどの対策をお願いします。
・コーディングしたものをポートフォリオに掲載することは可能です。ただし、デザイン制作者として私のアカウント名または本記事のURLを明記してください。
・コーディング時に実在の住所・メールアドレス・電話番号・URLなど追加しないようにしてください。（リンクにも実在のURLを入れないこと）
・デザインデータの再配布や第三者への譲渡・有料記事の内容の第三者への共有を禁止します。
・このデザインデータ内の画像は、全てAI画像生成したものに加工して使用しています。
・このデザインデータを使用して生じたトラブルに関しては、責任を負いかねます。
ここから先は
よろしければサポートお願いします！ いただいたサポートはクリエイターとしての活動費に使わせていただきます！