• オリジナル
• トップページ

参考URL:

https://cd-officek.com/works/fitness/fitness.html

更新内容　随時更新予定！

2021/04/05　初稿を投稿しました。

2021/04/07　デザインを修正しました。

2021/04/08　アニメーションを追加しました。

2021/04/08　テキストを一部変更しました。

2021/04/08　フォントを変更しました。

2021/04/12　デザインを修正しました。

2021/04/13　レスポンシブ対応を行いました。

2021/04/13　スムーススクロールを実装しました。

デザインのこだわり

今回こだわったのは、元気な印象を与えられるようにすることと躍動感を覚えるようにすることの2点です。

元気な印象を与える要素として意識したのは配色とフォントです。

配色は比較的ビビットな色合いの暖色系でまとめました。

これには、元気なイメージを抱かせるためというのもありますが、

シェイプアップのための脂肪燃焼をイメージできるようにするためという目的もあります。

また、フォントはインパクトや力強さを感じられるようにゴシック体から選びました。

各セクションのタイトルやヘッダーメニューには、

アルファベットの太字・細字のバランスが良いRobotoを、

そのほかの地の分には馴染みやすいNoto Sans JPを用いています。

躍動感に関してはレイアウトを工夫することで表現しました。

ヘッダー、セクションタイトル、REASON内のレイアウトは積極的に斜めのレイアウトを取り入れることで、

四角形のときと比べて動きが出るようにしています。

なお、統一感が出るようにセクションタイトルやREASON内のテキストは

レイアウトと同様の角度に傾けているのもポイントです。

アニメーション

ホバーアニメーションやスクロール時のアニメーションは

比較的定番なものを使用しています。

しかしレイアウトがやや特殊なので、スマートフォン版のヘッダーメニュー収納方法は悩みました。

扱いやすさも考えて、今回はオーソドックスなハンバーガーメニューを採用し、

左右に出入りするアニメーションにしました。

ヘッダーメニューを固定してページのどこからでも呼び出せるようにする場合は、

画面トップの右下黄色い台形をボタンにするアイデアも良いかもしれません。

ちなみに、定番のアニメーションの中でも活発なイメージを与えられるようにするために、

他のサイトよりもアニメーションをやや早くするひと工夫もしています。