【HTML/CSS/JS コーディング練習】上級編：建設会社サイト

2024年2月25日

WithCode生が受講内のカリキュラムで制作したものになります！

Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか？

そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します！

今回は、模写サイトの「第五弾」になります！お題は、「建設会社のコーポレートサイト」です！複数ページがある点、ローディングアニメーションが実装されている点、スクロールアニメーションが実装されている点などが今回の特徴です！

実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください！

練習方法

模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。

模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください！

模写コーディング
公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。
デザインカンプコーディング
次章以降に公開している想定仕様とデザインカンプを見ながら、実際のサイトを見ずにコーディングする方法です。こちらの方が難易度は高いと言えます。

前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう！

検証ツール等で確認しながら進めることは問題ありません！

まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。

デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。

PC表示

タブレット表示

スマホ表示

↓ その他デザインカンプ(.png)

某建設会社のコーポレートサイト制作です。
今回は、レスポンシブ対応もお願いします。レスポンシブはスマートフォンだけではなく、タブレットも含まれます。

コーディングページ(8p)：50万円

↓ Figma デザインカンプ(.fig)

ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。

コンテンツの幅
横幅が1500px、内部コンテンツが1200pxです。
index.html
> ローディングアニメーション
> カーソルポインター変更
> スクロールアニメーション
> フェードスライダー
> スライドショー
> フェードイン
> ホバーアクションを実装します。
news.html
カテゴリーに応じたタブ切り替えを実装します。
article.html
ニュースページの個別ページとなります。
service.html
左右のフェードインで交互に表示します。
company.html
会社情報を各セクションで整理して表示します。
pickup.html
カテゴリーに応じたタブ切り替えを実装します。
blog.html
ブログページの個別ページとなります。
contact.html
2つの白背景ブロックを横並びに配置します。
レスポンシブ対応
ブレイクポイント：480px/768px/1024px
必要な機能
ローディングアニメーション/スクロールアニメーション/フェードスライダー/スライドショー/フェードイン/ホバーアクション/タブ切り替え/カーソルポインター変更