018 立命館大学 うちきゅう探査研究センター — website 100選 — #18

立命館大学 うちきゅう探査研究センター

印象点:

  • モノトーンで表現された宇宙感
    全体が白黒のモノトーンで統一され、宇宙的な雰囲気を演出している。
  • 統一感のあるデジタルフォント
    デジタル数字フォントが使用されており、昔の計算機のような、数値的に統制された感覚を与えている。
  • テクノロジーを制御する印象
    ヘッダー右下に小さく表示された動画サムネイルが、テクノロジーを冷静にコントロールしているような控えめな印象を与えている。

 

home に戻る

017 UUUM — website 100選 — #17

UUUM

印象点:

  • メリハリのあるUIデザイン
    メニューの文字やSNSリンク、スクロール誘導といった補助的なUIのサイズを小さくしており、コンテンツとの間にメリハリを生み出している。
  • 目を引くロゴデザイン
    ほぼ白地のヘッダーに配置されたリード文の「Good」の「oo」部分に目がデザインされており、見る人の注意を惹きつける効果的なアイキャッチ。
  • 動画のユニークな見せ方
    大きめの角丸の中に動画を切り抜いて見せるデザインになっており、動画が持つ雰囲気を柔らかくし、サイト全体のトーンと調和させている。
  • 背景色の工夫
    白地のヘッダーが単調にならないよう、続く背景色に薄いグレートーンが使われており、様々なエンターテイメント要素がまとまりを見せている。
  • ロゴを模したアニメーション
    ロゴを模したバブルガム人形のようなアニメーションになっており、遊び心とブランドの個性を表現している。
  • 80年代風のイラスト
    サービス紹介パネルに、80年代風のイラストが使用されている。程よくポップな雰囲気が、コンテンツを親しみやすくしている。

 

home に戻る

016 Clutch Store — website 100選 — #16

Clutch Store

印象点:

  • ユニークなロゴアニメーション
    傾いた©︎が印象的なロゴが、スクロールで上部に縮小しながらフェードアウトし、同時に写真がクローズアップされ、視覚的な楽しさを生み出している。
  • スタイリッシュな写真の質感
    明度と彩度を控えめに、コントラストを強めた写真が使用されており、自然光や白熱灯の落ち着いた明かりを感じさせる、スタイリッシュな雰囲気を演出している。
  • 文字と背景の融合
    「Apparel」の文字がmix-blend-modeやclip-pathのような手法で色反転していて、背景と文字のコントラストを生む効果的なデザイン。
  • スクロールと連動する写真切り替え
    左側の飲み物写真エリアが、スクロールに応じて写真が切り替わり、サイトを探索するような感覚でコンテンツを楽しめる。
  • カルーセルによる横方向の広がり
    複数のカルーセルが横方向に配置されており、視覚的な広がりを感じさせる。

 

home に戻る

015 Morght — website 100選 — #15

Morght

印象点:

  • シンプルながらインパクトのあるロゴ
    ロゴがシンプルでありながら、インパクトがあり印象に残る。
  • 生き生きとした写真表現
    写真に人物の縁取りや、矢印・吹き出しのような手書きのアニメーションを加えており、生き生きとした印象を与える。
  • 手書き文字による温かみ
    随所に配置された手書き文字から、等身大感、息吹が感じられる。
  • 背景のグラデーションによる実在感
    背景の上部に薄く明るいグラデーションが施されている。これは照明のようで、空間に実在感のある明かりをもたらしている。
  • ロゴと文字のメリハリ
    「Morght」のロゴ文字が大きく配置され、他の文字とのジャンプ率にメリハリがあり、元気の良い印象と同時に、視覚的なアクセントを生み出している。
  • ユニークなナビゲーション
    縦に小さく並ぶナビゲーション項目や、メニューボタンを押した時に円形に広がるアニメーションからダイナミズムを感じられる。

 

home に戻る

014 VUILD — website 100選 — #14

VUILD

印象点:

  • 幾何学的な3Dアニメーション
    トップページに、ゆらめく幾何学的な3Dメッシュの線形アニメーションが印象的。スクロールすると違う形を読み込む演出も、ユニークな体験を生み出している。
  • 思索的な背景色
    無漂白の紙色のような背景から、どこか哲学的な、文字だけの文庫本から感じる思索的な雰囲気が感じられる。
  • 確かな技術力とシンプルな装飾
    「つくっているもの」ページの実例一つひとつから、確かな技術力が感じられる。それらの技術力を活かすためのシンプルな装飾も効果的。

 

home に戻る

013 colours 建築空間創作集団 — website 100選 — #13

colours 建築空間創作集団

印象点:

  • 「ドキドキ」を表現するアニメーション
    ヘッダーの「ドキドキしよう」という文字が、実際にドキドキしているようなアニメーションで表示されており、サイトのテーマを視覚的に伝えている。
  • 大胆な文字サイズによる強いメッセージ
    文字サイズを大胆に大きくすることで、ストレートで本音のような強いメッセージを表現している。
  • ABOUTページのユニークなレイアウト
    ABOUTページでは、左側に写真を固定表示し、右側にテキストを配置するレイアウトになっており、写真と文章を同時に見せ、効率的な情報提供を可能にしている。
  • 豊富な施行例とフィルタリング機能
    WORKSのページには豊富な施行例が掲載されており、フィルタリング機能を通じてユーザーが求める情報を簡単に見つけられるようになっている。
  • ユニークなメンバー紹介
    MEMBERのページでは、それぞれのメンバーにユニークなキャッチフレーズが添えられており、個々の個性を際立たせ、親近感を与えている。

 

home に戻る

012 拓匠開発採用サイト — website 100選 — #12

拓匠開発採用サイト

印象点:

  • 全体に漂う遊び心
    サイト全体に遊び心のある雰囲気が感じられ、ユーザーは楽しみながらコンテンツを閲覧できる。
  • ユニークなイラストの切り替え
    エントリーCTAの上に、スクロールによって切り替わるゆるいイラストが表示されており、視覚的な面白さを生み出し、ユーザーの関心を惹きつける。
  • スクラップブックのような整理方法
    スクラップブックのように、写真素材などにフラグを立てるような切り貼り感が特徴。情報が整理されているだけでなく、ユニークな世界観を表現している。
  • ドラマのある開発事例ページ
    リンク先の開発事例のページが、単なる実績紹介に留まらず、読み物としても楽しめるように作られており、企業の専門性と魅力を効果的に伝えている。

 

home に戻る

011 WoodSpirits — website 100選 — #11

WoodSpirits

印象点:

  • 動画による自然の中の感覚
    ヘッダーの上部と、フッターの下部に少しスペースを空け、そこに動画を表示している。これにより、「自然の中に」存在している感覚を効果的に高めている。
  • クラフト感のある優しいトーン
    クラフト紙のような質感に加工を施した、落ち着いた優しいツートンカラーと手書き風のイラスト。温かみのある雰囲気を生み出している。
  • さりげなく見やすいメニュー
    メニュー項目とセクションタイトルを、あえて()で囲っている。さりげないデザインでありながら、それぞれの項目を視覚的に見やすくしている。
  • イラストと表による分かりやすい説明
    イラストと表を併用し、木からお酒ができるまでのプロセスを非常にわかりやすく表現している。
  • 効果的な点線ボーダー
    それぞれの木の違いを示すイラストを囲う点線ボーダーなど、枠線が効果的に使われており、コンテンツのまとまりを視覚的に示している。
  • 自然を表現するアニメーション
    回る年輪や、レイヤー上側に配置された揺れる木のイラストが、自然の中にいるという感覚をさらに高めている。

 

home に戻る

010 OKINAWA WEDDING ONLINE — #10

OKINAWA WEDDING ONLINE

印象点:

  • 沖縄の空の青さを解説する明快な記事
    沖縄の空が青く見える理由について、非常にわかりやすく書かれている。専門的な内容を噛み砕いて説明する構成が優れている。
  • 記事を彩る美しい海の写真
    文章の間に挟まれている、透き通った沖縄の海の写真が爽やかさを添えている。記事の雰囲気を高める上で効果的に機能している。
  • 光と知覚の仕組みがわかる解説
    海や空が青く見えたり赤く見えたりする理由を、光の波長や地球と太陽の関係、人の知覚といった仕組みから理解できる。
  • シックなフッターと明瞭なサイト構成
    Weddingというテーマに合わせたシックなフッターに、主要なメニューが配置されていることで、サイト全体の構成を一目で把握できる。

 

home に戻る

009 DEMI DO — website 100選 — #9

絵本カフェ測量船

印象点:

  • 海中を潜るようなサイト構造
    サイトの構造が海面から海底に潜っていくように設計されており、測量船というテーマに沿っている。これにより、ユーザーは物語の世界に引き込まれるような体験を得られる。
  • 目に映る世界を表現したヘッダー
    ヘッダースライドの写真が目のような形にクリップされている。絵本の世界というコンセプトを視覚的に表現するユニークな工夫。
  • 絵本らしい色彩の変化
    青い背景色が、海底に進むにつれて徐々に暗くなる。しかし、おどろおどろしさはなく、絵本らしい優しい配色でまとめられている。
  • スクロールと連動するバケツ
    一見メニューボタンの装飾かと思われたバケツが、実はスクロール量を表している。海底に到達すると吹き出しが表示される仕掛けが、遊び心と物語性を加えている。
  • 優しく上昇する泡のアニメーション
    海底から泡が柔らかく上昇していくアニメーション。これにより、リアルな海中の動きを再現し、サイト全体に生命感を与えている。

 

home に戻る