Works

モンのポートフォリオ

言語とツール: HTML/CSS/ Sass/ jQuery/ WordPress/ Git/GitHub/ XD

制作期間:2ヶ月

ソースコード: 非公開

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

デザインの作成からコーディング、WordPress化まで行いました。
表示させたいYouTube動画を管理画面から簡単に変更できるように実装したり、Twitterのタイムラインを埋め込みにして自動更新されるように実装しています。

STEP1

ヒアリング・契約

お客様の要望やなぜサイトを作りたいのか、サイトのイメージ、入れたい機能など細部にわたってヒアリングを複数回行ったのち契約を締結しました。

STEP2

XDでデザインカンプ作り

お客様からいただいたサイトのイメージや参考サイトを基に、XDでサイトのデザインカンプを作成しました。

STEP3

静的コーディング

お客様から作成したデザインカンプで進めることの許可をいただいてから静的なコーディングに取り掛かりました。レスポンシブ対応やCSSアニメーションも行なっています。

STEP4

ローカル環境構築・開発

コーディングデータの挙動を確認後、Local by Flywheelでローカル環境を構築し静的コーディングデータのWordPress化を行いました。YouTube動画やプライバシーポリシーを管理画面から切り替えられる実装を行なっています。

STEP5

ブラウザ・OS間チェック

異なるブラウザやOSでレイアウトやアニメーションに差異がないかを確認し不具合が見られる部分の修正を行いました。

STEP6

納品

All in One WP Migrationプラグインを用いてお客様のWordPressへ納品を行いました。この際にお問い合わせが正常に届くかや管理画面から変更できる箇所の変更を実際に行ったりしていただきました。また管理画面から変更できる箇所の変更方法を記載したマニュアルも送付させていただきました。

完成

  • YouTube動画を管理画面から切り替え可能

    表示させたいYouTube動画を何回でも自由に管理画面から変更できるように実装しました。自分のチャンネル以外の動画を反映させることも可能です。

  • Twitterのタイムラインを自動で更新

    Twitterのタイムライン埋め込み機能を用いてTwitterを更新した際に自動的に更新できるように実装しました。

Others

架空ハンバーガーサイトのアイキャッチ"> 架空ハンバーガーサイト
架空サイトのアイキャッチ"> 架空企業サイト
架空サイトのアイキャッチ"> 架空企業サイト