WEBサイト勉強 No.4

html、css、jsを書く上で構成を考えた人の考えやデザインした人の考えを汲み取れるようサイトの勉強を始めました。

以下、全て個人の意見であり、所属する会社の意見を代表するものではありません。

今日参考にしたサイトはランニングホームラン株式会社のウェブサイト(PCのみ)です。

ウェブサイト全体図

KV
INTRODUCTION
MERIT
SOLUTION
WORKS
WORK FLOW
FAQ
PROFILE
CONTACT



各コンテンツ概要

KV
イラスト→タイトル→サブタイトルの順でアニメーション
イージングでだんだんゆっくりとなっていくのが気持ちよく見れる

INTRODUCTION
「WHY」「WHAT」「HOW」で簡潔に自社についてまとめている

MERIT
flexboxでリスト化し、ポイントごとに並べている
タイトルとサブタイトルのアンダーラインのアニメーションも見やすい

WORK FLOW
「PHASE」で使用している円のSVGアニメーションが合っていて良いと思った。フェーズ分けをするページ制作をする場合には参考にしたい

全体
アニメーションが非常に気持ちよく見れるページだった
会社名が野球に関係することからイラストも野球選手をモチーフに表現していてユーモアがあった。
また、ページ右側にページネーションがあるため全体のコンテンツ数が一眼でわかる、クリックで移動ができ使用感がとてもよかった

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
社会人2年目。Webプログラマー目指して勉強中。