モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
2017年要注目！モバイルに必要なスクリーン画面のサンプル実例15個まとめ
スマートフォンの登場によって、私たちの生活に欠かせないアイテムのひとつとなっています。さまざまなアプリケーションによって、よりライフスタイルを楽に、そして快適にしてくれます。 デザイナーの仕事は、ユーザーのニーズを満たすUIデザインを作成し、快適で満足のいくユーザー体験を作り出すことです。効果的なUIデザインを構築するためには、モバイルアプリケーションの特徴をきちんと理解し、構成している要素や機能を学ぶ必要があります。 現在、モバイル業界は急速に発展しており、アプリ業界もしかり。この記事では、もっとも一般的なモバイルスクリーンのサンプル例15個を、必要なデザイン要素と一緒にまとめて紹介します。 2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ モバイルの使いやすさを劇的向上！参考にしたい7つのポイントまとめ ニュース系アプリから見る、参考にしたいUIデザインアイデア1
Mockerie.io - Mockup your website or app
Royalty Free Use our images mocked up with your website for websites, designs or anything you want! We also promote websites and apps that improve the efficiency of bitcoin trading. Crypto superstar apps are highly popular in the market helping several traders to gain profits in their bitcoin trading. Hosted Mockups Choose a mockup, upload an image or animated GIF, generate an embed code and copy
apple-touch-icon.png に新しいサイズが加わっていた
このブログのアクセスログなのだけど、何かしらのエラーを吐いた場合は logwatch からのメールで報告してもらうようにしている [01] 。そのメールに記述されていたのが apple-touch-icon で始まる png ファイルへのアクセス。 404 Not Found /apple-touch-icon-precomposed.png: 8 Time(s) /apple-touch-icon.png: 8 Time(s) nginx のログをメールするようにしたのは先月のことだったので、まったくのノーチェック。「なんじゃこりゃ」ということで調べてみたら、スマートフォン系デバイスにおけるホーム用ショートカットにて使用される画像だったらしい。正式名称は WebClip Bookmark Icon とのこと。こんなのまったく知らなかった。 iPhone、iPad では、ホーム画面にウェブ
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
あなたのレスポンシブコンテンツをよりかっこよく魅せるPSD素材 -Pixeden
プレゼンやショーケースなどで、レスポンシブコンテンツをかっこよく魅せる高品質なPSD素材を紹介します。
無料で商用利用も可能な短いサウンド48種類がダウンロードできる「Octave」
By Fey Ilyas 「シュッ」や「ポーン」や「ザーッ」といった短いサウンド48種類が無料でダウンロードできるのが「Octave」です。スマートフォンのタップやスライドに合わせた電子音も用意されており、Objective-Cを使って簡単にボタンに音をつけることが可能。AIFファイル48個すべてについて商用利用もできます。 Octave: A free library of UI sounds. http://raisedbeaches.com/octave/ ダウンロードはトップページの中央にあるボタンを押すと始まります。 また、サウンド集にはライブラリが用意されているため、以下のコードを付け加えることによってMacのOS Xやその他iOS搭載機器のボタンにサウンドを追加することも可能。 ボタンや壁紙などのUIキットはよく見かけますが、サウンドは比較的少ないため、48種類という豊富な音
ツールチップタイプのメニューバーを実装するjQueryプラグイン・Toolbar.Js
ツールチップでメニューバーを実装する為のスクリプト・Toolbar.Jsのご紹介です。Webアプリ等でたまに見かけるやつ。省スペース化できていいですね。スマフォとの相性もいいかもしれません。 ツールチップでメニューを実装しよう、というもの。省スペース化できていいですね。 jQuery依存です。Webアプリなんかにどうでしょうか、との事。アイコンはtwitter bootstrapで使われているものを使用してるそうです。 こういうやつ。 デモではアイコンのみになっていますが、慣れてない方にとってはこのままだと分かりにくいのでもう一工夫必要かもですね。作ろうと思えば作れますけどアイデアが参考になったのでメモしました。ライブラリは以下に詳細があります。時間無いので詳細は割愛。 Toolbar.Js
スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」
スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロード 公式サイトにある「DOWNLOAD SOURCE」をクリック。 ３．使い方 jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src
無料で簡単にスマートフォンをWebカメラとして有効活用できる「SmartCam」
Webカメラを購入することなく、すでにあるスマートフォンをBluetoothまたはWi-FiでPCと接続し、Webカメラとして利用できる無料のAndroidアプリとフリーソフトが「SmartCam」です。Skypeなどで使うことができ、PC側のソフトはWindowsとLinuxに対応しています。 PC側の設定、スマートフォン側の設定、操作方法については以下から。 SmartCam | Free Security & Utilities software downloads at SourceForge.net http://sourceforge.net/projects/smartcam/ SmartCam webcam - Google Play の Android アプリ https://play.google.com/store/apps/details?id=com.smartc
スマホサイトの機能比較表はどうデザインするか？ | 秋葉秀樹個人ブログ
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。 しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。 指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応／非対応」の場所などは、何が「対応／非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホのUIに快適で、実用的な数多くのアニメーションを実装できるswiftのライブラリ -Hero
新着記事
Appealing | Mobile UI Animations
事例紹介 | 株式会社インフォバーン
Media Query Snippets - list of media queries
IDEA * IDEA
Behance
ショートコードでiOSやAndroid等にだけコンテンツを表示させられるようにするWordPressプラグイン・Mobile Content
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ