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月

制作について

About work

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

目的

学んだ知識の実践（HTML/CSS、WordPress）

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

デザイン

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

Pinterestでデザインをみる

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

コーディング

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

使用したWordPressプラグイン

• MW WP Form（コンタクトフォーム）
• Instagram Feed（現 Smash Balloon Social Photo Feed）
• WP Migrate DB（環境移行）

振り返り

Review

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

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