模写コーディング⑤大阪和菓子の里のデザインカンプ
1671 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回は和菓子サイトのデザインカンプです。
私が配布しているデザインカンプは難易度が難しく感じるかもしれませんが全てのページができたら拾ってくれる制作会社は絶対にあります。
トップページ・商品ラインナップのページのデザインは特に力を入れているので細々とした装飾がありコーディングに時間がかかるはずですが焦らずにやってください。
練習用なのでPCサイズしか作っていません。
できる人はスマホ・タブレットの画面を自分で作ってください。
説明しないといけないことが色々とあるので説明しますが全て読んでからコーディングを始めてください。
なおポートフォリオに掲載を許可します。
目次
このデザインカンプを使うに当たっての注意点
なおデザインカンプシリーズは1からあり1回目にコーディングにおける注意点がありそれをやってないと色々と支障が出るのでそれをまだやってない人はやってから今回のデザインカンプを使うことをお勧めします。
どのページのコーディングをするか
この記事を読んでいる人はコーディングの実務未経験の人だと思いますがスキルは人によって様々だと思うのでざっくりとしたスキルに応じてコーディングして欲しいページの指定をします。
恐らく私から指定した方がやりやすいと思います。
Progateの道場コースを終えたばかりの人
画面をスクロールした時の動きをJavaScriptかjQueryで付けますそれはなしでいいです。
「記事の中身」・「記事一覧」のページだけでいいです。
他のページは絶対やらないでください。
私の経験上全てのページをやろうとすると絶対に挫折します。
ページのURLは下記になります。
1つのページにつき1週間位で完成すればいいです。
私が初めてコーディング模写をした時は1つの内容が分からなくて数時間かけてやっと解決できるのが続いて1週間位悩み続けてやっとできた感じです。
コーディングは最初でつまづくと嫌な思い出ができて挫折するかもしれなく積み重ねが大事なので1週間以上かかってもいいし見た目がデザインカンプと同じでなくてもいいのでとにかく完成させてください。
コーディングに使う画像ですが私が製作した物以外は写真ACの画像を使っていて著作権上配布ができません。
写真のリンクのURLを掲載するので各自でダウンロードしてください。
私が製作した画像は↓です。
大阪和菓子の里-Progateで勉強したばかりの人 (559 ダウンロード)記事の中身のページの写真ACのリンクは↓です。
記事一覧のページの写真ACのリンクは↓です。
コーディング模写を10回位した人
「記事の中身」・「記事一覧」・「店舗一覧」・「会社情報」・「催事イベント」・「プライバシーポリシー」・「お問合せ」のページをコーディングしてください。
トップページとラインナップのページ以外です。
量は多いですがコーディング模写を10回位したらスピードを意識しないといけないのとパソコンサイズしかないので1週間位で完成するようにしましょう。
万が一2週間とかかかたら時間をかけすぎなのでスピードを意識して早くコーディングが終わるように練習していきましょう。
ページのURLは下記になります。
- 「記事の中身」のページはここから
- 「記事一覧」のページはここから
- 「店舗一覧」のページはここから
- 「会社情報」のページはここから
- 「催事イベント」のページはここから
- 「プライバシーポリシー」のページはここから
- 「お問合せ」のページはここから
コーディングに使う画像ですが私が製作した物以外は写真ACの画像を使っていて著作権上配布ができません。
写真のリンクのURLを掲載するので各自でダウンロードしてください。
私が製作した画像は↓です。
大阪和菓子の里-模写を10回位した人用 (481 ダウンロード)記事の中身のページの写真ACのリンクは↓です。
記事一覧のページの写真ACのリンクは↓です。
店舗一覧のページの写真ACのリンクは↓です。
Googleマップは現在XDに埋め込む事ができないのでスクショを画像として入れているだけです。
実際のコーディングはGoogleマップの埋め込みをしてください。
会社情報のページの写真ACのリンクは↓です。
Googleマップは現在XDに埋め込む事ができないのでスクショを画像として入れているだけです。
実際のコーディングはGoogleマップの埋め込みをしてください。
催事イベントのページの写真ACのリンクは↓です。
プライバシーポリシーのページの写真ACのリンクは↓です。
お問合せのページの写真ACのリンクは↓です。
画像をカッティングしていますがクリッピングマスクを使ってください。
模写に慣れてポートフォリオに模写を掲載したい人
当然全てのページを作ってください。
模写であろうとHTMLサイトよりもWordPressサイトの方が求人に応募した会社から勉強意欲を評価される可能性があるのでWordPressのサイトを作りましょう。
コーディングに使う画像ですが私が製作した物以外は写真ACの画像を使っていて著作権上配布ができません。
写真のリンクのURLを掲載するので各自でダウンロードしてください。
私が製作した画像は↓です。
大阪和菓子の里-模写に慣れてポートフォリオに模写を掲載したい人 (589 ダウンロード)トップページ・商品ラインナップのページ以外の写真ACのリンクは「コーディング模写を10回くらいした人」と同じなのでそこの項目を見てくださいです。
トップページの写真ACのリンクは↓です。
ファーストビューの苺大福ですが画像をペンツールで切り抜いています。
やり方がわからない人は調べてください。
商品ラインナップのページの写真ACのリンクは↓です。
商品の画像はペンツールで切り抜いていますがどうしてもできない人は切り抜いてない画像を使ってください。
模写に慣れてポートフォリオに模写を掲載したい人にコメント
トップページのファーストビューですがCSSでいいので「パララックス」を実装して欲しいです。
意味が分からないなら流していいですが意味が分かるならこのページに解説があるので見てください。