WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
WithCode生が受講内のカリキュラムで制作したものになります!
Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか?
そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します!
今回は、模写サイトの第六弾になります!お題は、「広告代理店のコーポレートサイト」です!複数ページがある点、ローディングアニメーションをこだわっている点、JavaScriptを使用した様々な動きが実装されている点が今回の特徴です!
そして、「100万円前後の単価」と非常にレベルの高い内容になっています!
実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください!
模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。
模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください!
前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう!
検証ツール等で確認しながら進めることは問題ありません!
まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。
デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。
PC表示
タブレット表示
スマホ表示
↓ その他 デザインカンプ(.png)
某広告代理店のコーポレートサイト制作です。
今回は、レスポンシブ対応もお願いします。レスポンシブはスマートフォンだけではなく、タブレットも含まれます。
コーディングページ(10p):100万円
↓ Figma デザインカンプ(.fig)
ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。
コーディングが完了したら、以下の「デモサイト」と「ソースコード」を参考に、レイアウトとコードをチェックしてみましょう!
デモサイトとコーディングしたサイトを比較して、デザインや動きなどを確認してみましょう。
コーディング例です。コーディングの方法に正解はないので、あくまでも参考としてご自身のコードと比較しながら確認してみましょう。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
↓
公式サイト より
今すぐ
無料カウンセリング
を予約!