Web site
HARUNA yoga and fit.

HTML/CSSの書き方、WordPressに慣れることを目標に、フィットネスインストラクターとして活動する自身のWebサイトを作成しました。

Client
-
Role
  • ヒアリング
  • 要件定義
  • 情報設計
  • デザイン
  • コーディング
  • CMS実装
  • テスト
  • 公開作業
  • 運用
Development
言語:
HTML / CSS / jQuery
環境:
Local
ツール:
WordPress / Brackets / Adobe XD
Term
約3週間
Release
2020年8月
Webサイト(PC)|HARUNA yoga & fit.
Webサイト(SP)|HARUNA yoga & fit.

制作について
About work

ヨガインストラクターとして活動する自身のWebサイトを作成しました。

目的

学んだ知識の実践(HTML/CSS、WordPress)

  • HTML/CSSの書き方に慣れる
  • WordPressの仕組みを理解する

デザイン

デザインの原則に沿って要素を配置することを意識し、基本の習得を心がけました。

HARUNA yoga&fit.|デザイン
Pinterestでデザインをみる

※ このサイトはクローズしました。Pinterestで各ページデザインを紹介しています。

コーディング

  1. HTML/CSS
    • 基本の習得
    • flex-boxの理解と実装
    • レスポンシブデザインの実装
  2. WordPress
    • ループを理解し、投稿を出力
    • プラグインの活用
    • メールフォーム機能の実装
  3. その他
    • サイト公開作業の実践
    • ローカル環境と本番環境の理解
    • Google Search ConsoleとGoogle Analyticsの設定

使用したWordPressプラグイン

振り返り
Review

今回の制作を通して、Web制作を受託するにあたり次の課題を設定しました。

  • 多くのデザインを見て、基本パターンの理解やデザインの引き出しを増やす
  • デザインの原則の他にも、配色やフォントなどについても学ぶ
  • ハンバーガーメニューなどの動くデザインの実装のためにjQueryを学ぶ(今回はコピー&ペーストで実装)
  • Google Search ConsoleとGoogle Analyticsの活用方法を学ぶ
  • SEOについて学ぶ
  • モニターを募集して、実践経験を増やす
  • モニター募集にあたり、サービスフローを作成する