とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

Webサイトの運用には欠かせない管理画面。

管理画面は更新頻度の高いWebサイトでは

毎日さわるものです。

毎日さわるものなので、気分良く使いたいですよね。

かっこいい管理画面を使いたい。

かっこいい管理画面の実装に参考にしたいのが、

映画のHUD、スクリーン・グラフィックです。

 

HUD、スクリーン・グラフィックとはこんなやつです。

vimeo.com

vimeo.com

 

このように映画にでてくる何かを操作するUIは、

ある種の管理画面といえますよね。

(管理画面というより

「ダッシュボード」という

ほうがよいかもしれません。)

どの映画もかっこいい未来的なデザインが

採用されています。

そしてこのような

映画のHUD、スクリーン・グラフィックを

まとめてられている良記事がこちら。

 

akiras.seesaa.net

 

かっこいい管理画面を実装するのに

参考になります。

こんな管理画面使っているWebサイトなんてねーよw

という感じしますが、自分がWeb担当者だったら

こんな管理画面なら毎日使いたい、って思います。

 

管理画面は毎日使うもの。

かっこいい画面だと、更新するモチベもあがりそう。

テンションあがりますよね。

 

実際にあんなごちゃごちゃした画面、

使いにくいし、映画用の装飾なので

意味不明なオブジェクトが並んでいるかんじ

しますが、おそらくかなり考えられて、

デザイン設計されています。

 

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

かっこいいデザイン、UIの管理画面の実装には映画のHUD、スクリーン・グラフィックを参考にしよう

https://www.behance.net/gallery/31672561/SPECTRE-UI

 

UIが斬新でハっとさせられますよね。

 

おそらくほとんどのプロジェクトや

受託案件、自社サービスの開発で

ここまで管理画面を作り込むことは

ないですが、そういうプロジェクトが

あったらおもしろいですよね。

 

映画のCGではなく機能性、操作性が

考慮された実用的な管理画面の

テンプレートがあります。

「かっこいい管理画面」などで

検索するとヒットします。

 

管理画面のUI設計する際に、

参考になれば。

 

photoshopvip.net

goworkship.com

www.nxworld.net

www.nxworld.net

sounansa.net

sounansa.net

 

また、写真素材サイトで

「インターフェイス」などで検索すると

未来的なUIの素材がヒットします。

色の使い方など参考になりますね。

https://jp.depositphotos.com/stock-photos/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9.html?filter=all