2016年9月に気になった・参考にしたいWebサイト7選

毎月、筆者が「ここ参考にしたい!」と思ったサイトを掲載していきます。

東京/札幌のアプリ開発、システム開発|株式会社INDETAIL

indetail01

東京/札幌のアプリ開発、システム開発|株式会社INDETAIL

ページ内ナビゲーションを左右に置く手法は今年になってからよく見かけますが、五角形になっているのは初めてみました。
が、リンクではなく現在位置を指し示しているのみのようです。説明部分の五角形の位置と合わさっているので、そういうことだと思います。

indetail02

また、キービジュアルのSVGで画像をクリップする方法はかっこいいと思いました。

そしてソースを見るとapple-touch-iconがズラ~っと並べられているという徹底っぷりです。

Takumi Hasegawa

takumihasegawa

Takumi Hasegawa

水曜日のカンパネラの公式サイトを作った方のサイト。

後ろのWebGLアニメーションとpjaxでシームレスに各ページに行けます。各ページに行くと、背景のポリゴンがページ名に変化するというわかりやすい設計になっています。

takumihasegawa02

Bookmarkというページを作って参考になるサイトを載せているのが珍しいと思いました。

|||||||||||||||()|||||||||||||||

game01

|||||||||||||||()|||||||||||||||

GoogleFormでつくったテキストベースRPG。この発想はなかった。

英語読むのに若干抵抗がある(というよりちゃんと読めてない)ので、途中までしかしていません…。
Google Appsでなんでも作れる時代ですね。

Mossio | Digital Creators for Branding and Interfaces

mossio

Mossio | Digital Creators for Branding and Interfaces

ブランディング・UI/UX・アプリの開発まで行っているチーム「Mossio」のサイト。

ローディング部分でサイト内の画像の枚数を表示し、「○○/43」と表示している部分に、ユーザビリティへの考慮を感じました。
そしてチャットUIも搭載。アプリの制作をしている会社などで今年になって見られるようになりました。

PHOTO METI PROJECT

meti01

PHOTO METI PROJECT

CC0ライセンスで利用できる日本の情景写真を提供しているサイト。
経済産業省が関わっているようです。

こちらもSVGで画像をクリッピングしていますが、日本列島に形どられている写真がスライドしたり変化しており、とても鮮やかかつ上品な演出になっています。

利用できる写真ですが、上部ナビゲーションのLISTから写真一覧画面へ遷移することができます。
写真詳細画面で右側にカーソル持っていくと観光する客層などの情報が表示されているサイドバーがにゅっと出てきます。観光情報を調べる際にも重宝しそうです。
写真家などは、このサイトを参考に旅行に出かけるのも良いのではないでしょうか。

meti02

そして英語にも対応しているので、海外の方に日本の美しさを知ってもらうためにおすすめできるサイトです。

実績No.1 ホンモノの歯科ホームページ作成【BE PROUD】

beproud

実績No.1 ホンモノの歯科ホームページ作成【BE PROUD】

歯科医院専門のホームページ制作会社のサイトです。

水墨画風のグラフィック+剣で切ったかのようなセクション見出しの演出、ローディング中の一文字がばんばん出て来るアニメーションなど、日本の侍をベースにしたサイト演出が粋です。

最初見た時なんのサイトか全くわからなかったのは内緒です(TwitterCardでOGP見て初めて知った)

Converse “Diamonds”

diamonds

Converse “Diamonds”

韓国人ラッパーKeith Ape x ConverseとのインタラクティブPVの特設サイト。
TOPのドロっとした質感を印象づける歪み方が印象的です。
実際にPVが流れている時にクリックしたときの画像です。中央にテレビが写っています。

diamonds02

  • BLOG
  • >
  • web
  • >
  • 2016年9月に気になった・参考にしたいWebサイト7選