ウェブページやスマフォアプリの制作時に参考にしたいUIエレメントをコレクションしているサイトのまとめユーザーが目的を達成するために手助けをする、機能的で、直感的で、美しいインターフェイスを備えることは非常に重要です。最近のウェブサイトやスマフォアプリなどでは、アニメーションを伴ったインターフェイスも増えてきました。 アニメーションを伴った楽しいUI、ディテールにこだわったUIなどをコレクションしているサイトを紹介します。
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
スマホ最適化のベストプラクティス10か条 byグーグルGOMO [編集長ブログ―安田英久] | Web担当者Forum
今日は、スマホ最適化のベストプラクティスの情報をお届けします。そして、その元となったグーグルが開設した「GOMO」というスマホ最適化診断サイトの情報も。 グーグルによると、スマートフォン最適化のベストプラクティス10か条は、次のようなものだということです。 これは、グーグルが開設した「GOMO」というスマホ最適化診断サイトからダウンロードできる診断レポートの内容からの情報です（GOMOについては後述）。 スピードを重視 多くのスマートフォン ユーザーは時間に追われており、1 日のちょっとした時間を活用してオンライン上のタスクをこなします。こうした多忙なユーザーを念頭に置きながら、サイトの読み込み時間を短縮し、テキストを読みやすくしましょう。 シンプルな操作 操作がわかりにくいサイトを喜ぶユーザーはいません。操作をわかりやすくし、ユーザーが探している情報を簡単に見つけられるようにしましょう。
![スマホ最適化のベストプラクティス10か条 byグーグルGOMO [編集長ブログ―安田英久] | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/97ba4e65596bd15e278c852cd94dc4f41bc82537/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fnakanohito%2Fnakanohito_icon120.gif%3Fitok%3Dv_x3hsxy)
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
2012年注目のモバイル向けJavaScriptフレームワーク・ライブラリあれこれ | gihyo.jp
昨年は、スマートフォンが急速に普及した年でした。それに伴って、モバイルサイトの重要性が増し、多くのモバイル向けJavaScriptフレームワークやライブラリが産まれました。本稿では、それらのモバイル向けのJavaScriptフレームやライブラリの中から、ピックアップして紹介していきたいと思います。 豊富な機能やリッチなインターフェースが多く用意されているフレームワーク まずは、モバイルサイトの構築を一から行えるフレームワークを紹介します。jQuery MobileやSencha Touchといった著名なフレームワークを始めとして、jQTouchやiUIなど比較的軽量なフレームワークまで簡単に解説します。 jQuery Mobile jQuery Mobileは、有名なJavaScriptライブラリであるjQueryをベースとしたモバイル向けのフレームワークです。ネイティブアプリのようなUI
実例で学ぶjQuery MobileのCSSカスタマイズ (1/3)
jQuery Mobileを利用するとスマートフォンサイトを手軽に制作できますが、基本テンプレートをベースに制作すると「いかにもjQuery Mobileらしい」デザインになってしまい、他のサイトと似通ってしまいます。 そこで今回はjQuery Mobileのテンプレートをフルカスタマイズし、オリジナルデザインのスマートフォンサイトを作成する方法を解説します。サンプルとして、次のようなカタログサイトを制作します。 トップページには新着商品のサムネイル画像が3つ並び、その下にはアコーディオンパネルでニュースを掲載しています。新着商品のサムネイル画像を選択すると詳細ページに遷移し、詳細ページで画像をタップすると画像を拡大して表示します。 HTMLの作成 デザインカンプを元にHTMLを作成します。head要素内は次のように記述します。 ■サンプル1[HTML] <!DOCTYPE html> <
サンプルで学ぶjQuery Mobileまとめ（前編） (1/5)
jQuery Mobileにはこれまで紹介した以外にもさまざまな機能があります。サンプルの作成を通じて紹介した基本的な使い方をおさらいしつつ、そのほかの機能も併せてまとめておきましょう。 ページの作成 jQuery Mobileでは、1つのHTMLに複数のページのコンテンツをまとめて記述します。ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義します。 ページの作成 data-role="page" div要素などにdata-role属性「page」を指定すると、HTML内にページを作成できます。data-role="page"を指定した要素には他と重複しないページIDを付け、id属性に記述します。 ヘッダーの表示 data-role="header" ページ内にdata-role属性「header」を指定した要素を配置すると、ヘッダーが表示されます。
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ | ke-tai.org
もう知らないでは許されない！！「これからはじめる」という人のためのjQuery Mobile情報まとめ Tweet 2011/5/27 金曜日 matsui Posted in Android, iPhone, 記事紹介・リンク | 4 Comments » モバイルサイト作成のためのフレームワーク「jQuery Mobile」が、すごい人気ですね。 当初は数ある選択肢の中の一ツールとして程度の扱いでしたが、AdobeのDreamweaverが本格対応するなど、その勢いは留まるところを知らず、根幹的な技術になりそうな気配すらあります。 今回は過去に当サイトで掲載させていただいた情報も含め、jQuery Mobileを学ぶ上で知っていた方が良さそうなリンクをまとめてみました。 本家サイト。英語が苦手な私は、主にダウンロード用途ぐらい。 → jQuery Mobile 本家サイト（英語） [j
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコード - かちびと.net
jQuery Mobile 1.1.0 日本語リファレンス
Build and implement a single sign-on solution
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門
smph.info