Web site
Portfolio 2020

jQueryとSEOを学び、Web制作のご依頼を承るためのサービスサイト兼ポートフォリオサイトを作成しました。
これまでに学んだ知識を活用してスライドショーやSVGアニメーションなど、様々なデザイン・UIにチャレンジしました。

Client
自主制作 サイトをみる
Role
  • ヒアリング
  • 要件定義
  • 情報設計
  • デザイン
  • コーディング
  • CMS実装
  • テスト
  • 公開作業
  • 運用
Development
言語:
HTML / CSS / SCSS / jQuery
環境:
Local
ツール:
WordPress / VScode / Koala / Adobe XD
Term
約2ヶ月
Release
2020年11月
Portfolio2020|モックアップ(PC)
Portfolio2020|モックアップ(SP)

背景
Background

目的

  • Web制作のモニター募集にあたり、制作フローの分かるサイト・資料を用意する
  • 今後、Web制作会社への就職活動を行うにあたり、作品を掲載・紹介するポートフォリオサイトを作成する

ターゲット

  1. ヨガやサロンなどの女性向けサービスを提供する個人事業主 / 30代女性
  2. Web制作会社の採用担当者

課題

  1. 専門用語を使わずにわかりやすい言葉で表現する
  2. 作品や活動内容、人柄が伝わるコンテンツを作成する

戦略
Strategy

情報設計

Web制作のモニター募集にあたり、サービスページでは「なにを・どうやるのか」が具体的に分かるように内容を構成しました。

また制作事例が少ない中、安心してご依頼いただけるように、制作の詳細をお伝えするダウンロード資料に合わせて、制作期間中のやり取りやお約束に関するページを用意しました。

Portfolio2020|サイトマップ

デザイン

お客さまと思いきりビジネスの話をして、白い画用紙にたくさんの色で未来を描くようなWeb制作をしたいという思いから、ワクワクがつまったおもちゃ箱をコンセプトにサイトをデザインしました。

オープニングには、おもちゃのエアスケッチをイメージしたSVGアニメーションにチャレンジしました。

コーディング

新しく学んだjQueryを活用し、動くデザインの実装にチャレンジしました。

  1. HTML/CSS
    • 基本の実践
    • カルーセルとスナップスクロールの実装(サービス-制作の流れ)
    • SVGアニメーション(オープニング)
  2. jQuery
    • ハンバーガーメニュー
    • スクロールアニメーション
    • スライドショー(トップページ-制作事例/ブログ-関連記事)
  3. WordPress
    • サブクエリの理解と関連記事リストの出力
    • カスタムフィールドの理解と実装

使用したWordPressプラグイン

HARUNAFUJII.MOO.JP/PORTFOLIO2020