階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」
国内でも商業施設の中でも重要な役割を担うフロアマップ。どうわかりやすく直感的に見せるかというのは商業施設においては一つの課題となっていますが、今日紹介するのは、階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」です。 こちらのフロアマップは各階層ごとに積み重なっているビューから始まり、各階層ごとに詳しく見ていけるようになっています。 詳しくは以下 また、マップからだけでは無く、インデックスから逆に位置を探したり、登録されている店舗名を検索したりと、実用的な機能も盛り込まれています。実際のデモは「View demo」からご覧いただけます。 実際にマップを作りこんでいくためにはカスタマイズや登録作業などの作りこみは必要ですが、従来の完全に俯瞰型では無い、動きのあるフロアマップを作りたいという方にはベースとしては非常に優秀なものだと思います。 Intera
様々なサービスのUIサウンドを集めた「UI Sounds」
エラー・許可・着信などなど、優れたユーザーインターフェイスは視覚だけではなくて、直感的にわかりやすい音があり、表示されるユーザーインターフェイスに組み合わせることで、ユーザーがどのようなことをしたかの理解を早めてくれます。今日紹介するのはそんなユーザーインターフェイスの音を、様々なサービス別に集めたWEBサイト「UI Sounds」です。 今までユーザーインターフェイスをまとめて紹介するサイトは多数ありましたが、こうして音に注目したサイトは珍しいと思います。 詳しくは以下 音を認知しない環境で作業することも多くなってきましたが、それでもサービスの中には必ず音があり、ユーザー補助には間違いなく効果を発揮していると思います。 改めてユーザーインターフェイスの音が、まとまっているものを聞いていくと、その効果がわかりますね。これからサービスを立ち上げたいという方は是非参考にご覧ください。 UI S
エラー表示をアートに表現したグリッチエフェクト「 Crashed Glitch Text Effects」
TOP > Design , WebDesign > エラー表示をアートに表現したグリッチエフェクト「 Crashed Glitch Text Effects」 Webサイト閲覧時やゲーム画面などでエラー表示を目にしたことがある人は多くいるかと思います。最近では様々な表現があるかと思いますが、今回紹介するのは、エラー表示をアートに表現したグリッチエフェクト「 Crashed Glitch Text Effects」です。 テキストにノイズや歪みなどを加えて表現されるエラー表示のエフェクトのセットです。 詳しくは以下 グリッチとは映像などの破損により生じる画像の乱れや、ゲームでバグが起こった時の画面の乱れなどのことを言います。グラフィックデザインにおいては、ビジュアルやテキストにノイズや歪みを加えることでレトロな雰囲気を表現したり、エラー表示などに活用されることが多いです。今回紹介し
2色の相性を簡単にチェックできるカラーツール「Pigment」
デザインで色を決めるという行為は非常に重要なもの。選択や組み合わせをミスしてしまうと、思ったようなデザインに仕上げることができません。今回はそんなカラー選定の際にぜひ役立てたい「Pigment」を紹介したいと思います。 2色の相性を簡単にチェックできるカラーツールです。 詳しくは以下 非常に豊富なカラーサンプルが準備されており、気になったカラーをクリックするとカラーを拡大して見ることができます。DIC、PANTONE、RGBのカラーナンバーも明記されており、そのまま色を再現したり指示するのに便利。また、2色がグラデーションになった際のサンプルや、流行のデュオトーンを取り入れた際のイメージをチェックできたりと、カラー選定＋αの要素が準備されているのも嬉しいポイントです。他、スウォッチ共有用.ase形式などのダウンロードも可能。 オンラインで手軽に色をチェックでき、さらにクリエイティブな想像を
学校や塾などの教育関係のデザインに 化学や科学をテーマにしたサイエンスアイコンセット「Radical Science Icons」
TOP > vector > 学校や塾などの教育関係のデザインに 化学や科学をテーマにしたサイエンスアイコンセット「Radical Science Icons」 情報をわかりやすく整理して、視覚的に見せてくれるアイコンはデザインのキーアイテム。積極的にデザインに取り入れていきたいもの。今回ご紹介するのは、そんなアイコン好きの貴方におすすめな化学や科学をテーマにしたアイコンセット「104 Free, Radical Science Icons」です。 104 Free, Radical Science Icons ちょっぴりマニアックなテーマですが、塾や学校など教育関係のデザインなどで活躍してくれそうです。 詳しくは以下 アイコンセットには、フラスコや顕微鏡などオーソドックスなものから、化学式やアルコールランプなど少しマニアックなモチーフまで、全部で56種類ものデザインが揃っています
デベロッパーであれば知識として取り入れておきたいCSSで作るVR「CSSVR: Progressive VR experiences」
TOP > javascript > デベロッパーであれば知識として取り入れておきたいCSSで作るVR「CSSVR: Progressive VR experiences」 他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。 VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。 詳しくは以下 VRならではの立体感をきちんと再現し、ドラッグで中を見渡すことが可能。奥行きのある建物内で“open ドア”と書かれたボタンをクリックすると壁が開き、宇宙空間が広がります。クローズボタ
新機種iPhoneXのUIデザインのヒント集「UI Design Tips for iPhoneX」
間も無く発売されるiPhoneX。販売開始を楽しみにしている人は多いのではないでしょうか。そんな中、デザインに携わるデザイナーやデベロッパーはいち早く新機種に対応するため、ディスプレイサイズや構造を知っておく必要があります。今回は、新機種iPhoneXのUIデザインのヒント集「UI Design Tips for iPhoneX」の紹介です。 全面ディスプレイになったiPhoneXは今までとは異なる点がいくつかあります。疑問を解決するためのヒントが紹介されていますのでWebデザイナー必見です。 詳しくは以下 まず第１に重要となるのはディスプレイサイズ。ここでは正しいアートボードのサイズから、ラウンド部分を考慮したマージンの取り方まで細かな数値で示してくれていますので、迷うこともなさそうです。ディスプレイサイズが変わったとなると、もちろん配置する画像解像度や見える範囲も変わるので注意しなけれ
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」 WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。 使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。 詳しくは以下 使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことで
発売が噂されているiphone8のモックアップが早くも登場！「iPhone 8 Mockup PSD Freebie」
TOP > Design , Photoshop > 発売が噂されているiphone8のモックアップが早くも登場！「iPhone 8 Mockup PSD Freebie」 近いうちに発売が開始されるのではと噂されているiPhone8。毎回注目の新しい機能追加などがあることもあり、今から期待されています。今回はそんなiPhone8のモックアップ素材「iPhone 8 Mockup PSD Freebie」を、いち早くご紹介したいと思います。 今注目のデバイスのモックアップが、発売前に手に入るのは嬉しいところ。持って入れば基本アイテムとして活用できる素材となっています。 詳しくは以下 モックアップは黒を基調にした、ベーシックなもの。リアルなテイストでシンプルに仕上げられており、非常に使いやすい素材となっています。デフォルトカラーは黒ですが、作例のようにホワイトやビビットなイエローなど
複数のモバイルデバイスを飛び越えて連結できるjavascript「What if all your mobile devices formed a single screen?」
複数のモバイルデバイスを飛び越えて連結できるjavascript「What if all your mobile devices formed a single screen?」 スマートフォンやタブレット端末の普及とともに、様々な機能の実装も可能になってきました。そんな中今回紹介するのは、複数のモバイルデバイスを飛び越えて連結できるjavascript「What if all your mobile devices formed a single screen?」です。 今までにない新しいモバイル体験でユーザーを楽しませてくれそうです。デモムービーが公開されておりますのでご覧ください。 動画は以下より スマートフォンやタブレット端末を複数台連結させて処理を行える「Swip.js」は、各デバイス同士をスワイプすることで簡単にページを切り替え、連結させることができます。 ボールを転がす時に勢
最新のグラデーションパターンをコピペできるwebサービス「WebGradients」
TOP > Design , WebDesign , WebService > 最新のグラデーションパターンをコピペできるwebサービス「WebGradients」 web用のカラーコードがコピペできるサービス。その便利さから活用している人も多いはず。そんな中今回ご紹介するのは、カラーサンプルとして使える、グラデーションパターンを180種類も集めたwebサービス「WebGradients」です。 背景カラーの選定や主流のUIデザインのカラーサンプルとしても使える、ソースコードをそのままコピペ可能な、とても便利なwebサービスです。 詳しくは以下 カラーコードやCSSをそのままコピーすることができ、美しいグラデーションを意のままに作ることが出来ます。また海外のサイトと言うだけあって、日本のデザインではあまり見かけない、現在のトレンドをしっかりと押さえた優れた配色パターンを手軽に取り入
コーダーの為の実用的な色理論が学べる「Practical Color Theory for People Who Code」
TOP > WebDesign > コーダーの為の実用的な色理論が学べる「Practical Color Theory for People Who Code」 Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。 色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。 詳しくは以下 赤・橙・黄・緑・青・水色・赤紫の基礎的な7色から、配色の仕組みと理論を学ぶことができます。選択した色が色相環においてどこに位置するのか、補色の関係はなど、各色に対する色の関係性を明確に見せてくれます。特徴的なのは各説明の後にその色を表す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
