Works

架空サイトのアイキャッチ

架空企業サイト

言語とツール: HTML/CSS/ Sass/ jQuery

制作期間:2日

ソースコード: 非公開

  • 概要
  • 制作フロー
  • 見どころ

クリ★スタさん(https://crestadesign.org/)が提供しているXDデザインカンプデータをもとにコーディングを行いました。

モバイルファーストでスマホ版からコーディングを行ったりCSS設計のFLOCSSを導入したコーディングを行っています。

STEP1

XDカンプをもとに静的コーディング

モバイルファーストでコーディングを行いました。CSS設計のFLOCSSを取り入れてクラス名を付与しています。

STEP2

レスポンシブ対応

PC画面で不要な要素を隠したり幅や高さ、余白などの調整を行いました。

STEP3

ローカル環境構築・開発

本番環境への移行に向けてローカル環境で必須テンプレートタグの挿入やCSS、jQueryの読み込みなど必要最低限のWordPress化を行いました。

STEP4

本番環境へ移行

All in One Migrationプラグインを用いて本番ドメインへの移行を行いました。

完成

  • コーディングスピード

    XDデザインカンプの再現性の高さを維持しつつ3日以内の完成を目標にコーディングを行いました。CSSのスタイルをどのタグやクラスに当てるかを予想しながらHTMLを組むことでCSS指定のフェーズでHTML構造を組み直す必要がなくスピード感のあるコーディングを達成できました。

Others

"> モンのポートフォリオ
RaiseTech公式サイト模写のアイキャッチ"> RaiseTech公式サイト模写
架空ハンバーガーサイトのアイキャッチ"> 架空ハンバーガーサイト