ブログ

サイトをリニューアルしたり
するときに、参考にするサイト

サイトをリニューアルしたりするときに、参考にするサイトはどんなのだというのを隠すなとかいろいろと、どこかのUI会社の中の人に言われたので、たまにはどんなサイトを参考にしているかを紹介します。

ちょっとサイトに組み込んでみたもの

もちろん案件の費用はもらうけど、開発期間が短くていろいろ問題なので時間をみて空き時間に作ったわけです。こんな機能を。

  • パララックス(デスクトップのみ)
  • IE10+対応のタッチデバイス判別(誰かのコードをカスタマイズ)
  • ページローディング
  • Webフォント対応のフェードインアニメーション
    (Webフォントが適用されたときにフェードイン表示)
  • さようなら、jQuery。jQueryを使わないでいろいろ実験してみました。最近は面白いプラグインも出てきていますね。

日本のサイトだとなかなかこれらのものをおしゃれに軽く作っているところがありません。 よって、どうしても海外のサイトを参考にすることが多くなります。

Mixd

Mixd
Mixd

何度も参考にさせていただいているサイト。
パフォーマンスとサイトの見せ方のバランスがすばらしい。

Degordian

Degordian
Degordian

ちょっとタッチデバイスだと残念なところがあるけど、非常に見せ方の上手なサイトです。

150 Pixels

150 Pixels
150 Pixels

シネマグラフとhoverの見せ方など参考になりますね。

【追記】2017/03/19 現在は公開されていないのでリンクを削除しました。

LiveAreaLabs

LiveAreaLabs
LiveAreaLabs

モバイルでもパララックスを軽く見せているサイトです。

Nvoi

Nvoi
Nvoi

見た目以上にURLの見せ方がすばらしいですね。これならGoogle先生にも優しいです。

ここも、hoverの見せ方にも工夫がありますね。
また、メニュー表示のギミックも参考になります。

Jet Edge

Jet Edge
Jet Edge

プライベートジェットのサイトらしいです。

タッチデバイスでのナビゲーションは多少の問題はありますが、トップページのパララックスの演出はいい感じです。

まとめ

いかがだったでしょうか?
日頃から様々なサイトを見ていくことで、インスピレーションを得られていくと思います。半年に一回くらいはこんなサイトのまとめをしてみたいですね(毎月だとレベルの高いサイトをみる時間が大変だったりして)。