028 Phare — website 100選 — #28

Phare

印象点:

  • 革製品が際立つシンプルなヘッダー
    ヘッダーは革製品の色と素材感を活かした、すっきりとしたシンプルな背景。革素材を裁断して敷いたような、ディープカラーで仄かなグラデーションが施され、世界観を表現している。画面左下には、場面の切り替わりを演出するスクロールボタンがあり、統一感を生み出している。
  • 高品質を伝えるプロモーションムービー
    高品質な製品であることを感じさせるプロモーションムービーが配置されている。
  • 計算された写真の構図
    写真の縦横比率が絶妙。写真内の背景線を延長した箇所からほぼ直角に流れるように配置されており、綿密に計算されたような印象を与える。
  • こだわりを感じさせるカルーセル
    右側に立ち切りで配置されたカルーセルは、通常の中央配置を避け、あえてずらすことでこだわりや品の良さを感じさせる。また、それぞれのパネル写真が上下に揺らいで配置されており、コントロールされた中にも自然な存在感を演出している。
  • ブランドアイデンティティの統一感
    写真の一枚一枚など、隅々までブランドアイデンティティが統一して表現されている。フッターには大きな写真と連絡先が記載され、シンプルながらも必要な情報を明確に伝えている。

 

home に戻る

027 GREEN SPOON — website 100選 — #27

GREEN SPOON

印象点:

  • 野菜や果物のような色バリエーション
    野菜や果物のような、トーンの揃ったマルチカラーが使われている。これにより、サイト全体が程よくカラフルで親しみやすい印象を与えている。
  • 味のあるシンプルなイラスト
    鉛筆線の掠れが若干ある、シンプルで味のあるイラストが特徴。特にメガネをかけていない人物の目が皆同じで、なんとも言えない表情がユニークな雰囲気を生み出している。
  • 凝った複数ページ構成
    複数のページがあり、どのページも凝ったデザイン。特にPromiseページは、そのこだわりが強く感じられる。

 

home に戻る

026 DAIEI — website 100選 — #26

DAIEI

印象点:

  • 期待感を高めるシンプルなローディング
    中央の図形がランダムに回転するローディングアニメーション。左上のコピーと画面下部のロード状況のみが表示されるシンプルな構成が、コンテンツへの期待感を高めている。
  • ユニークなメニューの配置と動き
    画面の隅八方にメニューを配置し、スクロールに合わせて回転しながら色を変えることでアクセントにしている。コンテンツの邪魔にならず、面白いデザイン。
  • 鮮やかなテーマカラー
    ストロングブルーとイエローという鮮やかなテーマカラーが、サイトに生き生きとした印象を与えている。
  • 統一された写真表現
    金属パーツを程よい距離感からトリミングした写真を主に使用している。クローズアップの具合に統一感があり、洗練された雰囲気を醸し出している。
  • インタラクティブなスライダー
    マウスカーソルを近づけるとゆっくりと動き出すスライダー。ユーザーの操作に反応するインタラクションが、サイトへの興味を引く。

 

home に戻る

025 sinden — website 100選 — #25

sinden

印象点:

  • 素材と文字の圧倒的なインパクト
    素材や文字がともすれば異様と思えるほど大きく表示され、見る人に迫りくるような強いインパクトを与えている。
  • 技術力と未来感のある3Dアニメーション
    3Dアニメーションが多用されており、高い技術力と未来的な雰囲気を醸し出している。
  • 広い作品紹介エリア
    スライドのように、各作品の紹介エリアが広く確保されている。これにより、一つ一つの作品をじっくりと見せている。

 

home に戻る

024 Rinnai ILO– website 100選 — #24

Rinnai ILO

印象点:

  • 落ち着いた赤のアクセント
    落ち着いた赤色がアクセントとして使われており、その割合が少ないため、映えている。
  • ゆったりとした余白
    余白が広くとられていることで、上品かつ落ち着いた雰囲気を醸し出している。
  • マットなカラーリングと素材感
    マットな準ベースカラー(木や石の素材感)が、サイト全体に落ち着きと上質さをもたらしている。
  • 商品カラーバリエーションのユニークな見せ方
    商品カラーバリエーションを、スクロールすると画面が横に進むセクションで紹介。写真の明暗が差し込む光を表現しており、じっくりと商品のイメージを浮かべられるようになっている。

 

home に戻る

023 STUDIO BYCOLOR — website 100選 — #23

STUDIO BYCOLOR

印象点:

  • 制作物が際立つシンプルなグリッド
    制作物が引き立つよう、できる限りシンプルで淡々とグリッドに並べられている。
  • 文字を絞った表現
    文字はタイトルのみを英語で表示し、作品の説明は最初は表示されておらず、作品そのものにフォーカスされている。
  • ユーザーに選択を委ねるスタイル
    文字と背景色の5パターンから、閲覧者が自由に選べるようになっている。ユーザーに一定の選択を委ねるスタイルを表現している。

 

home に戻る

022 MULBERDEN — website 100選 — #22

MULBERDEN

印象点:

  • モノクロ基調のデザインと写真のカラー
    雲のライトグレーを中心としたモノクロがベースとなっており、写真のカラーが際立つデザイン。
  • カーソルと連動するインタラクション
    シンプルなアイコンでカーソルの位置を分かりやすく示し、ホバーで鳥が避けたり、雲が動いたりするなどのインタラクションで、操作に一体感を生み出している。
  • さりげない現在地表示
    To-Topボタンの周囲に、スクロール量に合わせて描かれる円のアニメーションがあり、ユーザーは現在地をさりげなく把握できる。
  • キャラクターに合ったSNSアニメーション
    SNSボタンにカーソルを合わせるとボタンが開き、キャラクターに合ったアニメーションが再生される。

 

home に戻る

021 Analogue Foundation — website 100選 — #21

Analogue Foundation

印象点:

  • フォントと色彩の統一感
    フォントはRomieを基調とし、部分的にNauticaを使用している。基本的にモノクロで、時折アーシーカラー、特に赤系のアクセントが入ることで、洗練された印象を与えている。
  • 緻密なホバーアニメーション
    PC表示時に、メニュー項目やボタンなど、様々な要素にホバーアニメーションが適用されており、ユーザーのインタラクションを促し、サイトに動きを加えている。
  • スライダーのインタラクション
    スライダーの写真にカーソルを合わせるとドラッグ可能なUIが表示され、一枚ごとの表示時間を知らせるローディングアニメーションが工夫されている。これにより、操作性と視覚的な楽しさを両立している。
  • さりげないパララックス効果
    スクロールすると、写真がボックス内でわずかに上下にアニメーションするさりげないパララックス効果により、コンテンツに奥行きを与えている。
  • ユニークなフッター構成
    フッターが、コンタクトフォームかと思わせるようなセクションとして現れ、その下に配置されているメニューを含むさらに大きなフッターがパララックスとして現れる二重構造がユニークな印象を与える。

 

home に戻る

020 Studio Mora Mora — website 100選 — #20

Studio Mora Mora

印象点:

  • バイオリンの色彩と温かみのある光
    バイオリンの色や、工房の仄かな白熱灯のような光(低K)を、実際の写真とイラストでそれぞれ表現し、それらを組み合わせていて、温かく優しい雰囲気を演出している。
  • シンプルで丁寧な構成
    必要な情報に絞り込み、ユーザーが迷うことのないシンプルで丁寧な構成。セピア写真の背景を持つナビメニューも分かりやすく、ユーザーフレンドリーな設計になっている。
  • 工房の静かな空気を伝える演出
    工房で丁寧に製作している雰囲気が、揺り椅子の上に置かれたバイオリンのイラストから伝わってくる。音楽記号のようなメニューボタンの開閉アニメーションも、サイトのテーマに沿った静かな空気感を高めている。

 

home に戻る

019 IGNIS io — website 100選 — #19

IGNIS io

印象点:

  • 商品のイメージに沿った色彩
    商品に近い色合いで、淡く角のないカラーパレットを採用している。各産地素材そのものの色がアクセントとして機能し、統一感を生み出している。
  • 産地と連動したインタラクティブな地図
    スクロールに伴い、日本地図上の産地がクローズアップされ表示される。パララックス効果で地図への視点が近づいたり離れたりするほか、固定表示の雲と鳥がついてくることで、物語性のある体験を提供している。
  • ニューモーフィズムのUI
    アイコンなどのUIが、ニューモーフィズムで立体的に表現されている。これにより、シンプルでありながらも触覚的な印象を与えている。

 

home に戻る