参考デザイン
design

デザインと動作のクオリティが非常に高い「FastGrow」

https://www.fastgrow.jp/
fastgrowのデザイン事例
Design Review

デザイン解説

テクノロジー領域で活躍中の起業家・経営者のインタビュー記事を配信するメディア。デザインや動きのクオリティが非常に高く、数あるデザインをまとめてきた中でも、トップクラスにクオリティが高い。

一覧ページ

連載記事、通常の記事、イベント記事などの一覧でデザインのテンプレートを分けており、アイキャッチ画像のクオリティが高いためか、ビジネス感のあるオシャレなデザインに仕上がっている。

通常記事の一覧のデザイン

fastgrow記事一覧ページのデザイン例

連載記事の一覧のデザイン

fastgrow連載記事一覧ページのデザイン例

イベント記事の一覧のデザイン

fastgrowイベント一覧ページのデザイン例

詳細ページ

詳細ページでは、背景画像の設定や目次の動きなどを非常に凝っており、通常の記事と連載記事、イベント記事で動きが微妙に変わっており、最適化した作りになっている。

通常の記事と連載記事のデザインと動作

fastgrowの記事のデザイン

アイキャッチ部分は左側に日付、作成日、タイトル、投稿者が表示され、右側に画像が表示される。左側の背景画像は右側の画像をぼかした画像を使っており、CSSで表現している。

本文にはそれぞれ目次が割り振られ、その目次(h2)直下に画像が表示されているが、その目次に移動した際に、その画像が背景画像として使われる仕様になっている。

制作会社としては、こういったデザインはブラウザ間で挙動が異なったり、スマホ対応が面倒だったり、バグを誘発したりしがちなので、積極的に提案する所は少ないと思うが、あまり見たこともない構成なので、インパクトがデカく、印象に残るデザインになっている。

イベント記事のデザインと動作

fastgrowのイベント記事のデザイン

イベント記事では右側に開催日情報と参加受付のリンクが固定配置され、左側のメインエリアでは目次がそれぞれ固定される仕組みになっている。

総括

全体的にデザイン・動作のどちらもクオリティが高く、先進的なメディアに仕上がっている。

あまり例を見ない挙動を取るため、閲覧者によっては使いづらいと思う場合もありそうだが、テクノロジー領域の記事を閲覧するユーザ層を考えれば、そこまで問題ではないような気もします。

ただ私自身、デザイン・動きは100点満点に近いですが、少し使いづらいように感じます…。

編集者の採点

こちらのホームページは弊社の制作実績ではありません

掲載会社の情報

会社名FastGrow
URLhttps://www.fastgrow.jp/
住所東京都港区南青山2-11-17
CONTACT

ホームページを作りたいけど何を相談したら良いか分からない方、まずは費用だけでも知りたい方、
お気軽にご相談ください。まずはあなたのお悩みや相談内容をお聞かせください。