模写コーディング④生花部会のデザインカンプ
1260 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回は和菓子サイトのデザインカンプです。
私が配布しているデザインカンプは難易度が難しく感じるかもしれませんが全てのページができたら拾ってくれる制作会社は絶対にあります。
練習用なのでPCサイズしか作っていません。
できる人はスマホ・タブレットの画面を自分で作ってください。
説明しないといけないことが色々とあるので説明しますが全て読んでからコーディングを始めてください。
なおポートフォリオに掲載を許可します。
目次
このデザインカンプを使うに当たっての注意点
なおデザインカンプシリーズは1からあり1回目にコーディングにおける注意点がありそれをやってないと色々と支障が出るのでそれをまだやってない人はやってから今回のデザインカンプを使うことをお勧めします。
どのページのコーディングをするか
この記事を読んでいる人はコーディングの実務未経験の人だと思いますが今回のデザインカンプは難易度が高くないのとトップページが短いので誰でもコーディングが可能だと思います。
コーディングを完成させる期間
PCサイズのみを作ったと仮定した場合の作成期間は下記になります。
- コーディングに慣れてきたと感じる人 : 1週間
- コーディングに慣れてない人 : 2週間
慣れている慣れていないの感覚は自分が慣れたと感じたら慣れていると思っていいです。
デザインカンプにはマウスオーバーした時の変化も入っていますがコーディングに慣れてない人は盛り込んでも盛り込んでなくてもいいので2週間で完成を目指しましょう。
HTMLサイトでもWordPressサイトのどちらでもいいです。
ポートフォリオに実績として使いたい人
WordPressのサイトにしましょう。
このサイトは本来会員制のサイトですが「WP-Members」というプラグインを使えば作成する事ができます。
コーディングに使う画像
私が作成した物以外は素材サイトの画像を使っていますが素材サイトの画像は著作権的に配布が不可能です。
画像のリンクを貼るのでダウンロードして使ってください。
私が作った画像は↓からダウンロードできます。
生花部会の画像 (523 ダウンロード)↓は素材サイトの画像のリンクですが私が使う際にクリッピングマスクを使用しています。
デザインカンプのリンク
このページからコーディングのリンクに飛ぶ事ができます。