デザイン解説
テクノロジー領域で活躍中の起業家・経営者のインタビュー記事を配信するメディア。デザインや動きのクオリティが非常に高く、数あるデザインをまとめてきた中でも、トップクラスにクオリティが高い。
一覧ページ
連載記事、通常の記事、イベント記事などの一覧でデザインのテンプレートを分けており、アイキャッチ画像のクオリティが高いためか、ビジネス感のあるオシャレなデザインに仕上がっている。
通常記事の一覧のデザイン
連載記事の一覧のデザイン
イベント記事の一覧のデザイン
詳細ページ
詳細ページでは、背景画像の設定や目次の動きなどを非常に凝っており、通常の記事と連載記事、イベント記事で動きが微妙に変わっており、最適化した作りになっている。
通常の記事と連載記事のデザインと動作
アイキャッチ部分は左側に日付、作成日、タイトル、投稿者が表示され、右側に画像が表示される。左側の背景画像は右側の画像をぼかした画像を使っており、CSSで表現している。
本文にはそれぞれ目次が割り振られ、その目次(h2)直下に画像が表示されているが、その目次に移動した際に、その画像が背景画像として使われる仕様になっている。
制作会社としては、こういったデザインはブラウザ間で挙動が異なったり、スマホ対応が面倒だったり、バグを誘発したりしがちなので、積極的に提案する所は少ないと思うが、あまり見たこともない構成なので、インパクトがデカく、印象に残るデザインになっている。
イベント記事のデザインと動作
イベント記事では右側に開催日情報と参加受付のリンクが固定配置され、左側のメインエリアでは目次がそれぞれ固定される仕組みになっている。
総括
全体的にデザイン・動作のどちらもクオリティが高く、先進的なメディアに仕上がっている。
あまり例を見ない挙動を取るため、閲覧者によっては使いづらいと思う場合もありそうだが、テクノロジー領域の記事を閲覧するユーザ層を考えれば、そこまで問題ではないような気もします。
ただ私自身、デザイン・動きは100点満点に近いですが、少し使いづらいように感じます…。
掲載会社の情報
会社名 | FastGrow |
---|---|
URL | https://www.fastgrow.jp/ |
住所 | 東京都港区南青山2-11-17 |
このようなホームページを作成したい方へ
「ホームページ制作見積もりシミュレーター」を使うと、どのくらいの費用・料金でホームページが作成できるのかがわかります。個人情報の入力をせず、無料ですぐに利用できますので、お気軽にご活用ください。
ホワイト・白色のデザイン事例
- 余白の使い方が美しい先進的なデザインのコーポレートサイト
余白を活かし、文字の形に写真を切り取った処理が印象的なトップページ。 ファーストビューにはナビゲーションが入らないように調整されており、キャッチコピーを強く印象付ける。スクロールしていくとグローバルナビゲーションが現れ、サイト内の各コ...
- 型にはまらないユニークなデザインのコーポレートサイト
サイトを開いてまず目に入るのは、自社商品が提供する価値を伝える動画。動画の上にキャッチコピーが乗り、切り替わり流れる動画に合わせてコピーライティングも変更するという工夫がされている。 トップページを訪れたユーザーは、次々と展開されるメ...
- 縦書きの文字を活用したオシャレな税理士のホームページデザイン例
オリジナルの写真が多く、キャッチコピーに視線を誘導するようレイアウトが工夫されているサイト。デバイスフォントでなく画像内に直接文字を書くことで、雑誌のように自由なレイアウトを実装している。 縦書きの文字や、縦長の写真が比較的多いのも特...
- 1カラムで構成されたオシャレなWebメディア「PR Table」
PR Tableは企業や団体がPR・HR・IRなどの目的で記事を投稿できるサービス。単なる宣伝をするような内容ではなく、主に企業のブランディングとして活用されており、記事を読んでいてもユニークで面白いメディア。 このメディアは下記の記...
- 3カラム構成の動作が美しいWebメディア「BTCN」
ビットコイン、ブロックチェーン、仮想通貨などの情報を取り扱うニュースメディア。 3カラムで構成されており、右側はグローバルメニュー、中央は仮想通貨のマーケットのリアルタイム情報、メルマガ登録、広告、人気記事、左側はピックアップ記事と各...