レスポンシブデザインの実装
デバイスごとに見やすいレイアウトを提供。
スマートフォンからPCまで一貫したユーザー体験を実現している。
フェードアップの視覚効果
スクロール時に要素が自然に現れる動きが、洗練された印象を与える。
視覚的な楽しさとページ滞在時間の向上が期待できる。
シンプルで直感的なデザイン
必要最低限の要素で構成されており、情報に集中しやすい。
カラースキームと余白の使い方が、落ち着いた印象を演出。
パフォーマンスの最適化
軽量な構成で、読み込み速度が速い。
模写サンプルサイト lintermediate003
✪ 画像はランダムで表示されるようになっています。フリー素材などでご用意ください。
| プラグイン名 | 特徴 |
|---|---|
| GoFullPage | ウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。 |
| ColorZilla | 色を抽出するための拡張機能です。 |
| WhatFont | ウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。 |
| PerfectPixel | デザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。 |
| ステップ | 内容 |
|---|---|
| ステップ 1 | 構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。 |
| ステップ 2 | HTMLの基本構造を作成する |
| ステップ 3 | CSSでレイアウトを模写する |
| ステップ 4 中級〜 | JavaScriptを追加して動きを再現する |
| ステップ 5 | 最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。 |